Use variable inside style tag Angular 2

Shorthand for most cases:

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

or

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

for

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

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

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