Angular 2 Example With FancyGrid


Here at FancyGrid, we are big Angular fans.
We have built an Angular directive wrapped around our grid library: FancyGrid-AngularJS Directive.
We are also getting ready for Angular 2.

Link on working sample

You can skip below explanation and go to working sample - FancyGrid with Angular 2

Explanation

We start off by setting up a simple boilerplate which includes FancyGrid, Angular 2, and polyfills for browsers that are incompatible with some of Angular 2 dependencies.

index.html

<!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>
    <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>

We include a number of dependencies inside of our HTML file.
The majority of these dependencies will not be needed for production code
if you intend on compiling and bundling the code. Going into each of these dependencies

in detail would be enough information for another article in itself, so in short :

angular2-polyfills.js

Needed for zone.js and reflect-metadata

system.js

A module loader

typescript.js

A client-side version of the language TypeScript

Rx.js

Observables

angular2.min.js

Angular 2

http.min.js

The HTTP class

fancygrid.min.js

The FancyGrid library!

We utilize a library called SystemJS as a polyfill for the upcoming es6 require syntax.
This allows us to pull in files dynamically into our application, similar to how require works in Node.js.
The line System.import('app.ts') brings in our external file app.ts via ajax to be interpreted by the browser. Let's look at that file now.

app.ts

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 {
  chart : Grid;
  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: ``
})
export class App {
  charts : Grid[];
  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));