CellRenderer

Interface for cell renderer components.

Renderer components receive the cell value, row data, and column config as inputs. Use Angular signal inputs for reactive updates.

Example

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

@Component({
  selector: 'app-status-badge',
  template: `<span [class]="'badge-' + value()">{{ value() }}</span>`
})
export class StatusBadgeComponent implements CellRenderer<Employee, string> {
  value = input.required<string>();
  row = input.required<Employee>();
  column = input<unknown>();
}

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>()