How to create dynamic class with Angular2's ngClass?

Question

Say in the object models in my cloud Array I have a weight key:

return [
    {
        term: '1994',
        weight: 0
    },
    {
        term: '2017',
        weight: 0
    },
    {
        term: '89th',
        weight: 5
    }

What I want to do is use that weight to create a dynamic class in the markup. Ie: cloud0, cloud9 etc...

How would that be done? Below is the code I tried and error I got.

<span *ngFor="let tag of cloud" [ngClass]="'cloud{{ tag.weight }}'">
    {{ tag.term }}
</span>

<!-- <span class="cloud0">1994</span>
<span class="cloud0">2017</span>
...

Parser Error: Got interpolation ({{}}) where expression was expected at column 6 in ['cloud{{ tag.weight }}'] in EntityComponent@72:56 (": 100%; min-height: 200px;" id="wordcloud"> ][ngClass]="'cloud{{ tag.weight }}'"> {{ tag.term }} "): EntityComponent@72:56 Parser Error: Got interpolation ({{}}) where expression was expected at column 6 in ['cloud{{ tag.weight }}'] in EntityComponent@72:56 ("cloud"> [ERROR ->] {{ tag.term }}

dlcardozo · Accepted Answer · 2017-03-10 20:58:22Z

3

You can use just html class attribute:

<span *ngFor="let tag of cloud" class="cloud{{ tag.weight }}">
    {{ tag.term }}
</span>

There's no need to use ngClass on this case.

answered Mar 10, 2017 at 20:58

dlcardozo

4,0231 gold badge21 silver badges22 bronze badges

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

Comments

El houcine bougarfaoui · Accepted Answer · 2017-03-10 21:15:49Z

0

<span *ngFor="let tag of cloud" [ngClass]="'cloud '+tag.weight">
    {{ tag.term }}
</span>

answered Mar 10, 2017 at 21:15

El houcine bougarfaoui

37.6k10 gold badges40 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to create dynamic class with Angular2's ngClass?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related