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.

Table of Contents

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

cd <APPNAME>

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule,
    AgGridModule.withComponents([])],
  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

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

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


@Component({
  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

Output