ng if/else in a loop with multiple conditions

Question

I am trying to sort out how to accomplish this. I have a button group that gets generated in an ngFor loop:

<div class="btn-group float-right">
    <button *ngFor="let frequency of mapping?.frequency_mapping" [ngClass]="[profile?.frequency_name == frequency.label ? 'btn-success' : 'btn-outline-secondary']" type="button" value="{{ frequency.pk}}" class="btn">{{ frequency.label }}</button>
</div>

and where i add the text for the button, I would like to insert a class based on the value of this button's frequency.label

so something like this:

if frequency.label = condition A then class = classA
else if frequency.label = condition B then class = classB
else if frequency.label = condition C then class = classB

what would the best way to accomplish this?

basically i need the end result to be something like

<button><i class="fa fa-classA"></i>{{ frequency.label }}</button>
<button><i class="fa fa-classB"></i>{{ frequency.label }}</button>
<button><i class="fa fa-classC"></i>{{ frequency.label }}</button>

Hugo Noro · Accepted Answer · 2017-12-17 19:33:37Z

1

I believe you’re just using the wrong format on ngClass. Get rid of the [ ] brackets.

Have a look here

The case scenario you’re looking for is the 4th example on the “How to Use” section. You need it to evaluate an expression.

By using the brackets ngClass will be expecting an array of static strings for the styles, it will not evaluate the expression.

answered Dec 17, 2017 at 19:33

Hugo Noro

3,2732 gold badges17 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

ng if/else in a loop with multiple conditions

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