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