Angular templates in cells
Render cells with Angular <ng-template>s instead of HTML strings: pipes, routerLink and (click) handlers work with full Angular context. Sorting and global search still use the raw column data, not the rendered markup.
| Name | Office | Salary |
|---|
<!-- Each column (configured in the .ts) points at one of these <ng-template>s by name. -->
<table dtTable [dtData]="people" [dtColumns]="columns()" class="display">
<thead>
<tr><th>Name</th><th>Salary</th><th></th></tr>
</thead>
</table>
<!--
Every cell template receives two values:
let-value -> the cell's value (the column's `data` field)
let-row="row" -> the whole row object, so you can read other fields like row.id
-->
<!-- Name: a link to this row's detail page, built from the row's id. -->
<ng-template #nameTpl let-value let-row="row">
<a [routerLink]="['/users', row.id]">{{ value }}</a>
</ng-template>
<!-- Salary: the raw number formatted with Angular's currency pipe. -->
<ng-template #salaryTpl let-value>
{{ value | currency }}
</ng-template>
<!-- Actions: a button that calls a component method with the whole row. -->
<ng-template #actionsTpl let-row="row">
<button type="button" (click)="view(row)">View</button>
</ng-template>