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
OR
npm run start
Output
