Bind translateX() transform in Angular 2+

Question

How can one bind the transform: translateX() style in Angular?

What I've tried:

<div [style.transform]="translateX({{x}})">

and

<div [style.transform.translateX.px]="x">

Answer 1

This should work

<div [style.transform]="'translateX(' + x + 'px)'">

Edit

It seems that it is necessary to bypass XSS protection for this to work.