O Angular oferece um conjunto de diretivas integradas como ngIf, ngFor e ngClass. No entanto, também é possível criar suas próprias diretivas personalizadas 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 de 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 (pode ser excluído 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, ela é decorada com @Directive:

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

O seletor [appHighlightOnComplete] significa 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 do template);

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

• Define um valor padrão de true (que será sobrescrito 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 fornece uma referência ao elemento DOM hospedeiro. Renderer2 permite modificar estilos e atributos de forma segura, sem manipular diretamente o DOM.

Reagir a alterações com ngOnChanges

Agora, implemente 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, é possível aplicá-la a qualquer elemento do seu aplicativo, sem duplicar lógica entre componentes. É um excelente exemplo de como o sistema de diretivas do Angular pode ajudar a escrever um código mais modular e de fácil manutenção.