GridToolPanel

Directive that captures an <ng-template> for use as a custom tool panel.

This enables declarative Angular component usage for tool panels that appear in the grid’s side panel.

Usage

<tbw-grid [rows]="rows" [gridConfig]="config">
  <tbw-grid-tool-panel
    id="quick-filters"
    title="Quick Filters"
    icon="🔍"
    tooltip="Apply quick filters"
    [order]="10"
  >
    <ng-template let-grid>
      <app-quick-filters [grid]="grid" />
    </ng-template>
  </tbw-grid-tool-panel>
</tbw-grid>

The template context provides:

• $implicit / grid: The grid element reference

Attributes

• id (required): Unique identifier for the panel
• title (required): Panel title shown in accordion header
• icon: Icon for accordion section header (emoji or text)
• tooltip: Tooltip for accordion section header
• order: Panel order priority (lower = first, default: 100)

Import the directive in your component:

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

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

Properties

Property	Type	Description
id	InputSignal<string>	Unique panel identifier (required)
title	InputSignal<string>	Panel title shown in accordion header (required)
icon	InputSignal<string | undefined>	Icon for accordion section header (emoji or text)
tooltip	InputSignal<string | undefined>	Tooltip for accordion section header
order	InputSignal<number>	Panel order priority (lower = first, default: 100)
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: GridToolPanel, ctx: unknown): ctx

Parameters

Name	Type	Description
dir	GridToolPanel
ctx	unknown

---