Change dynamically style in Angular with ngfor array data

Question

I want to set the width as dynamically with the data that i am gonna take from the array. But angular doesn't let me set it with usual way. How can i handle it ?

<div *ngFor="let item of products">
    <div [style.width.px]="{{ item.size }}" class="Holiday"></div>
</div>

Majid Nayyeri · Accepted Answer · 2019-12-30 00:35:58Z

2

you do not need {{ }} when you're using [].

change [style.width.px]="{{ item.size }}" to [style.width.px]="item.size" and it should work.

answered Dec 30, 2019 at 0:35

Majid Nayyeri

4443 silver badges15 bronze badges

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

Comments

MonkeyScript · Accepted Answer · 2019-12-30 04:16:33Z

2

Use ngStyle to apply dynamic styles.

<div *ngFor="let item of products">
    <div [ngStyle]="{ 'width' : item.size+'px' }" class="Holiday"></div>
</div>

Demo : https://stackblitz.com/edit/angular-fel5sk

answered Dec 30, 2019 at 4:16

MonkeyScript

5,1611 gold badge14 silver badges28 bronze badges

Collectives™ on Stack Overflow

Change dynamically style in Angular with ngfor array data

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