AngularJS 2.0 From Beginning - Dynamic Grid (Day 10)

In this Angular 2 article series, we have already discussed basic components and directives concepts in Angular2. Now in this article, I will show you how to create custom components, such as records that display dynamic Grids for using the concept of directives, pipes, and other features of Angular 2.

Now, for creating the dynamic Grid, we first need to create a custom component which will represent the dynamic Grid components. For this purpose, we first add the TypeScript file named app.component.dynamicgrid.ts file and add the below code.

In the above component, we created one Input Property, named columns, which is basically used for defining the column details such as caption and data field of the Grid columns. Also, we created two public methods within the Grid component called bindData() and clearGrid(). First function is used for binding data into the Grid component. This function takes an array type argument as data. The second method is used for clearing the Grid content.

In the above TypeScript file, we also defined two another classes named columnDef and columnDataType. These two classes are basically enum type classes which can be used for defining the column structure of the dynamic Grid component from the parent component.

Now, add an HTML file for dynamic Grid component templates named app.component.dynamicgrid.html and add the below code.

In the above code, we used ngFor and ngSwitch for populating the dynamic table columns. Also, we used date pipes for date field value formatting.

Now, we need to create another component within which we use these dynamic Grid components. Actually, this contains an entry form and also the dynamic Grid component. For this purpose, we first create an HTML file named app.component.gridsetting.html and add the below code.