How can we add the style conditionally in Angular

Question

With the help of code and example tell me How can we add the style conditionally in Angular?

Answer 1

In Angular, you can add styles conditionally using [ngStyle] or [style.property].

1. Using [ngStyle] (Multiple Styles)

<p [ngStyle]="{ color: isActive ? 'green' : 'red', 'font-size': isLarge ? '20px' : '14px' }">

  Conditional Styling

</p>

2. Using [style.property] (Single Style)

<p [style.color]="isActive ? 'blue' : 'gray'">Styled Text</p>