📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

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:
ts
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:

ts
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:

html
<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.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !