Angular 2 DoCheck Example - OnChanges called

import {Component, Input, DoCheck, OnInit} from 'angular2/core';
import {DoCheckComponent} from './do-check.component';

@Component({
  selector: 'do-check-parent',
  template: `
  <div class="parent">
    <h2>DoCheck</h2>
    <i>Enter a new hero</i><br>
    <input [(ngModel)]="newHero"
           (keyup.enter)="addHero()"
           placeholder="Hero name">
    <button (click)="resetHeroes()">Reset</button>

    <p><i>Click a hero to remove</i></p>
    <div *ngFor="#h of heroes, #i=index"
         (click)="removeHero(i)">{{h}}</div>

    <do-check [heroes]="heroes"></do-check>
  </div>
  `,
  styles: ['.parent {background: beige}'],
  directives: [DoCheckComponent],
})
export class DoCheckParentComponent {
  heroes:string[];
  newHero:string;

  constructor() {
    this.resetHeroes();
  }

  addHero(){
    let name = this.newHero.trim();
    name && this.heroes.push(name);
  }

  removeHero(heroIx:number){
    this.heroes.splice(heroIx, 1);
  }

  resetHeroes() {
    this.heroes = DoCheckParentComponent.originalHeroes.slice();
    this.newHero = '';
  }

  static originalHeroes = ['Magneta', 'Mr. IQ', 'Voltana'];
}

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

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

 @Component({
  selector: 'do-check',
  template: `
  <h4>Heroes Array Changes:</h4>
  <div *ngFor="#log of logs">{{log}}</div>
  `
})
export class DoCheckComponent implements DoCheck, OnChanges, OnInit {
  @Input() heroes:string[];
  logs:string[] = [];
  oldHeroes:string[] = this.heroes;
  oldLength = 0;

  constructor() {
    let is = this.heroes ? 'is' : 'is not';
    this.logs.push(`heroes array ${is} known at construction`);
  }

  ngOnInit() {
    let is = this.heroes ? 'is' : 'is not';
    this.logs.push(`heroes array ${is} known in ngOnInit`);
  }

  // Should never be called ... but is!
  // https://github.com/angular/angular/issues/7307
  ngOnChanges() {
    this.logs.push('OnChanges called !?!?!?');
    //throw new Error('ngOnChanges called; should not be when ngDoCheck is defined!');
  }

  // We "know" that the only way the list can change is
  // identity or in length so that's all we check
  ngDoCheck() {
    if (this.oldHeroes !== this.heroes) {
      this.logs.push('heroes array changed');
      this.oldHeroes = this.heroes;
      this.oldLength = this.heroes.length;
    } else {
      let newLength = this.heroes.length;
      let old = this.oldLength;
      if (old !== newLength) {
        let direction = old < newLength ? 'grew' : 'shrunk';
        this.logs.push(`heroes ${direction} from ${old} to ${newLength}`);
        this.oldLength = newLength;
      }
    }
  }
}

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

import {bootstrap} from 'angular2/platform/browser';
import {DoCheckParentComponent} from './do-check-parent.component';

bootstrap(DoCheckParentComponent).catch(err => console.error(err));

/*
https://github.com/angular/angular/issues/7307

Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

h2 { color: #444; font-weight: lighter; }
body { margin: 2em; }
body, input[text], button { color: #666; font-family: Cambria, Georgia; }
button { padding: 0.2em; font-size: 14px}
* { font-family: Arial; }
.parent {padding: 10px; margin:20px 8px; max-width: 40em;}

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Lifecycle Hooks</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    
    <!-- IE required polyfills, in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://npmcdn.com/angular2@2.0.0-beta.7/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.2/lib/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <do-check-parent>Loading...</do-check-parent>
  </body>

</html>

<!-- 
https://github.com/angular/angular/issues/7307

Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->