As most of you are aware, we have supported Angular for a longtime:

Here are a couple blog posts in regards to our Angular 1.x support:

http://blog.htmltreegrid.com/post/AngularJS-DataGrid-Component-Why-our-Angular-DataGrid-is-better.aspx
http://blog.htmltreegrid.com/post/Angular-JS-Support.aspx

We had Angular 2 support built a few months ago, and have been trying it out with some of our customers. With the release of Angular 4, this same approach will continue to work.

So, without further ado, here are the steps you will need:

 

  • 1- Import the directive import {TreeGridDirective} from './treeGrid.directive'
  • 2- List it in the directive list inside your component directives: [TreeGridDirective]
  • 3- Create a bindable property that can be bound to your template  gridOptions = {    dataProvider: [],   delegate: this }
  • 4- In your template use directive like this: <div fd-grid ...
  • 5- Bind your option similar to our angular 1 directive
  • 6- Bind the grid options like [(model)]="gridOptions" 
Below, is a full example of this approach. 
To run this example,
  • 1) create a folder and unzip the zip file below into that folder
  • 2) npm install
  • 3) npm start

angular2.zip (269.62 kb)