Angular 樣式綁定

1. style.propertyName

[style.Css屬性名] = 'Css屬性值變量'/"'css屬性值'"

// app.component.ts
export class AppComponent {
    fontSize = '32px';
}

// app.component.html
<div [style.fontSize]="fontSize" [style.color]="'red'">styleBinding</div>

效果:

2. ngStyle

[ngStyle]="{'css屬性名': 'css屬性值'}"
[ngStyle]="{'css屬性名': 判斷語句 ？'判斷語句為true時的css屬性值' : '判斷語句為false時的css屬性值'}"

// app.component.ts
export class AppComponent {
    isMax = false;
}

// app.component.html
//Css屬性值-固定值
<div [ngStyle]="{'color': 'red'}">ngStyle</div>
//Css屬性值-通過判斷取值
<div [ngStyle]="{'font-size': isMax ? '24px' : '12px'}">ngStyle-添加判斷</div>

效果:

3. ngClass

[ngClass]="{'需要添加的類名': 判斷語句}"；；；當條件為ture時，添加類；為false時，不添加該類

// app.component.ts
export class AppComponent {
    isActive = true;
     isFocus = true;
}

// app.component.html
// 一個類通過判斷添加
<div [ngClass]="{'active': isActive}">ngClass</div>
// 多個類通過判斷添加時，用逗號隔開
<div [ngClass]="{'active': isActive, 'primary': isFocus}">ngClass</div>

// app.component.css
.active { background: #d0d0d0;}
.primary { color: #198fff; }

效果: