'How to change color in angular based on value?

How do we change the color dynamically based on a value in angular typescript template?

For example if item.status == 'Active' && ang item.role == 'Admin' set color to color:#00B0D else set color to #707070.

<mat-icon aria-hidden="false" aria-label="Example home icon" style="color:#00B0DB">
  check_circle
</mat-icon>

Solution 1:^[1]

Use NgStyle directive to apply conditional inline styles.

Example:

<mat-icon
  aria-hidden="false"
  aria-label="Example home icon"
  [ngStyle]="{'color': item.status === 'Active' && item.role === 'Admin' ? '#00B0DB' : '#707070'}"
>check_circle</mat-icon>

Similarly, you can use NgClass directive to apply CSS classes conditionally.

Solution 2:^[2]

Using ngStyle you can set specific styles based on some condition.

Example:

<mat-icon
  [ngStyle]="{'color': item.status === 'Active' && item.role === 'Admin' ? '#00B0DB' : '#707070'}"
>check_circle</mat-icon>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shravan
Solution 2

'How to change color in angular based on value?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]