Change ion-tabs selectedIndex from intro/welcome page

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

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';
import { TabsPage } from '../tabs/tabs';
import { SignupPage } from '../signup/signup';
import { LoginPage } from '../login/login';

@IonicPage()

@Component({
  selector: 'page-intro',
  templateUrl: 'intro.html',
})

export class IntroPage {
  introSlides: any;
  splash = true;

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

@ViewChild('mySlider') slider: Slides;
  public currentindex
  public objectindex
  public activeSlide = 'slideBG0';


slides = [
{
  title: "Juce up your life",
  description: "lorem",
  image: "assets/imgs/intro/slides/slide1.png",
},
{
  title: "Anytime, anywhere",
  description: "lorem",
  image: "assets/imgs/intro/slides/slide2.png",
},
{
  title: "Get started",
  description: "lorem.",
  image: "assets/imgs/intro/slides/slide3.png",
}
];


public onSlideChange() {
  this.currentindex = this.slider.getActiveIndex();
  this.activeSlide = 'slideBG' + this.currentindex;
  // console.log(this.activeSlide);
} 
goToSlide() {
  let currentIndex = this.slider.getActiveIndex() + 1;
  this.slider.slideTo(currentIndex, 500);
}

goToLogin() {
  // this.navCtrl.setRoot(LoginPage);
}
goToSignup(): void  {
  // this.navCtrl.setRoot(TabsPage, {index: 1});
}

  ionViewDidLoad() {
    // console.log(this.introSlides);
    setTimeout(() => {
      this.splash = false;
    }, 4000);
  }
 
}

tabs.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { SignupPage } from '../signup/signup';

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

  tab1Root = SignupPage;
  tab2Root = LoginPage;

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

  }
}

tabs.html

<ion-tabs tabsPlacement="top" [selectedIndex]="seltabix">
  <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();
    });
  }
}

Fixed

Fixed

intro.ts

goToLogin() {
  this.navCtrl.setRoot(TabsPage, {
    tabIndex: 1
  });
}
goToSignup()  {
  this.navCtrl.setRoot(TabsPage, {
    tabIndex: 0
  });
}

tabs.ts

export class TabsPage {

  tab1Root = SignupPage;
  tab2Root = LoginPage;
  seltabix: number;


  constructor(public navCtrl: NavController, public navParams: NavParams) {
    
    this.seltabix = this.navParams.get('tabIndex');
  }
}

tabs.html

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

intro.html

<div class="userNav" *ngIf="activeSlide == 'slideBG2'">
          <button ion-button   (click)="goToSignup() ">signup</button>
          <button ion-button   (click)="goToLogin() ">Login</button>
      </div>

Passing Data Between Pages
First, I pass through the data within the setRoot call (this can also be done when using push

  goToLogin() {
  this.navCtrl.setRoot(TabsPage, {
    tabIndex: 1
  });
}
goToSignup()  {
  this.navCtrl.setRoot(TabsPage, {
    tabIndex: 0
  });
}

Then on the receiving page,import NavParams and inject it into constructor and then set data from 1st page to the selected tab index property

constructor(private navCtrl: NavController, private navParams: NavParams){
 this.seltabix = this.navParams.get('tabIndex');
}