Angular
Templating

<ng-container> et <ng-template>

Deux balises fantômes d'Angular qui ne polluent pas votre HTML final. <ng-container> sert à grouper des éléments invisiblement, tandis que <ng-template> sert à stocker du HTML dormant pour l'utiliser plus tard.

Le dormeur : ng-template

Accès Refusé

Ce HTML était endormi dans un ng-template !

L'invisible : ng-container

Le bouton ci-dessous affiche une liste d'utilisateurs. On utilise <ng-container> pour grouper le texte sans générer de <div> supplémentaire inutile !

  • 1AspirateurPremier
  • 2Machine à laver
  • 3TélévisionDernier

Pourquoi utiliser ça ?

<ng-container>

En Angular, on ne peut pas mettre 2 directives (comme *ngIf et *ngFor) sur la même balise. Plutôt que de créer un faux <div> qui va casser votre design CSS ou Flexbox, on utilise un <ng-container>. Il s'évapore au moment de la compilation !

<ng-template>

Tout ce qui est dans un <ng-template> n'est pas affiché à l'écran. C'est stocké en mémoire. On lui donne un nom avec #monTemplate et on peut demander à l'afficher plus tard sous certaines conditions (ex: else monTemplate).

Le Code Source

container-template.component.ts
<!-- ==========================================
  1. LE NG-TEMPLATE (Le dormant)
=========================================== -->

<!-- Si vrai, on affiche la div. Sinon, on va chercher '#notLoggedIn' -->
<div *ngIf="isLoggedIn; else notLoggedIn">
  Connecté !
</div>

<!-- Ce bloc dort, et ne s'affiche que s'il est appelé -->
<ng-template #notLoggedIn>
  <h3>Veuillez vous connecter.</h3>
</ng-template>


<!-- ==========================================
  2. LE NG-CONTAINER (Le fantôme)
=========================================== -->

<ul>
  <!-- Ce conteneur va disparaître au rendu HTML final -->
  <ng-container *ngFor="let item of items; let isFirst = first">
    <li>
      {{ item }}
      
      <!-- On l'utilise pour appliquer un ngIf sans ajouter de div ! -->
      <ng-container *ngIf="isFirst">
        (C'est le tout premier !)
      </ng-container>

    </li>
  </ng-container>
</ul>