CODEWITHSUNDEEP
angulartypescript
Thinker
Thinker

Reputation: 5356

How to add background image with ngStyle?

I am trying to populate multiple cards as following:

<mdl-card *ngFor="let product of templates" class="demo-card-event" mdl-shadow="2" [ngStyle]="{ 'background-color': 'lightgray' }">
    <mdl-card-title mdl-card-expand>
        <h4>
            {{product.name}}
        </h4>
    </mdl-card-title>
    <mdl-card-actions mdl-card-border>
        <button mdl-button mdl-colored mdl-ripple (click)="booknow()">
            Show
        </button>
        <mdl-layout-spacer></mdl-layout-spacer>
        <mdl-icon>event</mdl-icon>
    </mdl-card-actions>
</mdl-card>

Here css gets applied dynamically i.e. background-color changes to lightgrey. However what I actually want is to apply background: url(-- here I want product.img --) where in my object array templates each object has property img which contains url.

How can I update my statement in that case?

Upvotes: 3

Views: 90

Answers (1)

Vega
Vega

Reputation: 28711

You can set it as the following:

<div ...[ngStyle]="{background: 'url('+ product.image+')'"....>

where image is product property for image, indeed.

Upvotes: 3

Related Questions