Angular 10 ag-Grid Delete Selected Row

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

Post Working:

In post, I am showing you, how to delete selected 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;
  
  onDeleteRow()
   {
	var selectedData = this.agGrid.api.getSelectedRows();
	this.agGrid.api.updateRowData({ remove: selectedData });
   }



}

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

<button class="btn btn-primary mb-3" (click)="onDeleteRow()">Delete Row</button>
<ag-grid-angular
    style="height: 300px;" 
    class="ag-theme-balham-dark"
    [rowData]="rowData"
  #agGrid
    [columnDefs]="columnDefs"
    rowSelection="multiple"
    >
</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