Why is ngOnChange not detecting @Input element change whil ngOnDetect was able to do so
<p>Consider this <a href="https://plnkr.co/edit/uIPI1LXVLm8vtnijNcqh?p=preview" rel="nofollow">plunker</a> </p>

<p>Note: To observe the effect you have to rerun the app after the entering the link</p>

<pre><code>import {Component, OnInit, Input, OnChanges, DoCheck} from 'angular2/core'

@Component({
  selector: 'sub',
  template: `
    &lt;li  *ngFor="#elem of sub_list"&gt;
      &lt;div&gt;{{elem['name']}}&lt;/div&gt;
    &lt;/li&gt;
    `
})
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: `
    &lt;div&gt;
      &lt;sub
        [sub_list]="my_list"
      &gt;
      &lt;/sub&gt;

    &lt;/div&gt;

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

  my_list: Object[] = [];

  ngOnInit() {
      var vm = this;

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

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

  }
}
</code></pre>

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

<p>However we can see that <code>ngDoCheck</code> still correctly captures the change. </p>

<p>Is there a specific reason for this?</p>