Why angular 2 ngOnChanges not responding to input array push

Question

My angular application stuck with a issue, i used input as array and pushed a value to the array when the click event arise. But the ngOnChanges not firing when the array push is done. Is there a way to fire ngOnChange

My Code is ts file is

@Component({
  selector: 'adv-search',
  templateUrl: './app/modules/result.html'
})

export class InputComponent {
  @Input() metas:any=[];

  ngOnChanges() {
    console.log(this.metas);
  }
}

My Selector Tag

<adv-search [metas] = "metaIds"></adv-search>

Click Event Code

insertIds(id:any) {
   metaIds.push(id);
}

You change array in main component Or in your child component? — Sandip - Frontend Developer
– Sandip - Frontend Developer, Commented Apr 5, 2017 at 6:40

Günter Zöchbauer · Accepted Answer · 2017-04-05 06:54:27Z

88

Angular change detection only checks object identity, not object content. Inserts or removals are therefore not detected.

What you can do is to copy the array after each update

insertIds(id:any) {
  this.metaIds.push(id);
  this.metaIds = this.metaIds.slice();
}

or use IterableDiffer to check for changes inside InputComponent in ngDoCheck like NgFor does.

edited Apr 5, 2017 at 6:54

answered Apr 5, 2017 at 6:43

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Pardeep Jain Over a year ago

whats the meaning of copy array here ?

Günter Zöchbauer Over a year ago

The array will be another one (another object instance) but with the original content. Angular will recognize this change.

Pardeep Jain Over a year ago

are you sure that by doing so angular will recognize the changes ?

Günter Zöchbauer Over a year ago

@PardeepJain thanks for the hint, didn't pay attention. Updated my answer.

Günter Zöchbauer Over a year ago

There is nothing like that in Angular, mostly for performance reasons. The best way is usually to have an Observable in the object and subscribe to it where you want to get notified. For arrays, there is angular.io/api/core/IterableDiffers. You can check the source of *ngFor about how to use it.

|

KyleGill · Accepted Answer · 2017-07-12 19:59:04Z

14

If you reassign your metaIds array, the ngOnChanges lifecycle event will be fired. You can deconstruct your array into a new array.

insertIds(id:any){
    this.metaIds = [...this.metaIds, id];
}

answered Jul 12, 2017 at 19:59

KyleGill

1911 silver badge3 bronze badges

Comments

JerradPatch · Accepted Answer · 2017-05-31 20:56:52Z

12

@GünterZöchbauer 's answer is completely correct. However, I would like to add a alternative/supplement to copying the whole array. Using the same example from the question.

<adv-search [metas] = "metaIds"></adv-search>

altered to

<adv-search [metas] = "{trackBy: metaIds.length, metaIds: metaIds}"></adv-search>

Where length here is the equivalent of the *ngFor trackBy function for the component. With this the ngOnChanges occurs with content length changes.

If used in combination with the *ngFor trackBy method there should be some performance benefits as the whole array's bound templates are not recalculated (no screen/content flickering).

answered May 31, 2017 at 20:56

JerradPatch

1214 bronze badges

Collectives™ on Stack Overflow

Why angular 2 ngOnChanges not responding to input array push

3 Answers 3

14 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

14 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related