FlexRenderDirective
Defined in: packages/angular-table/src/flexRender.ts:84
Use this utility directive to render headers, cells, or footers with custom markup.
Note: If you are rendering cell, header, or footer without custom context or other props, you can use the FlexRenderCell directive as shorthand instead .
Example#
import {FlexRender} from '@tanstack/angular-table';
@Component({
imports: [FlexRender],
template: `
<td
*flexRender="
cell.column.columnDef.cell;
props: cell.getContext();
let cell"
>
{{cell}}
</td>
<th
*flexRender="
header.column.columnDef.header;
props: header.getContext();
let header"
>
{{header}}
</td>
<td
*flexRender="
footer.column.columnDef.footer;
props: footer.getContext();
let footer"
>
{{footer}}
</td>
`,
})
class App {
}Can be imported through FlexRenderDirective or FlexRender, with the latter preferred.
Type Parameters#
TFeatures#
TFeatures extends TableFeatures
TRowData#
TRowData extends RowData
TValue#
TValue extends CellData
TProps#
TProps extends | NonNullable<unknown> | CellContext<TFeatures, TRowData, TValue> | HeaderContext<TFeatures, TRowData, TValue>
Constructors#
Constructor#
new FlexRenderDirective<TFeatures, TRowData, TValue, TProps>(): FlexRenderDirective<TFeatures, TRowData, TValue, TProps>;Defined in: packages/angular-table/src/flexRender.ts:109
Returns#
FlexRenderDirective<TFeatures, TRowData, TValue, TProps>
Properties#
content#
readonly content: InputSignal<FlexRenderInputContent<TProps>>;Defined in: packages/angular-table/src/flexRender.ts:93
injector#
readonly injector: InputSignal<Injector>;Defined in: packages/angular-table/src/flexRender.ts:102
props#
readonly props: InputSignal<TProps>;Defined in: packages/angular-table/src/flexRender.ts:98