Change style background image dynamically


I need change the background image dynamically. I’ve already tried:



nothing works!



Its hard to give a good helping answer without a good code example of what you are working with. Can you provide some more code?


@realino You could try the following:

<div id="component-id" [style.backgroundImage]="'url(' + bgImage + ')'">
    <!-- ... -->
// page.ts
// ...
    this.bgImage = 'path/to/image.jpg';
// ...

If this doesn’t work in your case then you should provide more code, as @dtaalbers suggested.


This solution not working with beta 7 anymore. I dont know why but this is working:

<div id="component-id" [style.backgroundImage]="'url('">
    <!-- ... -->

but this is not:

<div id="component-id" [style.backgroundImage]="'url('+bgImageVariable+')'">
    <!-- ... -->

this.bgImageVaribale = "bird.jpg";

It has been working before update beta 7.


I’m guessing you’re banging into recent angular changes regarding sanitization.



OK. I think there is no solution in this topic, there is only consulting. Is there any workaround or something else?


This has been working for me with beta 7

[ngStyle]="{'background-image': 'url(' + your url + ')'}"

Dynamic tab icons

Thanks, it worked for me


@dtaalbers thanks, i missed the + sign


thank you! it’s working