Ionic 4 tab select with button push

Ionic Framework ionic-v3
1

Hello,

I have a page with tabs. I have a button on the first tab that when pushed I would like to route/select another tab.

The high level html has the following:

<ion-tabs #my_profile_tabs>
    <ion-tab-bar slot="bottom" color="dark" >
        <ion-tab-button tab="tab1">
            <ion-label>Tab 1</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="tab2">
            <ion-label>Tab 2</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="tab3">
            <ion-label>Tab 3</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="tab4">
            <ion-label>Tab 4</ion-label>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

In tab 1’s component I have the following:

@ViewChild(‘my_profile_tabs’) tabRef: IonTabs;

On a button click event on the tab 1 I try the following:

this.tabRef.select('tab4');

When the click event occurs tabRef is undefined:

ERROR TypeError: Cannot read property 'select' of undefined

Any thoughts on what I am doing wrong?

2

In order to set the type of a ViewChild variable you need to set the ‘read’ option too IonTabs. This would look something like:

@ViewChild(‘my_profile_tabs’, {read: IonTabs}) tabRef: IonTabs;
3

Thank you for the suggestion. Unfortunately I am still getting the same error:

ERROR TypeError: Cannot read property 'select' of undefined

for

this.tabRef.select('tab4');

where tabRef is not defined.

Any other ideas as to what I might be doing incorrectly?

Thanks again

4

Can you print out this.tabRef so we can see what the actual Object is?

5

Here is what I have.

  @ViewChild('my_profile_tabs', {read: IonTabs}) tabRef: IonTabs;

  buttonClick() {
    console.log('tabRef ' + this.tabRef);
    this.tabRef.select('tab4');
  }

Output in the console is - the object is undefined:
tabRef undefined

6

It looks like I get the tabRef in the higher level component where the html defines the tabs.

A ‘child’ tab component does not have a access/reference to the tabRef which is what I need.

So how do you from a child tab component perform a select on a click event to go to another child tab?

7

Actually if you are using a button to route then you don’t need to reference the tabs at all. You should be about to simple use Router.navForward(’/tabs/tab4’). This should pull up the proper page within the greater tabs page.
You should have something like this in the Tabs Page. Say you are in component one in my example (this is one.module), here you can press a button that calls the router and uses navForward as with any other navigation, but you call the tabsRoot/componentRoot. If my button here routed to ‘tabs/two’ this would route to the second tab without calling the tabs element.

const routes: Routes = [
    { 
        path: 'tabs', 
        component: HomePage,
        children: [
            {
                path: 'one',
                outlet: 'one',
                loadChildren: '../one/one.module#OneModule'
            },
            {
                path: 'two',
                outlet: 'two',
                loadChildren: '../two/two.module#TwoModule'
            },
            {
                path: three',
                outlet: three',
                loadChildren: '../three/three.module#ThreeModule'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/tabs/(one:one)'        
    }
];
8

Thank you for the reply.

Here is my current routing:

const routes: Routes = [
  {
    path: 'tabs',
    component: MyComponentPage,
    children:
      [
        {
          path: 'tab1',
          children:
            [
              {
                path: '',
                loadChildren: './tab1/tab1.module#MyTab1PageModule'
              }
            ]
        },
        {
          path: 'tab2',
          children:
            [
              {
                path: '',
                loadChildren: './tab2/tab2.module#MyTab2PageModule'
              }
            ]
        },
        {
          path: 'tab3',
          children:
            [
              {
                path: '',
                loadChildren: './tab3/tab3.module#MyTab3PageModule'
              }
            ]
        },
        {
          path: 'tab4',
          children:
            [
              {
                path: '',
                loadChildren: './tab4/tab4.module#MyTab4PageModule'
              }
            ]
        },
        {
          path: '',
          redirectTo: '/my-app/tabs/tab1',
          pathMatch: 'full'
        }
      ]
  },
  {
    path: '',
    redirectTo: '/my-app/tabs/tab1',
    pathMatch: 'full'
  },
  { path: 'tab1', loadChildren: './tab1/tab1.module#MyTab1PageModule' }
];

I imported router into my tab1 component. It does not have a navForward method. I used navigateByUrl as follows:

this.router.navigateByUrl('/tabs/tab4');

This call results in the following error:

core.js:15724 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tabs/tab4'

Is my routing incorrect for doing this? This routing works otherwise as in switching between tabs with the tabs at the bottom of the screens.

Thanks

9

It looks like you have /my-app/tabs/tab4 set as your route. I’d try using that.

10

That was it!

Thank you very much!

I marked your previous answer as the correct response.