Angular - How to insert two components inside a ng-container ngTemplateOutlet?

Question

I have created a wrapper component called wrapperComponent:

export class Wrappercomponent {
  @ContentChild(TemplateRef) detailRef;

  toggleComponents: boolean = false;
  constructor() {}
  toggle() {
    this.toggleComponents = !this.toggleComponents;
  }
}

and I have this template html:

<div *ngIf="toggleComponents; else plugintemplate">
  <ng-container *ngTemplateOutlet="detailRef"></ng-container>
</div>
<ng-template #plugintemplate></ng-template>
<button (click)="toggle()">Toggle</button>

I would like to toggle two components inside my wrapper component (my-component-1 and my-component-2):

<wrapper-component>
  <ng-template #detailRef>
    <my-component-1></my-component-1>
  </ng-template>
  <my-component-2></my-component-2>
<wrapper-component>

With my logic I can see only the component inserted into templateRef detailRef but the other one (my-component-2) is never visible. How can I insert two components inside a two differents containers?

Answer 1

This line will always just select the first TemplateRef

@ContentChild(TemplateRef) detailRef;

You can give both templates unique identifiers:

<wrapper-component>
  <ng-template #detailRef>
    <my-component-1></my-component-1>
  </ng-template>
  <ng-template #pluginRef>
    <my-component-2></my-component-2>
  </ng-template>
</wrapper-component>

Then select them using strings

export class WrapperComponent {
  @ContentChild("detailRef") detailRef;
  @ContentChild("pluginRef") pluginRef;
  toggleComponents: boolean = false;

  toggle() {
    this.toggleComponents = !this.toggleComponents;
  }
}

A simple ternary statement is enough to switch them

<ng-container *ngTemplateOutlet="toggleComponents ? detailRef : pluginRef"></ng-container>
<button (click)="toggle()">Toggle</button>

Stackblitz: https://stackblitz.com/edit/angular-ivy-vyuv3x?file=src/app/wrapper/wrapper.component.ts

ContentChild docs: https://angular.io/api/core/ContentChild

---

You can also use @ContentChildren(TemplateRef) to get all the inner templates, no identifier necessary. In this example I just cycle through an arbitrary amount:

<wrapper-component>
  <ng-template>
    <my-component-1></my-component-1>
  </ng-template>
  <ng-template>
    <my-component-2></my-component-2>
  </ng-template>
  <ng-template>
    <my-component-3></my-component-3>
  </ng-template>
</wrapper-component>

export class WrapperComponent {
  @ContentChildren(TemplateRef) templates: QueryList<TemplateRef<any>>;
  index = 0;

  get currentTemplate() {
    return this.templates.get(this.index);
  }

  cycle() {
    this.index = (this.index + 1) % this.templates.length;
  }
}

<ng-container *ngTemplateOutlet="currentTemplate"></ng-container>
<button (click)="cycle()">Cycle</button>

Stackblitz: https://stackblitz.com/edit/angular-ivy-rzyn64?file=src/app/wrapper/wrapper.component.ts