Friday, 22 February 2019

Render elements of QueryList in the template

I have two components: items-list and item

I use them like this:

<items-list items="items"></items-list>

On the inner level items-list looks like this:

<ngx-carousel>
 <ngx-item *ngFor="let item of items">
   <item data="item"></item>
 </ngx-item>
</ngx-carousel>

However this approach is not flexible because I should use some "items" array to populate items.

What I want to do is to rework the approach like this:

<items-list>
 <item data="dataForFirstItem"></item>
 <item data="dataForSecondItem"></item>
</items-list>

But the problem here is that I don' understand how to rework the implementation of items-list:

<ngx-carousel>
 <ngx-item *ngFor="let item of items">
  <!-- each item should be rendered here -->
 </ngx-item>
</ngx-carousel>

ngx-item requires component to be placed inside.

I used ContentChildren to capture all rendered item components in QueryList. But how to render each item inside the ngx-item ?



from Render elements of QueryList in the template

No comments:

Post a Comment