ng-指令

在 Angular 中最常用的指令分為兩種，它們分別是 屬性型指令 和 結構型指令。

NgClass

• 作用：添加或移除一組 CSS 類

NgStyle

• 作用：添加或移除一組 CSS 樣式

NgModel

• 作用：雙向綁定到 HTML 表單元素

NgIf

• 作用：根據條件添加或移除 DOM
• 語法：

<div class="box" *ngIf="false">看不見我</div>

我們也可以通過類綁定或樣式綁定來顯示或隱藏一個元素。

<!-- isSpecial is true -->
<div [class.hidden]="!isSpecial">Show with class</div>
<div [class.hidden]="isSpecial">Hide with class</div>

<div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div>
<div [style.display]="isSpecial ? 'none'  : 'block'">Hide with style</div>

NgSwitch

• 作用：類似於 JavaScript 中的 switch 語句，根據條件渲染多個選項中的一個。
• 語法：該指令包括三個相互協作的指令：NgSwitch、NgSwitchCase、NgSwitchDefault

<div [ngSwitch]="currentHero.emotion">
  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="currentHero"></app-happy-hero>
  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="currentHero"></app-sad-hero>
  <app-confused-hero *ngSwitchCase="'confused'" [hero]="currentHero"></app-confused-hero>
  <app-unknown-hero  *ngSwitchDefault           [hero]="currentHero"></app-unknown-hero>
</div>

NgFor

• 作用：列表渲染
• 語法：

<div *ngFor="let hero of heroes">{{hero.name}}</div>

帶索引的 *ngFor

<ul>
  <li *ngFor="let item of todos; let i = index">{{ item.title + i }}</li>
</ul>

自定義指令

參考文檔：

• 屬性型指令：https://angular.io/guide/attribute-directives
• 結構型指令：https://angular.io/guide/structural-directives