Répéter ou toggler un bout de markup avec <ng-container>

La balise <ng-container> permet de regrouper plusieurs balises HTML ou composants sous la forme d’une unité qu’on peut répéter ou afficher/cacher.

On veut parfois utiliser une directive Angular comme *ngIf ou *ngFor à un emplacement du template où l’on n’a pas de balise pour accueillir ces directives. On se retrouve donc à insérer une balise “bidon” comme <div> ou <span> dans le seul but de pouvoir utiliser ces directives. La balise <ng-container> répond à cette problématique.

La balise <ng-container> évite d’introduire une balise “bidon” dans le seul but d’utiliser une directive Angular comme *ngIf ou *ngFor. <ng-container> est une balise neutre, qui n’interfère pas avec le rendu de la page. (Pour être précis, cette “balise” est un composant Angular et ne peut être utilisée que dans les templates Angular.)

// MIEUX
<ng-container *ngIf="isReady">
  ...
</ng-container

// BOF, car la div peut perturber l'affichage
<div *ngIf="isReady">
</div

La balise <ng-container> est également pratique pour répéter un fragment de HTML. On n’a pas toujours de balise qui encadre le HTML en question. Idem dans un ngSwitchCase.

Resources : - Angular 2 ng-container - http://stackoverflow.com/a/40108573 - Getting to know the ng-container directive in Angular - https://netbasal.com/getting-to-know-the-ng-container-directive-in-angular-a97b7a33c8ea