Les directives structurelles ng-template et ng-container jouent un rôle crucial dans la gestion des modèles en Angular. Cet article détaille leur utilisation pratique.

Inrtoduction à ng-template

ng-template est une directive structurelle Angular qui définit un modèle HTML. Il n'est jamais rendu directement dans le DOM. Au lieu de cela, Angular le remplace par un commentaire lors du rendu. Si ng-template est utilisé sans directive structurele associée, son contenu reste invisible.

Des directives comme *ngFor ou *ngIf transforment en interne les attributs en éléments ng-template pour envelopper l'hôte.

Introduction à ng-container

ng-container sert de conteneur de regroupement sans ajouter d'élément supplémentaire au DOM, évitant ainsi la pollution des styles. Angular le traite comme un élément syntaxique, comparable aux accolades d'un bloc if en JavaScript.

Utilisations de ng-container

Cas 1 : Combinaison avec *ngFor et *ngIf

Lors de la combinaison de directives structurelles, ng-container permet d'éviter des div superflues.

<ul>
    <ng-container *ngFor="let element of dataList">
        <li *ngIf="element.detail">{{element.detail}}</li>
    </ng-container>
</ul>

Cas 2 : Utilisation avec ngSwitch

ng-container facilite l'utilisation de ngSwitch sans modifier la structure DOM.

<ng-container [ngSwitch]="contentType">
    <ng-container *ngSwitchCase="'heading'">Titre</ng-container>
    <ng-container *ngSwitchCase="'body'">Contenu</ng-container>
    <ng-container *ngSwitchDefault>Autre</ng-container>
</ng-container>

Cas 3 : Colllaboration avec ng-template

Ng-container peut servir à exporter des modèles réutilisables avec contexte via *ngTemplateOutlet.

<div>
    <div class="partie">
        <div class="etiquette">Première partie :</div>
        <div class="contenu">
            Nom de la première partie
            <ng-container *ngTemplateOutlet="description; context: {donnees: donnees.partieA}"></ng-container>
        </div>
    </div>
    <div class="partie">
        <div class="etiquette">Deuxième partie :</div>
        <div class="contenu">
            Nom de la deuxième partie
            <ng-container *ngTemplateOutlet="description; context: {donnees: donnees.partieB}"></ng-container>
        </div>
    </div>
    <ng-template #description let-donnees="donnees">
        <p>Description du contrat...</p>
    </ng-template>
</div>

*ngTemplateOutlet référence un modèle, tandis que *ngTemplateOutletContext fournit le contexte. La clé $implicit définit une valeur par défaut.

Utilisations de ng-template

Cas 1 : Avec *ngIf pour les conditions alternatives

<div *ngIf="donnees; sinon pasDeDonnees">{{donnees}}</div>
<ng-template #pasDeDonnees>
    <div class="message">Aucune donnée disponible</div>
</ng-template>

Cas 2 : Intégration avec des services de modaux

Les modèles peuvent être passés à des composants via TemplateRef.

<ng-template #modeleContenu>Contenu du modal...</ng-template>

export class AppComponent implements OnInit {
    @ViewChild('modeleContenu') modeRef: TemplateRef<any>;
    ngOnInit() {
        this.modalService.create({
            nzTitle: 'Titre',
            nzContent: this.modeRef
        });
    }
}

Cas 3 : Entrée dynamique de modèles dans les composants

Les composants peuvent accepter des modèles comme entrée pour une personnalisation flexible.

<div>
    <img src="" />
    <div>
        <ng-container [ngSwitch]="true">
            <ng-container *ngSwitchCase="estModele(texte)"
                [ngTemplateOutlet]="texte"
            ></ng-container>
        </ng-container>
        {{texte || ''}}
    </div>
</div>

export class ComposantVide {
    @Input() texte: TemplateRef<any> | string;
    estModele(val: any): boolean {
        return val instanceof TemplateRef;
    }
}