Comment créer une directive pour gérer le rendu (ElementRef) dans Angular ?

Voici comment créer une directive qui gère le rendu dans Angular en utilisant l'objet ElementRef :

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

@Directive({
  selector: '[appMyDirective]',
  standalone: true
})
export class MyDirective {
  private el = inject(ElementRef);
}

Vous pouvez maintenant utiliser l'objet ElementRef pour accéder à l'élément DOM et le modifier en utilisant ses propriétés et méthodes. Par exemple, vous pouvez changer la couleur de fond de l'élément en utilisant la propriété "style.backgroundColor":

this.el.nativeElement.style.backgroundColor = 'red';

Voici un exemple complet de directive qui modifie la couleur de fond de l'élément sur lequel elle est appliquée lorsqu'un bouton est cliqué:

import { ElementRef, Directive, HostListener, inject } from '@angular/core';

@Directive({
  selector: '[appMyDirective]',
  standalone: true
})
export class MyDirective {
  private el = inject(ElementRef);

  @HostListener('click') onClick() {
    this.changeColor();
  }

  private changeColor() {
    this.el.nativeElement.style.backgroundColor = 'red';
  }
}

Pour utiliser cette directive, vous pouvez l'appliquer à n'importe quel élément HTML comme ceci:

<button appMyDirective>Cliquez pour changer la couleur de fond</button>

Utiliser le décorateur HostBinding ?

Voici un exemple de directive qui utilise @HostBinding pour modifier la propriété "style.backgroundColor" de l'élément DOM sur lequel elle est appliquée :

import { Directive, HostBinding } from '@angular/core';

@Directive({
  selector: '[appMyDirective]',
  standalone: true
})
export class MyDirective {
  @HostBinding('style.backgroundColor') backgroundColor = '';

  setColor(color: string) {
    this.backgroundColor = color;
  }
}

Pour utiliser cette directive, vous pouvez l'appliquer à n'importe quel élément HTML et appeler la méthode setColor() pour changer la couleur de fond de l'élément :

<button appMyDirective (click)="myDirective.setColor('red')">Cliquez pour changer la couleur de fond</button>

Notez que @HostBinding vous permet de lier une propriété de l'élément DOM hôte à une propriété de votre directive. Dans cet exemple, la propriété "style.backgroundColor" de l'élément DOM est liée à la propriété "backgroundColor" de la directive. Lorsque vous modifiez la valeur de "backgroundColor" dans la directive, la valeur de "style.backgroundColor" de l'élément DOM est également modifiée.