Angular

Appearance

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 :

  1. Tout d'abord, vous devez importer ElementRef et Directive dans votre fichier de directive:
ts
import { ElementRef, Directive } from '@angular/core';
import { ElementRef, Directive } from '@angular/core';
  1. Ensuite, vous pouvez définir votre directive en utilisant @Directive:
ts
@Directive({
  selector: '[appMyDirective]'
})
export class MyDirective {
  constructor(private el: ElementRef) { }
}
@Directive({
  selector: '[appMyDirective]'
})
export class MyDirective {
  constructor(private el: ElementRef) { }
}
  1. 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';
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 } from '@angular/core';

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirective {
  constructor(private el: ElementRef) { }

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

  private changeColor() {
    this.el.nativeElement.style.backgroundColor = 'red';
  }
}
import { ElementRef, Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirective {
  constructor(private el: 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>
<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]'
})
export class MyDirective {
  @HostBinding('style.backgroundColor') backgroundColor: string;

  constructor() { }

  public setColor(color: string) {
    this.backgroundColor = color;
  }
}
import { Directive, HostBinding } from '@angular/core';

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

  constructor() { }

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