After navCtrl.setRoot(Dashboard) dashboard page menu icon disappeared


#1

Hello, I’m facing problem wih navCtrl.setRoot(Dashobard)
when click loggedin button and setRoot(dashboard), then first time dashboard page menu icon not showed, but it showed when I enter the app again.
I could not understand why it happen, any solution please…
here is my code

login() {
    this.authService.userLogin(this.user);
      this.authService.loginData
      .subscribe(
        response => {
          console.log(response);
          if(response.tokenid){
            this.authService.isLoggedIn(response);
            this.navCtrl.setRoot(DashboardPage);
          }
        }
  }

Here is image below
111


#2

How do you get into app again? By pressing loggedin button again or by any other way?


#3

try to use

this.navCtrl.push(DashboardPage);

And disble backbutton action in app component

and make sure

this.menuCtrl.enable(true)

in dashboard page platform


#4

back from application and reopen it again, then it work.


#5

can i get the full code from app component and app.html?


#6

App component

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import {LoginPage} from "../pages/login/login";
import {DashboardPage} from "../pages/dashboard/dashboard";
import {CacheService} from "ionic-cache";
import {Storage} from "@ionic/storage";


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any;
  authData:any = new Object();
  pages: Array<{title: string, component: any,icon_md:string, icon_ios:string,name:string}>;

  constructor(
    public platform: Platform,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen,
    public cache:CacheService,
    public storage: Storage
  ) {
    this.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.

      // Set TTL to 30 Day
      this.cache.setDefaultTTL(60 * 60 * 24 * 30);

      // Keep our cached results when device is offline!
      this.cache.setOfflineInvalidate(false);

      this.statusBar.styleDefault();
      this.splashScreen.hide();


      this.storage.get('user').then(user=>{
        this.authData = user;
        console.log(this.authData);
        if(this.authData){
          this.rootPage = DashboardPage;
        } else {
          this.rootPage = LoginPage;
        }

      });

    });


    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Dashboard', component: DashboardPage, icon_md : 'md-browsers', icon_ios:'ios-browsers', name: 'browsers' }
    ];

  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot  (page.component);
  }

  logout(){
    // this.cache.clearExpired(true);
    this.cache.clearAll();
    this.storage.remove('user').then((response)=>{
      console.log(response)
    });
    this.nav.setRoot(LoginPage);
  }
}

App.html

<ion-menu [content]="content" *ngIf="authData">
  <!--<ion-header no-border >
    <ion-toolbar color="myColor">
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
-->
  <ion-header no-border text-center >
    <img color="secondary" src="assets/imgs/banner.png" alt="">
  </ion-header>

  <ion-content>
    <div *ngIf="authData" class="user" text-center>
      <img color="secondary" width="150vh" height="150vh" style="border-radius: 50%" src="{{authData.customer_photo}}" alt="">
      <h2>{{authData.customer_name}}</h2>
    </div>

    <ion-list no-lines>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon ios="{{p.icon_ios}}" md="{{p.icon_md}}"  color="danger" item-start large></ion-icon>
        {{p.title}}
      </button>
      <button menuClose ion-item (click)="logout()">
        <ion-icon ios="ios-log-out" md="md-log-out"  color="danger" item-start large></ion-icon>
        Logout
      </button>
    </ion-list>

  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>


#7

The problem is menubar only available by checking *ngIf=“authData” , actually your authdata is not a boolean value ,it “user”, please try whether authdata == user there