Angular Data Grid Editor
RevoGrid provides a way to render native components as editor.
TIP
You can access close and save callbacks in properties. Check editor and EditorCtr type for more.
Native Editor Component - Angular Data Grid
Editor as standalone component
First we need to create a custom editor component.
ts
// editor.component.ts
import { Component, Input } from "@angular/core";
import { type EditorType } from "@revolist/angular-datagrid";
@Component({
selector: "app-editor",
standalone: true,
template: '<button (click)="testClick()">{{ props.val }} close!</button>',
})
export class EditorComponent {
@Input() props!: EditorType;
testClick() {
this.props.close();
}
}Grid Component and Editor
Next, let's create standalone component that will be used to render the grid. Now we can render the grid with the custom editor component.
ts
// app.component.ts
import { Component } from "@angular/core";
import {
RevoGrid,
Editor,
type Editors,
type ColumnRegular,
} from "@revolist/angular-datagrid";
import { EditorComponent } from "./editor.component";
const MY_EDITOR = "custom-editor";
@Component({
selector: "app-root",
standalone: true,
imports: [RevoGrid, EditorComponent],
template: `<revo-grid
style="height: 200px; width: 200px"
[columns]="columns"
[source]="source"
[editors]="editors"
></revo-grid>`,
})
export class AppComponent {
source = [
{
name: "1",
details: "Item 1",
},
{
name: "2",
details: "Item 2",
},
];
columns: ColumnRegular[] = [
{
prop: "name",
name: "First",
// define editor
editor: MY_EDITOR,
},
{
prop: "details",
name: "Second",
},
];
// provide editor classes
editors: Editors = { [MY_EDITOR]: Editor(EditorComponent) };
}