# CellRenderer

> _Since v0.11.0_

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

```typescript
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` | <code>() =&gt; TValue &#124; undefined</code> | The cell value - use `input<TValue>()` or `input.required<TValue>()` |
| `row` | <code>() =&gt; TRow &#124; undefined</code> | The full row data - use `input<TRow>()` or `input.required<TRow>()` |
| `column?` | <code>() =&gt; unknown</code> | The column configuration (optional) - use `input<unknown>()` |