CODEWITHSUNDEEP
angular
muturgan
muturgan

Reputation: 505

ngAfterContentChecked checkint changes continuously

I have the parent component:

...
<mdb-select
    [options]="optionsModel"
    (selected)="setSelectedOption($event, 'device_model')"
    placeholder="Choose model"
    >
</mdb-select>
...
<app-crashes-list
    [queryParams]="queryParams"
    >
</app-crashes-list>
...

And ts:

...
public queryParams: {device_model?: string, officer_id?: string} = {};
...
public setSelectedOption(selectedOption: OptionType, key: string): void {
    if (selectedOption.value === 'all models' || selectedOption.value === 'all QCs') {
      delete this.queryParams[key];
    } else {
      this.queryParams[key] = selectedOption.value;
    }

    this._restService.getCounterDeviceList(this.queryParams).subscribe(
      (data: {[key: string]: number}) => {
        this.tests.testOK = data.nondefective_phones;
        this.tests.testNOK = data.defective_phones;
        this.tests.testTOTAL = data.all_phones;
      },
      (error) => {
        console.error(error);
      }
    );
  }
...

Also I have the children crashes-list component:

...
@Input() private queryParams: {device_model?: string, officer_id?: string};
...
ngAfterContentChecked() {
  console.dir(this.queryParams);
}
...

My expectation: get a new message in console everytime when I manually select a new option in the select-component. My result: I see a new message in console 4-5 times in a second non stop. WIDW?

Upvotes: 1

Views: 1050

Answers (1)

Tomasz Kula
Tomasz Kula

Reputation: 16837

Move the console.dir inside the ngOnChanges lifecycle hook.

ngOnChanges(changes: SimpleChanges) {
  if (changes[queryParams]) {
    console.log(changes[queryParams].currentValue)
  }
}

Upvotes: 2

Related Questions