Introduction

In this article, I will explain about Angular Grid. I will explain how to implement an Angular Grid in our project. And also, I will discuss some fundamentals of Angular Grid.

Overview

Angular Grid is a part of ag-Grid where Ag stands for agnostic. ag-Grid supports Angular using a wrapper component. The wrapper component is used in the application by ag-grid like another Angular component.

Create a new project

To get started, first, we will create a new project using the following command.
  1. C:\Users\Administrator>ng new mynewagapp
Angular Grid
As of now, we need to add the ag-Grid in our project by executing the following command in mynewaggrid project.
  1. npm install --save ag-grid-community ag-grid-angular
Now, let us add the ag-Grid Angular module to our app module.
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  4. import { AppRoutingModule } from './app-routing.module';
  5. import { AppComponent } from './app.component';
  6. import { AgGridModule } from 'ag-grid-angular';
  9. @NgModule({
  10. declarations: [
  11. AppComponent
  12. ],
  13. imports: [
  14. BrowserModule,
  15. AppRoutingModule,
  16. AgGridModule.withComponents([])
  17. ],
  18. providers: [],
  19. bootstrap: [AppComponent]
  20. })
  21. export class AppModule { }
The next step is to add the ag-Grid styles in styles.scss.
  1. @import "~ag-grid-community/dist/styles/ag-grid.css";
  2. @import "~ag-grid-community/dist/styles/ag-theme-balham.css";
Now, we need to conigure the data in app.componenet.ts class.
  1. import { Component } from '@angular/core';
  3. @Component({
  4. selector: 'app-root',
  5. templateUrl: './app.component.html',
  6. styleUrls: ['./app.component.css']
  7. })
  8. export class AppComponent {
  9. title = 'mynewagapp';
  10. gridcolumns = [
  11. {headerName: 'Studentname', field: 'studentname' },
  12. {headerName: 'Classname', field: 'Classname' },
  13. {headerName: 'Fee', field: 'fee'}
  14. ];
  16. gridData = [
  17. { studentname: 'Gajendra', Classname: 'Celica', fee: 35000 },
  18. { studentname: 'Rohit', Classname: 'Mondeo', fee: 32000 },
  19. { studentname: 'Rahul', Classname: 'Boxter', fee: 72000 },
  20. { studentname: 'Sachin', Classname: 'Boxter', fee: 82000 },
  21. { studentname: 'Ajay', Classname: 'Boxter', fee: 98000 },
  22. { studentname: 'Punam', Classname: 'Boxter', fee: 24000 },
  23. ];
  24. }
Now, add code for viewing gridtable in app.component.html.
  1. <ag-grid-angular
  2. style="width: 500px; height: 500px;"
  3. class="ag-theme-balham"
  4. [rowData]="rowData"
  5. [columnDefs]="columnDefs"
  6. >
  7. </ag-grid-angular>
  8. <router-outlet></router-outlet>
Now, let us run our application using the following command in terminal.
  1. ng serve
You can see the output like below.
Angular Grid

Sorting And Filtering

Now, we need to use the following code to apply the sorting and filtering in ag-grid. We can use the following code in App.component.ts class for sorting.
  1. columnDefs = [
  2. {headerName: 'Studentname', field: 'studentname',sortable: true },
  3. {headerName: 'Classname', field: 'Classname',sortable: true },
  4. {headerName: 'Fee', field: 'fee',sortable: true}
  5. ];
Now, you can see the output like below.
Angular Grid
We can use the following code for App.component.ts class for filtering the data.
  1. columnDefs = [
  2. {headerName: 'Studentname', field: 'studentname', sortable: true, filter: true },
  3. {headerName: 'Classname', field: 'Classname', sortable: true, filter: true },
  4. {headerName: 'Fee', field: 'fee', sortable: true, filter: true}
  5. ];
You can see the output like below.
Angular Grid

Selection

For applying the selection properties, we need to add checkboxSelection: true on which columns you want to apply the selection property.
  1. columnDefs = [
  2. {headerName: 'Studentname', field: 'studentname', sortable: true, filter: true, checkboxSelection: true },
  3. {headerName: 'Classname', field: 'Classname', sortable: true, filter: true},
  4. {headerName: 'Fee', field: 'fee', sortable: true, filter: true}
  5. ];
Angular Grid
Add rowSelection="multiple" in the HTML page for multiple row selections.
  1. <ag-grid-angular
  2. style="width: 500px; height: 500px;"
  3. class="ag-theme-balham"
  4. [rowData]="rowData"
  5. [columnDefs]="columnDefs"
  6. rowSelection="multiple"
  7. >
  8. </ag-grid-angular>
  9. <router-outlet></router-outlet>
Angular Grid

Summary

I hope you will enjoy the article. It is a very useful functionality and it will help you.