Angular 2 - Displaying async Object data from promise Angular 2 - Displaying async Object data from promise angular angular

Angular 2 - Displaying async Object data from promise


You do not need any special pipe. Angular 2 suppport optional field. You just need to add ? in your object

{{ (data | async)?.name }}

or

{{(name | async)?}}


There's nothing wrong with the accepted answer above. But it becomes a hassle to append | async? when we need to display many properties of the object. The more convenient solution is as follows:

<div *ngIf="data | async as localData">   <div> {{ localData.name }} </div>   <div> {{ localData.property1 }} </div>   <div> {{ localData.property2 }} </div></div>


You can also use pluck from rxjs/observable:

{{ user.pluck("name") | async }}

PluckReturns an Observable containing the value of a specified nested property from all elements in the Observable sequence. If a property can't be resolved, it will return undefined for that value.