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

Viewed 23015

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!

3 Answers

[style.transform]="'translateX('+value+'px)'" worked for me in Angular.

$value gave me an error.

Related