меню в App.html не будет работать с Firebase Ionic 3

Question

У меня есть html меню, объявленный в app.html следующим образом:

<ion-menu [content]="content" *ngIf="userData">
    <ion-header>
        <div class="menu heading">
            <ion-list>
                <ion-item menuClose (click)="profilePage()">
                    <ion-avatar item-start>
                        <img [src]="userData.img">
                    </ion-avatar>
                    <h2 class="text-white text-shadow"><strong>{{userData.name}}</strong></h2>
                    <p class="text-white text-shadow" (click)="profilePage()">View Profile</p>
                </ion-item>
            </ion-list>
        </div>
    </ion-header>

    <ion-content class="menu" padding>
        <ion-list>
...
...
...
    </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Проблема в том, что переменная userData происходит от firebase , поэтому, когда я захожу и захожуна главную страницу не работает, но как только я обновляю страницу, она работает.

Вот так я получаю userdata в app.component.ts :

  constructor(public platform: Platform, public statusBar: StatusBar, 
    public splashScreen: SplashScreen,
    keyboard: Keyboard,
    public angularDb:AngularFireDatabase,
    public dataProvider: DataProvider
  ) {
    platform.ready().then(() => {
      console.log("ready")

      this.dataProvider.getData('userData').then((data)=>{

        let userData = <any>data;
        this.userData = userData;
....

В IONIC 4 я увидел, что есть возможность создать меню на отдельной странице, такой как menu.page.html и его menu.ts, где можно получить UserData, поскольку app.component.ts выполняется только один раз и ionic 3рекомендует реализовать там меню, к сожалению, для этого практически нет решения, какой-либо совет?