上篇：Day07-Directives指令: 屬性指令-動態更改css

Angular 內建指令簡介

Angular 應用程式中的元素新增額外行為的類別。

３、結構型

Ngif

可以將 NgIf 指令應用於宿主元素來新增或刪除元素。

Ngif 是從 DOM 中刪除整個元素及其子樹，而非隱藏。

<!-- XXX.component.html -->
<button *ngIf="showButton">修改</button>   <!--顯示在頁面-->
<button *ngIf="!showButton">送出</button>  <!--無顯示在頁面-->

// XXX.component.ts
showButton: Boolean = true;

使用else

<!-- XXX.component.html -->
<div *ngIf="showButton; else elseBlock">
  <button>修改</button>   <!--顯示在頁面-->
</div>
<ng-template #elseBlock>
  <button>送出</button>   <!--無顯示在頁面-->
</ng-template>

// XXX.component.ts
showButton: Boolean = true;

Ngfor

為列表中的每個條目重複渲染一個節點。

// XXX.component.ts
friendslist = [
  {
    name: 'Amy',
    age: 25
  },
  {
    name: 'Betty',
    age: 45
  },
  {
    name: 'Cindy',
    age: 36
  }
]

<!-- XXX.component.html -->
<ul>
  <li *ngFor="let item of friendslist">
	{{item.name}} - {{item.age}}
  </li>
</ul>

結果：

• Amy - 25
• Betty - 45
• Cindy - 36

NgFor 內建定義的五個變數

延伸閱讀：[Angular2速成班]使用NgFor的5個特別變數，讓資料更有變化

<!-- XXX.component.html -->
<ul>
  <li *ngFor="let item of friendslist; let i=index">
	({{i + 1}}) {{item.name}} - {{item.age}}
  </li>
</ul>

結果：

• (1) Amy - 25
• (2) Betty - 45
• (3) Cindy - 36

NgSwitch

NgSwitch 會根據切換條件顯示幾個可能的元素中的一個。Angular 只會將選定的元素放入 DOM。

// XXX.component.ts
num: number= 0;

<!-- XXX.component.html -->
<input type='text' [(ngModel)]="num" />
<div [ngSwitch]="num">
  <div *ngSwitchCase="'1'">One</div>
  <div *ngSwitchCase="'2'">Two</div>
  <div *ngSwitchCase="'3'">Three</div>
  <div *ngSwitchCase="'4'">Four</div>
  <div *ngSwitchCase="'5'">Five</div>
  <div *ngSwitchDefault>This is Default</div>
</div>

資料來源

Angular - 內建指令 - 用 NgIf 新增或刪除元素
ngSwitch, ngSwitchcase, ngSwitchDefault Angular Example