How to get started easily with Syncfusion Angular 13 DataGrid?
Syncfusion Angular UI (Essential JS 2) is a collection of modern TypeScript based true Angular components. The Grid component is developed from the ground up to be lightweight, responsive, modular and touch-friendly.
Project pre-requisites
Make sure that you have the compatible versions of TypeScript and Angular in your machine before starting to work on this project.
- Node.js
- Angular 13
- Angular CLI
- Typescript 4+
- Visual Studio Code for Editor
You can use the Angular CLI to setup your Angular applications.
To install Angular CLI, use the following command.
npm install -g @angular/cli@13.0.1
Create an Angular application
Start a new Angular application using the Angular CLI command as follows.
ng new angular13-app cd angular13-app
Adding Syncfusion Grid package
All the available Essential JS 2 packages are published in npmjs.com registry.
To install Grid component, use the following command.
npm install @syncfusion/ej2-angular-grids --save
The --save will instruct NPM to include the Grid package inside the dependencies section of the package.json.
Registering Grid module
Import Grid module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-grids.
[src/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({
//declaration of ej2-angular-grids module into NgModule
imports: [ BrowserModule, GridModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Adding CSS reference
The following CSS files are available in ../node_modules/@syncfusion package folder. This can be referenced in [src/styles.css] using the following code.
@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
Add Grid component
Modify the template in [src/app/app.component.ts] file to render the Grid component. Add the Angular Grid by using <ejs-pdfviewer> selector in template section of the app.component.ts file.
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-grid [dataSource]='data'> </ejs-grid>`
})
export class AppComponent implements OnInit {
public data!: object[];
title = 'angular'
ngOnInit(): void {
this.data = data;
}
}
Add datasource in the [src/app/datasource.ts],
export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
}];
Then run ng serve to serve the sample.
UG link: https://ej2.syncfusion.com/angular/documentation/grid/getting-started
Example Sample: https://github.com/SyncfusionExamples/ej2-angular-13-data-grid
Conclusion
I hope you enjoyed learning about how to get started with Syncfusion Angular 13 Grid component.
You can refer to our Angular DataGrid feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications. You can also explore our Angular DataGrid 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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
