Aula 04: Diretivas Estruturais e de Atributo 🛠️

Nesta aula, vamos aprender como manipular a estrutura do nosso HTML e o comportamento dos elementos usando as Diretivas do Angular.

🧩 O que são Diretivas?

Diretivas são instruções que o Angular usa para transformar o DOM. Elas se dividem em dois grandes grupos:

Estruturais: Alteram a estrutura do HTML (adicionam ou removem elementos). Usam o prefixo *.
De Atributo: Alteram a aparência ou o comportamento de um elemento existente.

🏗️ Diretivas Estruturais

As mais famosas são o *ngIf e o *ngFor.

1. `*ngIf`

Renderiza um elemento apenas se uma condição for verdadeira.

<!-- Se logado for true, exibe a mensagem -->
<p *ngIf="logado">Bem-vindo de volta!</p>

2. `*ngFor`

Cria um loop para repetir um elemento para cada item de uma lista.

<ul>
  <li *ngFor="let item of listaCategorias">
    {{ item }}
  </li>
</ul>

🎨 Diretivas de Atributo

Alteram como o elemento se parece.

1. `ngClass`

Adiciona ou remove classes CSS dinamicamente.

<!-- Adiciona a classe 'sucesso' se o status for 'ativo' -->
<div [ngClass]="{ 'sucesso': status === 'ativo' }">
  Status do Sistema
</div>

2. `ngStyle`

Aplica estilos CSS inline dinamicamente.

<p [ngStyle]="{ 'color': corSelecionada, 'font-size': '20px' }">
  Texto Colorido
</p>

🌟 Diagrama de Funcionamento

graph LR
    A[Componente] --> B{Diretiva}
    B -- Estrutural --> C[Muda o DOM: Adiciona/Remove]
    B -- Atributo --> D[Muda o Elemento: Cor/Classe]

🛠️ Criando uma Diretiva Personalizada (Intro)

Você também pode criar suas próprias diretivas para reutilizar comportamentos.

# Gerar uma diretiva
$ ng generate directive destaca-item

🚀 Prática: Listagem Dinâmica

Vamos criar uma lista de "Tarefas" onde podemos marcar como concluídas.

Use *ngFor para listar as tarefas.
Use *ngIf para mostrar um aviso se a lista estiver vazia.
Use ngClass para riscar o texto da tarefa quando ela estiver concluída.

🏁 Mini-Projeto da Aula

Crie uma galeria de produtos. Cada produto deve ser um objeto com nome, preço e disponibilidade. Use *ngFor para exibir os produtos, *ngIf para mostrar o selo "Esgotado" e ngStyle para mudar a cor do preço (vermelho para produtos caros, verde para baratos).