We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started easily with Syncfusion Angular 11 Data Grid

Platform: JavaScript - EJ 2 |
Control: Grid |
Published Date: March 9, 2021 |
Last Revised Date: March 22, 2021

The Essential JS 2 Angular Data Grid is used to display data from JSON or web service in a tabular format. Its feature set includes functionalities like data binding with adaptorseditingfilteringsortinggroupingpagingfreezing rows and columnsaggregating rows, and exporting to Excel, CSV, and PDF formats. In this knowledge base, we are going to provide details about how to easily integrate Syncfusion Angular Data Grid in Angular 11 application and how to enable its commonly used features using services.

Prerequisites

 

Before start, we need following items to create Angular Data Grid in Angular 11 Application

 

Installation and application creation

 

Install Angular CLI 11 using following command.

  1. npm install -g @angular/cli@11.2.3

 

Create an Angular 11 application Angular CLI

  1. ng new angular11-app
  2. cd angular11-app

 

Serve the Angular 11 application using below command

  1. ng serve

 

Listen the application in localhost:4200. Your application will serve in browser as follows.

Angular 11 application

 

Integration of Angular Data Grid

 

After running the Angular 11application successfully, configure the Angular DataGrid in this application. Install Angular Data Grid and EJ2 package using below command.

  1. npm install @syncfusion/ej2-angular-grids --save
  2. npm install @syncfusion/ej2 save

 

The –save command will instruct the NPM to include a grid package inside the dependencies section of the package.json.

Import GridModule from installed package in app/app.module.ts.

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

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

// import the GridModule for the Grid component

import { GridModule } 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 { }

 

 

You should refer the CSS file Angular DataGrid in style.css.

@import "../node_modules/@syncfusion/ej2/material.css";

 

Add the Angular DataGrid component in app.component.html.

<ejs-grid></ejs-grid>

 

Now, define the row data for this DataGrid in app.component.ts. Here, the JSON data is used for the Grid.

export class AppComponent implements OnInit {

  public data: Object[];

  ngOnInit() {

    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' },

    ];

  }

}

 

After defining row data, define Data Grid’s dataSource and columns in app.component.html. In Columns, the textAlign to customize the alignment of columns, Width is to define the column width in pixels and format is defined to customize the cell value to Number and Date options by I18n standard.

 

<ejs-grid [dataSource]='data'>

  <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>

 

Now serve the application using following command.

  1. ng serve --open

 

Once all the files are compiled successfully. It will serve the site at localhost:4200

The following screenshot illustrates this.

 

Grid_angular11

Description automatically generated with medium confidence

 

 

Enabling Features

 

So far, we have learned, how to add Data Grid in Angular 11 Application. This section describes how to inject data grid services and enable its features. Before enable data grid features, we need to define their services in app.module.ts.

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

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    GridModule

  ],

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

  bootstrap: [AppComponent]

})

export class AppModule { }

 

Paging

 

After defining the PageService in providers. Now we can access Paging functionality from Data Grid. To enable pager in Data Grid, set the allowPaging property to true.

<ejs-grid [dataSource]='data' [allowPaging]='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>

 

Grid_paging


Description automatically generated

 

Sorting

 

After SortService is defined in providers. You can inherit sorting behaviors. This can be used in Data Grid by setting allowSorting property as true.

<ejs-grid [dataSource]='data' [allowPaging]='true' [allowSorting]='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>

 

Grid_Sorting


Description automatically generated with medium confidence

 

 
 
Filtering

 

By declaring FilterService in app.module.ts. You can use filtering functionalities in Data Grid. In this Angular 11 Data Grid, enable Filter menu to filter data grid records. To enable Filter menu, we need to define allowFiltering as true and have to define filterSettings.type as Menu.

 

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

[filterSettings]='filterSettings' >

  <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>

 

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  public data: Object[];

  public filterSettings: Object;

  ngOnInit() {

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

    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' },

    ];

  }

}

 

Grid_Filtering

 

Grouping

 

If `GroupService` is injected in providers then enable `allowGrouping` in the grid to access its functionalities.

<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>

 

Grid_Grouping

 

Summary

 

In this GitHub repository, the application prepared from the above steps has been committed, and it is readily runnable. Also you can check our Angular Data Grid features from this page.

If you have any queries or require clarifications. Please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile