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';

  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";

  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.

    style="width: 500px; height: 200px;" 

Step 7 :

Run your Application

npm start


Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories