Angular提供了一些內置指令(directive)，這些添加在HTML元素(element)上的特性(attribute)可以賦予更多的動態行為。

NgIf

ngIf指令用於在某個條件下顯示或者隱藏元素，該條件取決於傳入指令的表達式的結果。

<div *ngIf="false"></div> <!-- 永遠不顯示 -->
<div *ngIf="a > b"></div> <!-- a大於b時顯示 -->
<div *ngIf="str == ‘yes‘"></div> <!-- str等於"yes"時顯示 -->
 

<div *ngIf="myFunc()"></div> <!-- myFunc返回true時顯示 -->

NgSwitch

ngSwitch指令用於處理更復雜的顯示邏輯。

<div class="container" [ngSwitch]="myVar">
<div *ngSwitchCase="‘A‘">Var is A</div>
<div *ngSwitchCase="‘B‘">Var is B</div>
<div *ngSwitchCase="‘C‘">Var is C</div>
 

<div *ngSwitchDefault>Var is something else</div>
</div>

ngSwitchDefault為可選項，如果不加上它，且找不到匹配項時，沒有內容將在頁面上渲染出來。

NgStyle

ngStyle指令最簡潔的方式是[style.<cssproperty>]="value"這樣的形式。

<div [style.background-color]="‘yellow‘">
  Uses fixed yellow background
</div>

另一種方法，采用了鍵值組合的形式：

<div
 
 [ngStyle]="{color: ‘white‘, ‘background-color‘: ‘blue‘}">
  Uses fixed white text on blue background
</div>

NgClass

ngClass指令也是一種設置樣式的方式，同樣也有兩種設置辦法。
第一種是傳遞對象字面量(object literal)，對象的鍵是樣式的類名，值為布爾類型，指明是否應用樣式類。

.bordered {
  border: 1px dashed black;
  background-color: #eee; 
}

<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div>

另一種是直接指定樣式類名。

<div class="base" [ngClass]="[‘blue‘, ‘round‘]">
  This will always have a blue background and
  round corners
</div>

ngClass中添加的樣式類會與HTML的class特性中已有樣式合並，成為最終的‘class‘結果。

NgFor

ngFor指令用於叠代集合項，其語法為*ngFor="let item of items"。
let item語法指定每次叠代的元素，items是集合項。
ngFor指令中的集合項可以是對象的數組。

this.people = [
  { name: ‘Anderson‘, age: 35, city: ‘Sao Paulo‘ },
  { name: ‘John‘, age: 12, city: ‘Miami‘ },
  { name: ‘Peter‘, age: 22, city: ‘New York‘ }
];

同時還支持嵌套：

<h4 class="ui horizontal divider header">
  Nested data
</h4>

<div *ngFor="let item of peopleByCity">
  <h2 class="ui header">{{ item.city }}</h2>

  <table class="ui celled table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
    </thead>
    <tr *ngFor="let p of item.people">
      <td>{{ p.name }}</td>
      <td>{{ p.age }}</td>
    </tr>
  </table>
</div>

在要獲得索引的場合下，只需要稍加變化。

<div class="ui list" *ngFor="let c of cities; let num = index">
  <div class="item">{{ num+1 }} - {{ c }}</div>
</div>

NgNonBindable

ngNonBindable指令負責通知Angular，頁面上的某塊區域不用額外編譯。

<div class=‘ngNonBindableDemo‘>
  <span class="bordered">{{ content }}</span>
  <span class="pre" ngNonBindable>
  &larr; This is what {{ content }} rendered
  </span>
</div>

上述例子中，第二個span區塊裏的內容不會被Angualr編譯。

ng-book劄記——內置指令