The async pipe is often an Angular developers best friend. It can help make our code more reactive and handle observable subscriptions for us. I’ve gone on endlessly about using the async pipe:
But, there is something else. Perhaps even cooler. This the push pipe from RxAngular:
As well as the rxLet directive:
This involves installing an external library, but it does provide a rather interesting benefit.
One of the cool things about the async pipe is that whenever a new value is emitted from the observable it is subscribing to, it will trigger change detection for our component - which can be critical if we are using OnPush change detection.
The downside here is that it uses the markForCheck method to achieve this, which will signal to Angular that it should run change detection for not only the component itself where the change occurred, but also for all of the components parent all the way up to the root component. This can lead to a lot of unnecessary rendering work.
On the other hand, instead of using markForCheck, RxAngular will directly use the detectChanges method run change detection for just the one component where the new value was emitted.
The benefit of using a library like this is going to heavily depend on how much rendering work your application is doing - but if you have a large application with a heavily nested structure this could potentially lead to massive performance improvements.