CellEditor

Since v0.11.0

Interface for cell editor components.

Editor components receive the cell value, row data, and column config as inputs, plus must emit commit and cancel outputs.

Example

import { Component, input, output } from '@angular/core';
import type { CellEditor } from '@toolbox-web/grid-angular';

@Component({
  selector: 'app-status-editor',
  template: `
    <select [value]="value()" (change)="commit.emit($any($event.target).value)">
      <option value="active">Active</option>
      <option value="inactive">Inactive</option>
    </select>
  `
})
export class StatusEditorComponent implements CellEditor<Employee, string> {
  value = input.required<string>();
  row = input.required<Employee>();
  column = input<unknown>();
  commit = output<string>();
  cancel = output<void>();
}

Properties

Property	Type	Description
value	() => TValue | undefined	The cell value - use input<TValue>() or input.required<TValue>()
row	() => TRow | undefined	The full row data - use input<TRow>() or input.required<TRow>()
column?	() => unknown	The column configuration (optional) - use input<unknown>()
commit	{ emit: unknown; subscribe?: unknown }	Emit to commit the new value - use output<TValue>()
cancel	{ emit: unknown; subscribe?: unknown }	Emit to cancel editing - use output<void>()