how to reset the certain component in angular

Pemmasani Mahesh babu answered on October 13, 2022 Popularity 8/10 Helpfulness 2/10

answer how to reset the certain component in angular

related how to reset the certain component in angular

how to reset the certain component in angular

Comment

@ViewChildren(CounterComponent)
childGames: QueryList<CounterComponent>

resetAll() {
  this.childGames.forEach(c => c.reset()); 
}

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: angular javascript reset

Link to this answer
Share Copy Link

Contributed on Oct 13 2022

Pemmasani Mahesh babu

0 Answers Avg Quality 2/10

Closely Related Answers

how to reset the certain component in angular

Comment

<div class="pageBox">
  <div class="top">
    <div class="title">Vaultcracker</div>

    <div>
      <div class="gameButtons">
        <!-- When starting a new game, the counters should be all green again. -->
        <div (click)="child1.initialise(); child2.initialise(); child3.initialise(); child4.initialise()">Start a new game</div>
        <div (click)="getClue()">Get a new clue</div>
      </div>
      <p *ngIf="result">{{result.message}}</p>

      <div class="counters">
        <app-counter #child1 name="A" (counterResultA', $event)"></app-counter>
        <app-counter #child2 name="B" (counterResult)="checkCounter('B', $event)"></app-counter>
        <app-counter #child3 name="C" (counterResult)="checkCounter('C', $event)"></app-counter>
        <app-counter #child4 name="D" (counterResult)="checkCounter('D', $event)"></app-counter>
      </div>

      <ul class="clues" *ngIf="clues">
        <li *ngFor="let clue of clues">
          <!-- Clues are dummies -->
          <p>{{ clue }}</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="bottom">
    <div class="safe">
      <div class="case"></div>
      <div class="code">
        <span>{{ code.A }}</span>
        <span>{{ code.B }}</span>
        <span>{{ code.C }}</span>
        <span>{{ code.D }}</span>
      </div>
      <div class="lock" (click)="openVault()">OPEN</div>
    </div>
  </div>
</div>

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.scss']
})
export class CounterComponent implements OnInit {

  @Input() name;
  @Output() counterResult = new EventEmitter<string>();
  counter = {};

  constructor() {
  }

  ngOnInit() {
    this.initialise();
  }

  initialise() {
    this.counter = {
    0: 'on',
    1: 'on',
    2: 'on',
    3: 'on',
    4: 'on',
    5: 'on',
    6: 'on'
  };
  }

  click(i) {
    this.counter[i] = this.counter[i] === 'on' ? 'off' : 'on';
    Object.values(this.counter);

    if (this.filterByValue()) {
      this.counterResult.emit(Object.values(this.counter).indexOf('on').toString());
    }
  }

  filterByValue() {
    return Object.values(this.counter).filter(data => data === 'on').length === 1;
  }

}

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript reset angular ja

Link to this answer
Share Copy Link

Contributed on Oct 13 2022

Pemmasani Mahesh babu

0 Answers Avg Quality 2/10

how to reset the certain component in angular

Contents

More Related Answers

how to reset the certain component in angular

Closely Related Answers

how to reset the certain component in angular

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.