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

Answer 1

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

 
 {{displayValue}} 

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.