title: How to combine ngIf with ngFor
body: <p>I am new to Angular.</p>
  
  <p>I would like to to print list of products, which are in relation with distributor. For that I thought about combaining *ngFor *ngIf so here is a code:</p>
  
  <pre><code>&lt;div class="distributors-here ui-g-12" *ngIf="distributors"&gt;
    &lt;h2 &gt;Distributors  &lt;i class="fa icon fa-plus"(click)="showDialog()"&gt;&lt;/i&gt;&lt;/h2&gt;
    &lt;p class="error-message" *ngIf="errorMessage.length &gt;0"&gt;Operation couldn't be executed:&lt;/p&gt;
    &lt;p class="error-message"&gt;{{errorMessage}}&lt;/p&gt;
    &lt;ul class="distributors-list ui-g-12"&gt;
      &lt;li class="distributor-item ui-md-3 ui-g-6" *ngFor="let distributor of distributors "&gt;
        &lt;i class="fa icon fa-times remove-distributor"(click)="removeDistributor(distributor.id,distributor.name)"&gt;&lt;/i&gt;
        &lt;div class="distributor-item-content"&gt;
          &lt;p&gt;id: {{distributor.id}}&lt;/p&gt;
          &lt;p&gt;name: {{distributor.name}}&lt;/p&gt;
            &lt;div *ngIf="products"&gt;
              &lt;p&gt;products&lt;/p&gt;
              &lt;ol&gt;
                &lt;li  *ngFor="let product of products" *ngIf="product.distributor.id == distributor.id"&gt;dist&lt;/li&gt;
              &lt;/ol&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I want to loop over the products array and if the distributor id of product matches with distributor id from other array I will have it printed new li element created.</p>
  
  <p>Unfortunately I get an error: </p>
  
  <blockquote>
    <p>Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * </p>
    
    <p>[ERROR ->]*ngIf="product.distributor.id== distributor.id"</p>
  </blockquote>
  
  <p>Does anyone knows how to refactor this code to make it work?</p>