title: How to use ngStyle for background url in Angular 4
body: <p>I have below html:</p>
  
  <pre><code>  &lt;li&gt;
      &lt;div class="w3l_banner_nav_right_banner1" style="background:url('./assets/images/2.jpg') no-repeat 0px 0px;"&gt;
          &lt;h3&gt;Make your &lt;span&gt;food&lt;/span&gt; with Spicy.&lt;/h3&gt;
              &lt;div class="more"&gt;
                  &lt;a href="products.html" class="button--saqui button--round-l button--text-thick" data-text="Shop now"&gt;Shop now&lt;/a&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <p>I want to replace image url <code>/assets/images/2.jpg</code> with dynamic variable like <code>{{ article.uri }}</code>.</p>
  
  <p>I tried with several way from below ref:</p>
  
  <p><a href="https://stackoverflow.com/questions/37577343/attribute-property-binding-for-background-image-url-in-angular-2">Attribute property binding for background-image url in Angular 2</a></p>
  
  <p><a href="https://stackoverflow.com/questions/34875426/how-to-add-background-image-using-ngstyle-angular2">How to add background-image using ngStyle (angular2)?</a></p>
  
  <p><strong>Tried so far:</strong></p>
  
  <pre><code>&lt;li *ngFor="let article of arr;let i=index;"&gt;
     &lt;div  *ngIf="i == 0" class="w3l_banner_nav_right_banner" [ngStyle]="{ 'background-url': 'url('+article.uri+')'} no-repeat 0px 0px;"&gt;
       &lt;h3&gt;Make your &lt;span&gt;food&lt;/span&gt; with Spicy.&lt;/h3&gt;
              &lt;div class="more"&gt;
                  &lt;a href="products.html" class="button--saqui button--round-l button--text-thick" data-text="Shop now"&gt;Shop now1&lt;/a&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/li&gt;
  </code></pre>
  
  <p>I am using Angular 4.1.3.</p>