CODEWITHSUNDEEP
angularjscordovaionic-frameworktabs
Ivan.Yang
Ivan.Yang

Reputation: 287

ionic manual change tab page

I have a tabs page with five tabs inside it, I know i can change the navigate to these pages clicking on respective tab icons, but I want to change it manually with button which is inside in the first tab page, and when I click this button, I can go to second tab page, what can I do?

Upvotes: 2

Views: 1738

Answers (1)

Paresh Gami
Paresh Gami

Reputation: 4782

You can use a code it. Here I am doing is when button click from tab1 we call one function in ts and that function call event method in tabs.ts using event.publish and in tabs.ts file you can catch clicked event so in tabs.ts you can using viewchild and use select method of tabs in ionic

home.html

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content  #content>
    <button ion-button (click)="goToNextTab()">go to next Tab</button>
</ion-content>

home.ts

import { Component,ViewChild } from '@angular/core';
import { NavController,Content } from 'ionic-angular';
import { Events } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage 
{    
    constructor(public navCtrl: NavController,public events: Events) 
    {}

    goToNextTab()
    {
        this.events.publish('tab:clicked',{tab:1});
    }
}

tabs.html

<ion-tabs #myTabs>
    <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>

tabs.ts

import { Component, ViewChild } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { Events, Tabs } from 'ionic-angular';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage 
{
    tab1Root = HomePage;
    tab2Root = AboutPage;
    tab3Root = ContactPage;
    @ViewChild('myTabs') tabRef: Tabs;
    constructor(public events: Events) 
    {
        events.subscribe('tab:clicked', (data) => 
        {
            this.tabRef.select(data['tab']);
        });
    }
}

Upvotes: 1

Related Questions