結構型指令 (Structural Directives)

• Angular 使用結構化指令操作 DOM
• 具有重塑 DOM 結構的能力
• 使用 * 為字首

指令	用法
*ngFor	重複顯示每一個單項
*ngIf	以條件控制項目的顯示與否
*ngSwitch	只會有一個符合條件之項目被顯示

Code

*ngFor*ngIf*ngSwitch

參考 u2347 中 mod04 app.component.html

<ul>
    <li *ngFor="let r of routeList">
        <a [routerLink]="[r.path]">{{r.title ? r.title : ""}}</a>
    </li>
</ul>

參考 u2347 中 mod04 app.component.html

<h3 [ngStyle] = "resultStyles" *ngIf = "isTouch">
    <ng-container *ngIf = "isFound; else notFound">
        找到了 {{mySearch}} !!
    </ng-container>
    <ng-template #notFound> 沒找到ㄋㄟ </ng-template>
</h3>

參考 u2347 中 mod04 page7.component.html

<div class = "col">
    <ng-container [ngSwitch] = "st.birthday.getMonth()">
        <span *ngSwitchCase = "thisMonth" style = "color: red">
        本月壽星</span>
        <span *ngSwitchCase = "thisMonth +1" style = "color: blue">
        生日快到了</span>
        <span *ngSwitchDefault style = "font-size: x-small">
        再等等</span>
    </ng-container>
</div>