簡單講 Directives 就是 指示 DOM 如何做操作，而其操作又區分為改變屬性以及針對 DOM 做操作
例如:

*ngIf

<p *ngIf="serverCreated">Server was created, server name is Blue Gene</p>

ng-template

假如要透過 if else 方式顯示其他的 DOM，可以這樣做

<p *ngIf="serverCreated; else noServer">Server was created, server name is Blue Gene</p>
<ng-template #noServer>No Server was created!</ng-template>

ngStyle 動態產生 Style

設定 DOM 指定的 CSS 屬性，可以為 value，或是 可以使用 使用 Object literal

方式一 [style.] = "value"

[style.background-color]= "'yellow'"
[style.fon-size.px] = "16"
[style.background-color]="bgColor"，bgColor 為 Component 的 Attribute
[style.background-color]="getColor()"，getColor() 為 Component 的 Function()

方式二 使用 Object literal 設定 css 屬性

[ngStyle]=“{color: ‘white’, ‘background-color’: ‘blue’}”
[ngStyle]=“divTitleStyle”，divTitleStyle 為 Object literal Attribute，Key為樣式，Value為樣式值。

除了上述方法，你也可以自己客制 Directives

<p appTurnGreen>Receives a green background!</p>

上面的Code代表我指示了 p 這個 DOM 物件將裡面的文字背景變為綠色。

而上面的 Directives 實際如何撰寫呢?

如下所示:

@Directive({
  selector:'[appTurnGreen]''
})
export class TurnGreenDirective{

}

其 Directive 是透過 selector 去決定在哪一個 DOM上作用

參考

1. 【Angular】NgStyle & NgClass
2. [功能介紹-6] Attribute Directives