Add Tabs in a new page

Ionic Framework ionic-v3
1

I am navigating from a non tab page to another page. Using

this.navCtrl.push(AbroadstudiesPage);

But i need to add tabs to the new page. How can i do this…

Please refer this link for what i have tried: https://stackoverflow.com/questions/48095455/how-to-add-tabs-in-new-page-on-navigation-to-new-page-in-ionic

2

Hi @karthikcp

try below code like :

this.navCtrl.setRoot(AbroadstudiesPage);

in aboutstudies.html

<ion-tabs selectedIndex="0">
    <ion-tab [root]="introduction" tabTitle="Introduction"></ion-tab>
    <ion-tab [root]="form" tabTitle="Form"></ion-tab>
    <ion-tab [root]="faq" tabTitle="FAQ"></ion-tab>
</ion-tabs>

aboutstudies.ts

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Tabs } from 'ionic-angular';


@IonicPage({ priority: 'high', segment: 'tabs' })
@Component({
  selector: 'page-about-studies',
  templateUrl: 'aboutstudies.html',
})
export class AbroadstudiesPage {

 introduction = IIntroductionPage';
  form = 'FormPage';
  faq = 'FaqPage';

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

}

create 3 component

ionic g page Introduction
ionic g page form
ionic g page faq

1 Like
3

instead abroadstudeis i changed to tabspage:

my code is:

import { Component } from '@angular/core';
import { IndianstudiesPage } from '../indianstudies/indianstudies';
import { IonicPage, NavController, NavParams, Tabs } from 'ionic-angular';
/**
 * Generated class for the TabsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
@IonicPage({ priority: 'high', segment: 'tabs' })
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
})
export class TabsPage {
  tab1Root = IndianstudiesPage;
  tab2Root = IndianstudiesPage;
  engineering = IndianstudiesPage;
  medical = IndianstudiesPage;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    console.log("TABPAGE");
  }

}

I am getting en error:

Uncaught TypeError: r.n is not a constructor

4

aboutstudies.html is the base view for the each tab? it is just only a container?

1 Like