Angular
Templating Dynamique

ViewChild & ng-template

On peut aussi utiliser ViewChild pour récupérer un bout de HTML endormi (un ng-template) et demander à Angular de l'afficher à la demande grâce à *ngTemplateOutlet. Idéal pour créer des modales réutilisables ou des vues dynamiques !

Le Tableau de Bord Magique

Le carré ci-dessous est la zone d'atterrissage (ng-container).

La zone est vide. Le template dort.

La mécanique

  • 1. Le Dormeur : On écrit du HTML dans <ng-template #refTemplate>. Il est invisible par défaut.
  • 2. Le Pêcheur : Dans le composant TypeScript, on utilise @ViewChild('refTemplate') myTemplate pour pêcher ce bloc de HTML.
  • 3. L'Affichage : Dans le HTML, on place une ancre <ng-container *ngTemplateOutlet="myTemplate"> qui va dessiner le HTML pêché à cet endroit exact.

Le Code Source

template-outlet.component.ts
import { Component, ViewChild, TemplateRef } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <button (click)="toggleTemplate()">Afficher le Template</button>
    
    <!-- L'ancre où le template va atterrir -->
    <ng-container *ngIf="showTemplate">
      <ng-container *ngTemplateOutlet="monTemplatePêché"></ng-container>
    </ng-container>

    <!-- Le HTML endormi qu'on cible avec #refTemplate -->
    <ng-template #refTemplate>
      <p>Je suis un contenu injecté par ViewChild !</p>
    </ng-template>
  `
})
export class Test32Component {
  // On récupère le bloc HTML "refTemplate" sous forme de "TemplateRef"
  @ViewChild("refTemplate") monTemplatePêché!: TemplateRef<any>;
  
  showTemplate = false;

  toggleTemplate() {
    this.showTemplate = !this.showTemplate;
  }
}