Skip to main content

在 template 中建立 ng-template 並傳入資料

如果把 template 中的一小區,拉出來寫 ng-template,但還需要把不同的資料傳入渲染就可以用 NgTemplateOutLet 加上 ngTemplateOutletContext 這樣子就可以把資料傳到 template 上作使用。

NgTemplateOutLet 的 directive 使用方法

<ng-container [ngTemplateOutlet]="tableHeaderList" [ngTemplateOutletContext]="{ tableColumn: previousTableColumn }"></ng-container>
<ng-template #tableHeaderList let-tableColumn="tableColumn">
<ng-container *ngFor="let itemCol of tableColumn">
<th *ngIf="itemCol === 'part_no'">Part No.</th>
<th *ngIf="itemCol === 'image'" class="w-[110px]">Image</th>
<th *ngIf="itemCol === 'stock'">Stock</th>
<th *ngIf="itemCol === 'price'">Price</th>
<th *ngIf="itemCol === 'description'" class="min-w-[120px]">Description</th>
<th *ngIf="itemCol === 'datasheet'" class="w-[100px]">Datasheet</th>
<th *ngIf="itemCol === 'actions'" class="w-[120px]">Actions</th>
</ng-container>
</ng-template>