62. Directives personnalisées (Structurelles et d'Attribut)

Nous avons utilisé des directives intégrées comme NgIf et NgClass. Nous allons maintenant apprendre à créer les nôtres pour abstraire des manipulations DOM communes ou une logique d'interface utilisateur.

1. Directives d'attribut personnalisées

Les directives d'attribut modifient l'apparence ou le comportement d'un élément existant.

Exemple : Directive de surbrillance (Highlight)

typescript // highlight.directive.ts import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({ selector: '[appHighlight]' // Sélecteur HTML :

}) export class HighlightDirective {

// Propriété d'entrée pour définir la couleur dynamiquement @Input('appHighlight') highlightColor: string = 'yellow';

constructor(private el: ElementRef) { }

// Utilisation de HostListener pour écouter les événements sur l'élément hôte @HostListener('mouseenter') onMouseEnter() { this.highlight(this.highlightColor); }

@HostListener('mouseleave') onMouseLeave() { this.highlight(''); }

private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } }

Utilisation :

html

Survolez ce texte.

2. Directives structurelles personnalisées

Les directives structurelles (*) modifient la structure du DOM, nécessitant une interaction avec TemplateRef et ViewContainerRef.

Nous dédierons la leçon suivante à la création d'une directive structurelle personnalisée (type *NgIf), car elle est nettement plus complexe.