ng-container inside a loop not repeated

for the following app
the "injected content" is displayed in the latest child component only, instead of being displayed in all child components

the parent component calls the child component three times, each time it injects content that is received from AppComponent.

stackblitz

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'child',
  template: `child<br /><ng-content select="[slot]"></ng-content><hr />`,
  standalone: true,
  imports: [CommonModule],
})
export class ChildComponent {}

@Component({
  selector: 'parent',
  template: `
    <child *ngFor="let item of [1,2,3]">
     <ng-content slot select="[slot]"></ng-content>
    </child>
`,
  standalone: true,
  imports: [CommonModule, ChildComponent],
})
export class ParentComponent {}

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, ParentComponent],
  template: `
    <parent>
      <ng-container slot>injected content</ng-container>
    </parent>`,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

You can't with ng-content, instead use ng-template and ng-contatiner:

import 'zone.js/dist/zone';
import { Component, Input, TemplateRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'child',
  template: `
  child<br />
    <ng-content select="[slot]"></ng-content>
  <hr />
  `,
  standalone: true,
  imports: [CommonModule],
})
export class ChildComponent {}

@Component({
  selector: 'parent',
  template: `
    <child *ngFor="let item of [1,2,3]">
      <ng-container slot [ngTemplateOutlet]="tpl"></ng-container>        
    </child>
`,
  standalone: true,
  imports: [CommonModule, ChildComponent],
})
export class ParentComponent {
  @Input() tpl!: TemplateRef<any>;

}

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, ParentComponent, ChildComponent],
  template: `
    <parent [tpl]="content">
      <div slot>injected content</div>
    </parent>

    <ng-template #content>
      <div slot>injected content</div>
    </ng-template>
    
    `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

In the main component (in this case app), send the content you want to repeat as an input of type TemplateRef:

<parent [tpl]="content">
      <div slot>injected content</div>
</parent>

<ng-template #content>
      <div slot>injected content</div>
</ng-template>

Then, on your parent componentt (wher you iterate with *ngFor), recive that content and use itt within a ng-container:

export class ParentComponent {
  @Input() tpl!: TemplateRef<any>;
}

and

<child *ngFor="let item of [1,2,3]">
      <ng-container slot [ngTemplateOutlet]="tpl"></ng-container>        
</child>

Also, you can add de slot atribute to the container, for filtering in the child:

child<br />
    <ng-content select="[slot]"></ng-content>
<hr />