Angular 2 - *ngFor : Is there a way to use an alternative end condition?
<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>