在 Angular 中有三種類型的指令：

元件 — 擁有模板的指令。
結構型指令 — 通過新增和移除 DOM 元素改變 DOM 佈局的指令。
屬性型指令 — 改變元素、元件或其它指令的外觀和行為的指令。

屬性型指令

屬性型指令至少需要一個帶有 @Directive 裝飾器的控制器類。該裝飾器指定了一個用於標識屬性的選擇器。 控制器類實現了指令需要的指令行為。

建立方式

例如建立一個highlight

結構型指令

NgIf

該指令用於根據表示式的值，動態控制模板內容的顯示與隱藏。
它與 AngularJS 1.x 中的 ng-if 指令的功能是等價的。

語法

<div *ngIf="condition">...</div>

NgFor

該指令用於基於可迭代物件中的每一項建立相應的模板。
它與 AngularJS 1.x 中的 ng-repeat 指令的功能是等價的。

語法

<li *ngFor="let item of items;">...</li>

NgSwitch

Angular 的 NgSwitch 實際上是一組相互合作的指令：NgSwitch、NgSwitchCase 和 NgSwitchDefault。
一個值(hero.emotion)被被賦值給了 NgSwitch，以決定要顯示哪一個分支。

NgSwitch 本身不是結構型指令，而是一個屬性型指令，它控制其它兩個 switch 指令的行為。 這也就是要寫成 [ngSwitch] 而不是 *ngSwitch 的原因。

NgSwitchCase 和 NgSwitchDefault 都是結構型指令，因此要使用星號（*）字首來把它們附著到元素上。
NgSwitchCase 會在它的值匹配上選項值的時候顯示它的宿主元素。
NgSwitchDefault 則會當沒有兄弟。
NgSwitchCase 匹配上時顯示它的宿主元素。

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

寫法

指令同時具有兩種拼寫形式大駝峰和小駝峰，比如NgIf 和 ngIf。 這裡的原因在於，NgIf 引用的是指令的類名，而 ngIf 引用的是指令的屬性名。
指令的類名拼寫成大駝峰形式（NgIf），而它的屬性名則拼寫成小駝峰形式（ngIf）。

星號（*）

指令前加星號，是一個語法糖。
從內部實現來說，Angular 把 *ngIf 屬性 翻譯成一個 <ng-template> 元素 並用它來包裹宿主元素。
比如下面的例子

<div *ngIf="hero" class="name">{{hero.name}}</div>

angular會將它翻譯成

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>