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.

Answer 1

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}"

Answer 2

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

Answer 3

Shorthand for most cases:

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

or

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

for

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