Angular 2 UI-Grid

As you know currently (Jan 2017) UI-Grid is not supported in Angular 2 and there is no other data table that provides the functionality of what UI-Grid is providing. PrimeNG does provide a decent grid, ag-grid became commercial and Material 2 data table is still in specs. Considering the current state of other grids I opted to use UI-Grid in my next application. Yes, I need to take the overhead of loading Angular 1, but felt it is worth it. Also some of my applications are running on Angular 1 and Angular 2 side by side, hence I can use UI Grid without too much performance overhead.

To support UI-Grid in Angular 2, we need to use the Upgrade Module which enables us to run Angular 1 and Angular 2 side by side. Once the project is setup to have Angular 1, we need to write a wrapper that wraps the UI-Grid and provides a way to invoke this from Angular 2. Here is such wrapper, I am calling this as NT-Grid (NT stands for Nootus, the company I own)

export const ntGrid: ng.IComponentOptions = {

    bindings: {

        gridOptions: "<"

    },

    template: `<div ui-grid="$ctrl.gridOptions"></div>`

}

angular.module("ng2uigrid").component("ntGrid", ntGrid);

import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from "@angular/core";

import { UpgradeComponent } from "@angular/upgrade/static";

@Directive({

    selector: "nt-grid"

})

export class NtGridDirective extends UpgradeComponent {

    @Input() gridOptions: any;

    constructor(elementRef: ElementRef, injector: Injector) {

        super("ntGrid", elementRef, injector);

    }

}

Here is the screenshot of UI grid in my Angular 2 POC.

This POC is on GitHub

https://github.com/prasannapattam/Angular2-UIGrid