# Day3? 【牙起來】 - Angular ngClass ## 直接帶class名稱 ngClass property可以蓋過attribute的class `bg-danger` 會蓋過 `bg-info` ### 單個class ngClass若直接用class名稱的話要加上單引號包著`'` > 字串表達式 ```html= <div class="bg-info" [ngClass]="'bg-danger'">我是文字</div> ``` ### 多個class 因為是property，所以可以傳遞值進去 用陣列將名稱包起來 > 陣列表達式 ```html= <div class="bg-info" [ngClass]="['bg-danger', 'text-primary']">我是文字</div> ``` ## ngClass加上判斷式 除了陣列以外，也可以傳遞物件格式 此時可再帶上判斷式True或False > 物件表達式 ```html= <div class="bg-info" [ngClass]="{'bg-danger': true}">我是文字</div> ``` 帶入多個class名稱與判斷式 ```html= <div class="bg-info" [ngClass]="{'bg-danger': false, 'text-primary': true}">我是文字</div> ``` 多個class同時使用一種判斷式 ```html= <div class="bg-info" [ngClass]="{'text-primary bg-danger': true}">我是文字</div> ``` 也可以做三元表達式判斷 ```html= <div class="bg-info" [ngClass]="true ? 'bg-dark':'bg-primary'">我是文字</div> <div class="bg-info" [ngClass]="A == B ? 'bg-dark':'bg-primary'">我是文字</div> ``` ## `[class.name]` 另一種方法，直接使用class名稱 `class.name` 用表達式控制出現與否 ```html= <div class="bg-info" [class.text-white]="true">我是文字</div> <div class="bg-info" [class.bg-danger]="true">我是文字</div> ```