dynamically add classes to content coming from *ngFor from an array

Question

Im not quite sure something like this is possible but say in my html component I have an ngFor like so..

<div *ngFor="let card of cards">
   ... stuff in here
</div>

now say I have an array of classNames like so

classNames = [
   'red',
   'yellow',
   'blue',
   'green'
]

and inside my *ngFor I have a div like so

<div *ngFor="let card of cards">
   <div [class]='...'>
      <div class="card">
      </div>
   </div>
</div>

basically what I want to happen is for every item in the ngFor give loop through the classNames array and dynamically add it to the incoming data so for example

say I have 6 items in cards so each card needs a classname so it loops through classNames and gives it a class so like this..

<div [class]='red'>
   <div class="card">
   </div>
</div>
<div [class]='yellow'>
   <div class="card">
   </div>
</div>
<div [class]='blue'>
   <div class="card">
   </div>
</div>
<div [class]='green'>
   <div class="card">
   </div>
</div>
<div [class]='red'>
   <div class="card">
   </div>
</div>
<div [class]='yellow'>
   <div class="card">
   </div>
</div>

and so on and so forth..

how could i accomplish something like this?

EDIT

component.html

<div class="card" *ngFor="let card of cards; let i = index">
   <div [class]="classNames[i%classNames.length]">
      ....
   </div> 
</div>

component.ts

export class...
  classNames = [
    'light-green',
    'dark-green',
    'aqua',
    'blue',
    'blue-purple',
    'purple',
    'purple-pink',
    'purple-orange'
  ];

you have to intilaize the array in .ts code

לבני מלכה
– לבני מלכה

2018-05-10 05:06:01 +00:00
Commented May 10, 2018 at 5:06 — לבני מלכה
– לבני מלכה, Commented May 10, 2018 at 5:06

yurzui · Accepted Answer · 2018-05-10 05:10:53Z

2

You can leverage remainder (%) operator to achieve that:

<div *ngFor="let card of cards; let i = index">
   <div [class]="classNames[i%classNames.length]">
      <div class="card">
        {{ card }}
      </div>
   </div>
</div>

Ng-run Example

Update:

You should define array as follows:

classNames = [
   'light-green',
   'dark-green',
   'aqua',
   'blue',
   'blue-purple',
   'purple',
   'purple-pink',
   'purple-orange'
];

Note: i use = instead of :

edited May 10, 2018 at 5:10

answered May 10, 2018 at 4:58

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

5 Comments

Smokey Dawson Over a year ago

Hey Im getting this error Cannot read property 'length' of undefined any idea what could be wrong?

yurzui Over a year ago

Did you check my example? I think you're doing something wrong and don't see what i wrote

Smokey Dawson Over a year ago

Ive done it exactly the same as your example, not sure why it wouldnt be working..

yurzui Over a year ago

Can you reproduce it?

yurzui Over a year ago

Updated my answer

manish · Accepted Answer · 2018-05-10 05:13:35Z

0

Instead of randomly applying any class to any card or deciding it on view based on some %, the best way, I believe would be read it from the Cards object itself, since it is logical to have all details of a card read from the card itself.

So that view is independent of those extra stuffs.

classNames = ['red','yellow','blue','green'];
cards = [{text: 1, class: this.classNames[0]},{text: 2, class: this.classNames[1]}];

your view should simply do its task (render)

<div *ngFor="let card of cards; let i = index">
  <div [class]="card.class">
    <div class="card">
      {{ card.text}}
    </div>
  </div>
</div>

answered May 10, 2018 at 5:13

manish

1,4588 silver badges13 bronze badges

2 Comments

Smokey Dawson Over a year ago

The cards object comes from an api I have no control over, thus why Im doing it randomly, if I could put the classNames on the card itself I would

manish Over a year ago

@JuvenileSnow that's where view-model come in picture

Collectives™ on Stack Overflow

dynamically add classes to content coming from *ngFor from an array

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related