Comment créer ma propre directive structurelle sur Angular ?

Pour créer une directive structurelle avec TemplateRef et ViewContainer sur Angular, vous devrez suivre les étapes suivantes :

1. Définissez votre directive en utilisant la décorateur @Directive:

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

@Directive({
  selector: '[myStructuralDirective]',
  standalone: true
})
export class MyStructuralDirective {
  private templateRef = inject(TemplateRef);
  private viewContainer = inject(ViewContainerRef);
}

Les injections TemplateRef et ViewContainerRef vous permettent d'accéder au template et au conteneur de vue de l'élément sur lequel la directive est appliquée. Utilisez donc ces propriétés pour manipuler le contenu du template et du conteneur de vue. Par exemple, pour ajouter le contenu du template au conteneur de vue, vous pouvez utiliser la méthode createEmbeddedView du conteneur de vue:

this.viewContainer.createEmbeddedView(this.templateRef);

Vous pouvez également utiliser les méthodes clear et insert du conteneur de vue pour supprimer ou insérer du contenu dans le conteneur de vue.

Pour utiliser votre directive, vous pouvez l'appliquer sur un élément de votre template de la manière suivante:

<div [myStructuralDirective]>
  Contenu de mon template
</div>

Ceci est un exemple simple de création d'une directive structurelle avec TemplateRef et ViewContainerRef. Vous pouvez également utiliser d'autres propriétés et méthodes de ces classes pour plus de flexibilité et de contrôle sur votre directive.