My API returns a large object to my Observable, and I need to showcase these values in my template.
When dealing with other data that is returned as an array, I can easily utilize the following code:
<div *ngFor="let value of values | async">
<p>{{ value.prop }}</p>
</div>
I do not have to wait for the async operation to complete within the *ngFor, since it already has an async pipe in the parent element.
However, when it comes to working with my object, I am searching for a similar solution. Currently, I am using something like this:
<h2>{{ (obj | async)?.title }}</h2>
<p>{{ (obj | async)?.prop.prop2 }}</p>
<p>{{ (obj | async)?.another.prop }}</p>
This results in a lot of duplicated code. Is there a more concise way to achieve this?
<div *using="obj | async">
<!-- obj has resolved, can access obj.prop -->
</div>