Untitled

npm install --save ag-grid-angular ag-grid-community


app module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgGridModule } from 'ag-grid-angular';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AgGridModule.withComponents([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


app component

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Define column definitions
  columnDefs = [
    { headerName: 'Column 1', field: 'col1', cellRenderer: 'agDropdownCellRenderer' },
    { headerName: 'Column 2', field: 'col2', cellRenderer: 'agDropdownCellRenderer' },
    { headerName: 'Column 3', field: 'col3', cellRenderer: 'agDropdownCellRenderer' },
    { headerName: 'Column 4', field: 'col4', cellRenderer: 'agDropdownCellRenderer' },
    { headerName: 'Column 5', field: 'col5', cellRenderer: 'agDropdownCellRenderer' },
    { headerName: 'Column 6', field: 'col6', cellRenderer: 'agDropdownCellRenderer' },
    { headerName: 'Column 7', field: 'col7', cellRenderer: 'agDropdownCellRenderer' },
  ];

  // Define row data
  rowData = [
    { col1: 'Option 1', col2: 'Option 2', col3: 'Option 3', col4: 'Option 4', col5: 'Option 5', col6: 'Option 6', col7: 'Option 7' }
  ];

  frameworkComponents = {
    agDropdownCellRenderer: DropdownCellRenderer
  };

  // Method to add a new row
  addRow() {
    const newRow = {
      col1: '',
      col2: '',
      col3: '',
      col4: '',
      col5: '',
      col6: '',
      col7: ''
    };
    this.rowData = [...this.rowData, newRow];
  }

  // Method to remove the selected row
  removeRow(index: number) {
    this.rowData = this.rowData.filter((_, i) => i !== index);
  }
}

// Dropdown cell renderer component
@Component({
  selector: 'dropdown-cell-renderer',
  template: `
    <select [(ngModel)]="params.value" (change)="onValueChanged($event)">
      <option *ngFor="let option of options" [value]="option">{{option}}</option>
    </select>
  `,
})
export class DropdownCellRenderer {
  params: any;
  options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'];

  agInit(params: any): void {
    this.params = params;
  }

  onValueChanged(event: any) {
    this.params.setValue(event.target.value);
  }
}


html
<div class="buttons">
  <button (click)="addRow()">Add Row</button>
  <button (click)="removeRow(selectedRowIndex)" [disabled]="selectedRowIndex === null">Remove Selected Row</button>
</div>

<ag-grid-angular
  style="width: 100%; height: 500px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [frameworkComponents]="frameworkComponents"
  rowSelection="single"
  (rowSelected)="onRowSelected($event)">
</ag-grid-angular>

.buttons {
  margin-bottom: 10px;
}