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

angular, angular-ng-if, ngfor

Solution

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!

Problem

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"

Original source