4

Consider this plunker

Note: To observe the effect you have to rerun the app after the entering the link

import {Component, OnInit, Input, OnChanges, DoCheck} from 'angular2/core'

@Component({
  selector: 'sub',
  template: `
    <li  *ngFor="#elem of sub_list">
      <div>{{elem['name']}}</div>
    </li>
    `
})
export class Sub {

  @Input()
  sub_list: Object[];

  ngOnInit(){
    console.log('init');
    console.log(this.sub_list);
  } 

  ngOnChanges(){
    console.log('change');
    console.log(this.sub_list);
  }

  ngDoCheck() {
    console.log('check');
    console.log(this.sub_list);
  }

}
@Component({
  selector: 'my-app',
  template: `
    <div>
      <sub
        [sub_list]="my_list"
      >
      </sub>

    </div>

    `,
  directives: [Sub]
})
export class App {

  my_list: Object[] = [];

  ngOnInit() {
      var vm = this;

    setTimeout(function() {
          for(var i = 0; i < 100; i++) {

        vm.my_list.push({
          'index' : i,
          'name'  : i
        });
      }
    }, 100);

  }
}

If I try to print out this.sub_list in Sub's ngOnChange the browser outputs an empty list.

However we can see that ngDoCheck still correctly captures the change.

Is there a specific reason for this?

testing
  • 2,303
  • 4
  • 20
  • 32

3 Answers3

5

In your case ngOnChanges won't be called for updates on the array. As a matter of fact, Angular2 detects updates based on references. I mean if the reference of the whole array doesn't change (it's the case when adding an element in it using the push method), the ngOnChanges method won't be called.

In your case your array is null when ngOnChanges is called because it's called before the input element is set.

There are two ways to detect changes in this case:

  • update the whole array reference using methods like slice (after the push) or concat.

    this.myArray.push({...});
this.myArray.push = this.myArray.push.slice();

  • leverage the ngDoCheck method with the IterableDiffers class to manually check updates. The class allows you to register callbacks to be notified when an element is added (or remove) in an array.

See these links for more details:

Community
  • 1
  • 1
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • Hmm, that is confusing, if `Angular2` always check for reference equality then what is the point of `changeDetection: ChangeDetectionStrategy.OnPush` – testing Apr 17 '16 at 16:03
  • 2
    OnPush is a way is a way to tell angular2 not to check a particularly component sub tree. It's useful for example for immutable objects. In all cases "change" corresponds by default to a new instance. Leveraging ngDoCheck is the way to provide a custom way. – Thierry Templier Apr 17 '16 at 16:49
  • See this link for more details: http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html. – Thierry Templier Apr 17 '16 at 16:49
1

Ok, i've got it. ngOnChanges is fired when you initialize class field with empty array, then you update array within timeout callback and as Thierry correctly pointed changes are not detected.

Angular includes zone.js library that can track all async events in you app. Zone detects that timeout callback was executed somewhere and triggers ngDoCheck cycle and you get correct log.

see plunkr

developer033
  • 24,267
  • 8
  • 82
  • 108
kemsky
  • 14,727
  • 3
  • 32
  • 51
  • If you comment out `DoCheck` the [result](https://plnkr.co/edit/J8MgYxN8ELbclMJmvqCs?p=preview) is the same. I expected `OnChanges` to capture the model change – testing Apr 17 '16 at 01:40
1

ngOnChanges do not detect nested Object changes when we have same reference, the solution is to create new object reference each time :

const object = Object.assign({},oldObject)

Rhibi Hamdi
  • 56
  • 3