Push child view inside the tabs View with side navigation

Hi, i have a problem in ionic 2+ menu navigation with tabs, When i click the navigation menu, how to access the child view inside the tabs view. And i saw some solutions to access the tabs Rootpage so far i couldn’t access the Child view. if i push the child view Directly in app.component.ts the tabs are gone away. it will be hiding itself.

Here is my app.component.ts

import { AboutPage } from './../pages/about/about';
import { Component, ViewChild } from '@angular/core';

import { Events, MenuController, Nav, Platform, NavController } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { App } from 'ionic-angular';

import { ConferenceData } from '../providers/conference-data';
import { UserData } from '../providers/user-data';

export interface PageInterface {
  title: string;
  name: string;
  component: any;
  icon: string;
  logsOut?: boolean;
  index?: number;
  tabName?: string;
  tabComponent?: any;
}

@Component({
  templateUrl: 'app.template.html'
})

export class TestApp {

  @ViewChild(Nav) nav: Nav;
  @ViewChild('mycontent') childNavCtrl: NavController;

  appPages: PageInterface[] = [

{ title: 'ABOUT US', name: 'TabsPage', component: TabsPage, tabComponent: AboutPage, index: 3, icon: 'assets/img/about-small.png' },


  ];
  rootPage: any;


  constructor(
    public events: Events,
    public userData: UserData,
    public menu: MenuController,
    public platform: Platform,
    public confData: ConferenceData,
    public storage: Storage,
    public splashScreen: SplashScreen,
    public appCtrl: App,
  ) {

  }

  openPage(page: PageInterface) {
    let params = {};

    if (page.index != null) {
      params = { tabIndex: page.index };
    }


    if (this.nav.getActiveChildNavs() && page.index != undefined) {
      //  push the view here //
    } else {
      alert('else');
      this.nav.setRoot(page.name, params).catch((err: any) => {
        console.log(`Didn't set nav root: ${err}`);
      });
    }

Here is my app.modules.ts

@NgModule({
  declarations: [
    testApp,
    AboutPage,
    AccountPage,
    LoginPage

  ],
  imports: [
    BrowserModule,
    HttpModule,

    IonicModule.forRoot(testApp, {}, {
      links: [
    { component: TabsPage, name: 'TabsPage', segment: 'tabs-page' },
    { component: GalleryDetailsPage, name: 'Gallery details', segment: 'gallery Details' },
    { component: AboutPage, name: 'About', segment: 'about' },
  ]
    }),
    CloudModule.forRoot(cloudSettings),
    IonicStorageModule.forRoot()
  ],
      bootstrap: [IonicApp],
      entryComponents: [
       testApp,
    AboutPage,
  ],
  providers: [
{ provide: ErrorHandler, useClass: IonicErrorHandler },
        ConferenceData,
    UserData,
    SocialSharing,
    InAppBrowser,
    Geolocation,
    PostPage,
    ImagePicker,
    Camera,
    SplashScreen
  ]
})

export class AppModule { }

here is my my app.template.html

<ion-content class="menu-contents">
        <ion-list class="menu-con">
            <button ion-item class="cus-item" menuClose *ngFor="let p of appPages" (click)="openPage(p)">

      <!-- ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon -->
      <img [src]="p.icon" class="menu-item-img {{p.title === 'POST' ? 'post-icon' : ''}}" alt=""><span class="menu-item-title">{{p.title}}</span>
    </button>
        </ion-list>


    </ion-content>

here is my tabs page:

import { HomePage } from '../home/home';
import { Component } from '@angular/core';

import { NavParams, MenuController, NavController } from 'ionic-angular';

import { AboutPage } from '../about/about';

import { SchedulePage } from '../dash/schedule';

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


export class TabsPage {
  // set the root pages for each tab
  tab1Root:any;
  tab2Root: any = SchedulePage;
  tab3Root: any = AboutPage;
  mySelectedIndex: number;

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

    this.tab1Root = HomePage;
    console.log('ONE', navParams.data);

    if (navParams.data.tabIndex != null) {



  }
}

  ionViewDidLoad() {
    this.menu.enable(true);
  }


}

here is my tabs.html:

<ion-tabs [selectedIndex]="mySelectedIndex" name="weddingapp" #myTabs>
<ion-tab [root]="tab1Root" tabTitle="" tabIcon="icon-home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="" tabIcon="icon-dash"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="" tabIcon="icon-user" class="custom-icon1">user</ion-tab>

Here is my Shedulepage.ts

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

  @ViewChild('scheduleList', { read: List }) scheduleList: List;


  constructor(
    public alertCtrl: AlertController,
    public app: App,
    public loadingCtrl: LoadingController,
    public modalCtrl: ModalController,
    public navCtrl: NavController,
    public toastCtrl: ToastController,
    public confData: ConferenceData,
    public user: UserData,
    public menu: MenuController,
     navParams: NavParams,
  ) {
      console.log(navParams.data);
  
  }

GotoLinks(val:any){

this.navCtrl.push(ContactPage);


}

Kindly help me fix!

Thanks in Advance.

Can you explain what you mean by “access” here?

Hi rapropos,
Thanks for your reply :innocent:
i am trying to push the child view inside the tabs view in app.component.ts.

I’m still not sure I understand you, but see if this looks relevant to your situation.

i saw the issue, but in my case i need to push the new view it looks like replace this exiting (tab2Root: any = SchedulePage) SchedulePage to AboutPage.

Current behavior:
When push the new child view in menu navigation inside the tabs view it will appearing only child view and the tabs view automatically will disappearing.

Expected behavior:
After clicking the menu link and then if i try to push the child view inside tabs view both tabs view and child view should be display but tab is gone if i did that.

i have tried some other logic’s :

app.componets.ts

    openPage(page: PageInterface) {
    let params = {};

   if (page.index != null) {
      params = { tabIndex: page.index };
   }

    this.nav.getActiveChildNavs()[0].select(page.index , {"key":page.index}); 
}

tabsPage:

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


export class TabsPage {
  // set the root pages for each tab
  tab1Root:any;
  tab2Root: any = SchedulePage;
  tab3Root: any = AboutPage;
  mySelectedIndex: number;

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

if (navParams.data.tabIndex != null) {

   this.tab1Root = AboutPage;
}else{
  this.tab1Root = HomePage;
}

and,

if (page.index != null) {
      params = { tabIndex: page.index };
   }

this.appCtrl.getRootNav().push(TabsPage, params);

when i did this i am getting error the HomePage or AboutPage not was appearing.

1 Like

Was there any solution found for this topic?

1 Like

Any update about this?

I faced the same problem for a while now. And found the rightful solution for this problem:-

Try using getActiveNav()

Like this,

import {App} from ‘ionic-angular’;

constructor(public app: App){}

login() {
this.app.getActiveNav().setRoot(Home); or .push(Home)
}

7 Likes

thnx ManigandanRaamanatha

1 Like

@premkumar1528: Please mark this answer as the solution of your question. As I think it is the solution to your answer.