Create an Angular DataGrid Using Angular CLI and Schematics

Learn how easily you can create and configure the Angular DataGrid of Syncfusion using the "ng add" command of Angular Schematics. The Syncfusion Angular DataGrid can be used in any of the Angular versions starting from 4 up to the latest version.

In this video, I’ll create an application with the help of Angular CLI and Angular Schematics to make the initial configuration process of Angular DataGrid much simpler. Also, by the end of this video, you will learn how to create an Angular DataGrid in just two steps using the ng add command [03:33].

[00:00]: Introduction
[05:24]: Add DataGrid code in app.component.ts
[05:45]: Add dataSource to Angular Data Grid

ANGULAR DATAGRID
--------------------
Product overview: https://www.syncfusion.com/angular-ui-components/angular-grid
Examples: https://ej2.syncfusion.com/angular/demos/#/material/grid/over-view
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/getting-started/
Download free trial: https://www.syncfusion.com/angular-ui-components
GitHub source: https://github.com/syncfusion/ej2-angular-ui-components/tree/master/components/grids
npmjs package: https://www.npmjs.com/package/@syncfusion/ej2-angular-grids

SUBSCRIBE
--------------------
Syncfusion on YouTube: http://bit.ly/syncfusionyoutube
Sign up to receive email updates: http://bit.ly/syncfusionemail

SOCIAL COMMUNITY
---------------------
Facebook: https://www.facebook.com/Syncfusion/
Twitter: https://twitter.com/Syncfusion
LinkedIn: https://www.linkedin.com/company/syncfusion/
Instagram: http://instagram.com/syncfusion

TRANSCRIPT REFERENCE
---------------------
Before moving on to the application creation process, make sure that you have the compatible versions of TypeScript and Angular in your machine.
- Angular: 4 and above
- TypeScript: 2.6 and above

Use Visual Studio Code to view and edit the code better and view the output result on any supported browser.

Set up the CLI project by installing the Angular CLI on your machine. For that, open the integrated terminal window in Visual Studio Code and type the command
npm install -g @angular/cli
This command will add the latest Angular packages to your machine.

Start a new Angular application using the CLI command.
ng new my-grid-app
It'll prompt you to choose the routing option for your application. Choose No. It also asks for CSS or SASS usage: opt for CSS here.
Choosing this will generate an empty CSS file in your application.

Now, an empty Angular application has been created, so navigate to that newly created application folder.
cd my-grid-app

I have the empty Angular application now. To use the Angular Data Grid within this application, I need to install the necessary packages first.

Here comes the use of the ng add command to make the initial configuration steps much easier in just two steps. This command will take care of the initial configuration processes such as installing the latest Angular Data Grid package, configuring and registering the necessary modules in the app.module.ts file, and referencing the default theme styles in your application.

Just type this command
ng add @syncfusion/ej2-angular-grids
and it will install the Angular Data Grid package and then update the angular.json, package.json, app.module.ts, and style.css files as well.

The two-step process to continue further is:

1 Add the Data Grid directive code within the template section of the app.component.ts file as ejs-grid to render an empty grid.
2 Add DataSource to Angular Data Grid to display the records on the output page.

Now, open the terminal and run the application with the command ng serve --open. This will compile the code and open the output result in your default browser.

You can customize the grid columns using a few of the Angular Data Grid’s column-specific options. You can also enable the paging, sorting, filtering, and grouping in the Angular Data Grid using its built-in properties allowPaging, allowSorting, allowFiltering, and allowGrouping, respectively.

#angulardatagrid #datagrid #angulardatatable