ngIf
true => Host div 會被加入 HTML 元素中
false => Host div 會被排除在 HTML 元素外
<div *ngIf="needShow(4)" class="bg-info p-2 mt-1"> Check need to show if pass 4 </div>
<div *ngIf="doNotShow()" class="bg-info p-2 mt-1"> Expect do not show this element </div>

ngSwitch
一樣，只有符合條件的元素會被加入 HTML 元素中。
不過 ngSwitch 的 host 元素會永遠存在於 HTML 中。
<div class="bg-info p-2 mt-1" [ngSwitch]="howManyPeople()"> 
    <span *ngSwitchCase="2">There are two people</span> 
    <span *ngSwitchCase="5">There are five people</span> 
    <span *ngSwitchDefault>This is the default</span> 
</div>

比較字串的時候需要雙引號
<div class="bg-info p-2 mt-1" [ngSwitch]="whatIsYourName()">
    <span *ngSwitchCase="'Anderson'">I know you!!</span>
    <span *ngSwitchCase="'QQ'">Hi, nice to meet you</span>
    <span *ngSwitchDefault>Hello?</span>
</div>

ngFor
對陣列中的每個物件重複一段內容，相當於 template 版的 foreach 迴圈。
Template 變數: index (從零開始的數字), odd (布林值), even (布林值), first (布林值), last (布林值)
<tr *ngFor="let item of getProducts(); let i = index; let odd = odd; let even = even"> 
    <td></td> 
    <td></td>
    <td></td> 
</tr>

由於 ngFor 需要 iterate data, 當 data source 改變的時候, ngFor 需要重新跑一次 data source 會讓效能變差.
為了提升效能, 可以在 component 訂一個 method, 例如 getKey (注意 signature 第一個參數是 index, 第二個參數是 object), 然後在 ngFor 裡面定義 trackBy:getKey, 如此就能讓 ngFor 了解雖然是從 data source 拿到新的物件, 但其實是同一筆資料
  1. 定義 getKey method
import { ApplicationRef, Component } 
from "@angular/core"; 
import { Model } from "./repository.model"; 
import { Product } from "./product.model"; 
@Component({ 
    selector: "app", 
    templateUrl: "template.html" 
})
export class ProductComponent { 
model: Model = new Model(); 
    // ...constructor and methods omitted for brevity... 

    getKey(index: number, product: Product) { 
        return product.id; 
    } 
}
  1. 定義 trackBy:getKey
<tr *ngFor="let item of getProducts();let i = index;let odd = odd;let even = even;trackBy:getKey">
    <td></td>
    <td></td>
    <td></td>
</tr>

ngTemplateOutlet
用來在指定的位置重複輸出一段內容
  1. 定義一個 template 跟它的內容
<ng-template #myTemplate> 
    <div>Hello</dic>
</ng-template>

  1. 輸出這個 template
<ng-template [ngTemplateOutlet]="myTemplate"></ng-template>
<div>KKKKK</div>
<ng-template [ngTemplateOutlet]="myTemplate"></ng-template>

提供 Context 資料綁定
  1. 定義帶有 context 的 template。這裡定義了 "text" 變數，它的值會是 "title" 表達式的結果
    (用 let- 來定義變數)
<ng-template #myTemplate let-text="title"> 
    <h4 class="p-2 bg-success text-white"></h4> 
</ng-template>

  1. 使用定義好的 template 並提供綁定的資料
<ng-template [ngTemplateOutlet]="myTemplate" [ngTemplateOutletContext]="{title: 'Header'}"> </ng-template>


要注意的事
  1. 表達式必須是冪等的 (idempotent)
  2. 不能存取 template component 以外定義的物件，特別是不能存取 global namespace。
  3. Global namespace 必須由 component 提供，代表 template 來存取
import { ApplicationRef, Component }
from "@angular/core";
import { Model } from "./repository.model";
import { Product } from "./product.model";
@Component({
    selector: "app",
    templateUrl: "template.html"
})
export class ProductComponent {
model: Model = new Model();
    // ...constructor and methods omitted for brevity...

    getNumber(): number {
        return Math.floow(1); // The Math can't be accessed by template
    }

    getKey(index: number, product: Product) {
        return product.id;
    }
}


You May Also Enjoy