6

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?

albanx
  • 6,193
  • 9
  • 67
  • 97
  • Possible duplicate of [In RC.1 some styles can't be added using binding syntax](http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax) – Daniel Pliscki Jul 06 '16 at 17:05
  • @DanielPliscki maybe the content is the same, but that question is horrible formulated. I searched before posting and did not found anything about this issue. – albanx Jul 06 '16 at 21:57
  • I've update the answer with my solution. – Daniel Pliscki Jul 06 '16 at 22:30

2 Answers2

12

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.

Community
  • 1
  • 1
Daniel Pliscki
  • 1,913
  • 16
  • 24
4

For the latest version of Angular 2 at the time of this post, @Daniel Pliscki's answer is still valid, except that the proper service inject is now DomSanitizer

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

constructor(private: sanitizer:DomSanitizer) {}
ngOnInit() {
  this.transformStyle = this.sanitizer.bypassSecurityTrustStyle('....');
}

And then in your template

[style.transform]="transformStyle"
Stephen Raghunath
  • 683
  • 5
  • 5