📚 Tópicos 📊 Sumário de Slides

📊 Capítulo 06: Reatividade com Angular Signals

Especialização em Frontend com Angular

---

🗺️ O Grafo de Reatividade Fine-Grained com Signals

flowchart LR
    S1["preco = signal(100)"] --> C1["total = computed(() => preco() * qtd())"]
    S2["qtd = signal(2)"] --> C1
    C1 --> E1["effect(() => console.log('Novo total:', total()))"]
    C1 --> DOM["Template atualiza APENAS o elemento {{ total() }} no DOM (Zero Zone.js!) ⚡"]

    style S1 fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style S2 fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style C1 fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style E1 fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style DOM fill:#00897b,stroke:#004d40,stroke-width:2px,color:#ffffff

---

🎯 Slide 1: A Trindade Reativa dos Signals

1. signal(valorInicial): Primitiva de estado mutável (.set(), .update()).
2. computed(() => ...): Valor derivado imutável com memoization automática.
3. effect(() => ...): Executa efeitos colaterais (logs, sincronização com localStorage).

---

🎯 Slide 2: Mudando o Estado

const contador = signal(0);

// Substituição direta:
contador.set(10);

// Atualização baseada no valor anterior:
contador.update(v => v + 1);

---

🎯 Slide 3: O Futuro Zoneless do Angular

• Signals permitem que o Angular saiba exatamente qual nó do DOM mudou, eliminando a necessidade da pesada biblioteca zone.js e tornando as aplicações incrivelmente mais rápidas e leves!

---

🔗 Navegação do Capítulo 06

📖 Ler Conteúdo Completo

🧠 Fazer Quiz

💻 Ver Exemplos

🧩 Exercícios

Slide 1 de 1

Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim