Directives personnalisées dans Angular

Les directives vous permettent d’étendre HTML. Cette leçon présente les directives personnalisées et explique comment créer les vôtres.

Qu’est-ce qu’une directive ?

Les directives modifient l’apparence ou le comportement des éléments du DOM. Angular fournit des directives intégrées telles que *ngIf et *ngFor.

Types de directives

• Directives de composant
• Directives d’attribut - modifient l’apparence ou le comportement
• Directives structurelles - modifient la disposition (comme *ngIf)

Créer une directive d’attribut

Créez une directive à l’aide d’Angular CLI :

ng generate directive highlight

ng generate directive highlight

Appliquer la directive

Utilisez votre directive comme attribut dans votre modèle :

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

Logique de la directive

Les directives contiennent une logique qui modifie les éléments du DOM. Par exemple, vous pouvez définir dynamiquement une couleur d’arrière-plan.

constructor(private el: ElementRef) {
  this.el.nativeElement.style.backgroundColor = 'yellow';
}

Décorateur @HostListener

Utilisez @HostListener pour réagir aux événements sur les éléments associés à votre directive :

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('blue');
}

@Input() dans les directives

@Input() vous permet de transmettre des données aux directives depuis les modèles :

@Input() defaultColor: string;

Résumé

Vous avez appris à créer et à utiliser des directives personnalisées pour enrichir vos applications Angular. Bravo !