Obtendo Parâmetros em Diretivas em Angular

Assim como um componente, uma diretiva também pode receber parâmetros de entrada vindos de fora. Para isso, utiliza-se o decorador @Input. Vamos pegar a diretiva BoldDirective do tema anterior e supor que queremos que, ao passar o mouse sobre o texto, a altura da fonte também mude. Além disso, queremos que essa altura possa ser definida externamente à diretiva. Para isso, vamos modificá-la da seguinte forma:

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

@Directive({
  selector: "[bold]",
  standalone: true,
})
export class BoldDirective {
  @Input() selectedSize = "18px";
  @Input() defaultSize = "16px";

  private fontSize: string;
  private fontWeight = "normal";

  constructor() {
    this.fontSize = this.defaultSize;
  }

  @HostBinding("style.fontSize") get getFontSize() {
    return this.fontSize;
  }

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

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

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

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

Nesse caso, são definidos dois parâmetros de entrada:

@Input() selectedSize = "18px";
@Input() defaultSize = "16px";

O parâmetro selectedSize determina a altura da fonte quando o mouse passa sobre o elemento, enquanto o parâmetro defaultSize define a altura da fonte quando o ponteiro do mouse está fora do elemento.

Agora, vamos utilizar esses parâmetros definindo o seguinte código no componente:

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

@Component({
  selector: "my-app",
  standalone: true,
  imports: [BoldDirective],
  template: `<div>
    <p bold selectedSize="28px" [defaultSize]="'14px'">Hello Angular</p>
    <p>A aplicação Angular é composta por componentes</p>
  </div>`,
})
export class AppComponent {}

Ao aplicar a diretiva, podemos especificar todos os parâmetros de entrada e seus valores:

<p bold selectedSize="28px" [defaultSize]="'14px'">Hello Angular</p>

Existem duas maneiras de passar os parâmetros. Ou os nomes dos parâmetros são colocados entre colchetes, e seus valores são colocados entre aspas simples:

[defaultSize] = "'14px'";

Ou os nomes dos parâmetros são passados sem colchetes, e seus valores são colocados entre aspas duplas:

selectedSize = "28px";

Assim, ao passar o mouse sobre o elemento, a altura da fonte mudará automaticamente.

Alterando o Primeiro Parâmetro de Entrada

Agora, vamos modificar o primeiro parâmetro de entrada:

 @Input("bold") selectedSize = "18px";

Aqui, o seletor da diretiva bold é passado para o decorador @Input. Portanto, para definir esse parâmetro no template do componente, podemos usar diretamente o nome da diretiva:

<p [bold]="'28px'" [defaultSize]="'14px'">Hello Angular</p>

Dessa forma, a configuração dos parâmetros na diretiva torna-se flexível e fácil de gerenciar diretamente no template do componente, permitindo personalizar a aparência de elementos com base na interação do usuário.