4

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"

ob1
  • 1,425
  • 1
  • 20
  • 33
Michał Ziobro
  • 10,759
  • 11
  • 88
  • 143
  • I'd suggest the slice pipe for limiting max rows (or actually max items) https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html – Günter Zöchbauer May 08 '17 at 08:42
  • It's ok but I would like to also know how I could reference index and content variables of ngFor loop in the child element it could also be useful – Michał Ziobro May 08 '17 at 08:56
  • I don't know what `` is. If it's a component you built, just add inputs like `@Input() index:int; @Input() content:SomeType;` and then pass it like ` – Günter Zöchbauer May 08 '17 at 08:58
  • so can I define `let-i="index"` and then use in grid-card component this statement `*ngIf="i < gridCols*maxRows"`. I have thought it doesn't work as my elements never hides – Michał Ziobro May 08 '17 at 09:01
  • 1
    It should work. `#i="index"` is outdated and is not supported since almost a year. `let-i="index"` is the correct form. You can also use `` instead of ` – Günter Zöchbauer May 08 '17 at 09:05
  • So I don't know why *ngIf doesn't hide element when index i is greater then allowed number of rows and cols – Michał Ziobro May 08 '17 at 09:07
  • 2
    Try to debug it by writing `{{ i }}` front of ` – yurzui May 08 '17 at 09:07
  • ok I've tried something like this `*ngIf="i < 3"` and it worked for me to hide more then 3 elements, so there is some bug in `gridCols*maxRows` – Michał Ziobro May 08 '17 at 09:10
  • Yes, this `gridCols*maxRows` to huge number. I don't know why I have to inspect it. – Michał Ziobro May 08 '17 at 09:26

1 Answers1

8

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!

ob1
  • 1,425
  • 1
  • 20
  • 33