lunes 24 marzo 2025

Qué es un Observable en Angular

En Angular, un Observable es una estructura proporcionada por la biblioteca RxJS que permite manejar flujos de datos asíncronos de manera eficiente. Se utilizan para manejar eventos, peticiones HTTP, temporizadores y otros procesos asíncronos.

Cómo funcionan los Observables

Un Observable emite valores a lo largo del tiempo y puede tener tres estados:

1. Next: Emite un nuevo valor.

2. Error: Se produce un error y el flujo se detiene.

3. Complete: El Observable finaliza y deja de emitir valores.

Crear un Observable en Angular

Para usar Observables, importa Observable de RxJS y crea un flujo de datos:

import { Observable } from 'rxjs';

const miObservable = new Observable(observer => {
  observer.next('Primer valor');  // Emitir un valor
  observer.next('Segundo valor'); 
  observer.complete();  // Finalizar el Observable
});

miObservable.subscribe(valor => console.log(valor));

Usar Observables en un servicio de Angular

Un uso común de los Observables es en los servicios que manejan peticiones HTTP.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  obtenerDatos(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

Suscribirse a un Observable en un componente

Para recibir los datos del Observable, usa .subscribe():

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-mi-componente',
  templateUrl: './mi-componente.component.html',
  styleUrls: ['./mi-componente.component.css']
})
export class MiComponenteComponent implements OnInit {
  datos: any[] = [];

  constructor(private apiService: ApiService) { }

  ngOnInit() {
    this.apiService.obtenerDatos().subscribe(respuesta => {
      this.datos = respuesta;
    });
  }
}

Operadores de RxJS

Los Observables pueden manipularse con operadores de RxJS como map, filter, y mergeMap. Ejemplo con map:

import { map } from 'rxjs/operators';

this.apiService.obtenerDatos()
  .pipe(map(datos => datos.slice(0, 5)))  // Solo toma los primeros 5 elementos
  .subscribe(resultado => console.log(resultado));

Ejemplos de uso de Observables en Angular

Manejo de peticiones HTTP (HttpClient).
Eventos de usuario (clics, teclas, desplazamiento).
Temporizadores y retrasos (interval, timer).
Comunicación entre componentes con Subject.

Etiquetas:

typescript angular

Creado por:

Jorge García

Fullstack developer