ChangeDetectorRef.markForCheck

<!DOCTYPE html>
<html>

<head>
  <title>angular2 playground</title>
      <link rel="stylesheet" href="style.css" />

    <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://code.angularjs.org/tools/typescript.js"></script>
    <script src="config.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 data-require="jasmine" data-semver="2.2.1" src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.js"></script>
  <script data-require="jasmine" data-semver="2.2.1" src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.js"></script>
  <script data-require="jasmine@*" data-semver="2.2.1" src="http://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.js"></script>
  
  <script src="config.js"></script>
  <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>

</head>

<body>
  <app></app>
</body>

</html>

### Angular2 Starter Plunker - Typescript

A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, and DI usage.

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true,
    experimentalDecorators: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});

import {View, Input, Component,  Directive, ChangeDetectionStrategy, ChangeDetectorRef} from 'angular2/core'
import {bootstrap} from 'angular2/platform/browser'

@Component({selector: 'cmp', changeDetection: ChangeDetectionStrategy.OnPush})
@View({template: `Number of ticks: {{numberOfTicks}}`})
class Cmp {
  numberOfTicks = 0;
  
  constructor(private ref: ChangeDetectorRef) {
    setInterval(() => {
      this.numberOfTicks ++
      this.ref.markForCheck();
    }, 1000);
  }
}

@Component({
  selector: 'giant-list',
  template: `
  <div class="list">
    <ul>
        <li *ngFor="#d of data">
            {{d}}
        </li>
    </ul>
</div>
  `,
})
export class GiantList {
  @Input("data") data;
  constructor(private cd: ChangeDetectorRef) { }
  ngOnInit() {
    this.cd.detach();
    setInterval(() => {
      this.cd.reattach();
      this.cd.detectChanges();
      this.cd.detach();

    }, 1000);
  }
}

@Component({
  selector: 'app',
  changeDetection: ChangeDetectionStrategy.OnPush
})
@View({
  template: `
    <cmp><cmp>
    test
    <giant-list [data]="data"><giant-list>

  `,
  directives: [Cmp, GiantList]
})
class App {
  data = [];
  ngOnInit(){
    let   counter = 0;
    setInterval(() => {
      let newEntry = `${new Date()}:Some data... ${counter++}`;
      this.data = [newEntry, ...this.logs];
    },50);
  }
}

bootstrap(App);



ul
{
    list-style-type: none;
}
li {
    font-size: smaller;
    font-family: monospace;
}

.list {
    height: 300px;
    border: solid;
    border-color: lightgrey;
    border-radius: 2px;
    overflow:hidden;
    overflow-y:scroll;
}