ngStyle

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>
Was this page helpful?