To access the individual items of avatarItems in your HTML template, you can use the ngFor directive and iterate over avatarItems directly.

Here's an example:

HTML

<div *ngFor="let item of avatarItems.slice(0, showCount)">
  <!-- Display item properties or use them within the <ng-content> -->
  <p>{{ item.someProperty }}</p>
  <ng-content></ng-content>
</div>

slice method is called directly on avatarItems within the ngFor directive, allowing you to display only the desired number of items based on the showCount variable.

Make sure to replace someProperty with the actual property name you want to display from item. You can access any property of item inside the <div> as needed.

Also, ensure that the <ng-template> is being used correctly as the parent container for the content projection (<ng-content>) in the consuming component

**Updated Answer**

In your avatar-list.component.ts file, add a public property to hold the sliced avatarItems:

public slicedAvatarItems: ThyAvatarComponent[];
@ContentChildren(ThyAvatarComponent)
private set avatarComponents(value: QueryList<ThyAvatarComponent>) {
  this.avatarItems = value.toArray();
  this.avatarList = value;
  this.slicedAvatarItems = this.avatarItems.slice(0, this.showCount);
}

html

<ng-container *ngFor="let item of slicedAvatarItems">
  <ng-template [ngTemplateOutlet]="item.templateRef"></ng-template>
</ng-container>

**get templateRef in ThyAvatarComponent**

Ts

import { ViewChild } from '@angular/core';

@ContentChildren(ThyAvatarComponent)
@ViewChild(ThyAvatarComponent, { read: TemplateRef }) avatarComponents: QueryList<ThyAvatarComponent>;

HTML

<ng-container *ngFor="let item of avatarComponents">
  <ng-template [ngTemplateOutlet]="item.templateRef"></ng-template>
</ng-container>

**Updated answer**

avatar-list.component.html:

<ng-content></ng-content>

avatar-list.component.ts:

import { Component, ContentChildren, QueryList, AfterContentInit, ElementRef } from '@angular/core';
import { ThyAvatarComponent } from './thy-avatar.component';

@Component({
  selector: 'thy-avatar-list',
  template: `
    <ng-container *ngFor="let item of templateRefs">
      <ng-container *ngTemplateOutlet="item"></ng-container>
    </ng-container>
  `,
})
export class ThyAvatarListComponent implements AfterContentInit {
  @ContentChildren(ThyAvatarComponent, { read: ElementRef }) avatarComponents: QueryList<ElementRef>;

  templateRefs: Array<ElementRef<HTMLElement>> = [];

  ngAfterContentInit() {
    this.avatarComponents.forEach((avatarComponent) => {
      this.templateRefs.push(avatarComponent.nativeElement);
    });
  }
}

thy-avatar.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'thy-avatar-component',
  template: `
    <ng-template #avatarTemplate>
      <!-- Your avatar component template here -->
      <div>{{ avatarData }}</div>
    </ng-template>
  `,
})
export class ThyAvatarComponent {
  avatarData = 'Avatar Data';
}