Para manejar el valor creo que lo mejor sería trabajar con un pipe de switchmap por ejemplo para aprovechar el async…
Introducción
Angular 8 Performace
Analizando el tamaño del Bundle
¿Qué es un bundle size? Tree shaking y su importancia
Implementando Webpack Bundle Analyzer
Moment vs date-fns
Aplicando un Performance Budget desde el Angular CLI
Aumenta la velocidad de navegación
Code splitting a nivel de rutas
Implementando una propia estrategia de precarga
Implementando QuicklinkStrategy
Usando Machine Learning para predecir rutas
Google Analytics y Angular
Implementando GuessJs
Precarga con Service workers
¿Qué es Server Side Render?
Implementando Angular Universal
Cuidados con SSR y Angular
Rendimiento en tiempo de ejecución
¿Qué es el Change Detection?
Preparando módulo para Change Detection
Analizando el Change Detection
Optimización de componentes con OnPush
Usando pipes puros
subscribe
Async
Conclusiones
Conclusiones
You don't have access to this class
Keep learning! Join and start boosting your career
When working with subscriptions in Angular, it is crucial to do it in an efficient way to maintain control over the data and events we handle. Subscribing and unsubscribing correctly can prevent memory leaks and improve the performance of our applications. Next, we will explore how to handle subscriptions using observables and best practices for automatic subscription handling.
Observables are a powerful feature in Angular that allows us to work with asynchronous data streams. When dealing with Observables, it is advisable to follow some naming and structuring conventions to facilitate their handling and keep the code clear.
($
) at the end of the name of variables that are Observables, for example, value$
, to quickly signal their type.Observable
method. In a constructor or initialization method it is enough to assign the Observable to a property.import { Observable } from 'rxjs';
const value$ = new Observable(subscriber => { subscriber.next(0); setTimeout(() => subscriber.next(1), 1000); setTimeout((() => subscriber.next(2), 2000); setTimeout(() => subscriber.complete(), 3000);});
One of the advantages of Observables is that we can handle subscriptions automatically, thus avoiding having to worry about unsubscribing manually.
async
pipe in HTML templates to automatically subscribe and unsubscribe. The async pipe takes care of subscribing the component to the Observable and automatically unsubscribing it when the component is destroyed.<!-- HTML Template --><div*ngIf="value$ | async as value"> {{ value }}</div>
In situations where we want to intercept, modify or simply observe the data passing through an Observable, RxJS operators are of great help.
tap
to perform secondary actions on the data without altering the main subscription.import { of } from 'rxjs';import { tap } from 'rxjs/operators';
const value$ = of(0, 1, 2).pipe( tap(value => console.log('Value received: ', value)));
In the above example, although you are not directly subscribing, the tap
operator allows you to perform a console.log()
for each value you pass, which can be useful for debugging or verifying the data flow.
With these concepts and techniques on how to effectively work with Observables and manage subscriptions, Angular allows you to create powerful and efficient applications. Always remember to consider which method best suits your needs: whether you are going to handle a data in a custom way or simply render it on screen. Stay curious and keep exploring the possibilities offered by this powerful tool.
Contributions 1
Questions 1
Para manejar el valor creo que lo mejor sería trabajar con un pipe de switchmap por ejemplo para aprovechar el async…
Want to see more contributions, questions and answers from the community?