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.

halfer
  • 19,824
  • 17
  • 99
  • 186
gjvatsalya
  • 1,129
  • 13
  • 29
  • Check my question and answer [here](https://stackoverflow.com/questions/46810145/angular-2-use-a-template-for-ng-content-to-use-inside-component-loop/46810906#46810906) :) – Lansana Camara Apr 20 '18 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? – gjvatsalya Apr 20 '18 at 17:52
  • This might help: https://stackoverflow.com/a/46977011/4850646 – Lucas Basquerotto Apr 20 '18 at 18:00
  • 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}}` – Lansana Camara Apr 20 '18 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 }}`). – Lucas Basquerotto Apr 20 '18 at 18:07
  • 1
    Ah, I see. It works now! Thanks for the help, guys! I really appreciate it. – gjvatsalya Apr 20 '18 at 18:08

0 Answers0