Angular 7 Styling
?
S
MarkupSome examples of how to properly style in Angular. Note: getColor() is defined in the component and just returns a string.
1<ul *ngFor="let car of cars">
2 <li [class.text-success]="car.model=== 'BW'"
3 [class.text-primary]="car.model === 'MC'"
4 [class.text-danger]="car.model === 'XS'">{{ car.brand }} ({{ car.model }})
5 </li>
6</ul>
7
8<li [ngClass]="{
9 'text-success':car.country === 'UK',
10 'text-primary':car.country === 'USA',
11 'text-danger':car.country === 'HK'
12 }">{{ car.brand }} ({{ car.model }})
13 </li>
14
15
16[ngClass]="{'text-success':true}"
17
18
19
20<ul *ngFor="let car of cars">
21 <li [ngStyle]="{'font-size.px':24}"
22 [style.color]="getColor(car.country)">{{ car.brand }} ({{ car.model }})
23 </li>
24</ul>Created on 2/19/2019