2

How is one able to use interpolation within a two-way binding style applied?

[style.backgroundImage]="'url(' + images/{{image}} + ')'"

Where the {{image}} input interpolation spits out a lot of errors regarding expected expression and etc.

Tanasos
  • 3,928
  • 4
  • 33
  • 63

1 Answers1

3
[style.backgroundImage]="'url(\'images/' + image + '\')'"

You never use [prop]= together with {{}}. Either [] or `{{}}

You can also try

style.backgroundImage="'url(' + images/{{image}} + ')'"

I never tried if style bindings work without []

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Neither seem to work in my case. I get an `ng-reflect-style="unsafe"` in the inspector. – Tanasos Apr 18 '17 at 10:09
  • 1
    The `angular` tag is for Angular2, Angular4, ... For Angular 1.x please use the angularjs tag. If your question is actually about Angular2 (4) please see http://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax/37076868#37076868 – Günter Zöchbauer Apr 18 '17 at 10:10
  • This is why I have put `angular-cli` in my title. My question concerns Angular2+. I am trying to apply the inputs with interpolation within my Component, directly inside the `*.component` file. – Tanasos Apr 18 '17 at 10:13
  • @GünterZöchbauer It seems to be a recurring problem on [style.whatever]. Using ngStyle instead seems to fix it. – unitario Apr 18 '17 at 10:15
  • @unitario I don't see how this would be related to `ngStyle`. They should have the same behavior. – Günter Zöchbauer Apr 18 '17 at 10:17
  • @GünterZöchbauer , this is what I am working with - `[style.background-image]="'url(\'images/browser/' + screenOne + '\')'"` and it is not getting past the errors in the console. The error in this case is `Unexpected token 'images'` – Tanasos Apr 18 '17 at 10:22
  • Did you check the answer I linked to in my first comment above? – Günter Zöchbauer Apr 18 '17 at 10:24
  • Why would it not be possible. You just need to tell Angular that the URL you want to bind is safe. That's what the linked answer explains. – Günter Zöchbauer Apr 18 '17 at 10:27
  • 1
    @GünterZöchbauer , the issue here is that `[style.background-image]` should be in plain JS syntax like so - `[style.backgroundImage]`. This fixes my problem. – Tanasos Apr 18 '17 at 10:52