My previous articles on using AsyncPipe and data refresh patterns in Angular hint at some common anti-patterns dealing with Observables. If there’s any common thread in my advice, it is: delay unpacking an Observable into its scalar types when performing logic you can rewrite as side-effect-free, leaving code with side-effects for subscription callbacks and other downstream logic.
My two earlier articles focused on cases users can benefit from handling more of
the object's lifecycle in its Observable form. In other words, cases where the
Observable was being subscribed to and unpacked too soon. Instead, I suggested
transforming the Observable using operators like
etc. and taking advantage of the power offered by this form. In the case of
Angular, it provides
AsyncPipe, which takes the care of the step with
side-effects (actually rendering the page) in template code.