[Angular 速成班]使用NgClass動態為HTML element加入class

上一篇文章中我們學到了如何自訂CSS class,今天我們來學習透過ngClass來為畫面動態的加入或移除class。

使用NgClass

NgClass可以幫助我們依照需要的條件加入不同的class,我們可以使用[ngClass]=...的方式來決定HTML element要加入哪些class。ngClass後面可以接三種類型的參數,前兩種比較簡單:

字串

例如[ngClass]="'classA, classB'"

陣列

例如[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

物件

例如[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/AngularDotblogsDemo/tree/NgClass

如果您覺得我的文章有幫助,歡迎免費成為 LikeCoin 會員,幫我的文章拍手 5 次表示支持!