How to display AngularFirestore data

Question

I'm trying to display the username and age from my firestore database I get no errors but nothing is showing. What am I doing wrong here?

home.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams} from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore} from 'angularfire2/firestore';
import { Profile } from './../../models/profile';


@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  profcollection: AngularFirestore<Profile>;

  constructor(private afs: AngularFirestore, private afAuth: AngularFireAuth, public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewWillLoad() {
    this.afAuth.authState.take(1).subscribe(data => {
      if (data && data.email && data.uid) {

        this.profcollection = this.afs.collection('profiles').doc(`${data.uid}`).valueChanges();

      }else{
        this.navCtrl.setRoot('LoginPage');
      }
    })
  }
}

home.html

<ion-content padding>
  <p>Username: {{profcollection.username}} </p>
  <p>Age: {{profcollection.age}} </p>
</ion-content>

Answer 1

Try this code

 profcollection: any;
 const profileDoc = afs.collection('profiles').doc(user.uid);
 profileDoc.valueChanges().subscribe((profile: any) => {
      this.profcollection = profile;
 });

Answer 2

In your markup you can also subscribe to the data directly using the aync pipe like so:

<p>Username: {{ (profcollection | async).username }}</p>

The async pipe there will subscribe to the data if you do not need to manipulate the data in your component before displaying it on the UI.