<div [ngStyle]="{'background-color':person.country === 'UK' ? 'green' : 'red' }"></<div>
@Component({ selector: 'ngstyle-example', template: `<h4>NgStyle</h4> <ul *ngFor="let person of people"> <li [ngStyle]="{'color':getColor(person.country)}"> {{ person.name }} ({{ person.country }}) (1) </li> </ul> ` }) class NgStyleExampleComponent { getColor(country) { (2) switch (country) { case 'UK': return 'green'; case 'USA': return 'blue'; case 'HK': return 'red'; } } people: any[] = [ { "name": "Douglas Pace", "country": 'UK' }, { "name": "Mcleod Mueller", "country": 'USA' }, { "name": "Day Meyers", "country": 'HK' }, { "name": "Aguirre Ellis", "country": 'UK' }, { "name": "Cook Tyson", "country": 'USA' } ]; }
NgClass
directive allows you to set the Bootstrap CSS class dynamically for a DOM element.[ngClass]="{'text-success':person.country === 'UK'}"
ngClass
.<h4>NgClass</h4> <ul *ngFor="let person of people"> <li [ngClass]="{ 'text-success':person.country === 'UK', 'text-primary':person.country === 'USA', 'text-danger':person.country === 'HK' }">{{ person.name }} ({{ person.country }}) </li> </ul>