GridResponsiveCard

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

<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	InputSignal<number | auto | undefined>	Card row height in pixels. Use 'auto' for dynamic height based on content.
template	Signal<TemplateRef<any> | undefined>	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.

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

Parameters

Name	Type	Description
_directive	GridResponsiveCard<T>
context	unknown

---