How to add a condition for ngFor loop

user_16481300 0
Viewed 917

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 <

clarity angular html javascript
2 Answers

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"
user_24902860

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>
user_80070410
Related