# GridResponsiveCard

> _Since v0.4.0_

Directive for providing custom Angular templates for responsive card layout.

Use this directive to define how each row should render when the grid
is in responsive/mobile mode. The template receives the row data and index.

## Usage

```html
<tbw-grid [rows]="employees">
  <tbw-grid-responsive-card>
    <ng-template let-employee let-idx="index">
      <div class="employee-card">
        <img [src]="employee.avatar" alt="">
        <div class="info">
          <strong>{{ employee.name }}</strong>
          <span>{{ employee.department }}</span>
        </div>
      </div>
    </ng-template>
  </tbw-grid-responsive-card>
</tbw-grid>
```

## Important Notes

- The ResponsivePlugin must be added to your grid config
- The Grid directive will automatically configure the plugin's cardRenderer
- Template context provides `$implicit` (row), `row`, and `index`

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `cardRowHeight` | <code>InputSignal&lt;number &#124; auto &#124; undefined&gt;</code> | Card row height in pixels. Use `'auto'` for dynamic height based on content. |
| `template` | <code>Signal&lt;TemplateRef&lt;any&gt; &#124; undefined&gt;</code> | The ng-template containing the card content. |

### Property Details

#### cardRowHeight

Card row height in pixels. Use `'auto'` for dynamic height based on content.

Mirrors to the `card-row-height` attribute on the underlying
`<tbw-grid-responsive-card>` element which the ResponsivePlugin reads.

**Default:** `'auto'`

---

## Methods

### ngTemplateContextGuard()

Type guard for template context inference.

```ts
ngTemplateContextGuard(_directive: GridResponsiveCard<T>, context: unknown): context
```

#### Parameters

| Name | Type | Description |
| ---- | ---- | ----------- |
| `_directive` | <code><a href="/grid/angular/api/directives/gridresponsivecard/">GridResponsiveCard</a>&lt;T&gt;</code> |  |
| `context` | <code>unknown</code> |  |

***