O Angular possui um conjunto de diretivas integradas como ngIf, ngFor e ngClass. No entanto, você também pode criar sua própria diretiva personalizada para lidar com tarefas específicas em sua aplicação. Veja a seguir como construir uma diretiva personalizada com um exemplo prático.

Gerar a Diretiva Personalizada

Primeiramente, é uma boa prática organizar seu código criando uma pasta dedicada para suas diretivas. Vamos chamá-la de directives.

Este comando cria uma nova pasta chamada directives dentro do diretório app e adiciona o novo arquivo da diretiva dentro dela:

• highlight-on-complete.directive.ts – contém a lógica da diretiva;

• highlight-on-complete.directive.spec.ts – arquivo de teste unitário (você pode excluí-lo se não for necessário).

Veja como é a estrutura básica da diretiva:

Definir o Comportamento da Diretiva

Esta diretiva irá destacar um elemento de tarefa em verde se ele estiver marcado como concluído. Caso contrário, os estilos serão removidos.

Para informar ao Angular que esta classe é uma diretiva, utilizamos o decorador @Directive:

@Directive({
  selector: '[appHighlightOnComplete]'
})

O seletor [appHighlightOnComplete] indica que a diretiva será usada como um atributo, e não como uma tag ou diretiva estrutural.

No seu HTML, você irá aplicá-la assim:

<div [appHighlightOnComplete]="task.completed"></div>

Fazer a Diretiva Reagir a Mudanças

Para detectar alterações na entrada completed, implementamos a interface OnChanges:

Também definimos uma propriedade de entrada para receber o valor do componente:

O que isso faz:

• Informa ao Angular que o valor será fornecido a partir do template (anteriormente, passamos task.complete pelo template);

• Vincula a propriedade interna completed da diretiva ao valor passado pelo template;

• Define um valor padrão de true (que será substituído assim que os dados reais forem recebidos).

Acessar o DOM com Segurança

O Angular utiliza injeção de dependência para fornecer acesso ao DOM e às ferramentas de renderização.

No construtor, injetamos:

ElementRef nos fornece uma referência ao elemento DOM hospedeiro. Renderer2 permite modificar estilos e atributos de forma segura, sem manipular diretamente o DOM.

Reagir a Mudanças com ngOnChanges

Agora, vamos implementar a lógica principal em ngOnChanges, que é executada sempre que o valor de entrada é alterado.

Implementação completa:

O método ngOnChanges é acionado sempre que o Angular detecta alterações nas propriedades de entrada da diretiva.

Neste caso, ele responde a atualizações do valor completed passado pelo template. Se completed for true, a diretiva adiciona uma borda verde e um fundo verde claro ao elemento. Se for false, esses estilos são removidos, retornando o elemento à sua aparência original. Isso fornece uma indicação visual de tarefas concluídas.

Esta diretiva personalizada permite encapsular o comportamento de estilo de forma reutilizável e limpa. Agora, você pode aplicá-la a qualquer elemento do seu aplicativo, sem duplicar a lógica entre componentes. É um ótimo exemplo de como o sistema de diretivas do Angular pode ajudar a escrever um código mais modular e fácil de manter.