Add multiple classes to dynamic objects when it has already an ngClass condition Angular (4)

Question

I'm having some trouble to define specific classes do dynamic elements, take a look at this JSON:

filterData = {
    "highlights": {
        "title": "Destaques",
        "options": [{
            "id": 1,
            "title": "Outlet",
            "alias": "outlet",
            "counter": 3,
            "classes": ["outlet", "feb", "jun"]
        }, {
            "id": 2,
            "title": "Novidades",
            "alias": "news",
            "counter": 0,
            "classes": ["news", "may"]
        }, {
            "id": 3,
            "title": "Promoção",
            "alias": "promo",
            "counter": 1,
            "classes": ["promo"]
        }]
    }
}

Each button has its selected class, depending if it's selected or not by the user:

<div
    *ngIf="filterEnabled"
    class="filters_btns"
>
    <button 
        *ngFor="let item of filtersList.options" 
        type="button" 
        class="btn"
        (click)="toggleFilterOption(item)"
        [ngClass]="{ 'selected': filterData[item.id]" <-- also add all of the classes of this array (item.classes) if some exists
    >{{ item.title }}</button>

</div>

There is any way to do this? Add an array of classes (if them exist), and also add the 'selected' class according to the filterData[item.id] (boolean)

Meir · Accepted Answer · 2017-06-21 18:31:03Z

1

You can use the class binding for that:

[class.selected]="filterData[item.id]"

and the ngClass for you list:

[ngClass]="item[classes]"

answered Jun 21, 2017 at 18:31

Meir

14.4k4 gold badges44 silver badges49 bronze badges

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

2 Comments

rjcpereira Over a year ago

Thanks Meir, it works perfectly! Just one small correction, the classes is an property of item, so it will be like: item.classes or item['classes']

Meir Over a year ago

You're right. I focused on the syntax, not the specifics 😀

Collectives™ on Stack Overflow

Add multiple classes to dynamic objects when it has already an ngClass condition Angular (4)

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