# GridDetailView

> _Since v0.1.0_

Directive that captures an `<ng-template>` for use as a master-detail row renderer.

This enables declarative Angular component usage for expandable detail rows
that appear below the main row when expanded.

## Usage

```html
<tbw-grid [rows]="rows" [gridConfig]="config">
  <tbw-grid-detail [showExpandColumn]="true" animation="slide">
    <ng-template let-row>
      <app-detail-panel [employee]="row" />
    </ng-template>
  </tbw-grid-detail>
</tbw-grid>
```

The template context provides:
- `$implicit` / `row`: The full row data object

Import the directive from the master-detail feature entry:

```typescript
import { GridDetailView } from '@toolbox-web/grid-angular/features/master-detail';

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

&gt; Note: `GridDetailView` is also re-exported from `@toolbox-web/grid-angular`
&gt; for backwards compatibility, but that re-export is deprecated and will be
&gt; removed in v2.0.0. Always import from the feature entry.

#### Example

```html
<tbw-grid [rows]="rows" [gridConfig]="config">
  <tbw-grid-detail [showExpandColumn]="true" animation="slide">
    <ng-template let-row>
      <app-detail-panel [employee]="row" />
    </ng-template>
  </tbw-grid-detail>
</tbw-grid>
```

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `showExpandColumn` | <code>InputSignal&lt;boolean&gt;</code> | Whether to show the expand/collapse column. Default: true |
| `animation` | <code>InputSignal&lt;<a href="/grid/api/core/types/expandcollapseanimation/">ExpandCollapseAnimation</a>&gt;</code> | Animation style for expand/collapse. Default: 'slide' |
| `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: GridDetailView, ctx: unknown): ctx
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `dir` | <code><a href="/grid/angular/api/directives/griddetailview/">GridDetailView</a></code> |  |
| `ctx` | <code>unknown</code> |  |

***