ZingChart + Angular 2 Blog Post Mar 2016, Complete

<!DOCTYPE html>
<html>
  <head>
    <title>angular2 playground</title>
    <script src="https://code.angularjs.org/2.0.0-beta.9/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="https://code.angularjs.org/2.0.0-beta.9/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.9/angular2.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.9/http.min.js"></script>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    <script>
    System.config({
      transpiler: 'typescript',
      typescriptOptions: {
        emitDecoratorMetadata: true
      }
    });
    System.import('app.ts')
      .catch(console.error.bind(console));
  </script>
  </head>
  
  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

import {bootstrap} from 'angular2/platform/browser';
import {Component, NgZone, AfterView, OnDestroy} from 'angular2/core'

class Chart { 
  id: String;
  data: Object;
  height: any;
  width: any;
  constructor(config: Object) {
    this.id = config['id'];
    this.data = config['data'];
    this.height = config['height'] || 300;
    this.width = config['width'] || 600;
  }
}

@Component({
  selector : 'zingchart',
  inputs : ['chart'], 
  template : `
   <div id='{{chart.id}}'></div>
  `
})
class ZingChart implements AfterView, OnDestroy {
  chart : Chart;
  constructor(private zone:NgZone) {
  }
  
  ngAfterViewInit() {
      this.zone.runOutsideAngular(() => {
          zingchart.render({
              id : this.chart['id'],
              data : this.chart['data'],
              width : this.chart['width'],
              height: this.chart['height']
          });
      });
  }
  ngOnDestroy() {
      zingchart.exec(this.chart['id'], 'destroy');
  }
}

//Root Component
@Component({
  selector: 'my-app',
  directives: [ZingChart]
  template: `
    <zingchart *ngFor="#chartObj of charts" [chart]='chartObj'></zingchart>
  `,
})
export class App {
  charts : Chart[];
  constructor() {
    this.name = 'Angular2'
    this.charts = [{
      id : 'chart-1',
      data : {
        type : 'line',
        series : [{
          values :[2,3,4,5,3,3,2]
        }],
      },
      height : 400,
      width : 600
    }]
  }
}


bootstrap(App, [])
  .catch(err => console.error(err));