Sunday, January 29, 2017

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


2 comments:

  1. why did you not use the free version of ag-Grid?

    ReplyDelete
    Replies
    1. As per ag-grid pricing model, free version is recommended for open source projects & hobbyists. I believe it can be risk relying on ag-grid as I am looking for an open source product.

      Delete