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:45]: Add dataSource to Angular Data Grid

ANGULAR DATAGRID
--------------------

SUBSCRIBE
--------------------

SOCIAL COMMUNITY
---------------------

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.

Just type this command
ng add @syncfusion/ej2-angular-grids

The two-step process to continue further is:

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

[anoopsankar]

Very good video. Simply explained... Thank you very much!

[ingridthoma]

very good explained - thank you very much!

[sureshmutluru]

I want to develop Angular app with just Syncfusion Components. No Bootstrap or Material library. How to get a flex layout in a simple way. Can you help?

[sriramsundar]

You got order id, product name, price etc. from a data source. But, I want a button in 7th column in all rows How can I add that?

[binduyadav]

Please let me know. I am got stucked in dynamic pager component . Not working as expected please upload the video for dynamic dyamic paging.

[shubhangitaware]

I'm getting data from API, and assigning that data from API, to datasource, but not able to display data in table.
However, when I assigned hardcoded data as shown in video, it's getting displayed, please help me, how to display data when fetching it from API.

[MohammadAli-iuoi]

as you used a grid tool from 'ej2.syncfusion.com', so I just wanted to know that these tools are payable or free?

[alaindespaignet]

Careful folks - do not add the material styles in both angular.json and in styles.css or the bundle size double i.e. 2x the material styles size which is already heavy at 2.7 mb

[karthiklokesh]

Hi Team,

Run $ng add @syncfusion/ej2-angular-grids

error
"ngAdd" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID.