How to render Angular Grid with material theme?
This Document explains how to create Essential JavaScript 2 Grid sample in Angular with default material theme.
Setting up new Angular project
You can use Angular CLI to setup your Angular applications.
Install the CLI application globally in your machine by using the below command.
npm install -g @angular/cli
Create a new application called “angular-grid”.
ng new angular-grid
Navigate to the created project folder.
cd angular-grid
Installing Syncfusion package
Add Grid component package to the application by using the below command.
npm install @syncfusion/ej2-angular-grids --save
(or)
npm i @syncfusion/ej2-angular-grids --save
Adding Grid module
After installing the package, the component modules are available to be configured in your application from the installed Syncfusion package.
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 { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, GridModule ],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService]
})
export class AppModule { }
Adding CSS reference
The following inbuilt material CSS files are available in the ../node_modules/@syncfusion package folder. This can be referenced in “src/styles.css” using the following code.
@import '~@syncfusion/ej2-base/styles/material.css'; @import '~@syncfusion/ej2-buttons/styles/material.css'; @import '~@syncfusion/ej2-calendars/styles/material.css'; @import '~@syncfusion/ej2-dropdowns/styles/material.css'; @import '~@syncfusion/ej2-inputs/styles/material.css'; @import '~@syncfusion/ej2-navigations/styles/material.css'; @import '~@syncfusion/ej2-popups/styles/material.css'; @import '~@syncfusion/ej2-splitbuttons/styles/material.css'; @import '~@syncfusion/ej2-angular-grids/styles/material.css'
Adding Syncfusion component
Add the grid component to “app.component.ts” as follows.
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
@Component({
selector: 'app-root',
template: `<ejs-grid [dataSource]='data' allowPaging=true>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right'></e-column>
<e-column field='CustomerID' headerText='Customer ID'></e-column>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right'></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: Object[];
ngOnInit(): void {
this.data = data;
}
}
Running the application in a Development server
Use the following command to run the application in browser.
ng serve --open
The app will automatically reload if you change any of the source files.
Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/angular-grid-1613692127
