I have got a list component which should manage its list elements according to some rules. Some list elements must be rendered multiple times while others must not be rendered at all. I made a minimal case to show the problem:

import { Component, QueryList, ContentChildren, ViewChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'list-item',
  template: `
    <ng-template>
      <ng-content></ng-content>
    </ng-template>`
})
export class ListItemDirective {
  @ViewChild(TemplateRef) content;
}

@Component({
  selector: 'list',
  template: `
    <ng-container *ngTemplateOutlet="contentChildren.toArray()[0].content"></ng-container>
    <div>Here could come some other components</div>
    <ng-container *ngTemplateOutlet="contentChildren.toArray()[0].content"></ng-container>
   `,
})
export class ListComponent {
  @ContentChildren(ListItemDirective) contentChildren: QueryList<ListItemDirective>;
}

And this is how its being used. The basic idea is that I have got a list of homogeneous or heterogeneous components and its the lists responsibility to decide when and why each one of them should or should not be rendered. (And somethimes some elements must be rendered more than once.

<list>
    <list-item *ngFor="let clip of clips">
      <card (click)="open(clip)">
        <video-card [clip]="clip"></video-card>
      </card>
    </list-item>
  </list>

The problem I am facing now is that in that particular case, it renders the clip only once even though have it twice in my list template. Why is that?

0 Answers