69. Directives d'attribut personnalisées (Avancé)

Nous revenons sur les directives d'attribut, en nous concentrant sur la manipulation de styles multiples et la gestion d'entrées complexes.

Scénario : Couleur de fond réactive

Créer une directive qui définit une couleur de fond par défaut tout en permettant de la surcharger, en utilisant HostBinding pour gérer les styles facilement.

Utilisation de @HostBinding

@HostBinding est un décorateur de propriété qui lie une propriété de la classe de la directive directement à une propriété de l'élément hôte.

typescript // background.directive.ts import { Directive, HostBinding, Input, OnInit } from '@angular/core';

@Directive({ selector: '[appBackground]' }) export class BackgroundDirective implements OnInit {

// Input pour la couleur par défaut @Input() defaultColor: string = 'transparent';

// Input pour la surcharge optionnelle @Input() appBackground: string = 'blue';

// Lier le style 'backgroundColor' à une propriété interne @HostBinding('style.backgroundColor') backgroundColor: string = '';

ngOnInit(): void { this.backgroundColor = this.appBackground || this.defaultColor; }

// HostListener pour réagir aux actions utilisateur @HostListener('mouseenter') mouseover() { this.backgroundColor = 'lightgray'; }

@HostListener('mouseleave') mouseleave() { this.backgroundColor = this.appBackground || this.defaultColor; } }

Utilisation

html

Bouton Doré

Ce pattern est plus propre que l'accès manuel à ElementRef.nativeElement.style pour chaque propriété.