How To Use Ag-Grid In Angular 8 With Sorting And Floating Filter

Introduction

 

In this article, we are going to see ag-Grid for Angular applications. ag-Grid provides a feature to display the data in proper grid format with filtering and sorting features already included in it and many more. Ag-grid is a fully-featured and highly customizable javascript data grid.

 

Prerequisites

• Basic knowledge of Angular
• Visual Studio Code must be installed
• Angular CLI must be installed
• Node JS must be installed

Step 1

 

Create a new Angular project using the following NPM command:

ng new ag-gridExample

Step 2

 

Now let's add the ag-Grid NPM packages. run the following command  

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

Step 3

 

The next step is to add ag-Grid styles in style.css, just import the following below command in style.css 

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

Step 4

 

Create a new ag-Grid Component using the following NPM command, 

ng g c ag-grid

After installing the package, we just need to import it in our module, so open app.module.ts file and import the following code:

import { AgGridModule } from 'ag-grid-angular';

Step 5

 

Open the file app.module.ts and paste the below code,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AgGridComponent } from './ag-grid/ag-grid.component';
import { AgGridModule } from 'ag-grid-angular';

@NgModule({
  declarations: [
    AppComponent,
    AgGridComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AgGridModule.withComponents([]),

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Step 6

 

Now, open the app.component.ts file and add the following code in this file,

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ColumnDefs;
  RowData: any;
  AgLoad: boolean;
  constructor() { }

  ngOnInit() {
    this.GetAgColumns();
    this.GetGiftVoucherList();
  }
  GetAgColumns() {
    this.ColumnDefs = [
      { headerName: 'ArtNo', field: 'ArtNo', sortable: true, filter: true },
      { headerName: 'Provider', field: 'Provider', sortable: true, filter: true },
      { headerName: 'ProviderArtNo', field: 'ProviderArtNo', sortable: true, filter: true },
      { headerName: 'Brand', field: 'Brand', sortable: true, filter: true },
      { headerName: 'Price', field: 'Price', sortable: true, filter: true },
      { headerName: 'BuyAccount', field: 'BuyAccount', sortable: true, filter: true }
    ];
  }
  GetGiftVoucherList() {
    this.AgLoad = true;
    this.RowData = [
      {
        ArtNo: "100",
        Provider: "IPhone 11",
        ProviderArtNo: "1Yu",
        Brand: "Apple",
        Price: 7810.23,
        BuyAccount: "123",
      },
      {
        ArtNo: "101",
        Provider: "Samsung galaxy",
        ProviderArtNo: "1Yu",
        Brand: "Samsung",
        Price: 2310.23,
        BuyAccount: "123",
      },
      {
        ArtNo: "102",
        Provider: "Iphone 11 Pro",
        ProviderArtNo: "1Yu",
        Brand: "Apple",
        Price: 7810.23,
        BuyAccount: "123",
      },
      {
        ArtNo: "103",
        Provider: "Intex",
        ProviderArtNo: "1Yu",
        Brand: "Intex",
        Price: 5810.23,
        BuyAccount: "123",
      },
      {
        ArtNo: "100",
        Provider: "IPhone 11",
        ProviderArtNo: "1Yu",
        Brand: "Apple",
        Price: 7810.23,
        BuyAccount: "123",
      },
      {
        ArtNo: "101",
        Provider: "Samsung galaxy",
        ProviderArtNo: "1Yu",
        Brand: "Samsung",
        Price: 2310.23,
        BuyAccount: "123",
      },
      {
        ArtNo: "102",
        Provider: "Iphone 11 Pro",
        ProviderArtNo: "1Yu",
        Brand: "Apple",
        Price: 7810.23,
        BuyAccount: "123",
      },
      {
        ArtNo: "103",
        Provider: "Intex",
        ProviderArtNo: "1Yu",
        Brand: "Intex",
        Price: 5810.23,
        BuyAccount: "123",
      }
    ];
  }
}

 

Here column and row data are its properties where column contains the header, and field is the value which is we are storing inside Row.

 

Row data can be dynamically loaded 

 

On the below Image we are using sortable and filter to enable it in our application/ It will give the feature to sorting as well as filter

 

Step 7

 

The next step is to open the app.component.html file and paste the below code,

<h1>Mobile Company Data</h1>
<div class="card">
  <div class="card-body pb-0">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            Mobile Company Data
          </div>
          <div class="card-body position-relative">
            <div class="ag-theme-balham" style="height:550px;">
              <app-ag-grid *ngIf="AgLoad" [ColumnDefs]="this.ColumnDefs" [RowData]="this.RowData"
                [IsColumnsToFit]="true">
              </app-ag-grid>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

 

Step 8

 

The next step is to open the ag-grid.component.html file and paste the below code,

<div style="width:100%; height: 100%;">
  <table id="dynamic-table" class="table table-stripedtable-hover" style="width:100%; height: 100%;">
    <ag-grid-angular style="width:100%; height:85%;" class="ag-theme-balham" [columnDefs]="ColumnDefs"
      [enableSorting]="true" [animateRows]="true" [pagination]="true" [paginationPageSize]="10" [floatingFilter]="true"
      [animateRows]="true" (gridReady)="BindData($event)">
    </ag-grid-angular>
  </table>
</div>

Step 9

 

The next step is to open the ag-grid.component.ts file and paste the below code:

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

@Component({
  selector: 'app-ag-grid',
  templateUrl: './ag-grid.component.html',
  styleUrls: ['./ag-grid.component.css']
})
export class AgGridComponent {
  @Input() ColumnDefs: any;
  @Input() RowData: any;
  @Input() IsColumnsToFit: boolean;

  gridApi: any;
  gridColumnApi: any;

  BindData(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    params.api.setRowData(this.RowData);
    if (this.IsColumnsToFit) {
      this.gridApi.sizeColumnsToFit();
    }
  }
}

 

Now with this step, our coding part is done and it's time for the Output,

 

Type the below code to build and run the application:

ng serve -o

You can see it shows the following image when the connection is there. Once we disconnect, the internet automatically detects it and the page will change.

 

 

 The above image is showing data in ag-grid with ag-theme-balham

 

 

The above image is showing ag-grid with a blue theme.There are many themes available in ag-grid, we have to just take its path and import it in style.css.

 

 

The above image is showing ag-grid with floating filter . 

 

 

Ag-grid also supports searching and sorting .

 

 

Ag-gid also gives the feature to paginate our data as in the above image we can see how pagination is working . 

 

 

Conclusion

 

In this article, we have seen how to use the  Ag-Grid feature  in Angular 8 with filter and sorting.

 

Please give your valuable feedback/comments/questions about this article.