Limit the ngFor loop to two iterations

Question

How to limit the ngFor loop to only 2 iterations? I want there to be only 2 'chat-window' tags that can be displayed.

<div class="chat-window-container">
    <chat-window
            *ngFor="let box of windows; let i = index"
            [box]="box">
    </chat-window>
</div>

Possible duplicate of [Angular 2: how to apply limit to \*ngFor?](https://stackoverflow.com/questions/36388270/angular-2-how-to-apply-limit-to-ngfor) — Amit Chigadani, Jul 21 '17 at 08:43

Maxime Lafarie · Accepted Answer · 2017-07-21T10:15:09.347

2

Seems a duplicate of Angular 2: how to apply limit to *ngFor?

You can use Array.slice(...) do something like that if you don't want to use <template>:

<div class="chat-window-container">
    <chat-window
            *ngFor="let box of (windows ? windows.slice(0,2): []); let i = index"
            [box]="box">
    </chat-window>
</div>

EDIT : show the last two boxes (eg.: if 3 or more boxes):

You simply have to enhance a bit the Array.slice(...) parameters to make them more dynamic. This way, you'll always show the two latest boxes.

<div class="chat-window-container">
    <chat-window
            *ngFor="let box of (windows ? windows.slice(windows.length-2,2): []); let i = index"
            [box]="box">
    </chat-window>
</div>

For example, if you have 4 boxes in windows, it will be the same that:

<div class="chat-window-container">
    <chat-window
            *ngFor="let box of (windows ? windows.slice(2,2): []); let i = index"
            [box]="box">
    </chat-window>
</div>

edited Jul 21 '17 at 10:15

answered Jul 21 '17 at 08:39

Maxime Lafarie

2,172
1
22
41

Thank you it works. However when I open a 3rd box I want this one to replace the first one. Do I need a function or I can do this in HTML? – Jul 21 '17 at 08:55
@Floriane I just updated my answer with what you asked for :). This is a HTML way, but you also can do it from your component. – Maxime Lafarie Jul 21 '17 at 10:16
I do not understand why but when I test your solution with the .length-2 function. I can open the first 2 windows but then when I click to open another window, it closes the old windows. Do you know why ? – Jul 21 '17 at 13:39
@Floriane I need some more code to really understand the behavior you encounter. – Maxime Lafarie Jul 21 '17 at 13:59
Ok I created a new question to better explain my problem. 'Open the last 2 discussion windows' Thanks a lot ! – Jul 21 '17 at 14:21

score 2 · Answer 2 · answered Jul 21 '17 at 08:54

2

You could also try to keep your template clean of slicing and prepare the data in the component itself:

public get windows(): Window[] {
    return this.windows.slice(0,2);
}

or give the getter method another name, if you don't want to mix it up with existing getters in your component.

answered Jul 21 '17 at 08:54

basst314

184
5

Upvote for the how to keep the template clean comment ;) – Jota.Toledo Jul 21 '17 at 09:33

score 0 · Answer 3 · answered Feb 08 '18 at 07:55

0

Simple soultion:

<div *ngFor=""let tran of transactiondata;  let i=index">
    <div *ngIf="i<2">
        {{tran.id}}
    </div>
</div>

answered Feb 08 '18 at 07:55

Shashwat Gupta

5,071
41
33

MVG1984 · Answer 4 · 2017-07-21T08:41:09.780

-1

<div class="chat-window-container">
    <template *ngFor="let box of windows; let i = index">
        <chat-window [box]="box" *ngIf="i < 2">
        </chat-window>
    </template>
</div>

edited Jul 21 '17 at 08:41

answered Jul 21 '17 at 08:38

MVG1984

635
4
15

1

Your answer is wrong, you can't bind two structural directives to the same element. https://angular.io/guide/structural-directives – Maxime Lafarie Jul 21 '17 at 08:41
1

Not a really efficient answer, considering that if you have 1000 elements and you only want to display 2, you will still loop the whole collection – Jota.Toledo Jul 21 '17 at 09:33

Limit the ngFor loop to two iterations

4 Answers4