Obtendo Parâmetros em Diretivas - 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:

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:

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

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:

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:

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.