Articles in this section
Category / Section

How to get started easily with Syncfusion angular 8 Data Grid?

13 mins read

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 adaptors, editing, filtering, sorting, grouping, paging, freezing rows and columns, aggregating 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 8 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 8 application

Installation and application creation

  • Install Angular cli 8 using following command.
     npm install -g @angular/cli@8.1.1
     
    

 

Angular CLI application Installation by using Command prompt

 

  • Create an Angular 8 application using Angular cli.

 

      ng new angular8-app
      cd angular8-app
  • Serve the Angular 8 application using following command
           ng serve
    

 

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

 

Angular 8 Application

 

Integration of Angular Data Grid

  • After running the Angular 8 application successfully, configure the Angular DataGrid in this application.Install Angular Data Grid and EJ2 package using following command.
               npm install @syncfusion/ej2-angular-grids --save 
               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 { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
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 for Angular Data Grid in style.CSS     
    @import "../node_modules/@syncfusion/ej2/material.css";
    

 

  • Add the Angular Data Grid 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.

 

ng serve --open

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

The following screenshot illustrates this.

Angular 8 Application

Enabling Features

 

So far, we have learned, how to add Data Grid in Angular 8 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> 

 

Output Screenshot

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> 

 

Output Screenshot

 

Filtering

 

By declaring FilterService in app.module.ts. You can use filtering functionalities in Data Grid. In this Angular 8 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> 

 

[ts]

@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' },
    ];
  }
} 

 

 

After defining filter menu. Filter UI will be obtained as follows.

Output Screenshot

 

 

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>

 

Output Screenshot

 

 

 

 

 

 

Summary 

 

Refer to our documentation and online samples for more features. If you have any queries, 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!

 

Conclusion

I hope you enjoyed learning about how to get started easily with Syncfusion angular 8 data grid.

You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.  You can also explore our  JavaScript Grid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied