Angular Async Pipe vs Subscribe
August 9, 2020 • Angular • Published By Josh • 3 minute read
An observable begins providing values only when it’s subscribed to. You can subscribe by using the subscribe method or the async pipe. Let’s learn about the differences of using one vs the other.
Table of Contents
Data Service
Let’s say you have a service that returns an observable of Pokemon data based on its id. In your component, nothing will actually happen until you subscribe to this observable.
getPokemonById(id: number): Observable<Pokemon> {
return this.http.get<Pokemon>(`https://pokeapi.co/api/v2/pokemon/${id}`);
}
Subscribe Method
Let’s create a variable called pokemon that will hold the Pokemon data. We also want to create a variable called pokemonSubscription to hold the observable subscription. This will help us unsubscribe from it later.
pokemon: Pokemon;
pokemonSubscription: Subscription;
When our component is initialized, let’s subscribe to the observable in order to get the Pokemon data to display. We store the subscription returned by using subscribe in the pokemonSubscription variable. When the data is successfully returned, we store it in the pokemon variable.
ngOnInit(): void {
this.pokemonSubscription = this.pokemonSvc
.getPokemonById(1)
.subscribe((data: Pokemon) => this.pokemon = data);
}
When you subscribe to something, it stores that subscription in memory. Even though the component could have been destroyed by navigating to a different route let’s say, that observable subscription still exists and could cause a memory leak. That is why it’s important to always unsubscribe from your subscriptions. ngOnDestroy gets called when the component is destroyed. So it’s a good place to clean up subscriptions.
ngOnDestroy(): void {
this.pokemonSubscription.unsubscribe();
}
Finally, in the component’s html, we can display the Pokemon data as long as the pokemon variable has some data to display.
<div *ngIf="pokemon">
{{ pokemon.name }}
</div>
Async Pipe
Let’s create a variable called pokemon$ that will hold the observable Pokemon data. The dollar sign at the end of the variable name is a convention used by many to signify this variable is an observable. Notice this variable type is defined as Observable. We don’t need a variable to store a subscription.
pokemon$: Observable<Pokemon>;
When our component is initialized, we store the observable returned by the service in the pokemon$ variable.
ngOnInit(): void {
this.pokemon$ = this.pokemonSvc.getPokemonById(1);
}
Finally, in the component’s html, we use the async pipe to subscribe to the observable and get the data to display.
<div *ngIf="pokemon$ | async as pokemon">
{{ pokemon.name }}
</div>
The async pipe takes care of both subscribing to and unsubscribing from an observable! That’s why we didn’t need to store the subscription in a variable or implement ngOnDestroy to unsubscribe from it!
Remember, if you’re using the subscribe method, be sure to unsubscribe or you could cause a memory leak. The async pipe will do it for you automatically!
Related Articles
