Untitled
unknown
plain_text
8 days ago
2.7 kB
3
Indexable
Never
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>
Leave a Comment