63. Directives structurelles personnalisées (Implémentation d'un *NgIf personnalisé)

Les directives structurelles nécessitent la gestion de références de template pour décider du rendu du contenu. Nous utilisons deux services injectables :

1. TemplateRef : Représente le contenu contenu dans la balise <ng-template> (l'élément sur lequel la directive est appliquée).
2. ViewContainerRef : Représente le conteneur où le template doit être attaché ou détaché (l'emplacement dans le DOM).

Exemple : *appUnless (L'opposé de *NgIf)

Cette directive affiche le contenu à moins que la condition ne soit vraie.

typescript import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[appUnless]' }) export class UnlessDirective { private hasView = false;

// Le setter s'exécute dès que la valeur d'entrée change @Input() set appUnless(condition: boolean) { if (!condition && !this.hasView) { // 1. Créer la vue imbriquée (insérer le contenu dans le DOM) this.vcRef.createEmbeddedView(this.templateRef); this.hasView = true; } else if (condition && this.hasView) { // 2. Effacer la vue (retirer le contenu du DOM) this.vcRef.clear(); this.hasView = false; } }

// Injection de TemplateRef (quoi rendre) et ViewContainerRef (où rendre) constructor( private templateRef: TemplateRef, private vcRef: ViewContainerRef ) { } }

Utilisation

html

Comprendre TemplateRef et ViewContainerRef est la base pour créer toute directive structurelle, y compris des systèmes de rendu de liste complexes ou des bascules de contenu basées sur des permissions.