3

I am creating a table using Clarity. They have their own syntax, clrDgItems, but the structure is the same as ngFor.

I want to create an loop for my table, which filters the first 10 items, and then a second table which only shows items 11-20.

You should also be able to go to the next page. That will say, first table to update to items 21-30 and second table to 31-40

My first thoughts was something like,

ngFor="let employee of employees; i as index; i < firstMaxIndex;"
ngFor="let employee of employees; i as index; i > firstMaxIndex && i < secondMaxIndex"

But ngFor loop doesnt work like that, and I get the error: NG5002: Parser Error: Unexpected token <

Sebastian Ciocarlan
  • 301
  • 2
  • 11
Robin Lindgren
  • 80
  • 1
  • 8
  • I suppose next statement can be condition, would that won't help instead of clubbing them together? – Bharat Jul 20 '21 at 07:08
  • Do you might explain more detail? – Apple Yellow Jul 20 '21 at 07:08
  • The condition should go inside `*ngFor` context, like this: `
    ...
    `     – lbsn Jul 20 '21 at 07:09
  • @Bharat You right, I am used to for-loops in C#, where the condition and declare is in the same parameters! – Robin Lindgren Jul 20 '21 at 07:12
  • @Lbsn Oh, thanks! I just thought it was possible to make both in ngFor as in C# for-loop. But the thing is that it's a whole different language, and they won't have the same structures, which I need to get in my head – Robin Lindgren Jul 20 '21 at 07:14
  • 1
    @Abinesh already posted it :). To me it makes more clean and readable code, like splitting the loop and condition as two different responsibilities. – Bharat Jul 20 '21 at 07:17

2 Answers2

4

It's better to separate out the condition and loop as below:

<ng-container *ngFor="let employee of employees; i as index;">
    <div *ngIf="i > firstMaxIndex && i < secondMaxIndex">
        // add elements or display values based on your needs.
    </div>
</ng-container>
Abinesh Amatya
  • 160
  • 1
  • 1
  • 7
4

Use slice

{{ value_expression | slice : start [ : end ] }}

So like this:

ngFor="let employee of employees | slice : 0 : firstMaxIndex"

ngFor="let employee of employees | slice : firstMaxIndex : secondMaxIndex"
misha130
  • 5,457
  • 2
  • 29
  • 51