Angular Diretivas: como criar componentes reutilizáveis com elegância?

Fala galera, bora falar sobre como criar componentes reutilizáveis com elegância?

Vamos começar falando sobre o que são Diretivas

Imagina que você está montando um castelo de LEGO. Cada pecinha tem uma função, certo?

No Angular, as diretivas são como instruções que dizem para cada pecinha (os elementos da página) o que ela deve fazer ou como se comportar.

Elas são uma forma de controlar como as coisas aparecem, mudam ou somem na tela. Em vez de escrever vários códigos parecidos, você cria uma diretiva e usa ela sempre que precisar.

🧩 Tipos de Diretivas no Angular

No Angular, existem três tipos principais de diretivas:

🔸 Diretivas de Atributo

São aplicadas como atributos nos elementos e servem para mudar o estilo ou comportamento visual.

Exemplo: ngClass, ngStyle.

🔸 Diretivas Estruturais

Elas adicionam ou removem elementos do HTML com base em alguma condição ou repetição.

Exemplo: *ngIf, *ngFor.

Mas afinal, o que é *ngIf?

O *ngIf é uma diretiva estrutural do Angular usada para mostrar ou esconder elementos na tela, dependendo de uma condição.

Pensa assim: Se isso for verdade, então mostra o elemento. Senão, não mostra nada.

🔁 O que é *ngFor?

O *ngFor também é uma diretiva estrutural, mas serve para repetir um elemento para cada item de uma lista.

Pensa como se fosse uma esteira: pra cada fruta que passa, ele imprime um item na tela.

🔸 Diretivas Personalizadas

Você pode criar suas próprias diretivas! Assim, reutiliza comportamentos e mantém seu código limpo e elegantes.

São como mágica: elas escondem, mostram ou repetem partes da sua tela, dependendo de certas condições.

Vamos imaginar:

(<div *ngIf="mostrarMensagem">

Essa caixinha (div) só aparece se a variável mostrarMensagem for true. Legal, né?

Outro exemplo clássico é o *ngFor, que repete um elemento:

<li *ngFor="let fruta of frutas">{{ fruta }}</li>

Se você tiver uma lista com 3 frutas, o Angular vai desenhar 3 li na tela, uma pra cada fruta.

🛠️ Criando Componentes Reutilizáveis com Elegância

Quer criar um botão que muda de cor só com uma diretiva? Simples!

Passo 1 – Criando uma Diretiva de Atributo:

Reutilizar código é como usar a mesma forma de bolo várias vezes: você não precisa moldar tudo do zero toda vez.

Exemplo de Diretiva de Atributo:

Essa é uma diretiva que muda a cor do fundo de um botão quando o mouse passa por cima:

// highlight.directive.ts
import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
 selector: '[appHighlight]'
})
export class HighlightDirective {
 constructor(private el: ElementRef) {}

 @HostListener('mouseenter') onMouseEnter() {
 this.el.nativeElement.style.backgroundColor = 'lightblue';
 }

 @HostListener('mouseleave') onMouseLeave() {
 this.el.nativeElement.style.backgroundColor = '';
 }
}

Passo 2 – Agora é só usar no HTML assim :

<button appHighlight>Clique aqui!</button>

Agora, qualquer botão com appHighlight vai brilhar com um fundo azul claro quando você passar o mouse.

🤝 Vamos continuar esse papo?

Se esse artigo te ajudou a entender diretivas no Angular de um jeito simples e direto, me conta lá nas redes sociais!

Compartilha com aquela pessoa que vive confundindo *ngIf com *ngFor 😅

👉 Me segue no Linkedin (26) Bianca Freitas Santana | LinkedIn

Fontes de produção: imagens geradas pela lexica.art

Conteúdo gerado por chatGPT e revisões humanas

#AngularTips

#DesenvolvimentoWeb

#DiretivasAngular