Issues 'unwrapping' an observable

Question

On my authentication service I have the following:

authService.ts

user$: Observable<user>;

constructor(private db: AngularFirestore, private afAuth: AngularFireAuth) {
   this.user = this.afAuth.authState.pipe(
            switchMap((userData) => {
                if (userData) {
                    // this.userID = userData.uid;
                    return this.db.doc<User>(this.PATH + userData.uid).valueChanges();
                } else {
                    return of (null);
                }
            })
        )
}

page-component.ts And on another component I have my constructor like the following: constructor(public authService: AuthService) {}

And on the html: page-component.html

<div>{{ authService.user.firstName | async }}</div>

Shouldn't that 'unwrap' the Observable on the HTML? I get no errors but nothing shows up. If I subscribe to the user on the page-component.ts and console.log, I do get the entire object.

Any tips?

Answer 1

Try

<div *ngIf="(authService.user | async) as user"> {{user.firstName}}</div>

Because authService.user is the observable and you're trying to async authService.user.firstName