angularbackground-imagestring-interpolationng-style

Interpolation inside ngStyle background Image

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 .....

Solution

  • 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 + ')'}">