We’ve covered a few different async
pipe syntax tricks earlier in this newsletter, as well as why it’s important to use the async
pipe to automate your subscriptions/unsubcriptions from Observables.
Today, let’s see another interesting syntax that can be very helpful when a template has multiple subscriptions, such as:

Even if using ng-container
, as we saw earlier this week, is helpful, it would be even better to have just one place where both subscriptions happen.
We can simplify the above by creating a new object that has one property for each Observable value as follows:

That way, all our async subscriptions are in one place, and the rest of our HTML template is much more readable.