What Is Ag Grid Community In Angular 12

Parth Mandaliya Aug 10, 2022 0 694

Hello friends, in this article we will learn about what is Ag Grid Community with an example.

AG Grid Community

AG Grid is a fully-featured and highly customizable JS(JavaScript) data grid. It delivers outstanding performance, has no third-party dependencies, and integrates smoothly with Angular as Angular Component.
It has a full-blown solution with features to meet most of the requirements.

Features

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

Here are some of the different features that make AG Grid stand out:

Grouping / Aggregation
Custom Filtering
In-place Cell Editing
Records Lazy Loading
Server-Side Records Operations
Live Stream Updates
Hierarchical Data Support & Tree View
Customizable Appearance
Customizable Cell Contents
Excel-like Pivoting
State Persistence
Keyboard navigation
Data Export to CSV
Data Export to Excel
Row Reordering
Copy / Paste
Column Spanning
Pinned Rows
Full-Width Rows

Let’s create a simple demo of Ag Grid Community.

Step 1: Create a project using this command.

ng new Angular-Grid

Step 2: Install Dependencies

npm install @ag-grid-enterprise/all-modules

Step :3 Import AgGridModule And Add It To The App Module

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-community/angular';

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

Step:4 Open the app.component.ts and paste the following code into it.

import { Component } from '@angular/core';
import { AllModules } from "@ag-grid-enterprise/all-modules";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private gridApi: any;
  private gridColumnApi: any;

  columnDefs = [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ];
  defaultColDef = {
    sortable: true
  };
  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];

  modules = AllModules;

  onGridReady(params: any) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }
}

Open the app.component.html and paste the following code into it.

<ag-grid-angular [sideBar]="true" style="height: 500px;" class="ag-theme-balham" [rowData]="rowData"
  [defaultColDef]="defaultColDef" [columnDefs]="columnDefs" [modules]="modules" [enableRangeSelection]="true"
  [enableFillHandle]="true" [undoRedoCellEditing]="true" [undoRedoCellEditingLimit]="10" [enableCellChangeFlash]="true"
  (gridReady)="onGridReady($event)">
</ag-grid-angular>

Output: