Angular 8 [class] binding with if, else if, else

Question

so I have a pretty large component, that I am trying to make it as DRY as possible. However, I haven't found an easier way to do this: The parent is showing a list of child components, chat messages that I have active, and they can have three states:

unread and urgent unread and normal
read(no new messages)
no new messages

<ion-grid>
  <ng-container *ngIf="unreadAndUrgent; else normal">
    <ion-row class="urgent">
      <!-- about 30-40 lines of further structuring -->
    </ion-row>
  </ng-container>
  <ng-template #normal>
    <ion-row [class]="unreadNormalMessages ? 'normal-css' : '' ">
      <!-- same 30-40 lines of further structuring as above -->
    </ion-row>
  </ng-template>
</ion-grid>

as you can see I am essentially repeating the same code as above which just makes it very bloated in the end and I am trying to cut it down so that it can be more DRY. Any suggestions? thanks!

Ahmed Kesha · Accepted Answer · 2020-01-21 17:10:11Z

2

you can use [ngClass]="{'class-name':condition,'class2-name':condition}"

answered Jan 21, 2020 at 17:10

Ahmed Kesha

8105 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 8 [class] binding with if, else if, else

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related