Pass "content-projection" into recursive NGTemplateOutlet component?

Issue

I am trying to create a recursive component for a node-tree using NgTemplateOutlet.

I’m stuck at the part where I need the html that was passed into the component at top-level to be shown inside my recursive component..

I am basing my recursive component on this article, and this StackBlitz example.

app.component.html

<wt-nested-list [nodes]="topNodeTree">
  <div *nestedListNode="let node">
    <h1>{{ node.nodeName }}</h1>
  </div>
</wt-nested-list>

nested-list.component.html

<div class="wt-nested-list">

<ng-container *ngFor="let node of nodes">
  <!-- node -->
  <div class="wt-nested-list__node">
    <ng-container *ngTemplateOutlet="nodeTemplate; context: {$implicit: node}"></ng-container>
    <!-- child nodes of node -->
    <ng-container *ngIf="node.children">
      <wt-nested-list>
        ???
      </wt-nested-list>
    </ng-container>
  </div>
</ng-container>

</div>

How do I ge the the custom html ( <div *nestedListNode= ...etc ) from app.component.html to also be placed into the recursive part inside wt-nested-list.component.html ? (indicated by ???)

Here is a www.stackblitz.com example that might help explain my problem
https://stackblitz.com/edit/angular-wt9f4x

Solution

I would solve this by defining optional @Input property that I will pass for nested component:

nested-list.component.ts

class NestedListComponent {

  @Input() template: TemplateRef<any>;

  @ContentChild( NestedListNodeDirective, { read: TemplateRef } ) nodeTemplate;

Now, in template we need to make sure that at least one of these template exists:

nested-list.component.html

<ng-container *ngTemplateOutlet="nodeTemplate || template; context: ..."></ng-container>
...
<wt-nested-list [nodes]="node.children" [template]="nodeTemplate || template">
</wt-nested-list>

Stackblitz Example

Answered By – yurzui

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.