FancyGrid + Angular 2

<!DOCTYPE html>
<html>
  <head>
    <title>FancyGrid with Angular 2</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>
    <link href="https://code.fancygrid.com/fancy.min.css" rel="stylesheet">
    <script src="https://code.fancygrid.com/fancy.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 Grid {
  constructor(config: Object) {
    for(var p in config){
      this[p] = config[p];
    }
  }
}

@Component({
  selector : 'fancygrid',
  inputs : ['grid'], 
  template : `
   <div id='{{grid.renderTo}}'></div>
  `
})
class fancygrid implements AfterView, OnDestroy {
  constructor(private zone:NgZone) {
  }
  
  ngAfterViewInit() {
      this.zone.runOutsideAngular(() => {
        var myGrid = new FancyGrid(this.grid);
      });
  }
  ngOnDestroy() {
    FancyGrid.get(this.grid['renderTo']).destroy();
  }
}

//Root Component
@Component({
  selector: 'my-app',
  directives: [fancygrid],
  template: `
    <fancygrid [grid]='config'></fancygrid>
  `,
})
export class App {
  constructor() {
    this.name = 'Angular2'
    
    var data = [
      ['Ted', 'Smith', 'Java Developer', 'ted.smith@gmail.com', 'Electrical Systems', 30, 'Java, Ruby'],
      ['Ed', 'Johnson', 'C/C++ Market Data Developer', 'ed.johnson@gmail.com', 'Energy and Oil', 35, 'C++'],
      ['Sam', 'Williams', 'Technical Analyst', 'sam.williams@gmail.com', 'Airbus', 38, ''],
      ['Alexander', 'Brown', 'Project Manager', 'alexander.brown@gmail.com', 'Renault', 24, ''],
      ['Nicholas', 'Miller', 'Senior Software Engineer', 'nicholas.miller@gmail.com', 'Adobe', 33, 'Unix, C/C++'],
      ['Andrew', 'Thompson', 'Agile Project Manager', 'andrew.thompson@gmail.com', 'Google', 28, ''],
      ['Ryan', 'Walker', 'Application Support Engineer', 'ryan.walker@gmail.com', 'Siemens', 39, 'ActionScript']
    ];

    
    this.config = {
      title: 'Title',
      renderTo: 'grid-1',
      width: 450,
      height: 400,
      selModel: 'cell',
      data: {
        fields: ['name', 'surname', 'position', 'email', 'company', 'age', 'knowledge'],
        items: data
      },
      defaults: {
        type: 'string',
        width: 100
      },
      columns: [{
        index: 'company',
        title: 'Company'
      }, {
        index: 'name',
        title: 'Name'
      }, {
        index: 'surname',
        title: 'Sur Name'
      }, {
        index: 'age',
        title: 'Age',
        width: 50,
        type: 'number'
      }]
    };
  }
}


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