📚 Tópicos 📊 Sumário de Slides

📊 Capítulo 12: Interoperabilidade Signals & RxJS

Especialização em Frontend com Angular

---

🗺️ A Ponte Bidirecional entre o Mundo Assíncrono e a Reatividade Síncrona

flowchart LR
    RXJS["RxJS Observable<T> (Eventos ao longo do tempo / Debounce / WebSocket)"]
    --> |"toSignal(obs$, { initialValue: [] })"| SIGNALS["Angular Signal<T> (Estado Síncrono / Fácil de ler no Template)"]
    SIGNALS --> |"toObservable(meuSignal)"| RXJS

    style RXJS fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style SIGNALS fill:#e8f5e9,stroke:#4caf50,stroke-width:2px

---

🎯 Slide 1: Por Que Usar Ambos?

• Use RxJS para: Eventos assíncronos complexos, cancelamento de HTTP, websockets, debounce e orquestração de tempo.

• Use Signals para: Armazenar o estado da tela, valores calculados com computed() e renderização ultrarrápida no template HTML.

---

🎯 Slide 2: Convertendo Observable em Signal com toSignal

export class CatalogoComponent {
  private api = inject(ProdutosService);

  // Converte a chamada HTTP em um Signal com cancelamento e desinscrição automáticos!
  produtos = toSignal(this.api.listar(), { initialValue: [] });
}

• No HTML: @for (p of produtos(); track p.id) { ... } (Zero async pipe!).

---

🎯 Slide 3: Convertendo Signal em Observable com toObservable

const filtro = signal('');
const filtro$ = toObservable(filtro);
// Agora você pode aplicar operadores como debounceTime(300) e switchMap!

---

🔗 Navegação do Capítulo 12

📖 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