After countless hours of searching on Google, I have yet to discover a method for implementing an alternative stop condition for loops created with the *ngFor directive.
By default, *ngFor loops end with this condition: index < array.length. Is there a way to conclude a loop with a different condition, such as i < myVariable?
I am currently developing a picture gallery that operates in the following manner:
<div *ngFor="let pic of pics; let i = index">
<div *ngIf="whichRowType(i) == 3">
<small>pic[whichIndex(i)].id</small>
<small>pic[currentIndex + 1].id</small>
<small>pic[currentIndex + 2].id</small>
</div>
<div *ngIf="whichRowType(i) == 2">
<small>pic[whichIndex(i)].id</small>
<small>pic[currentIndex + 1].id</small>
</div>
<div *ngIf="whichRowType(i) == 1">
<small>pic[whichIndex(i)].id</small>
</div>
</div>
In this specific case, I create a new row every three pictures where each row can display one, two, or three images respectively.
The issue arises from the fact that the index of the first picture in each row is always less than the index used to display the row. To ensure all pictures are displayed correctly, I need the flexibility to modify the ending condition of my *ngFor loop.
Your assistance in this matter would be greatly appreciated. Thank you!