Changing Ionic Cordova TabRoot Dynamically during runtime

user_3022454 0
Viewed 346

I have created an Ionic Tabs Application.

Tabs.html:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="md-home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="md-information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="My Account" tabIcon="md-log-in"></ion-tab>
</ion-tabs>

and Tabs.ts

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = LoginPage;

  constructor()
  {}

}

What I want to do is once I'm on tab3Root (LoginPage) and I login, I want to change it to the LoggedinPage. Maintaining the other tabs functioning and normal.

Is that possible? If yes how please?

Thank you

Added Info: check/edit this link it contains my code as example stackblitz.com/edit/ionic-yff2sx

ionic3 ionic-framework cordova
3 Answers

Simply call the other page from that tab using setRoot method. call the below method from Login page.

this.navCtrl.setRoot(this.loggedInPage);

Please refer this working demo

I have assumed home.ts as log In page and called the loggedIn page from home page. After clicking go to Logged In page button in home page, Logged In page content will replace the home page content.

user_57823470

You are referring to the provider as injectable class I guess. Use injectable class only for business validation and HTTP requests. Page construction and page navigation should happen on component class.. please edit your question with all the files and expectations

user_57823470

According to prithivi Raj answer you will be able to navigate to that page but you can not highlight the tabs icon.

inOrder to do that you have you do some thing like this

 this.navCtrl.parrent.select(0);

Consider you are in tab3 and after you login you want to navigate to tab1/tab2 just mention the index in the above code parameter like this.navCtrl.parrent.select(0); / this.navCtrl.parrent.select(1);. it will lead you to that tab if you use `this.navCtrl.setRoot("this. loggedInPage"); it will not highlight the tabs which will lead the user confusion in which tab he is active now.

user_52183600
Related