Angular 2, 2.0.0-rc.2, Cannot apply inline css3 transform with style directive

Question

I am trying to apply to a DIV, using Angular 2 style directive, the transform property:

<div
     [style.width.px]="front.width"
     [style.height.px]="front.height"
     [style.background-color]="front.backgroundColor"
     [style.transform]="front.transform"></div>

The component data is:

front['width'] = this.width + this.gapw;
front['height'] = this.height + this.gaph;
front['background-color'] = settings.backfacesColor;
front['transform'] = 'rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, ' + hw + 'px )';

I get this warning in the console:

WARNING: sanitizing unsafe style value rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, 207px )
browser_adapter.js:83 WARNING: sanitizing unsafe style value rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, 207px )
browser_adapter.js:83 WARNING: sanitizing unsafe style value rotate3d( 0, 1, 0, 180deg ) translate3d( 0, 0, 207px ) rotateZ( 180deg )

The standard styles like width and background-color are applied. Trasnform does not get applied. Any idea?

Answer 1

UPDATE: Angular2 RC6 onwards, DomSanitizationService has been renamed to DomSanitizer: https://stackoverflow.com/a/39462172/3481582

Original Answer

As you didn't find what you needed in the question I mentioned bellow, I'll try to answer it here.

The reason why you aren't being able to set style.transform is because angular has a sanitize process that prevents malicious code to be injected into your application.

In order to be able to include this style you'll have to tell angular to bypass this value.

First inject the sanitizer in the component constructor

constructor(private sanitizer: DomSanitizationService) {}

Then, use the bypassSecurityTrustStyle function to tell angular to bypass the desired style of the sanitize process.

this.safeTransform = sanitizer.bypassSecurityTrustStyle("rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, ' + hw + 'px )")

An then use it in your template

[style.transform]="safeTransform"

Angular documentation references https://angular.io/docs/ts/latest/guide/security.html#!#bypass-security-apis

Basically the exact same question as this: In RC.1 some styles can't be added using binding syntax

The answer is also there.