Display JSON Data In Angular using AG-Grid

Share the post

Hello All, In this angular example, We will discuss How to display JSON data in Angular using AG-Grid. In the last angular tutorial, We had discussed Pin code validation in angular 13.

In this angular 13 example, We will use AG-Grid npm module dependency to display JSON data in a grid format. AG-Grid library offers many features which really helpful while displaying data in a grid format.

AG-Grid Features

  • Column Interactions (resize, reorder, and pin columns)
  • Pagination
  • Sorting
  • Row Selection

Steps to Display JSON Data In Angular using AG-Grid

  • Step1: Create Angular Project
  • Step2: Install npm Dependency
  • Step3: Import AgGridModule
  • Step4: Update Template
  • Step5: Update TS Code
  • Step6: Update SCSS
  • Step7: Run & See the Output

Step1: Create Angular Project

Create a new angular project using the following command.

ng new <APPNAME>

Now, move to our root project directory using the below command


Open the newly created angular project in Visual Studio Code. Use the following command to open the project.

code .

Step2: Install npm Dependency

Now, We will install AG-Grid Dependency as shown below

npm i ag-grid-community
npm i ag-grid-angular

Step3: Import AgGridModule

Now, We need to import a module from AgGridModule from ‘ag-grid-angular. We import this module as follows

Update app.module.ts as shown below

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

import { AppComponent } from './app.component';

import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { AgGridModule } from 'ag-grid-angular';

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

Step4: Update Template

Now, We have to update our HTML template.

Update the app.component.html as shown below

  <p>Angular Display JSON data In GRID</p>
  <ag-grid-angular style="width: 500px; height: 150px;" class="ag-theme-alpine" [rowData]="rowData"

Step5: Update TS Code

In our TypeScript file, We need to write the colData & rowData which we want to show in a Grid format. In this example, We will display Static data for Student names, Class & their marks in a grid format.

Update app.component.ts as shown below

import { Component } from '@angular/core';
import { ColDef } from 'ag-grid-community';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']

export class AppComponent {

  constructor() {


  colData: ColDef[] = [
    { field: 'student' },
    { field: 'class' },
    { field: 'marks' }

  rowData = [
    { student: 'Suresh', class: 'A', marks: 98 },
    { student: 'Ramesh', class: 'B', marks: 78 },
    { student: 'Dinesh', class: 'C', marks: 66 }

Step6: Update SCSS

Now, We need to import some styling to display a grid in a proper format.

Update styles.scss file as shown below

/* You can add global styles to this file, and also import other style files */
@import "ag-grid-community/dist/styles/ag-grid.css";
@import "ag-grid-community/dist/styles/ag-theme-alpine.css";

Step7: Run & See the Output

Now, Everything is done. Just need to run the angular application & see the output.

Run the Angular application using the below command

ng serve


npm run start


Display JSON Data In Angular using AG-Grid
Display JSON Data In Angular using AG-Grid

Leave a Comment