# GridColumnEditor

> _Since v0.1.0_

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

```html
<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:

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

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

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `template` | <code>Signal&lt;TemplateRef&lt;any&gt; &#124; undefined&gt;</code> | Query for the ng-template content child. |

## Methods

### ngTemplateContextGuard()

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

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

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `dir` | <code><a href="/grid/angular/api/utilities/gridcolumneditor/">GridColumnEditor</a></code> |  |
| `ctx` | <code>unknown</code> |  |

***