GridDetailView

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

<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 in your component:

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

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

Properties

Property	Type	Description
showExpandColumn	InputSignal<boolean>	Whether to show the expand/collapse column. Default: true
animation	InputSignal<ExpandCollapseAnimation>	Animation style for expand/collapse. Default: ‘slide’
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: GridDetailView, ctx: unknown): ctx

Parameters

Name	Type	Description
dir	GridDetailView
ctx	unknown

---