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 }}

Pluck Returns 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.

If you work with Observable you can display data like this way:

<div *ngIf="data | async; let _data">
   <h3>{{_data.name}}</h3>
</div>

or

<h3>{{(data | async).name}}</h3>