export class AppComponent {
canSave = true;
}
<button
[style.backgroundColor]="canSave ? 'blue' : 'gray'"
[style.color]="canSave ? 'white' : 'black'"
[style.fontweight]="canSave ? 'bold' : 'normal'"
>Save</button>
When you are dealing with multiple style bindings, you may prefer to clean up your code by using the ngStyle directive.
<button [ngStyle]="{
'backgroundColor': canSave ? 'blue' : 'gray',
'color': canSave ? 'white' : 'black',
'fontweight': canSave ? 'bold' : 'normal'
}">
Save
</button>