[SOLVED] Selected the right tab after press a button

Ionic Framework ionic-v3
1

Hi everybody, first of all sorry for my english. I have a problem with the Tabs. I have a page named “Home” with 3 button: song, news and bio. When I press one of this button I would like that the user can go to the right page with the tabs on the bottom, but the tab should be selected according the right page and the user can navigate without going back to the homepage.
The Tabs are declared in the page “Hometab”.
Can you help me? Thanks :slight_smile:

home.ts:

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',

  providers: [HttpProvider]
})
export class HomePage {

  data: any;

  constructor(private screenOrientation: ScreenOrientation, public navCtrl: NavController, private httpProvider: HttpProvider,public navParams: NavParams) {

  }
  OpenSong() {
    this.navCtrl.push(SongPage);
  }
  OpenNews(){
    this.navCtrl.push(NewsPage);
  }
  OpenBio() {
    this.navCtrl.push(BioPage);
  }
};

hometab.ts:

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

  tab1Root: any = SongPage;
  tab2Root: any = NewsPage;
  tab3Root: any = BioPage;


  constructor(public navCtrl: NavController) {

  }


}

hometab.html:

<ion-tabs >
  <ion-tab [root]="tab1Root" tabTitle="song" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="news" tabIcon="text"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="bio" tabIcon="stats"></ion-tab>
</ion-tabs>

app.component.ts:

@Component({
  templateUrl: 'app.html'

})
export class MyApp {
    rootPage:any = HomePage;

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

I can’t think of a situation where it would make any sense to directly push a page that is a child of a tabbed page. I’m going to assume you mean you want the buttons on the home page to affect the selected tab.

openSong(): void {
  this.navCtrl.setRoot(HometabPage, {opentab: 1});
}

openNews(): void {
  this.navCtrl.setRoot(HometabPage, {opentab: 2});
}

openBio(): void [
  this.navCtrl.setRoot(HometabPage, {opentab: 3});
}

HometabPage {
  seltabix: number;

  constructor(np: NavParams) {
    this.seltabix = np.get('opentab');
  }
}

<ion-tabs [selectedIndex]="seltabix">

Incidentally, lose [HttpProvider]. You don’t want per-page instances of that.

3 Likes
3

It works! Thanks thanks!!!:heart_eyes:

4

For me it change the page but not the highlighted tab

2 Likes
5

In my case, I have a child page where a user would check messages and I needed to route them to a specific tab from it.

I implemented the answer rapropos gave and then referenced it in the child page file like this:

tabs-page.ts (created three methods referencing my tabs)

openTabOne(){
    this.navCtrl.setRoot(TabsPage, {opentab: 1});
  }

openTabTwo(){
    this.navCtrl.setRoot(TabsPage, {opentab: 2});
  }

 openTabThree(){
    this.navCtrl.setRoot(TabsPage, {opentab: 3});
  }

messages-detail.ts (imported the page, and made references to the methods)
import { TabsPage } from '../tabs-page/tabs-page';

constructor( private TabsPage: TabsPage) {}

goToTab1(){
      this.TabsPage.openTabOne();
  }
6

1 year old post but i am having trouble finding a way to nested tab navigation using ion-segment-button. what if i want to show a nested tab as default on loading of the parent tab page ?