Navigate from intro/welcome page to specific tabpage index

@gilbertlucas46 wrote:

I created an intro page which contains 3 slides that will serve as an onboarding instructions on how to use the site. the last slide contains two buttons

This is what I’m trying to achieve

Login button - should open tabsPage with the login tab active
Signup button- should open tabsPage with the signup tab active.

intro.html

<ion-content>
  <ion-slides #mySlider pager (ionSlideDidChange)="onSlideChange()" [class]="activeSlide">
    <ion-slide *ngFor="let slide of slides">
      <img [src]="slide.image">
      <div class="caption">
        <h2>{{slide.title}}</h2>
        <p>{{slide.description}}</p>
      </div>
      <div class="userNav" *ngIf="activeSlide == 'slideBG2'">
          <button ion-button   (click)="goToSignup() ">signup</button>
          <button ion-button   (click)="goToLogin() ">Login</button>
      </div>
      
    </ion-slide>
  </ion-slides>
  <button *ngIf="activeSlide !== 'slideBG2'" class="nextSlide" (click)="goToSlide()">Next</button>
</ion-content>

intro.ts

export class IntroPage {
constructor(public navCtrl: NavController, public navParams: NavParams) {}

goToLogin() {
  // this.navCtrl.setRoot(TabsPage);
}
goToSignup() {
  // this.navCtrl.setRoot(TabsPage);
}
}

tabs.ts

export class TabsPage {

  tab1Root = SignupPage;
  tab2Root = LoginPage;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }
}

tabs.html

<ion-tabs tabsPlacement="top" >
  <ion-tab [root]="tab1Root" tabTitle="Signup"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Login"></ion-tab>
</ion-tabs>

app.component.ts

export class MyApp {
  rootPage:any = IntroPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

Posts: 1

Participants: 1

Read full topic