title: Why is ngOnChange not detecting @Input element change whil ngOnDetect was able to do so
body: <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>