How to apply transform translate property to element using ngStyle in Angular2+

Question

I'm trying to conditionally apply a transform: translateX($value) directly to the template element using [ngStyle] but I cannot find anyone talking about this. Mainly because I don't know what to search for :D.

I've seen some approaches doing basic styling with [style.color] or something a bit more advanced with [attr.style]="{'transform': 'translateX(4rem)'}" but the last one returns in the rendered HTML this: style="unsafe". I've seen that you can use the Sanitizer to sanitize or bypass your styles/scripts etc... but at this point it was starting to 'smell' like something that you're not supposed to do? I'm looking for a clean way to achieve this. But I have no clue on where to look.

Thanks in advance to everyone!

Answer 1

You can use [ngStyle] as follows, assuming you have a $value variable in your controller:

[ngStyle]="{'transform': 'translateX(' + $value + 'px)'}"

and suppose you want to change both the axis having controller variables $x , $y

[ngStyle]="{'transform': 'translate(' + $x + 'px, ' + $y + 'px)'}"