Angular observables basics

Question

I have an observable coming from firebase.

The relevant code in my service is such:

interface User {
uid: string;
email: string;
}    

public user: Observable<User>;

getUserDetails(uid) {
this.userDocument = this.afs.collection('users').doc(uid)
this.user = this.userDocument.valueChanges();
return this.user
}

ngOninit() {
this.user = this.getUserDetail(uid)
}

To see the variables in the observable I have this code:

<h1>Json: {{user | async | json}}</h1>

which in turn spits out:

Json: {"email": "xxx@somemail.com", "uid": "DbeFlYvdbqTP12vPE7x4hJFashe2" }

However the following gets me nothing. Why does this not work?

<h1>Email: {{user.email | async}} </h1>
<h1>Uid: {{user.uid | async}} </h1>

Answer 1

It should be done as,

 <h1>Email: {{(user| async)?.email}} </h1>
 <h1>Uid: {{(user | async).uid}} </h1>