Navigation page to Tab Page push using ionic 3 angular 4

Question

I'm having the Login screen in my application using normal page based and while checking the valid credentials have to move the user to the home screen it's based on Tab based page, But I couldn't able to achieve this scenario.

Lemme explain my codebase below.

app.components

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { TabPage } from '../pages/tab/tab';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

app.module

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { TabPage } from '../pages/tab/tab';
import { AppointmentPage } from '../pages/appointment/appointment';
import { LocationPage } from '../pages/location/location';
import { ReportPage } from '../pages/report/report';
import { FeedbackPage } from '../pages/feedback/feedback';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
    TabPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    TabPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.ts

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  skipIntroHandler() {

    this.navCtrl.push(LoginPage);

  }

}

Login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { TabPage } from '../tab/tab';

/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {

// Binding values

public userName: String;
public passCode: any;

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

this.userName = 'cdc';
this.passCode = 'Cdc';
this.navCtrl = navCtrl;

}

ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}

loginHandler() {

  if(this.userName === 'cdc' && this.passCode === 'Cdc'){

    //this.navCtrl.push(TabPage);
    this.navCtrl.setRoot(TabPage, {});

  }

}

}

Tab.html

<ion-tabs>
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

Tab.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AppointmentPage } from '../appointment/appointment';
import { LocationPage } from '../location/location';
import { ReportPage } from '../report/report';
import { FeedbackPage } from '../feedback/feedback';
/**
 * Generated class for the TabPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-tab',
  templateUrl: 'tab.html',
})
export class TabPage {

  private tab1Root: any;
  private tab2Root: any;
  private tab3Root: any;

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

    this.tab1Root = AppointmentPage;
    this.tab2Root = LocationPage;
    this.tab3Root = ReportPage;

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TabPage');
  }

}

So I want to know How to push navigation by normal page to tab page in ionic 3?

Answer 1

You can try as shown below.Do below changes and try it again.

home.ts

 skipIntroHandler() {    
    this.navCtrl.setRoot(LoginPage);
  }

login.ts

constructor(private navCtrl: NavController, private navParams: NavParams) {
    this.userName = 'cdc';
    this.passCode = 'Cdc';
 }

loginHandler() {
  if(this.userName === 'cdc' && this.passCode === 'Cdc'){
      this.navCtrl.setRoot(TabPage);
  }