Search code examples
javascripthtmlangularclarity

How to add a condition for ngFor loop

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 <

Solution

  • 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>