Angular: Libreria RxJS - Observables vs Subject

Observables y RxJS en Angular

  • Observables: Son una característica central de RxJS y representan un flujo de datos que puede ser observado. Los Observables son utilizados en Angular para manejar eventos asincrónicos, como solicitudes HTTP, interacciones del usuario y otras operaciones que no se completan instantáneamente.
  • RxJS (Reactive Extensions for JavaScript): Es una biblioteca para programación reactiva que utiliza Observables para manejar y componer eventos asincrónicos y flujos de datos. En Angular, RxJS es ampliamente utilizado para manejar la programación reactiva de manera eficiente.
  • RxJS     https://rxjs.dev/6-to-7-change-summary

Componentes de Observables y RxJS en Angular

  1. Observable: Representa una fuente de datos que puede ser observada.
  2. Observer: Es un consumidor de valores entregados por un Observable.
  3. Operators: Funciones puras que permiten trabajar con Observables para modificar, filtrar, combinar y realizar otras operaciones sobre flujos de datos.
  4. Subscription: Representa la ejecución de un Observable y permite cancelar la suscripción a un flujo de datos.
  5. Subject: Es un tipo especial de Observable que permite la multicasting de valores a múltiples Observers.

Videotutoriales: 

  1. Curso Angular 2023 #9 Libreria RxJS Observables vs Subject   https://youtu.be/GuTBTMYMIbs
  2.  Observables y RxJS  https://youtu.be/BOouK6J8pqg
  3. Observables en Angular   https://youtu.be/96HouMe0o5M 
  4. Async pipe en Angular  https://youtu.be/38Tif0tbH0M
  5. Observables ?  compartir información https://youtu.be/k0MPZxqzu8k
  6.  Diferencias entre promises y observables     https://youtu.be/6HVLS6-G97o
  7. .. 
  8. Cursos - RxJS en Angular    https://youtu.be/zV0NywULR_4

 

Interpretación de cada componente

Observable:

  • Clase que representa una secuencia de eventos asincrónicos.
import { Observable } from 'rxjs';

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

 

Observer:

  • Interfaz que define cómo manejar los valores entregados por un Observable.

const observer = {
  next: (value: any) => console.log(value),
  error: (err: any) => console.error(err),
  complete: () => console.log('Complete')
};

Operators:

  • Funciones que operan en Observables para transformar, filtrar o combinar flujos de datos.
import { map } from 'rxjs/operators';

observable.pipe(
  map(value => value.toUpperCase())
).subscribe(observer);

 

Subscription:

  • Objeto que representa la ejecución de un Observable.
const subscription = observable.subscribe(observer);
// Para cancelar la suscripción
subscription.unsubscribe();

 

Subject:

  • Observable que permite emitir y escuchar valores.
import { Subject } from 'rxjs';

const subject = new Subject();
subject.subscribe(observer);
subject.next('Hello');
subject.next('World');
subject.complete();

 

Ejemplo de Observables y RxJS

Configuración del módulo:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
})
export class AppModule {}

 Servicio Angular:

// data.service.ts
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData(): Observable <string[]> {
    const data = ['Angular', 'RxJS', 'TypeScript'];
    return of(data).pipe(delay(1000)); // Simular retraso de red
  }
}

Componente Angular: 

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  data$: Observable<string[]>;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data$ = this.dataService.getData();
  }
}

 

 Plantilla HTML:

<!-- app.component.html -->

<div>

<h1>Data from Observable</h1>

<ul>

<li *ngFor="let item of (data$ | async)">{{ item }}</li>

</ul>

</div>

 

Explicación del Ejemplo:

  1. Servicio DataService:

    • Define un método getData que retorna un Observable que emite un array de strings después de un retraso simulado de 1 segundo.

  2. Componente AppComponent:

    • Inyecta el servicio DataService y usa el método getData para obtener un Observable.
    • El Observable es asignado a la propiedad data$ y se suscribe automáticamente en la plantilla usando el pipe async.

  3. Plantilla HTML:

    • Usa el pipe async para suscribirse al Observable y renderizar los datos una vez que están disponibles.

Este ejemplo demuestra cómo usar Observables y RxJS en Angular para manejar datos asincrónicos de manera eficiente y reactiva.

 

mmm