El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Contenido del curso

En este tema, aprenderemos sobre los Observables en Angular, una característica poderosa que permite manejar flujos de datos asincrónicos. Los Observables son una parte fundamental de la programación reactiva y son ampliamente utilizados en Angular para manejar eventos, solicitudes HTTP, y más.

¿Qué es un Observable?

Un Observable es una colección de valores o eventos futuros. Es similar a una Promesa, pero con capacidades adicionales. Mientras que una Promesa maneja un solo evento cuando se completa o falla, un Observable puede manejar una secuencia de eventos a lo largo del tiempo.

Características Clave de los Observables:

Multivalor: Puede emitir múltiples valores a lo largo del tiempo.
Pausable y Reanudable: Puede ser pausado y reanudado.
Cancelación: Puede ser cancelado en cualquier momento.
Operadores: Ofrece una amplia gama de operadores para transformar, filtrar y combinar flujos de datos.

Creación de un Observable

Para crear un Observable en Angular, utilizamos la clase Observable del paquete rxjs. Aquí hay un ejemplo básico:

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next('Hello');
  subscriber.next('World');
  subscriber.complete();
});

Explicación del Código:

Importación: Importamos la clase Observable de rxjs.
Creación: Creamos un nuevo Observable que emite dos valores ('Hello' y 'World') y luego se completa.

Suscripción a un Observable

Para recibir los valores emitidos por un Observable, necesitamos suscribirnos a él. Aquí hay un ejemplo de cómo hacerlo:

observable.subscribe({
  next(x) { console.log(x); },
  error(err) { console.error('Error: ' + err); },
  complete() { console.log('Completed'); }
});

Explicación del Código:

next: Función que se llama cada vez que el Observable emite un valor.
error: Función que se llama si el Observable emite un error.
complete: Función que se llama cuando el Observable se completa.

Operadores de Observables

Los operadores son funciones que permiten transformar, filtrar y combinar Observables. Aquí hay algunos operadores comunes:

`map`

Transforma cada valor emitido por el Observable.

import { map } from 'rxjs/operators';

const numbers = of(1, 2, 3, 4, 5);
const squaredNumbers = numbers.pipe(map(x => x * x));

squaredNumbers.subscribe(x => console.log(x));

`filter`

Filtra los valores emitidos por el Observable.

import { filter } from 'rxjs/operators';

const numbers = of(1, 2, 3, 4, 5);
const evenNumbers = numbers.pipe(filter(x => x % 2 === 0));

evenNumbers.subscribe(x => console.log(x));

`mergeMap`

Combina múltiples Observables en uno solo.

import { mergeMap } from 'rxjs/operators';
import { of } from 'rxjs';

const letters = of('a', 'b', 'c');
const result = letters.pipe(
  mergeMap(x => of(1, 2, 3).pipe(map(i => x + i)))
);

result.subscribe(x => console.log(x));

Uso de Observables en Angular

En Angular, los Observables son utilizados principalmente en servicios para manejar solicitudes HTTP y eventos. Aquí hay un ejemplo de cómo usar un Observable en un servicio HTTP:

Servicio HTTP con Observables

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

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

Consumiendo el Servicio en un Componente

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  template: `
    <div *ngIf="data">
      <pre>{{ data | json }}</pre>
    </div>
  `
})
export class DataComponent implements OnInit {
  data: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getData().subscribe(
      data => this.data = data,
      error => console.error(error)
    );
  }
}

Explicación del Código:

Servicio: DataService utiliza HttpClient para realizar una solicitud GET y devuelve un Observable.
Componente: DataComponent se suscribe al Observable devuelto por DataService y maneja los datos o errores recibidos.

Ejercicio Práctico

Ejercicio:

Crea un servicio que realice una solicitud HTTP a una API pública (por ejemplo, https://jsonplaceholder.typicode.com/posts).
En un componente, suscríbete al Observable devuelto por el servicio y muestra los datos en la plantilla.

Solución:

Servicio:

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

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

  constructor(private http: HttpClient) {}

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

Componente:

import { Component, OnInit } from '@angular/core';
import { PostService } from './post.service';

@Component({
  selector: 'app-posts',
  template: `
    <div *ngIf="posts">
      <div *ngFor="let post of posts">
        <h3>{{ post.title }}</h3>
        <p>{{ post.body }}</p>
      </div>
    </div>
  `
})
export class PostsComponent implements OnInit {
  posts: any[];

  constructor(private postService: PostService) {}

  ngOnInit() {
    this.postService.getPosts().subscribe(
      posts => this.posts = posts,
      error => console.error(error)
    );
  }
}

Conclusión

En esta sección, hemos aprendido sobre los Observables en Angular, cómo crearlos, suscribirnos a ellos y utilizar operadores para transformar flujos de datos. También vimos cómo aplicar estos conceptos en un servicio HTTP y consumirlos en un componente. Los Observables son una herramienta poderosa para manejar datos asincrónicos y eventos en Angular, y su comprensión es crucial para desarrollar aplicaciones robustas y eficientes.

Curso de Angular

Módulo 1: Introducción a Angular

Módulo 2: Componentes de Angular

Módulo 3: Enlace de Datos y Directivas

Módulo 4: Servicios e Inyección de Dependencias

Módulo 5: Enrutamiento y Navegación

Módulo 6: Formularios en Angular

Módulo 7: Cliente HTTP y Observables

Módulo 8: Gestión de Estado

Módulo 9: Pruebas en Angular

Módulo 10: Conceptos Avanzados de Angular

Módulo 11: Despliegue y Mejores Prácticas

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia