在上一篇文章中我們學到了如何自訂CSS class，今天我們來學習透過ngClass來為畫面動態的加入或移除class。
使用NgClass
NgClass可以幫助我們依照需要的條件加入不同的class，我們可以使用[ngClass]=...的方式來決定HTML element要加入哪些class。ngClass後面可以接三種類型的參數，前兩種比較簡單：
1. 字串：例如[ngClass]="'classA, classB'"
2. 陣列：例如[ngClass]="['classA', 'classB']"
這兩種方式都能夠將後面的class加入HTML element中，但其實跟我們直接使用class="classA classB"沒什麼不一樣，但可以透過後與對應的Component程式連動，讓class能夠動態改變；例如我們上一篇文章HTML有一段
<div>
<span class="blue">TodoItemsComponent中測試blue class</span>
</div>
我們可以改成
<div>
<span [ngClass]="getBlueClass()">TodoItemsComponent中測試blue class</span>
</div>
接著在對應Component中加入getBlueClass()方法
getBlueClass() {
// 這裡可以用程式動態決定要回傳字串、陣列或物件
return 'blue';
}
結果就會完全一樣。
而第三種使用物件的方式，則可以讓我們依照條件決定是否要加入某個class
3. 物件：例如[ngClass]="{'classA': true, 'classB': false}"
在這邊我們加入的JSON物件，物件中的屬性名稱是我們要加入的class，屬性的值則是一個boolean，如果為true，則這個class會加入element中；若為false，則不會加入。
例如我們之前的TodoItemsComponent裡面我們希望勾選完成的項目後可以加上刪除線，我們可以先在src/app/todo-items/todo-items.component.css加入一個class
.done {
text-decoration: line-through;
}
然後把src/app/todo-items/todo-items.compontnt.html的checkbox部分改成
<input id="chk_{{item.id}}" type="checkbox" [checked]="item.done" (click)="itemClick(item)">
<span [ngClass]="{'done' : item.done}">{{ item.value }}</span>
因此當項目被鉤選時（也就是item.done為true時），就會加入done這個class
程式執行結果如下：
單元回顧
今天我們介紹了NgClass的使用方法，NgClass後面可以加上字串、陣列和物件三種內容，字串與陣列的方式適合搭配Component的程式碼來決定要給予什麼class，而物件的方式則比較適合在HTML中直接決定樣式（當然也是可以由Component產生）；至於實際上什麼情境適合用哪種，就沒有絕對的答案，只要自己舒服，團隊也都能接受就好囉！
今天的程式碼：https://github.com/wellwind/Angular2DotblogsDemo/tree/NgClass