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


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.


<!DOCTYPE html>
    <title>angular2 playground</title>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <link href="" rel="stylesheet">
    <script src=""></script>
      transpiler: 'typescript',
      typescriptOptions: {
        emitDecoratorMetadata: true


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 :


Needed for zone.js and reflect-metadata


A module loader


A client-side version of the language TypeScript




Angular 2


The HTTP class


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.


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];

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

//Root Component
  selector: 'my-app',
  directives: [fancygrid],
  template: ``
export class App {
  charts : Grid[];
  constructor() { = 'Angular2'
    var data = [
      ['Ted', 'Smith', 'Java Developer', '', 'Electrical Systems', 30, 'Java, Ruby'],
      ['Ed', 'Johnson', 'C/C++ Market Data Developer', '', 'Energy and Oil', 35, 'C++'],
      ['Sam', 'Williams', 'Technical Analyst', '', 'Airbus', 38, ''],
      ['Alexander', 'Brown', 'Project Manager', '', 'Renault', 24, ''],
      ['Nicholas', 'Miller', 'Senior Software Engineer', '', 'Adobe', 33, 'Unix, C/C++'],
      ['Andrew', 'Thompson', 'Agile Project Manager', '', 'Google', 28, ''],
      ['Ryan', 'Walker', 'Application Support Engineer', '', '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));