title: Angular 2 - *ngFor : Is there a way to use an alternative end condition?
body: <p>I come here because after many hours googling, I didn't find a way to use an alternative stop condition for the loops made with the built-in directive : *ngFor.</p>
  
  <p>Actually any *ngFor finish the loop with this condition : <code>index &lt; array.length</code>. I want to know if there is a way to end a loop with another condition like : <code>i &lt; myVariable</code>.</p>
  
  <p>If you wonder why I want to do that, it's because I'm working on a picture gallery working this way :</p>
  
  <pre><code>&lt;div *ngFor="let pic of pics; let i = index"&gt;
      &lt;div *ngIf="whichRowType(i) == 3"&gt;
          &lt;small&gt;pic[whichIndex(i)].id&lt;/small&gt;
          &lt;small&gt;pic[currentIndex + 1].id&lt;/small&gt;
          &lt;small&gt;pic[currentIndex + 2].id&lt;/small&gt;
      &lt;/div&gt;
  
      &lt;div *ngIf="whichRowType(i) == 2"&gt;
          &lt;small&gt;pic[whichIndex(i)].id&lt;/small&gt;
          &lt;small&gt;pic[currentIndex + 1].id&lt;/small&gt;
      &lt;/div&gt;
  
      &lt;div *ngIf="whichRowType(i) == 1"&gt;
          &lt;small&gt;pic[whichIndex(i)].id&lt;/small&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this example, I create a row each 3 pics. I have three types of rows :
   - Display one pic,
   - Display two pics,
   - Display three pics.</p>
  
  <p>The problem is, the index of my first picture on each row is always inferior to the index used to display the row. So if I want to be able to display all my pictures, I have to be able to change my ending condition of my *ngFor.</p>
  
  <p>Thank you very much for your help!</p>