An Overview Of Angular Grid

In this article, you will learn about Angular Grid and how to work with Grid in an Angular application.

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';    
  3.     
  4. import { AppRoutingModule } from './app-routing.module';    
  5. import { AppComponent } from './app.component';    
  6. import { AgGridModule } from 'ag-grid-angular';    
  7.     
  8.     
  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';  
  2.   
  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.     ];  
  15.   
  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.