Interagindo com o usuário: HostListener e HostBinding - 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.