Angular Syncfusion grid

Angular is one of the exceptional frameworks of JavaScript. We can use Essential JS 2 grid with angular, which is open-source and lightweight. Essential JS 2 is a typescript grid that helps us to load only required modules at a time.

In this article, we will go through creating an angular grid along with a few features of grid-like paging, sorting, filtering, grouping, etc.

Environment requirement:

·????????Node.js: 10.9.0 or later.

·????????Angular CLI: 8.3.19 or later

·????????Syncfusion/ejs-angular-grid: 17.4.43 or later

Firstly we have to create a new angular application with the below command.

ng new ej2-angular-data-grid-master        

After creating the application we need to install the grid by executing the below command at the app root.

npm install @syncfusion/ej2-ng-grids --save        

We will use the material theme to show the grid. We have to add material CSS in our style.css like below.

@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';        

Now move forward and import the grid module in app.module.ts file.

import { BrowserModule } from '@angular/platform-browser'

import { NgModule } from '@angular/core';

import { GridModule } from '@syncfusion/ej2-angular-grids';

import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';

import { AppComponent } from './app.component';

?

@NgModule({

? declarations: [

? ? AppComponent

? ],

? imports: [

? ? BrowserModule,

? ? GridModule

? ],

? providers: [PageService, SortService, FilterService, GroupService],

? bootstrap: [AppComponent]

})

export class AppModule { };        

We have completed our grid configuration now we need to define our first grid in app.component.html and we have to bind the data to the grid using the data-Source property, which allows an array of JavaScript objects like the below code.

<ejs-grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true' [allowFiltering]='true

[filterSettings]='filterSettings' [allowGrouping]='true' >

? <e-columns>

? ? <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='120'></e-column>

? ? <e-column field='CustomerID' headerText='Customer ID' width='120'></e-column>

? ? <e-column field='Freight' textAlign='Right' format='c2' width='120'></e-column>

? ? <e-column field='ShipCountry' headerText='Ship Country' width='140'></e-column>

? </e-columns>

</ejs-grid>'        

After creating the above grid component, we need to define an array of JavaScript objects in app.component.ts file.

this.data = 

????? { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38, ShipCountry: 'France' },

????? { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61, ShipCountry: ' Germany' },

????? { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83, ShipCountry: 'Brazil' },

????? { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34, ShipCountry: 'France' },

????? { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3, ShipCountry: 'Belgium' },

????? { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17, ShipCountry: 'Brazil' },

????? { OrderID: 10254, CustomerID: 'CHOPS', Freight: 22.98, ShipCountry: 'Switzerland' },

????? { OrderID: 10255, CustomerID: 'RICSU', Freight: 148.33, ShipCountry: 'Switzerland' },

????? { OrderID: 10256, CustomerID: 'SUPRD', Freight: 13.97, ShipCountry: 'Brazil' },

????? { OrderID: 10257, CustomerID: 'WELLI', Freight: 14.23, ShipCountry: 'Venezuela' },

????? { OrderID: 10258, CustomerID: 'VICTE', Freight: 18.33, ShipCountry: 'France' },

????? { OrderID: 10259, CustomerID: 'WELLI', Freight: 28.13, ShipCountry: 'Brazil' },

????? { OrderID: 10260, CustomerID: 'CHOPS', Freight: 48.34, ShipCountry: 'Switzerland'? },

????? { OrderID: 10261, CustomerID: 'SUPRD', Freight: 32.73, ShipCountry: ' Germany' },

????? { OrderID: 10262, CustomerID: 'TOMSP', Freight: 12.31, ShipCountry: 'Switzerland' },

????? { OrderID: 10263, CustomerID: 'VICTE', Freight: 23.77, ShipCountry: 'Brazil' },

????? { OrderID: 10264, CustomerID: 'SUPRD', Freight: 43.47, ShipCountry: 'Venezuela' },

????? { OrderID: 10265, CustomerID: 'CHOPS', Freight: 53.37, ShipCountry: 'Belgium' },

??? ];[
Now we have done with code and move to serve the application with the command “ng serve -open” and the grid will be look something like the below:        

Now we have done with code and move to serve the application with the command “ng serve -open” and the grid will be look something like the below:

Now we are going to discuss a few build-in features of the grid and will look into a few service providers for the same. As we saw a few service providers in app.module.ts file, it will allow us to apply features like paging, sorting, filter, etc.

Paging: After successfully injecting page service in providers, we can access paging functionality. We need to enable allow paging in app.component.html file “[allowPaging]='true'”.

Sorting: After successfully injecting page service in providers, we can access sorting functionality. We need to enable allow paging in app.component.html file “[allowPaging]='true'”.

Filtering: We applied a filter menu to filter the records, we inject these features using define FilterService in providers. We set [allowFiltering]='true' [filterSettings]='filterSettings' and filter setting is define in app.component.ts file like below.

this.filterSettings = { type: 'Menu' };        

Grouping: We can access grouping functionality, enable allow paging in app.component.html file “[allowGrouping]='true'”.