Angular 10 ag-Grid Add New Row

Angular 9, Angular 10

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

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

Comments

4 responses to “Angular 10 ag-Grid Add New Row”

  1. vasanth Avatar
    vasanth

    After refreshing of page the row is getting disappeard in agGrid..

  2. Ajay Malhotra Avatar

    yes they will because we are adding statically 🙂

  3. michael roberts Avatar
    michael roberts

    updateRowData is deprecated in ag-grid version 23.1 and higher. It is replaced by applyTransaction.