'Pass CSS value with ngStyle

I've got a service sending a value, which I need it to be passed to the CSS file so I can control how much a meter gauge moves. The value is between 0 and 0.5, and changes the

transform:rotate( {NUMBER} turn)

On classes dynamically chosen with a previous nGclass.

Example: If my var is 0.5, I need the resulting CSS code to be

transform:rotate(.5turn)

How can I manage this?

I've tried

[ngStyle]="{'transform:rotate(.5turn)': dashService.variable}"

And other variations of the same idea but it doesn't seem to work.

cssangular


Solution 1:[1]

You can use interpolation syntax:

[ngStyle]="{ 'transform': 'rotate(' + dashService.variable + 'turn)': }"

Solution 2:[2]

[ngStyle]="{'background-image': 'url(' + this.myApp.urlImagen + ')'}"

I have used this to add style to an element before. Make any changes and It'll be fine :)

Solution 3:[3]

Try this

[style.transform]="'rotate(' + (dashService.variable) + 'deg)'"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 StepUp
Solution 2 maryrio7
Solution 3 rikg93

Related Questions