Вы можете сделать это, создав пользовательский редактор ячеек.
Компонент:
drop.down.editor.ts
import {AfterViewInit, Component, ViewChild, ViewContainerRef} from "@angular/core";
import {ICellEditorAngularComp} from "ag-grid-angular";
@Component({
selector: 'dropdown-cell-editor',
templateUrl: "drop.down.editor.html"
})
export class DropDownEditor implements ICellEditorAngularComp, AfterViewInit {
private params: any;
public value: number;
private options: any;
@ViewChild('input', {read: ViewContainerRef}) public input;
agInit(params: any): void {
this.params = params;
this.value = this.params.value;
this.options = params.options;
}
getValue(): any {
return this.value;
}
ngAfterViewInit() {
window.setTimeout(() => {
this.input.element.nativeElement.focus();
})
}
}
drop.down.editor.html
<select #input [(ngModel)]="value">
<option *ngFor="let item of options" value="{{item.value}}">{{item.name}}</option>
</select>
, затем добавьте объявление модуля
@NgModule({
imports: [ ... , AgGridModule.withComponents( [DropDownEditor]) ],
declarations: [ ..., DropDownEditor ]
})
, затем используйте его в определении столбца
{
headerName: "Drop down",
field: "dropdown",
cellEditorFramework: DropDownEditor,
editable: true,
cellEditorParams: {
options: [{
name: "First Option",
value: 1
},
{
name: "Second Option",
value: 2
}
]
}
}
Полный пример здесь