How can I break from an *ngFor loop in Angular 4?

Question

I just want this loop to break after it executes once.

  <div *ngFor="let thing of things">
    <div *ngIf="thing == otherThing">
      <h4>Sub Title</h4>
      ***BREAK HERE***
    </div>
  </div>

Much more work. I was just hoping there was a more elegant way. — Jus10, Jun 15 '17 at 01:19
For me that's the least resistance way to do this sort of thing. I guess it's up to each person though. — Harry Ninh, Jun 15 '17 at 03:28
I did end up doing tat... Just sucks lol Thank you for your help :) — Jus10, Jun 16 '17 at 02:08
Does this answer your question? [Break NgFor Loop in Angular 2](https://stackoverflow.com/questions/39911219/break-ngfor-loop-in-angular-2) — Varun Sukheja, Nov 09 '19 at 19:29

score 2 · Accepted Answer · answered Jun 15 '17 at 01:16

2

You can't break *ngFor.

But you can build a custom pipe to filter the data.

But as Jus10's said, the better way is to do it in ts-file.

answered Jun 15 '17 at 01:16

augustine

538
4
15

Ya... Seems like a lot of work the way I have it all set up... lol. I guess if it's the only option... – Jus10 Jun 15 '17 at 01:18
Did it in TS. Was just hoping there was a better way :) Thank you! – Jus10 Jun 16 '17 at 02:09

score 1 · Answer 2 · answered May 24 '19 at 23:59

1

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

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

As ausutine mentioned:

You can't 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>

answered May 24 '19 at 23:59

Usama nadeem

411
7
15

1

it doesn't break the loop, it keeps on iterating over products array. But, in the practice it does the job, though not so efficiently – B. León Jun 15 '19 at 20:01
You are absolutely right Leon. Highlighted point says the same that you can't break the loop. – Usama nadeem Jun 19 '19 at 04:19

score 0 · Answer 3 · answered Dec 11 '20 at 14:50

0

Please try this slice, scenario (you want to run loop for n elements)

<div *ngFor="let thing of things.slice(0,1)">
<div *ngIf="thing == otherThing">
  <h4>Sub Title</h4>
</div>

answered Dec 11 '20 at 14:50

Dilip Upadhyay

1
1

How can I break from an *ngFor loop in Angular 4?

3 Answers3