web-profile

Angular ngClass

Multiple classes:

<div class="user--status"
      [ngClass]="{
        'user--status-active': user?.status === 'active',
        'user--status-inactive': user?.status === 'inactive'
      }">
      {{ user?.status }}
</div>

Conditional class:

<div class="user--status"
      [ngClass]="user?.status == 'active' ? 'user--status-active' : 'user--status-inactive'">
      {{ user?.status }}
</div>

Leave a Reply

Your email address will not be published.