Angular Ag Grid Step by Step Installation

AGgrid

1. Run following commands

npm install — save ag-grid-community

npm install — save ag-grid-angular

2. Add following code in Html and component file -

<ag-grid-angular
  class="ag-theme-balham"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [modules]="modules"
style="width: 100%;height:100%"
[defaultColDef]="defaultColDef"

>
</ag-grid-angular>

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

import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { CsvExportModule } from '@ag-grid-community/csv-export';

-------------------------------
@Component({
})
export class classname {
modules: Module[] = [ClientSideRowModelModule];

  public columnDefs: ColDef[] = [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' },
  ];
  public rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 },
  ];
public defaultColDef: ColDef = {
    flex: 1,
    sortable:true,
    filter:true,
    editable: true
  };
}

3. Check my package.json file for version and plugins.

Aggrid version in my package.json

For older versions of Angular, refer to https://www.ag-grid.com/angular-data-grid/angular-compatibility/