Style Binding

// binding.html
<div [style.backgroundColor]='isActive ? "red": "blue"'></div>
import { Component } from 'angular2/core';

@Component({
    selector: 'selector',
    templateUrl: 'binding.html'
})
export class ComponentNameComponent{
    isActive = true; // active class would be added
}

Applying multiple styles dynamically

<button [ngStyle]="{
    backgroundColor: canSave ? 'blue': 'gray',
    color: canSave ? 'white' : 'black'
}"></button>

Last updated

Was this helpful?