How to project repetitive content in angular component

I'm building a tree component. where the data is an array of nodes

export interface TreeNode {
  id:number;
  value:any;
  parent:number|null;
}
...
@Input()
data:TreeNode[] = [];

I do my binding and everything is fine, Yet, I want my component to be customizable.
For now, I'm displaying the Hierarchy (cards representing nodes, and arrows to link them)

<!-- for simplicity -->
<div class="tree-container">
  <div *ngFor="let node of nodes" class="tree-node">{{node.value}}</div>
</div> 

this works fine with simple values but I want it possible to project content based on the value.

For example, the Angular Material Table allows the following code

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

I want my component to be implemented like that

<tree-view [data]="data">
    <div tree-node *nodes="let node"> {{node.id}} <span>Yay now I can show custom stuff like name {{node.value.name}}</span></div>
</tree-view>

how can I achieve this ?

All I know about content projection is the <ng-content>, I know that I can use slots but I can only use that with single spots not repetitive content. any clue?
> NOTE: I'm using Angular 15

After some research and digging deeper in Angular Structural Directives I finally found the answer myself. The trick here is to use ngTemplateOutlet. Here's what I had to do:

Component template

<div class="tree-container">
  <div *ngFor="let node of nodes" class="tree-node">
  <!-- maybe some other stuff here -->

  <ng-container *ngTemplateOutlet="content.template; context: {$implicit: node}"></ng-container>

  <!-- maybe some more other stuff here -->
  </div>
</div> 

content is a custom directive that can be created like the following

Directive

@Directive({
  selector: "[nodes]"
})
export class NodesDirective {
  constructor(public template:TemplateRef<any>) {}
}

> NOTE: make sure to declare it like any other component in the modules.ts file

Component Class

In the component.ts file add the following attribute

@ContentChild(NodesDirective) content!: NodesDirective;

And that's it. We're ready to go.

To implement this, the component can be used like this

<tree-view [data]="data">
    <div *nodes="let node">
       <!-- put whatever you want here -->
       <h1>{{node.id}}</h1>
    </div>
</tree-view>

hope this helps someone else