Use variable inside style tag Angular 2

Question

I want to use a animation-delay dynamically inside a ngFor loop. So I am using style="animation-delay:'i's;" where i is the loop variable. This is not working. My code is like below:

<div class="yourdiv" *ngFor = "let item of gvp.userMessages;let i = index" [attr.data-index]="i"
    style="animation-delay:'i's;">
                <div style="text-align:right;margin-right:10px">

                    <ion-icon  name="undo" class="rplymsg msgico"></ion-icon>
                    <ion-icon  name="trash" class="delmsg msgico" (click)="deleteMessage()"></ion-icon>

                </div>
                <div *ngFor = "let msg of item[1]" class="{{msg.substring(0,1) == 'R' ? 'receivedmsg left-top' : 'replymsg right-top' }}">
                {{msg.substring(2,msg.length)}}
                </div>               
    </div>

Please help.

Vivek Doshi · Accepted Answer · 2019-11-04 07:35:22Z

27

Here it is, this is how you should write it :

[ngStyle]="{'animation-delay.s': i}"

Here is the working example of it, please have a look :

WORKING DEMO

For more details please read :

https://angular.io/api/common/NgStyle
[ngStyle]="{'max-width.px': widthExp}"

edited Nov 4, 2019 at 7:35

answered Oct 27, 2017 at 4:52

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

Comments

Ron Newcomb · Accepted Answer · 2018-07-08 05:34:45Z

3

Shorthand for most cases:

[style.animation-delay.s]="i"

or

[style.max-width.%]="propertyOnController"

for

@Component({...})
export class ControllerComponent {
    propertyOnController: number;

answered Jul 8, 2018 at 5:34

Ron Newcomb

3,44330 silver badges30 bronze badges

Comments

TmTron · Accepted Answer · 2020-07-26 07:08:57Z

1

Note, that the accepted answer is out-dated. We should not use NgStyle anymore (ref):

The NgStyle directive can be used as an alternative to direct [style] bindings. However, using the above style binding syntax without NgStyle is preferred because due to improvements in style binding in Angular, NgStyle no longer provides significant value, and might eventually be removed in the future.

Instead use direct style-bindings as explained in Ron Newcombs answer

answered Jul 26, 2020 at 7:08

TmTron

19.7k13 gold badges109 silver badges167 bronze badges

Collectives™ on Stack Overflow

Use variable inside style tag Angular 2

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related