# GridToolbarContent

> _Since v1.7.0_

Declarative wrapper around the grid's imperative
ShellPlugin.registerToolbarContent API.

Captures an `<ng-template>` and mounts it as an Angular embedded view into
the slot the grid provides for toolbar content. Must be a child of
`<tbw-grid>`.

Prefer this over `<tbw-grid-tool-buttons>` (light DOM) when you need
Angular template bindings to component state. Use the light-DOM form for
static markup that should be moved verbatim into the toolbar.

## Usage

```html
<tbw-grid [rows]="rows" [gridConfig]="config">
  <tbw-grid-toolbar-content id="calendar-nav" [order]="0">
    <ng-template let-grid>
      <app-toolbar-nav (prev)="prev()" (today)="today()" (next)="next()" />
    </ng-template>
  </tbw-grid-toolbar-content>
</tbw-grid>
```

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `id` | <code>InputSignal&lt;string &#124; undefined&gt;</code> |  |
| `order` | <code>InputSignal&lt;number&gt;</code> |  |
| `template` | <code>Signal&lt;TemplateRef&lt;any&gt; &#124; undefined&gt;</code> |  |

## Methods

### ngTemplateContextGuard()

```ts
ngTemplateContextGuard(_dir: GridToolbarContent, ctx: unknown): ctx
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `_dir` | <code><a href="/grid/angular/api/directives/gridtoolbarcontent/">GridToolbarContent</a></code> |  |
| `ctx` | <code>unknown</code> |  |

***