在模板中渲染QueryList的元素

Question

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 ?

Answer 1

You can't render QueryList returned by ContentChildren directly, but if each item has a reference for it's own ng-template , then it can be rendered with *ngTemplateOutlet .

Full example at Stackblitz.

//itemsList.component.ts
import {QueryList, ViewChildren, Component, ContentChildren} from '@angular/core'
import {Item} from './item.component'

@Component({
  selector: 'items-list',
  template: `
    List of items:
    <ul>
      <li *ngFor='let item of items'>
        <ng-container *ngTemplateOutlet='item.template'></ng-container>
      </li>
    </ul>
  `
})
export class ItemsList {
  @ContentChildren(Item)
  items: QueryList<Item>
}

//item.component.ts
import {Component, ViewChild, TemplateRef, Input} from '@angular/core'

@Component({
  selector: 'item',
  template: `<ng-template #itemTemplate>Item data: {{itemData}}</ng-template>`
})
export class Item {
  @Input()
  itemData: number
  @ViewChild('itemTemplate')
  template: TemplateRef<any>
}

//app.component.html
<items-list>
  <item [itemData]='1'></item>
  <item [itemData]='2'></item>
</items-list>