title: This.username is undefined in ionViewDidLoad() but defined in ionViewWillLeave() - Ionic3 chat mobile application
body: <p>I'm trying to create a simple chat application with Ionic 3 and Firebase. Registering, logging in users, sending and displaying their messages work. This is a common chat room for all users.</p>
  
  <p>I'd like a message to appear in the chat room when a user is logged in or logged out to let other users know. When test user is logged in, this message appears: "has joined the room"</p>
  
  <p>When test user is logged out, this message appears: "test@gmail.com has left the room"</p>
  
  <p>I'd like the username (email address) to show when the user is logged in as well. I'd like this message to appear: "test@gmail.com has joined the room"</p>
  
  <p>I tried write this.username on the console, but it only writes this to the console: ionViewDidLoad ChatPage. The username doesn't appear on the console:
  console.log('ionViewDidLoad ChatPage', this.username);</p>
  
  <p>chat.ts:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { IonicPage, NavController, NavParams } from 'ionic-angular';
  import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
  import { Storage } from '@ionic/storage';
  import { Subscription } from 'rxjs/Subscription';
  import $ from 'jquery';
  
  @IonicPage()
  @Component({
    selector: 'page-chat',
    templateUrl: 'chat.html',
  })
  export class ChatPage {
  
    username: string= '';
    message: string= '';
    obsRef: AngularFireObject&lt;any&gt;;
    obsToData: Subscription;
    messages: object[]= [];
  
    constructor(public db: AngularFireDatabase, public navCtrl: NavController, public navParams: NavParams, private storage: Storage) {
        this.storage.get('username').then((val) =&gt; {
        if (val != null) {
          this.username= val;
        }
      });
  
      this.obsRef = this.db.object('/chat');
      this.obsToData = this.obsRef.valueChanges().subscribe( data =&gt; {
        var data_array= $.map(data, function(value, index) {            
          return [value];
        });
  
        this.messages= data_array;
      });
    }
  
    sendMessage() {
      this.db.list('/chat').push({
        username: this.username,
        message: this.message
      }).then( () =&gt; {
        this.message= '';
      });
    }
  
    ionViewWillLeave() {
      console.log('user is about to go');
      this.obsToData.unsubscribe();
  
      this.db.list('/chat').push({
        specialMessage: true,
        message: this.username + `has joined the room`
      })
    }
  
    ionViewDidLoad() {
  
      console.log('ionViewDidLoad ChatPage', this.username);
  
      this.db.list('/chat').push({
        specialMessage: true,
        message: this.username + `has joined the room`
      })
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>chat.html:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ion-header&gt;
  
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;Chat&lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  
  &lt;/ion-header&gt;
  
  
  &lt;ion-content padding&gt;
  
  &lt;div id="chatMessages"&gt;
    &lt;div *ngFor="let message of messages" [class]="message.specialMessage ? 'message special': 'message'"&gt;
      &lt;div [class]="message.username == username ? 'innerMessage messageRight': 'innerMessage messageLeft'"&gt;
        &lt;div class="username"&gt; {{ message.username }} &lt;/div&gt;
        &lt;div class="messageContent"&gt; {{ message.message }} &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/ion-content&gt;
  
  &lt;ion-footer&gt;
      &lt;div id="footer"&gt;
        &lt;ion-input type="text" [(ngModel)]= "message"&gt; &lt;/ion-input&gt;
        &lt;button ion-button icon-only (click)= "sendMessage()"&gt;
        &lt;ion-icon name="send"&gt;&lt;/ion-icon&gt;
        &lt;/button&gt;
      &lt;/div&gt;
  &lt;/ion-footer&gt;</code></pre>
  </div>
  </div>
  </p>