How to define multiple styles on div in .html template Angular

Question

I need to set this properties on my div:

background: url();
background-repeat: no-repeat;
background-size: cover;
background-position: center, center;

This is my div:

<div *ngFor="let orderItems of receiptItems;" class="order-article animated bounceInLeft">
  <div class="order-img"   [style.background]="'url('+ orderItems.product.img.url +')'" ></div>
  <div class="order-title">
    <p>{{orderItems.product.title}}</p>
  </div>
</div>

As you can see guys I've set [style.background] url but I don't know how to set rest of the attributes / multiple attributes..

Thanks Any kind of help would be great !

-------- EDIT:

 <div *ngFor="let orderItems of receiptItems;" class="order-article animated bounceInLeft">
      <div class="order-img"   [ngStyle]="{'background':'url('+ orderItem.product.imgUrl +')', 'background-repeat':' no-repeat','background-size': 'cover;','background-position': 'center, center' }" ></div>
      <div class="order-title">
        <p>{{orderItems.product.title}}</p>
      </div>
    </div>

using ngStyle caused this:

attributes are not applied properly...

Possible duplicate of Angular2 dynamic background images

Prachi
– Prachi

2018-06-29 11:28:03 +00:00
Commented Jun 29, 2018 at 11:28 — Prachi
– Prachi, Commented Jun 29, 2018 at 11:28

Sachila Ranawaka · Accepted Answer · 2018-06-29 13:03:33Z

2

use the ngStyle tag

<div   [ngStyle]="{'background-image':'url( orderItem.product.imgUrl )', 'background-repeat':' no-repeat','background-size': 'cover','background-position': 'center, center' }"  class="order-img"  ></div>

Demo

edited Jun 29, 2018 at 13:03

answered Jun 29, 2018 at 11:20

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

1 Comment

Roxy'Pro Over a year ago

Why did you change background to background-image?

Abhishek Ekaanth · Accepted Answer · 2018-06-29 11:29:13Z

0

Try this.

CSS

.order-img{
background: url(--content);
background-repeat: no-repeat;
background-size: cover;
background-position: center, center;
}

HTML

<div *ngFor="let orderItems of receiptItems;" class="order-article animated bounceInLeft">
  <div class="order-img" [attr.outage-count]="orderItems.product.img.url" ></div>
  <div class="order-title">
    <p>{{orderItems.product.title}}</p>
  </div>
</div>

answered Jun 29, 2018 at 11:29

Abhishek Ekaanth

2,5872 gold badges24 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to define multiple styles on div in .html template Angular

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related