Observable

São streams de dados que podem emitir múltiplos valores ao longo do tempo, parecido com channels.

Características

• Pode emitir múltiplos valores ao longo do tempo
• É Lazy: o código dentro dele não roda até que alguém se inscreva com subscribe
• É Cancelável: a inscrição pode ser cancelada com unsubscribe

Ciclo de Vida

1. Criação: Onde a fonte de dados é definida (ex: requisição HTTP, evento de clique, timer)
2. Operadores (Pipe): Funções puras que transformam, filtram ou combinam os dados antes de chegarem ao componente
3. Subscrição (Subscribe): O trigger que inicia a execução

Exemplo

// user.service.ts
@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}
 
  getUsers(): Observable<any[]> {
    return this.http.get<any[]>('https://api.exemplo.com/users');
  }
}

// user.component.ts
export class UserComponent implements OnInit, OnDestroy {
  users: any[] = [];
  private subscription: Subscription;  // Necessário para cancelar
 
  constructor(private userService: UserService) {}
 
  ngOnInit() {
    // O subscribe aceita um objeto com 3 callbacks: next, error e complete
    this.subscription = this.userService.getUsers().subscribe({
      next: (data) => {
        this.users = data;
        console.log('Dados recebidos');
      },
      error: (err) => console.error('Erro', err),
      complete: () => console.log('Fluxo encerrado')
    });
  }
 
  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}