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

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

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

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

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

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

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

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