Style binding depending on condition in Angular 2

Question

I have some code like that:

<div [ngStyle]="{'background': 'url(' + order.image_url_medium + ') top right no-repeat #118cc8'}">Content</div>

But how can I bind it depending on condition? So if order.image_url_medium exists, put it to style <div [ngStyle]="{'background': 'url(' + order.image_url_medium + ') top right no-repeat #118cc8'}">Content</div>, else - just - leave blank div <div>Content</div>

JB Nizet · Accepted Answer · 2016-09-28 21:47:21Z

2

In your view:

<div [ngStyle]="divStyle">Content</div>

In your component:

this.divStyle = {};
if (someCondition) {
    this.divStyle.background = `url(${this.order.image_url_medium}) top right no-repeat #118cc8`;
}

answered Sep 28, 2016 at 21:47

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Style binding depending on condition in Angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related