Break NgFor Loop in Angular 2

Question

I am trying to iterate array using *ngFor inside the template and searching for an element based on the key, using *ngIf. Now when the condition is matched with the key I want to break the *ngFor. I wondered if there any option in angular2 to break the ngFor loop based on condition.

Answer 1

I had to break the loop so i followed the following approach.

I don't know whether it's helpful or not still sharing that piece of code.

As Gunter mentioned:

There is no option to break ngFor.

It's just an alternate way to do so.

<ng-container *ngFor="let product of products; let i = index">
    <div *ngIf="i < 10">
        <span> product.name </span>
    </div>
</ng-container>

Answer 2

There is no option to break ngFor. You can use a custom pipe that doesn't return values after the element where the condition is met.

For more concrete approaches please provide more concrete information about what you actually try to accomplish.

Answer 3

Since there is no option to break for ngFor, You can try an alternative way though.

This way doesn't actually break the loop but skips the next element to display/run after certain condition is satisfied whether the next element is true of false .

In page.html

<div class="loop-div" *ngFor="let element of array">
 <div class="check-div" *ngIf="displayCondition(checkValue, element.value)" > {{displayValue}} </div>
</div>

In page.ts

checkSameValue;   //initialised before constructor
displayCondition(checkValue, elementValue) {
        if(this.checkSameValue && this.checkSameValue == checkValue) {
          return false;
        }
        if(checkValue == elementValue) {
          this.checkSameValue = checkValue;
          return true;
        }
      }

This particular code escapes the further .check-div to display even if the condition is satisfied. i.e once the condition is satisfied the loop doesn't display until and unless the the checkValue is different.