Untitled

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule, AgGridModule], // Import AgGridModule here
  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  // Declare the cell renderer here
  };

  // 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],  // Import FormsModule for ngModel
})
export class DropdownCellRenderer implements ICellRendererAngularComp {  // Implement ICellRendererAngularComp
  params: any;
  options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'];

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

  refresh(params: any): boolean {
    this.params = params;
    return true;
  }

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