How to get profile pic and username properly in google auth using angularfire2 from firebase3

Question

here is what i trying to achieve, i trying to print out the profile picture and username while i already logged in using firebase authentication in ionic application, i want to get the profile picture and my username, how do i do that?

Here is my app.component.ts :

export class MyApp {
  rootPage:any = LoginPage;

  constructor(platform: Platform, private auth: FirebaseAuth) {
    this.auth.subscribe((data) =>{
      if(data){
        window.localStorage.setItem('uid', data.auth.uid);
        window.localStorage.setItem('displayName', data.auth.displayName);
        window.localStorage.setItem('photoUrl', data.auth.photoURL);
        this.rootPage = HomePage;
      }
    })
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

there in my app.component.ts i set the uid, username, and photoURL but when i trying to print it out in HTML, it doesn't show up, it said null for my "username" and blank url for my "photoURL"

here is my login.ts code :

export class LoginPage {

  constructor(public nav: NavController, private auth: FirebaseAuth) {}

  ionViewDidLoad() {
    console.log('Hello LoginPage Page');
  }

  LoginGoogle(){
    this.auth.login({
        provider: AuthProviders.Google,
        method: AuthMethods.Redirect
    }).then((data)=>{
        this.nav.setRoot(HomePage);
    })
  }

}

and here is my home.ts :

export class HomePage {

    firelist: FirebaseListObservable<any>;
    chat:any;

    constructor(public navCtrl: NavController, private af:AngularFire, private auth: FirebaseAuth) {
        this.firelist = this.af.database.list('/chat',
        {
            query:{
                orderByChild: 'negativtimestamp'
            }
        });
    }

    chatSend(va,vi){
        this.af.database.list('/chat').push({
            uid: window.localStorage.getItem('uid'),
            username : window.localStorage.getItem('displayName'),
            img : window.localStorage.getItem('photoURL'),
            chat_text: va.chatText,
            timestamp: Date.now(),
            negativtimestamp: -Date.now()
        })
        this.chat = '';
        console.log(window.localStorage.getItem('displayName'));
    }

    logout(){
        window.localStorage.removeItem('uid');
        window.localStorage.removeItem('displayName');
        window.localStorage.removeItem('photoURL');
        this.auth.logout();
        this.navCtrl.setRoot(LoginPage);
    }

}

here is my home.html

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of firelist | async">
        <ion-avatar>
            <img src="{{item.img}}"/>
        </ion-avatar>
        <h2 class="chat-username">{{item.username}}</h2>
        <p class="chat-text">{{item.chat_text}}</p>
        <h6 class="chat-time">{{item.timestamp}}</h6>
    </ion-item>
  </ion-list>
</ion-content>

<ion-footer>
    <form #f="ngForm">
        <ion-grid>
            <ion-row>
                <ion-col width-80>
                    <ion-input [(ngModel)]="chat" name="chatText" placeholder="pesan.."></ion-input>

                </ion-col>
                <ion-col>
                    <button (click)="chatSend(f.value, f.valid)" full [disabled]="f.valid === false">Send</button>
                </ion-col>
                <ion-col>
                    <button (click)="logout()">Logout</button>
                </ion-col>
            </ion-row>
        </ion-grid>
    </form>
</ion-footer>

UPDATE : here is my firebase console for user, it does said, i have already logged in, i check on the last login date, yes i am logged in in that date

Here is my firebase database for "chat" table :

Answer 1

You need to use safe operator in your home.html, because first time you make a call to firebase there is nothing to display. Your user info still incoming to firebase, while you already subscribed and received nothing, so it will come a little bit later. Try:

<ion-avatar>
    <img src="{{item?.img}}"/>
</ion-avatar>
<h2 class="chat-username">{{item?.username}}</h2>
<p class="chat-text">{{item?.chat_text}}</p>
<h6 class="chat-time">{{item?.timestamp}}</h6>

You can read more about safe operator here: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#safe-navigation-operator

Edit:

You looked to a wrong place for picture and photo, change your code to next lines and it will help.

window.localStorage.setItem('displayName', data.google.displayName);
window.localStorage.setItem('photoUrl', data.google.photoURL);