AngularFire2 4.0 Display user email in Header

Question

Im trying to display the user email in my header component following AngularFire 2 version 4.0 upgrade documentation: https://github.com/angular/angularfire2/blob/master/docs/version-4-upgrade.md

Header.component

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, FirebaseListObservable,FirebaseObjectObservable } from 'angularfire2/database';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  user: Observable<firebase.User>;
  constructor(afAuth: AngularFireAuth) {
    this.user = afAuth.authState;
  }

header.html

<div> {{ (user | async)? | json }} </div>

if I do it like this I get Object object in the html. If I remove the question mark outside the parenthesis, then the html displays a json with a lot of info, including email. What I want is to display the email in the html, something like this:

<div> {{ user?.email }} </div>

My second question is that I have the user email in the firebase database also. Should I use firebase auth or firebase database to display that info? If I should use Firebase database, how can I do that?

As always, thanks for your help!

Vic Vic · Accepted Answer · 2017-08-03T21:58:09

I stumbled upon this problem as well. What is happening is that your user at the moment of evaluation is still an observable rather than the result of your login. Once it resolves (|async) email becomes available. In your div you need to put:

{{(user | async)?.email}}

That's it.

Hope that helps.

AngularFire2 4.0 Display user email in Header

1 Answers