GridColumnEditor

Directive that captures an <ng-template> for use as a cell editor.

This enables declarative Angular component usage with proper input bindings that satisfy Angular’s AOT compiler.

Usage

<tbw-grid-column field="status" editable>
  <tbw-grid-column-editor>
    <ng-template let-value let-row="row" let-onCommit="onCommit" let-onCancel="onCancel">
      <app-status-select
        [value]="value"
        [row]="row"
        (commit)="onCommit($event)"
        (cancel)="onCancel()"
      />
    </ng-template>
  </tbw-grid-column-editor>
</tbw-grid-column>

The template context provides:

• $implicit / value: The cell value
• row: The full row data object
• column: The column configuration
• onCommit: Callback function to commit the new value
• onCancel: Callback function to cancel editing

Import the directive in your component:

import { GridColumnEditor } from '@toolbox-web/grid-angular';

@Component({
  imports: [GridColumnEditor],
  // ...
})

Properties

Property	Type	Description
template	Signal<TemplateRef<any> | undefined>	Query for the ng-template content child.

Methods

ngTemplateContextGuard()

Static type guard for template context. Enables type inference in templates.

ngTemplateContextGuard(dir: GridColumnEditor, ctx: unknown): ctx

Parameters

Name	Type	Description
dir	GridColumnEditor
ctx	unknown

---