Las pipes y los observables son características fundamentales en Angular que ayudan a transformar y gestionar datos de manera efectiva.
Pipes
Una pipe es una herramienta que nos permite modificar o transformar la información presentada en la plantilla HTML sin modificar el origen de los datos.
Si bien su fin es solo estético, su implementación se basa en la reusabilidad y la simplificación de la arquitectura de un proyecto separando, posiblemente, procesos matemáticos o semánticos.
<!-- Esta pipe transforma el texto a uppercase -->
<p>{{ someString | uppercase }}</p>Async Pipe
Angular nos provee de una pipe especial llamada Async Pipe que nos permite utilizar los observables directamente en el template HTML. Lo más destacado de esta pipe es que gestiona automáticamente la suscripción y la desuscripción de los observables, evitando fugas de memoria innecesarias.
this.text = observable.pipe(map((value) => value.item));<p>{{ someString | async }}</p>Observables
Una buena recomendación es que (por más que Angular por defecto se desuscriba de las peticiones HTTP automáticamente), si se sabe que el observable va a traer información una única vez, usar .pipe(first()) despues de suscribirnos al componente. De esta forma una vez obtenidos los datos el sistema se desuscribe solo.
En caso de necesitar una constante actualización de los datos utilizaremos el ngOnDestroy para desuscribirse del observable.
const subs: Subscription | undefined;
ngOnDestroy(){
if (this.subs){
this.subs.unsuscribe():
}
}