Using Angular: Incorporating multiple components into a ng-container ngTemplateOutlet

Question

Using Angular: Incorporating multiple components into a ng-container ngTemplateOutlet

In my project, I have constructed a wrapper component named wrapperComponent:

export class Wrappercomponent {
  @ContentChild(TemplateRef) detailRef;

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

Additionally, I have this specific template html:

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

My goal is to be able to toggle between two components residing 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>

However, based on my current logic, only the component inserted into templateRef detailRef is visible, while the other one (my-component-2) remains hidden. How can I successfully insert both components into separate containers?

angular typescript

Answer 1

Answer №1

Choosing the initial TemplateRef is quite straightforward:

@ContentChild(TemplateRef) detailRef;

If you want to differentiate between templates, assign unique identifiers like this:

<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>

To access them using strings:

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

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

A simple ternary operation can switch between them:

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

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

Explore ContentChild documentation: https://angular.io/api/core/ContentChild

An alternative method is using @ContentChildren(TemplateRef) to gather all inner templates without identifiers. Here's a way to cycle through them:

<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>

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

Answer 2

Choosing the initial TemplateRef is quite straightforward:

@ContentChild(TemplateRef) detailRef;

If you want to differentiate between templates, assign unique identifiers like this:

<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>

To access them using strings:

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

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

A simple ternary operation can switch between them:

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

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

Explore ContentChild documentation: https://angular.io/api/core/ContentChild

An alternative method is using @ContentChildren(TemplateRef) to gather all inner templates without identifiers. Here's a way to cycle through them:

<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>

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

Using Angular: Incorporating multiple components into a ng-container ngTemplateOutlet

Answer №1

Similar questions

Ways to incorporate NPM packages into your browser projects using TypeScript

Checking React props in WebStorm using type definitions

Collection of personalized forms where the parent is a FormGroup

Leveraging NGRX in an Angular Library

Organizing validators within reactive forms in Angular

Create a unique type in Typescript that represents a file name with its corresponding extension

Ionic datetime returns default values upon initialization

Create a collection of values and assign it to a form control in Ionic 2

What is the best way to incorporate a 'category filter' in Angular2?

Creating a responsive and engaging user interface can be achieved by adding animation effects to

Utilize ngx-translate with an array as interpolation values

Angular Project: Exploring Classes and Interfaces with and without the Export Keyword

Obtain the name of a node using its identification number in D3JS

Unleashing the power of RXJS: Leveraging IntervalObservable coupled with the

An unhandled promise rejection occurred because no routes could be found to match. URL Segment:

The NGRX + Resolver issue arises when the component loads before the action is fully dispatched, causing interaction problems

TypeScript does not evaluate the boolean left operand when using the && operator

Utilizing the MapToIterable Angular Pipe with TypeScript

Every time I attempt to submit the login form on the Ionic and Angular page, instead of capturing the values of the form group, the page simply refreshes

Using TypeScript for Context Providers