🧩 Exercícios Práticos: Fundamentos de RxJS: Observables, Observers e Subjects

Spec Frontend Com Angular • Trilha Progressiva em 4 Níveis

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 10.1 — Criação de Observable Simples com new Observable() e Assinatura

Contexto: Criação de Observable Simples com new Observable() e Assinatura no contexto de Fundamentos de RxJS: Observables, Observers e Subjects.

Requisitos de Execução:

  1. Criar observable emitindo fluxo de números a cada segundo e manipular no .subscribe({ next, error, complete }).

Resultado Esperado

Stream RxJS emitida e consumida com tratamento de conclusão.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_10_1_SeuNome
  2. Envie na tarefa: Atividade Cap 10 - Fundamentos de RxJS: Observables, Observers e Subjects
🔑 Gabarito de Código & Solução Comentada 
// observable-basic.ts
import { Observable } from 'rxjs';

export const contadorObservable$ = new Observable<number>((subscriber) => {
  let count = 0;
  const intervalId = setInterval(() => {
    subscriber.next(count++);
    if (count > 3) {
      subscriber.complete();
      clearInterval(intervalId);
    }
  }, 500);
});

contadorObservable$.subscribe({
  next: (v) => console.log('Valor recebido:', v),
  complete: () => console.log('Stream finalizada com sucesso.')
});

🔍 Nível 2: Prática

Problema 10.2 — Comunicação Multicast com Subject e BehaviorSubject

Contexto: Comunicação Multicast com Subject e BehaviorSubject no contexto de Fundamentos de RxJS: Observables, Observers e Subjects.

Requisitos de Execução:

  1. Criar BehaviorSubject<string>('Estado Inicial') para transmissão de dados com retenção do último valor.

Resultado Esperado

Último valor emitido entregue imediatamente aos novos inscritos no BehaviorSubject.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_10_2_SeuNome
  2. Envie na tarefa: Atividade Cap 10 - Fundamentos de RxJS: Observables, Observers e Subjects
🔑 Gabarito de Código & Solução Comentada 
// state-subject.ts
import { BehaviorSubject } from 'rxjs';

export class EstadoService {
  private userSubject$ = new BehaviorSubject<{ nome: string }>({ nome: 'Visitante' });
  user$ = this.userSubject$.asObservable();

  atualizarUsuario(nome: string) {
    this.userSubject$.next({ nome });
  }
}

⚡ Nível 3: Integração

Problema 10.3 — Consumo Reativo no Template com AsyncPipe

Contexto: Consumo Reativo no Template com AsyncPipe no contexto de Fundamentos de RxJS: Observables, Observers e Subjects.

Requisitos de Execução:

  1. Renderizar stream de dados diretamente no HTML usando {{ user$ | async }} sem subscrição manual.

Resultado Esperado

AsyncPipe gerenciando inscrição e desinscrição automática no template.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_10_3_SeuNome
  2. Envie na tarefa: Atividade Cap 10 - Fundamentos de RxJS: Observables, Observers e Subjects
🔑 Gabarito de Código & Solução Comentada 
// user-stream.component.ts
import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EstadoService } from './state-subject';

@Component({
  selector: 'app-user-stream',
  standalone: true,
  imports: [CommonModule],
  template: `<p>Usuário Atual: {{ (estado.user$ | async)?.nome }}</p>`
})
export class UserStreamComponent {
  estado = inject(EstadoService);
}

🏆 Nível 4: Desafio Corporativo

Problema 10.4 — ReplaySubject e AsyncSubject para Buffers de Histórico

Contexto: ReplaySubject e AsyncSubject para Buffers de Histórico no contexto de Fundamentos de RxJS: Observables, Observers e Subjects.

Requisitos de Execução:

  1. Configurar ReplaySubject(3) para retransmitir os últimos 3 eventos emitidos para novos ouvintes.

Resultado Esperado

Histórico dos últimos 3 eventos recuperado por novos assinantes.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_10_4_SeuNome
  2. Envie na tarefa: Atividade Cap 10 - Fundamentos de RxJS: Observables, Observers e Subjects
🔑 Gabarito de Código & Solução Comentada 
// replay-demo.ts
import { ReplaySubject } from 'rxjs';

const historico$ = new ReplaySubject<string>(3);
historico$.next('Log 1');
historico$.next('Log 2');
historico$.next('Log 3');
historico$.next('Log 4');

historico$.subscribe(val => console.log('Replay recebido:', val)); // Recebe Log 2, 3, 4
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos