title: How to define multiple styles on div in .html template Angular
body: <p>I need to set this properties on my div:</p>
  
  <pre><code>background: url();
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center, center;
  </code></pre>
  
  <p>This is my div:</p>
  
  <pre><code>&lt;div *ngFor="let orderItems of receiptItems;" class="order-article animated bounceInLeft"&gt;
    &lt;div class="order-img"   [style.background]="'url('+ orderItems.product.img.url +')'" &gt;&lt;/div&gt;
    &lt;div class="order-title"&gt;
      &lt;p&gt;{{orderItems.product.title}}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see guys I've set <code>[style.background] url</code> but I don't know how to set rest of the attributes / multiple attributes.. </p>
  
  <p>Thanks
  Any kind of help would be great !</p>
  
  <p>-------- EDIT:</p>
  
  <pre><code> &lt;div *ngFor="let orderItems of receiptItems;" class="order-article animated bounceInLeft"&gt;
        &lt;div class="order-img"   [ngStyle]="{'background':'url('+ orderItem.product.imgUrl +')', 'background-repeat':' no-repeat','background-size': 'cover;','background-position': 'center, center' }" &gt;&lt;/div&gt;
        &lt;div class="order-title"&gt;
          &lt;p&gt;{{orderItems.product.title}}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>using ngStyle caused this:</p>
  
  <p><a href="https://i.stack.imgur.com/uaxgu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uaxgu.png" alt="enter image description here"></a></p>
  
  <p>attributes are not applied properly...</p>