Angular – Manejo de Observables
Muy Buenas a todos, mi nombre es Juan Carlos Linaje y en esta entrada, veremos cómo trabajar con observables de una manera didáctica, con un ejemplo explicado y detallado paso a paso
Lo primero de todo, para poder empezar en nuestro proyecto, lo que vamos a hacer es irnos a Github: https://github.com/desatatufuria/AngularObservers-app
Nos descargamos el proyecto: Case Study with Binding
Una vez nos descarguemos el proyecto, procederemos a preparar el entorno de trabajo.
usamos el comando: npm install
Levantamos el proyecto.
usamos el comando: ng s -o
s, es un alias de server
-o, es un argumento que indica que lance la solución al navegador predeterminado
Comprobamos que tengamos el proyecto correctamente levantado en nuestro navegador. 
Una vez comprobado que el proyecto funciona, vamos a realizar nuestra modificación para cambiar el sistema de binding de user list a User- selected, del archivo: user-list.component.html
Para ello:
- iremos al archivo:user-list.component.html
- eliminaremos [user]=»selectedUser»
en el archivo: user.service.ts
abrimos hueco justo debajo de la linea 13, y añadimos el siguiente código:
selectedUserSubject = new BehaviorSubject<string | undefined>(undefined);
selectedUser$ = this.selectedUserSubject.asObservable();
también deberemos de agregar 2 métodos nuevos en el mismo archivo: user.service.ts
El siguiente paso es irnos al archivo user-details.components.ts : 
vamos a realizar una serie de cambios como los que vemos a continuación: 
vamos a explicarlos paso a paso:
En este primer paso, ya no necesitamos Input del core, pero sí vamos a querer implementar OnInit, en la clase, para ello hacemos la importación.
además, necesitaremos poder llamar a nuestro servicio: userService
import { Component, OnInit } from ‘@angular/core’;
import { UserService } from ‘../user.service’;
implementamos OnInit:
export class UserDetailsComponent implements OnInit {
Quitamos completamente el decorador @Input
Seguidamente creamos el constructor:
constructor(private userService: UserService) { }
y añadimos nuestro método ngOnInit()
ngOnInit(): void {
this.userService.selectedUser$.subscribe(user => {
this.user = user;
});
}
En este método, nos subscribimos a selectedUser$ para que, cuando hagamos click en un nombre de la lista de usuarios, emitamos el nuevo usuario seleccionado y sea recogido por nuestra variable {user} que disponemos en el archivo: user-details.component.html
Ya hemos terminado con user-details.component.ts
En el archivo: user-list.components.ts:,
haremos una ligera modificación en el método, selectUser()
con el nuevo código
selectUser(user: string): void {
console.log(`Selected User: ${user}`);
this.userService.selectUser(user);
}
Con los todos estos cambios, hemos conseguido dos cosas:
- independencia del componente: <app-user-details> del componente: <app-user-list>
- Dejar de usar Binding para recibir el usuario pulsado en la lista de usuarios.
Ya podemos probar nuestro ejemplo, qeu funcionará de manera perfecta.
Podemos observar que, el comportamiento no ha cambiado, la lista de usuarios, funciona perfectamente al pulsar sobre un elemento, nos modifica el componente: <app-user-details>
no te pierdas el videotutorial para ver, al final del video, cómo hemos sacado el componente <app-user-details> y nos lo hemos llevado al archivo app.component.html
También se explica más en profuncidad todos los cambios así como el código desde el principio hasta el final.
No dudes en dejar comentarios cualquier duda que puedas tener al respecto!
Autor/a: Juan Carlos Linaje
Curso: Desarrollo Web Full Stack + MultiCloud con Azure y AWS
Centro: Tajamar Tech
Año académico: 2023-2024Github: https://github.com/desatatufuria/AngularObservers-app
