According to Angular AsyncPipe documentation:
asyncpipe subscribes to an
Promiseand returns the latest value it has emitted. When a new value is emitted, the
asyncpipe marks the component to be checked for changes. When the component gets destroyed, the
asyncpipe unsubscribes automatically to avoid potential memory leaks.
The most important part here is "when the component gets destroyed, the
async pipe unsubscribes automatically to avoid potential memory leaks." These being said, we don't have to worry about unsubscribing the Observables, the AsyncPipe will take care for of it us - good practice (and the most important).
Let's create some observables and get started:
As you can see, I defined two Observables,
user$. It's a good practice to have an observable which will be called when the component gets destroyed, but I'll talk later more about it.
user$ BehaviorSubject, we'll create a new Observable
getUserInfo$ which sends a server request - each time the
user$ gets emitted:
If you don't understand what's going on in this code and
.pipe function is unclear for you, maybe you should first take a look at this article and then continue reading!
There are two Operators to pay attention,
takeUntil. Of course, you can add more operators, but these two are the most important.
exhaustMap operator we can be sure that
getUserInfo$ will always wait for the server response, even if the
user$ emits a new value, it's the opposite of the
switchMap operator. See the picture below:
You can read more about RxJs Mapping here, to have a better idea of why we used
exhaustMap and not other mapping operators.
takeUntil subscribes and begins mirroring the
user$ Observable. It also monitors a second Observable,
this.onDestroy$ that we provided. If the
this.onDestroy$ emits a value, the
getUserInfo$ Observable stops mirroring the
user$ Observable and completes. For more info about
takeUntil, see the official documentation.
Subscribing via Angular AsyncPipe
Now as we created the
getUserInfo$ Observable, let's see how to subscribe to it using AsyncPipe:
And then just emit a new value for
user$ in order to trigger the server request:
Now, if we click the button, even if we double-click, the
getUserInfo$ will send a server request and emit new user info which will be handled by Angular AsyncPipe and in turn will insert new user info into the page.
As we use
takeUntil operator, we have to emit some value for
this.onDestroy as well as complete it,
takeUntil is optional here, as we subscribed to
getUserInfo$ via Angular AsyncPipe which takes care of unsubscribing when element gets destroyed, but anyway, it's a good practice and it's good to know about it.
Now we don't have to worry about memory leaking, as we did the best practices for subscribing and unsubscribing from Observables. We can be sure that our code will work faster as AsyncPipe allows us to change the
changeDetection of our component to
ChangeDetectionStrategy.Push, which (after me) is the best way to optimize a component and as well a good practice.
Haven't you tried yet? Try it and let me know how it works for you 💻.