Untitled

component.ts

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AgGridAngular } from 'ag-grid-angular';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,  // This makes the component standalone
  imports: [CommonModule, FormsModule, AgGridAngular],  // Import necessary modules
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Define column definitions
  columnDefs = [
    { headerName: 'Column 1', field: 'col1', cellRenderer: 'dropdownCellRenderer' },
    { headerName: 'Column 2', field: 'col2', cellRenderer: 'dropdownCellRenderer' },
    { headerName: 'Column 3', field: 'col3', cellRenderer: 'dropdownCellRenderer' },
    { headerName: 'Column 4', field: 'col4', cellRenderer: 'dropdownCellRenderer' },
    { headerName: 'Column 5', field: 'col5', cellRenderer: 'dropdownCellRenderer' },
    { headerName: 'Column 6', field: 'col6', cellRenderer: 'dropdownCellRenderer' },
    { headerName: 'Column 7', field: 'col7', cellRenderer: 'dropdownCellRenderer' },
  ];

  // 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 = {
    dropdownCellRenderer: 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 a row
  removeRow() {
    if (this.rowData.length > 0) {
      this.rowData.pop();
      this.rowData = [...this.rowData];
    }
  }
}

// Dropdown cell renderer component
@Component({
  selector: 'dropdown-cell-renderer',
  standalone: true,
  template: `
    <select [(ngModel)]="params.value" (change)="onValueChanged($event)">
      <option *ngFor="let option of options" [value]="option">{{option}}</option>
    </select>
  `,
  imports: [FormsModule],
})
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);
  }
}



.hyml
<div class="buttons">
  <button (click)="addRow()">Add Row</button>
  <button (click)="removeRow()">Remove Last Row</button>
</div>

<ag-grid-angular
  style="width: 100%; height: 500px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [frameworkComponents]="frameworkComponents">
</ag-grid-angular>