# GridToolPanel

> _Since v0.1.0_

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

```html
<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:

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

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

#### Example

```html
<tbw-grid [rows]="rows">
  <tbw-grid-tool-panel id="quick-filters" title="Quick Filters" icon="\uD83D\uDD0D">
    <ng-template let-grid>
      <app-quick-filters [grid]="grid" />
    </ng-template>
  </tbw-grid-tool-panel>
</tbw-grid>
```

## Properties

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

#### Parameters

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

***