How to add multiple classes to a condition in angular

Question

I have this code

    <div *ngFor="let d of getDays(); let i = index" class="day hr left" (click)="pick(d, h)" [class.white]="days[d].indexOf(h) > -1">
</div>

It works fine but my question is how do I add another class name in this part [class.white]="days[d].indexOf(h) > -1"? I have another class called .redborder{border 1px solid red}. I tried this but didn't work [class.white.redborder]="days[d].indexOf(h) > -1". What else am I supposed to do?

Poul Kruijt · Accepted Answer · 2017-04-21 09:16:13Z

7

You can use the ngClass directive:

<element [ngClass]="{'white redborder' : days[d].indexOf(h) > -1}"></element>

For elseif I guess you can use this:

<element [ngClass]="days[d].indexOf(h) > -1 ? 'white' : 'redborder'"></element>

edited Apr 21, 2017 at 9:16

answered Apr 21, 2017 at 8:58

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

2 Comments

Wafula Samuel Over a year ago

Wow thnx man, it worked @PierreDuc. How about multiple conditions as in the case of else if?

Poul Kruijt Over a year ago

@SamZiggler I've updated my answer to show else if. It is however advised to use as little logic inside your templates, and use functions or getters in your component class. This helps refactoring and testing, and increases readability

Collectives™ on Stack Overflow

How to add multiple classes to a condition in angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related