Interpolation inside ngStyle background Image

Question

I've looked around similar answers found within stackoverflow but no luck. How can I correctly use interpolation inside the ngStyle for background-image?

This is the code I've use:

<div mat-card-avatar class="header-image" ngStyle = "{'background-image': 'url(' + {{cardData.image}} + ')'}"></div>

I am getting Error: Cannot find a differ supporting object '{'background-image': 'url(' + ../../assets/image/photo.png + ')'}' at .....

Answer 1

You cannot use interpolation inside ngStyle, you have to use [ngStyle]="{'background-image': 'url(' + cardData.image + ')'}"

Try like this:

<div mat-card-avatar class="header-image" [ngStyle]="{'background-image': 'url(' + cardData.image + ')'}">