CODEWITHSUNDEEP
angularbackground-imagestring-interpolationng-style
jxStackOverflow
jxStackOverflow

Reputation: 378

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

Upvotes: 1

Views: 1204

Answers (3)

Tom Edwards
Tom Edwards

Reputation: 124

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

unsure if its even possible, however this would be correct for the quote marks

Upvotes: 0

Adrita Sharma
Adrita Sharma

Reputation: 22203

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

Upvotes: 3

Michał Tkaczyk
Michał Tkaczyk

Reputation: 736

Try to wrap your ngStyle attributes in square brackets:

[ngStyle]="...

Upvotes: 0

Related Questions