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?