Changing Ionic Cordova TabRoot Dynamically during runtime

Question

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

Answer 1

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.