CODEWITHSUNDEEP
angularvisual-studio-codeionic3
sameer
sameer

Reputation: 447

How to navigate Page without Top Tabs App.components root

I'm using Ionic 3 , VS code IDE recently I came issue regards navigation to setRoot from root Tab page to another page (Home Page) without Top Tabs how could I achieve ?

app.component.ts

import { UserTabsPage } from '../pages/user-tab/user-tabs';
export class MyApp {
  rootPage:any = UserTabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {}
}

UserTabsPage.ts

export class UserTabsPage { 
tab1Root = UserLoginPage;   
tab2Root =LoginPage;  
 constructor() { } 
}

UserTabsPage.html

 <ion-content padding center text-center>
    <ion-tabs tabsPlacement="top" >
      <ion-tab [root]="tab1Root" tabTitle="User Login"></ion-tab>
      <ion-tab [root]="tab2Root" tabTitle="Phone Login"></ion-tab>
    </ion-tabs> </ion-content>

userLogin.ts

import { RegisterPage } from '../register/register';
     private registerPage(){
          this.navCtrl.setRoot(RegisterPage );}

userLogin.html

> <button ion-button clear ion-button item-end icon-start color="dark"
> (click)="registerPage()" >Sign Up?</button>

My Register Page result :enter image description here

My Expected Register Page Result:enter image description here

Upvotes: 0

Views: 46

Answers (1)

Wesley Coetzee
Wesley Coetzee

Reputation: 4838

In your app.component.ts you need to set your rootPage to RegisterPage

You could do this via the Events module/component that comes with Ionic.

userLogin.ts

constructor(private events: Events){ }

public registerPage() {
  this.events.publish('Register');
}

app.component.ts

constructor(..., private events: Events) {
  this.initEvents();
}

private initEvents() {
  this.events.subscribe('Register', () => {
    this.rootPage = RegisterPage;
  });
}

Anything that is subscribed to the 'Register' event, will be notified when that event is published.

Upvotes: 1

Related Questions