An Overview Of Angular Grid

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.

C:\Users\Administrator>ng new mynewagapp

 

 

As of now, we need to add the ag-Grid in our project by executing the following command in mynewaggrid project.

npm install --save ag-grid-community ag-grid-angular

Now, let us add the ag-Grid Angular module to our app module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AgGridModule } from 'ag-grid-angular';


@NgModule({
   declarations: [
   AppComponent
],
imports: [
   BrowserModule,
   AppRoutingModule,
   AgGridModule.withComponents([])
],
providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

The next step is to add the ag-Grid styles in styles.scss.

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";

Now, we need to conigure the data in app.componenet.ts class.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'mynewagapp';
  gridcolumns = [
        {headerName: 'Studentname', field: 'studentname' },
        {headerName: 'Classname', field: 'Classname' },
        {headerName: 'Fee', field: 'fee'}
    ];

  gridData = [
        { studentname: 'Gajendra', Classname: 'Celica', fee: 35000 },
        { studentname: 'Rohit', Classname: 'Mondeo', fee: 32000 },
        { studentname: 'Rahul', Classname: 'Boxter', fee: 72000 },
        { studentname: 'Sachin', Classname: 'Boxter', fee: 82000 },
        { studentname: 'Ajay', Classname: 'Boxter', fee: 98000 },
        { studentname: 'Punam', Classname: 'Boxter', fee: 24000 },
    ];
}

Now, add code for viewing gridtable in app.component.html.

<ag-grid-angular
    style="width: 500px; height: 500px;"
    class="ag-theme-balham"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    >
</ag-grid-angular>
<router-outlet></router-outlet>

Now, let us run our application using the following command in terminal.

ng serve

You can see the output like below.

 

 

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.

columnDefs = [
      {headerName: 'Studentname', field: 'studentname',sortable: true },
      {headerName: 'Classname', field: 'Classname',sortable: true },
      {headerName: 'Fee', field: 'fee',sortable: true}
  ];

Now, you can see the output like below.

 

 

We can use the following code for App.component.ts class for filtering the data.

columnDefs = [
        {headerName: 'Studentname', field: 'studentname', sortable: true, filter: true },
        {headerName: 'Classname', field: 'Classname', sortable: true, filter: true },
        {headerName: 'Fee', field: 'fee', sortable: true, filter: true}
    ];

You can see the output like below. 

 

Selection

 

For applying the selection properties, we need to add checkboxSelection: true on which columns you want to apply the selection property.

columnDefs = [
        {headerName: 'Studentname', field: 'studentname', sortable: true, filter: true, checkboxSelection: true },
        {headerName: 'Classname', field: 'Classname', sortable: true, filter: true},
        {headerName: 'Fee', field: 'fee', sortable: true, filter: true}
    ];

 

Add rowSelection="multiple" in the HTML page for multiple row selections.

<ag-grid-angular
    style="width: 500px; height: 500px;"
    class="ag-theme-balham"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    rowSelection="multiple"
    >
</ag-grid-angular>
<router-outlet></router-outlet>

 

Summary

 

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