Angular: using both *ngFor and *ngIf with reference to index value in child elements

Question

I would like to render objects from array observable in some grid-car components. In addition, I want to limit the number of grid cards to a value based on variables in my component i.e. gridCols*maxRows using *ngIf condition checking.

I know that it is not possible to use both *ngFor and *ngIf simultaneously on the same element. So I need to use <template ngFor ...> to wrap my grid-card elements which will be conditionally rendered based on *ngFor. Given this, how I can reference index or content variables from *ngFor in *ngIf.

<template ngFor let-content [ngForOf]="contentObjectsObservable | async" let-i="index" [ngForTrackBy]="trackByFn">
    <grid-card *ngIf="i < gridCols*maxRows" [content]="content" [style.width.%]="gridCardWidth"></grid-card>
</template> 

UPDATE

I have tried something like this

 #i="index"

with such error message:

There is no directive with "exportAs" set to "index"

Answer 1

You can reference the index from *ngFor by putting let i = index in the *ngFor statement! Example:

<div *ngFor="let item of items; let i = index">
    <div *ngIf="i < (gridCols * maxRows)" class="row">
    <grid-card [content]="content" [style.width.%]="gridCardWidth"></grid-card>
    </div>
</div>

Make sure that you have defined gridCols and maxRows as numbers in your component!

gridCols:number = <your number>;
maxRows:number = <your number>;

Hope this helps!