4

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.

Actually any *ngFor finish the loop with this condition : index < array.length. I want to know if there is a way to end a loop with another condition like : i < myVariable.

If you wonder why I want to do that, it's because I'm working on a picture gallery working this way :

<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 example, I create a row each 3 pics. I have three types of rows : - Display one pic, - Display two pics, - Display three pics.

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.

Thank you very much for your help!

glemiere
  • 4,790
  • 7
  • 36
  • 60
  • 1
    Just to expose you to other ecosystems: If you used JSX you wouldn't have any confusion about this (as its just JavaScript) and well supported with TypeScript : https://www.youtube.com/watch?v=-oEa6UueHsk – basarat Aug 01 '16 at 23:24
  • 1
    Hope this might help as well for alternative of [loop break](https://stackoverflow.com/questions/39911219/break-ngfor-loop-in-angualr2/44313643#44313643) – KCP Jun 01 '17 at 17:29

2 Answers2

3

*ngFor provides a last value:

  <div *ngFor="let pic of pics; let i = index; let last=last">
    <div *ngIf="last">
      ...
    </div>
  </div>

See also Implementing ngClassEven ngClassOdd for angular 2

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Hi! Thank you very much for your fast answer, but it is not what I'm looking for. As you can see on the angular2 documentation : "last will be set to a boolean value indicating whether the item is the last one in the iteration." I don't need to detect when I'm on the last index, I have to allow my loop to continue after the last index. – glemiere Aug 01 '16 at 18:57
  • No idea what you mean with stop condition. – Günter Zöchbauer Aug 01 '16 at 18:58
  • What I mean is that ngFor is a loop that stop when the index is superior to array.length. I need to stop my loop when the index is superior to a variable of my class. – glemiere Aug 01 '16 at 19:01
  • You can't stop the loop. You can use `ngIf="i <= pics.length"` to prevent items to be added that don't match the condition or use a pipe that filters the items you don't want to be shown. – Günter Zöchbauer Aug 01 '16 at 19:02
1

I finally solved my issue an ugly but working way... Instead of writing another end condition I did make a loop with an array of length that is calculated by a function. I read my other array (the one with my pics) in that loop.

Angular should really make something for that! Thank you for your help guys!

Example of how to solve it :

<div *ngFor="let galleryIndex of galleryIndexes; let i = index">
    <div *ngIf="whichRowType(galleryIndex) == 3">
        <small>pics[setCurrentIndex(galleryIndex)].id</small>
        <small>pics[currentIndex + 1].id</small>
        <small>pics[currentIndex + 2].id</small>
    </div>

    <div *ngIf="whichRowType(galleryIndex) == 2">
        <small>pics[setCurrentIndex(galleryIndex)].id</small>
        <small>pics[currentIndex + 1].id</small>
    </div>

    <div *ngIf="whichRowType(galleryIndex) == 1">
        <small>pics[setCurrentIndex(galleryIndex)].id</small>
    </div>
</div>
glemiere
  • 4,790
  • 7
  • 36
  • 60