Criando Diretivas de Atributo em Angular

As diretivas de atributo alteram o comportamento do elemento ao qual são aplicadas. Por exemplo, a diretiva ngClass permite definir uma classe CSS para um elemento. Essa diretiva é aplicada ao elemento como um atributo:

<div [ngClass]="{verdanaFont:true}"></div>

Se necessário, podemos criar nossas próprias diretivas de atributo para atender a objetivos específicos. Vamos criar uma diretiva personalizada. Primeiro, adicione um novo arquivo na pasta src/app, e nomeie-o como bold.directive.ts:

A estrutura do projeto:

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

Agora, vamos ao código do componente principal para aplicar a diretiva:

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

@Directive({
  selector: "[bold]",
  standalone: true,
})
export class BoldDirective {
  constructor(private elementRef: ElementRef) {
    this.elementRef.nativeElement.style.fontWeight = "bold";
  }
}

Uma diretiva é uma classe TypeScript comum à qual se aplica o decorador @Directive. Portanto, precisamos importar esse decorador de "@angular/core". Além disso, o código importa a classe ElementRef, que representa uma referência ao elemento ao qual a diretiva será aplicada.

Ao usar o decorador @Directive, é necessário definir um seletor CSS que será associado à diretiva. O seletor CSS para o atributo deve ser definido entre colchetes. Neste caso, o seletor utilizado é [bold].

Note que a diretiva foi definida como um componente autônomo, utilizando o parâmetro standalone: true. Isso permite que a diretiva seja importada em outros componentes autônomos.

O decorador @Directive é aplicado à classe chamada BoldDirective, que define a lógica da diretiva. Para obter o elemento ao qual a diretiva é aplicada, o construtor da classe possui um parâmetro: private elementRef: ElementRef. Através desse parâmetro, o Angular injeta o elemento do template no qual a diretiva é aplicada.

Como o parâmetro é definido com a palavra-chave private, uma variável privada com o mesmo nome é criada, permitindo que o objeto ElementRef seja acessado e manipulado. Neste caso, o código acessa a propriedade nativeElement para definir o texto do elemento em negrito:

this.elementRef.nativeElement.style.fontWeight = "bold";

Agora, vamos ao código do componente principal para aplicar a diretiva:

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>A aplicação Angular é composta por componentes</p>
  </div>`,
})
export class AppComponent {}

Neste exemplo, há dois parágrafos, e a diretiva é aplicada ao primeiro deles. Como o seletor [bold] foi definido na diretiva, basta aplicá-lo ao elemento no código.

No entanto, a diretiva não funcionará automaticamente. Para utilizá-la, é necessário importá-la no componente:

import { BoldDirective } from "./bold.directive";

@Component({
    imports: [BoldDirective],
    ...
})

Ao executar a aplicação, veremos a diretiva aplicada ao primeiro parágrafo.

Para gerenciar a estilização do elemento, o exemplo anterior utilizou o objeto ElementRef no construtor da diretiva para definir propriedades de estilo. Contudo, é mais conveniente usar o Renderer2 para esse propósito. Vamos modificar a diretiva para usar o Renderer2:

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

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

Renderer2 é um serviço que é automaticamente injetado no construtor da diretiva quando ela é chamada, e podemos utilizá-lo para estilizar o elemento. O resultado final será o mesmo, com o texto do elemento exibido em negrito.