Style binding (中文：樣式繫結)

你可以利用 style binding 設定內部 styles
https://angular.io/guide/template-syntax#style-binding

範例一：一般使用 element style

app\app.component.html
-----
<h1 style="color:orange" >
    Welcome to {{title}}!
</h1>

顯示

範例二：利用 [style.css-property] = boolean ? value1 : value2

app\app.component.html
-----
<h1 [style.color]="false ? 'orange':'pink' " >
    Welcome to {{title}}!
</h1>

顯示

範例三：搭配 directive 可以更細膩控制每個 style 的 propeties

ngStyle 參考來源
https://angular.io/guide/template-syntax#ngstyle

app\app.component.html
-----
<h1 [ngStyle]="{'color':'orange','background-color':'gray'}">
    Welcome to {{title}}!
</h1>

顯示