1

I want to build a very simple editor which allows a user to transform a background image.

For this purpose I am setting transform like this:

<img [style.transform]="'translate(50%,50%) rotate(45deg)'">

The problem is that if I set both, translateand rotate, the style is not getting applied. I can set them alone but not together.

Is it possible to do this somehow?

Here is a stackblitz

Stefan Falk
  • 23,898
  • 50
  • 191
  • 378
  • Please provide a [mcve] reproducing the issue. –  Nov 12 '18 at 12:32
  • @trichetriche That's *one line* of HTML but [there you go](https://stackblitz.com/edit/angular-jklrg3?file=src%2Fapp%2Fapp.component.html) .. – Stefan Falk Nov 12 '18 at 12:37
  • And does that *one line of HTML* tells us what you provide for `left, top, rotate` ? Thank you, I'll take a look at it –  Nov 12 '18 at 12:38
  • See https://stackoverflow.com/questions/38593515/warning-sanitizing-unsafe-style-value-url – ShamPooSham Nov 12 '18 at 12:39
  • Firefox console shows this log entry: WARNING: sanitizing unsafe style value translate(50%,50%) rotate(45deg) (see http://g.co/ng/security#xss). – Codo Nov 12 '18 at 12:41
  • 1
    The console showed a warning that I googled. It seems to be solvable by using [ngStyle] instead of [style.*] – ShamPooSham Nov 12 '18 at 12:41
  • @ShamPooSham That works indeed. Thank you. – Stefan Falk Nov 12 '18 at 12:43
  • @trichetriche I'm sorry for my snap - it's not a particularly good day for me today. – Stefan Falk Nov 12 '18 at 12:44
  • 1
    No problem ! Other people provided you with an answer, as you can see in the console your issue is with the sanitization of your strings. You should be able to find resources in the documentation with the given URL, or as @ShamPooSham suggested, in another question. Hope you resolve your issue ! –  Nov 12 '18 at 12:45
  • @trichetriche Thanks. Yes, it works with `ngStyle` as suggested (`[ngStyle]="{'transform': 'translate(' + imgLeft + '%, ' + imgTop + '%) rotate(' + imgRotate * 90 +'deg)'}"`) – Stefan Falk Nov 12 '18 at 12:49

0 Answers0