Add how to add class name dynamically when array of object is iterated using ngfor

Question

I get the object like

{ name: 'filename', order: '', open: true, isEditOn: false, tempVal: '', id: 0}

when I iterate an array of objects... Now I want to add the class of the div like

obj.filename + obj.id

I have tried like [ngClass] = "{obj.filename + obj.id}"..

You need use [className]="obj.filename+obj.id", [ngClass] is for asing class if a condition is satisf, e.g. `[ngClass]="{'classname':condition}" — Eliseo
– Eliseo, Commented Jan 13, 2020 at 9:11
Does this answer your question? Angular - Dynamic CSS Class in iteration — Harun Yilmaz
– Harun Yilmaz, Commented Jan 13, 2020 at 9:12
according to the data provided you have a property called name but you are trying to access a undefined property called filename — Troels Lenda
– Troels Lenda, Commented Jan 13, 2020 at 9:12

Gangadhar Gandi · Accepted Answer · 2020-01-13 09:24:50Z

2

Try like below,

Considering your object has name (i.e you mentioned it as filename but object has name property) and id properties. We can generate class like below

<div *ngFor="let item of arrayItems" [className]="item.name + item.id">
  ...
</div>

edited Jan 13, 2020 at 9:24

answered Jan 13, 2020 at 9:15

Gangadhar Gandi

2,26214 silver badges20 bronze badges

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

1 Comment

Gel Over a year ago

I am using @angular-devkit/architect 0.1202.14 @angular-devkit/build-angular 12.2.14 @angular-devkit/core 12.2.14 @angular-devkit/schematics 12.2.14 @angular/cdk 12.2.13 @angular/cli 12.2.14 @schematics/angular 12.2.14 rxjs 6.6.7 typescript 4.3.5 and it works! Can you verify it works and mark it as an answer ?

Apetrei Ionut · Accepted Answer · 2020-01-13 09:18:35Z

0

You can use String Interpolation:

class="{{obj.filename + obj.id}}"

answered Jan 13, 2020 at 9:18

Apetrei Ionut

3435 silver badges13 bronze badges

Comments

Emilien · Accepted Answer · 2020-01-13 09:15:32Z

-1

What about this ?

<div *ngFor="let item of items" [class]="item.name + item.id"></div>

answered Jan 13, 2020 at 9:15

Emilien

2,7534 gold badges17 silver badges29 bronze badges

Comments

zmag · Accepted Answer · 2020-01-13 09:17:35Z

-1

Change what you tried

[ngClass] = "{obj.name + obj.id}"

to this one

[ngClass] = "obj.name + obj.id"

I assumed obj.filename is typo of obj.name.

answered Jan 13, 2020 at 9:17

zmag

8,27112 gold badges39 silver badges47 bronze badges

Collectives™ on Stack Overflow

Add how to add class name dynamically when array of object is iterated using ngfor

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related