title: Angular: using both *ngFor and *ngIf with reference to index value in child elements
body: <p>I would like to <strong>render objects</strong> from array observable in some grid-car components. In addition, I want to limit the number of grid cards to a value based on variables in my component i.e. <code>gridCols*maxRows</code> using <code>*ngIf</code> condition checking. </p>
  
  <p>I know that it is not possible to use both <code>*ngFor</code> and <code>*ngIf</code> simultaneously on the same element. So I need to use <code>&lt;template ngFor ...&gt;</code>
  to wrap my grid-card elements which will be conditionally rendered based on <code>*ngFor</code>. Given this, how I can reference <code>index</code> or <code>content</code> variables from <code>*ngFor</code> in <code>*ngIf</code>. </p>
  
  <pre><code>&lt;template ngFor let-content [ngForOf]="contentObjectsObservable | async" let-i="index" [ngForTrackBy]="trackByFn"&gt;
      &lt;grid-card *ngIf="i &lt; gridCols*maxRows" [content]="content" [style.width.%]="gridCardWidth"&gt;&lt;/grid-card&gt;
  &lt;/template&gt; 
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I have tried something like this </p>
  
  <pre><code> #i="index"
  </code></pre>
  
  <p>with such error message: </p>
  
  <blockquote>
    <p>There is no directive with "exportAs" set to "index"</p>
  </blockquote>