Wednesday, May 29, 2024
ag-gridAngular 10Javascript

Angular 10 ag-Grid Add New Row

Angular 9, Angular 10

Hello to all, welcome to 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;
  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>
    style="height: 300px;" 


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

Note: First, you have to implement this and after this you can get this post working easily:



the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.