How To Use Ag-Grid In Angular

We’ll look at ag-Grid for Angular applications in this article. Ag-Grid offers the functionality to display the data in an appropriate grid style with built-in filtering and sorting, among other things. Ag-grid is a javascript data grid that is fully featured and incredibly customizable.

Step 1 :

Use the NPM command below to start a new Angular project

ng new ag-grid

Step 2 :

Add the following package to your application

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

Step 3 :

The addition of ag-Grid styles style is the next step. Simply import the command listed below in style’s CSS.

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

Step 4 :

Open the app.module.ts file and add the below code.

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

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

@NgModule({
  imports: [BrowserModule, FormsModule, AgGridModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 5 :

Open the app.component.ts file and add the below code.

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  columnDefs = [{ field: "make" }, { field: "model" }, { field: "price" }];

  rowData = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxter", price: 72000 }
  ];
}

Step 6 :

Open the app.component.html file and add the below code.

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

Step 7 :

Run your Application

npm start

Output:-