0

I'm not sure if I'm even using the correct terminology, but here's what I'm trying to do.

I have a grid component:

export class GridComponent { @Input() items: any[]; }

In the HTML, I just have this: 

<div class="grid"> <ul class="row"> <li *ngFor="let item of items; let i = index;" class="col-lg-3 col-sm-4 col-xs-6 card-container"> <ng-content></ng-content> </li> </ul> </div>

So essentially, I'm going to pass in items (which could be anything depending on the app requirements), and the component will create a grid for me.

However, I still want the flexibility to construct whatever HTML I want for each iteration of the loop. So I'll need access to each "item" variable of the loop iteration.

I've searched around, and I've come across ngTemplateOutletContext. But there are similar things being used as well. Not sure if I'm just getting confused, but I was hoping someone could give me a clear answer on how to solve this issue.

Improve this question
6
  • Check my question and answer here :) Commented Apr 20, 2018 at 17:32
  • @Lansana - Thank you! That works great! Quick question though - is there a way to get the index (of the loop iteration) implicitly as well? Commented Apr 20, 2018 at 17:52
  • 1
    @gjvatsalya You can pass in an object with the $implicit instead. So instead of {$implicit: item}, do something like {$implicit: {item: item, index: index}} Commented Apr 20, 2018 at 18:04
  • 1
    @gjvatsalya You can do as Lansana said, then you would access the index as {{ item.index }} (take note that in this way you would call your element as {{ item.item }} and not just {{ item }}). Commented Apr 20, 2018 at 18:07
  • 1
    Ah, I see. It works now! Thanks for the help, guys! I really appreciate it. Commented Apr 20, 2018 at 18:08
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.