Angular 10 ag-Grid Add New Row

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 10 ag-Grid Add New Row.

Post Working:

In post, I am showing you, how to add new row to ag-grid on button click in angular 10 application.

Angular 10 came. If you are new in Angular 10, then please check below links:

Angular 10 Basics Tutorials

Angular 10 for Beginners

Here are also some posts related to Angular ag-Grid:

Add ag-Grid in Angular application

Open Modal PopUp row click event on ag-Grid in Angular application

Now below is the code snippet for add new row ag-Grid:

1. Very first, you need to implement below tutorial link steps for adding ag-Grid into your angular 10 application:

Implement ag-Grid into Angular 10

2. Add below code into your app.component.ts file:

...
import { AgGridAngular } from "ag-grid-angular";

export class AppComponent {

....

  @ViewChild('agGrid') agGrid: AgGridAngular;
  
  onAddRow()
   {
     this.agGrid.api.updateRowData({
  add: [{ make: 'BMW', model: 'S2', price: '63000' }]
     });
  
   }



}

3. Now add below code into your app.component.html file:

<button class="btn btn-primary mb-3" (click)="onAddRow()">Add Row</button>
<ag-grid-angular
    style="height: 300px;" 
    class="ag-theme-balham-dark"
    [rowData]="rowData"
  #agGrid
    [columnDefs]="columnDefs"
    
    >
</ag-grid-angular>

This is it and if you have any kind of query then please comment below.

Note: First, you have to implement this https://therichpost.com/angular-9-10-ag-grid-working-example/ and after this you can get this post working easily:

Jassa

Thanks