CODEWITHSUNDEEP
angulartypescriptangular-material
Jhon Caylog
Jhon Caylog

Reputation: 503

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>

Upvotes: 0

Views: 2381

Answers (2)

Mohammad Heidari
Mohammad Heidari

Reputation: 21

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>

Upvotes: 1

Shravan
Shravan

Reputation: 1202

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.

Upvotes: 3

Related Questions