Editor as native component

We provide 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.

Editor as standalone component

First we need to create a custom editor component.

// 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.

// 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) };
}