What Is Ag Grid Community In Angular 12

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:

So in this article, we have learned about what is Ag Grid Community with an example.

Also, check this article How To Capture Photo Using Ngx-webcam In Angular 12

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories