Interagindo com o usuário: HostListener e HostBinding em Angular

Além de simplesmente definir valores, uma diretiva de atributo pode interagir com o usuário. Para isso, utiliza-se o decorador HostListener.

Por exemplo, suponha que no arquivo bold.directive.ts está definida a diretiva BoldDirective:

helloapp/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── bold.directive.ts
│   ├── main.ts
│   ├── index.html
├── angular.json
├── package-lock.json
├── package.json
└── tsconfig.json

Vamos supor que essa diretiva contém o seguinte código de interação com o usuário:

import { Directive, ElementRef, Renderer2, HostListener } from "@angular/core";

@Directive({
  selector: "[bold]",
  standalone: true,
})
export class BoldDirective {
  constructor(private element: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.element.nativeElement, "cursor", "pointer");
  }

  @HostListener("mouseenter") onMouseEnter() {
    this.setFontWeight("bold");
  }

  @HostListener("mouseleave") onMouseLeave() {
    this.setFontWeight("normal");
  }

  private setFontWeight(val: string) {
    this.renderer.setStyle(this.element.nativeElement, "font-weight", val);
  }
}

O decorador @HostListener permite vincular eventos do DOM a métodos da diretiva. Em particular, o decorador recebe o nome do evento que acionará o método. Nesse caso, estamos vinculando os eventos mouseenter (quando o ponteiro do mouse é posicionado sobre o elemento) e mouseleave (quando o ponteiro do mouse sai do elemento) ao método setFontWeight(), que define a propriedade de estilo font-weight no elemento. Quando o mouse é posicionado sobre o elemento, o texto é destacado em negrito, e ao retirar o mouse, o destaque é removido.

O código do componente que utiliza a diretiva pode ser o seguinte:

import { Component } from "@angular/core";
import { BoldDirective } from "./bold.directive";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [BoldDirective],
  template: `<div>
    <p bold>Hello Angular</p>
    <p>Aplicação Angular consiste em componentes</p>
  </div>`,
})
export class AppComponent {}

HostBinding

Outro decorador, o HostBinding, permite vincular uma propriedade comum da classe a uma propriedade do elemento ao qual a diretiva é aplicada. Por exemplo, vamos modificar o código da diretiva da seguinte forma:

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

@Directive({
  selector: "[bold]",
  standalone: true,
})
export class BoldDirective {
  private fontWeight = "normal";

  @HostBinding("style.fontWeight") get getFontWeight() {
    return this.fontWeight;
  }

  @HostBinding("style.cursor") get getCursor() {
    return "pointer";
  }

  @HostListener("mouseenter") onMouseEnter() {
    this.fontWeight = "bold";
  }

  @HostListener("mouseleave") onMouseLeave() {
    this.fontWeight = "normal";
  }
}

A instrução @HostBinding("style.fontWeight") get getFontWeight() vincula ao atributo style.fontWeight o valor retornado pelo método getter getFontWeight, que, por sua vez, retorna o valor da propriedade fontWeight, alterado quando o ponteiro do mouse passa sobre o elemento.

Propriedade host

Em vez de utilizar os decoradores HostListener e HostBinding para reagir às ações do usuário, é possível definir manipuladores de eventos diretamente no decorador Directive, por meio de sua propriedade host. Vamos reescrever a diretiva da seguinte maneira:

import { Directive, ElementRef, Renderer2 } from "@angular/core";

@Directive({
  selector: "[bold]",
  standalone: true,
  host: {
    "(mouseenter)": "onMouseEnter()",
    "(mouseleave)": "onMouseLeave()",
  },
})
export class BoldDirective {
  constructor(private element: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.element.nativeElement, "cursor", "pointer");
  }

  onMouseEnter() {
    this.setFontWeight("bold");
  }

  onMouseLeave() {
    this.setFontWeight("normal");
  }

  private setFontWeight(val: string) {
    this.renderer.setStyle(this.element.nativeElement, "font-weight", val);
  }
}

O resultado da diretiva nesse caso será o mesmo, mas agora todos os eventos e seus respectivos manipuladores são definidos usando o parâmetro host:

 host: {
  "(mouseenter)": "onMouseEnter()",
  "(mouseleave)": "onMouseLeave()"
}

Essa abordagem oferece uma alternativa mais concisa para definir o comportamento de eventos diretamente na definição da diretiva.