@absoluteui/angular/templates

Structural directives that render Angular templates inside components: items, selected items, cells, row details, headers, group headers, empty states, and editors.

import { AuiCell, AuiRowDetail, AuiItem, AuiSelectedItem, AuiHeader, AuiEmpty, AuiGroupHeader, AuiEditor } from '@absoluteui/angular/templates';

ng-template[auiCell]

Class AuiCell.

Cell template for one column of <aui-data-table>: <ng-template auiCell="name" let-row>, or <ng-template auiCell let-row> inside <aui-column>.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
auiCell	string		Column id; leave it empty inside <aui-column>, which owns the template.
auiCellOf	readonly Row[] | null		Types the context only: the rows bound to the table.

ng-template[auiRowDetail]

Class AuiRowDetail.

Row detail template of <aui-data-table> (expandable rows): <ng-template auiRowDetail let-row>.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
auiRowDetailOf	readonly Row[] | null		Types the context only: the rows bound to the table.

ng-template[auiItem]

Class AuiItem.

Item template: menu items (button[auiMenu], [auiContextMenu], <aui-menu-bar>), Kanban cards (<aui-kanban>), Org Chart nodes (<aui-org-chart>), Scheduler events (<aui-scheduler>): <ng-template auiItem [auiItemOf]="cards" let-card let-ctx="context">.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
auiItemOf	readonly Item[] | null		Types the context only: the items bound to the component.

ng-template[auiSelectedItem]

Class AuiSelectedItem.

Content shown for the selected option of <aui-select>: <ng-template auiSelectedItem let-option>.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
auiSelectedItemOf	readonly Item[] | null		Types the context only: the options bound to the select.

ng-template[auiHeader]

Class AuiHeader.

Header content of a <aui-data-table> column (decorative: the header text stays the accessible name): <ng-template auiHeader="salary" let-header="header">, or without an id inside <aui-column>.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
auiHeader	string		Column id; leave it empty inside <aui-column>.

ng-template[auiEmpty]

Class AuiEmpty.

Empty state of <aui-data-table> (replaces emptyMessage): <ng-template auiEmpty>.

Server rendering: Renders in the browser only; on the server the element stays empty.

ng-template[auiGroupHeader]

Class AuiGroupHeader.

Group header content of <aui-data-table [groupBy]> (decorative: the toggle keeps the default text as its name): <ng-template auiGroupHeader [auiGroupHeaderOf]="rows" let-group>.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
auiGroupHeaderOf	readonly Row[] | null		Types the context only: the rows bound to the table.

ng-template[auiEditor]

Class AuiEditor.

Custom inline editor of an editable <aui-data-table> column: <ng-template auiEditor let-value let-commit="commit" let-cancel="cancel"> inside <aui-column editable> (or auiEditor="columnId" at table level). Call commit(value) or cancel().

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
auiEditor	string		Column id; leave it empty inside <aui-column>.
auiEditorOf	readonly Row[] | null		Types the context only: the rows bound to the table.

Functions, constants, and types

Interfaces

AuiCellContext

Context of a cell template: the row, and the column id.

interface AuiCellContext<Row> {
  readonly $implicit: Row;
  readonly row: Row;
  readonly column: string;
}

AuiEditorContext

Context of an editor template: the value being edited and how to finish.

interface AuiEditorContext<Row> {
  readonly $implicit: unknown;
  readonly value: unknown;
  readonly row: Row;
  readonly column: string;
  readonly error: string | null;
  commit(value: unknown): void;
  cancel(): void;
}

AuiGroupHeaderContext

Context of a group header template.

interface AuiGroupHeaderContext<Row> {
  readonly $implicit: DataTableGroup<Row>;
  readonly group: DataTableGroup<Row>;
}

AuiHeaderContext

Context of a header template: the column.

interface AuiHeaderContext {
  readonly $implicit: string;
  readonly column: string;
  readonly header: string;
}

AuiItemContext

Context of an item template (Kanban card, Org Chart node, Scheduler event): the item and the component’s render context.

interface AuiItemContext<Item, Extra = unknown> {
  readonly $implicit: Item;
  readonly item: Item;
  readonly context: Extra;
}

AuiRowDetailContext

Context of a row detail template.

interface AuiRowDetailContext<Row> {
  readonly $implicit: Row;
  readonly row: Row;
}

AuiSelectedItemContext

Context of a selected item template: the selected option.

interface AuiSelectedItemContext<Item> {
  readonly $implicit: Item;
  readonly item: Item;
}