• ngStyle的幾種寫法
  • ngClass的幾種寫法

ngStyle

後面要指定的參數通常是 CSS屬性

1
<div [ngStyle]="{'background-color':'green'}"></<div>

也可以這樣寫

1
<div [style.background]="green}"></<div>

也可以使用三元運算子

1
<div [ngStyle]="{'background-color':person.country === 'UK' ? 'green' : 'red' }"></<div>

若要指定 function 的寫法

1
[style.color]="getColor(person.country)"
1
2
3
4
5
6
    getColor(color:string){
        if(color == 'UK'){
            return 'green'
        }
        return 'red'
    }

ngClass

第一个參數為Class類名稱, 第二个參數為boolean值, 如果為true就添加第一个参數的類

1
[ngClass]="{'text-success':true}"

也可以這樣寫

1
[class.text-success]="person.country === 'UK'"

可以一次新增多Class

1
2
3
4
5
    [ngClass]="{
        'text-success':person.country === 'UK',
        'text-primary':person.country === 'USA',
        'text-danger':person.country === 'HK'
    }"