Having two supertabs pages, how to go from first page to second page programmatically?

Hello everyone!

As I see in the documentation, there’s active-tab-index property and so I tried to set in my service a property to set current active tab when I do a click on an item in first tab’s page… so I did:

<super-tabs tabsPlacement="top" [activeTabIndex]=myService.selectedTabIndex>...</super-tabs>

so when I am inside first tab’s page, page1.page.ts and I want to go automatically to second page so I set:

function callSecondPage() {
    this.myService.selectedTabIndex = 1;
}

so in this way in the html of home page it should set automatically the property and go on second page but it doesn’t work.
I tried also to call:

this.router.navigate(['/secondpage']);

with a Router but it shows the second page on entire screen, not the same as changing just tab page… so how I can change tab page programmatically in the correct way?

My Ionic info is:

Ionic:

   Ionic CLI                     : 6.16.3 (C:\Users\npule\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.12
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.1.4
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI      : 3.1.2
   @capacitor/android : 3.1.2
   @capacitor/core    : 3.1.2
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.4.0

System:

   NodeJS : v14.17.4 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.14
   OS     : Windows 10

Thanks to all!
Cheers! :slight_smile:

While you wait for better answers, I’d like to try to convince you to make the problem go away by not using tabs.

The very first sentence of the Usage guidelines in the Material Design guidelines says:

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.

It sounds like you’re trying to do an “overview/detail” pattern with tabs, in which case they aren’t at the same level of hierarchy.

In fact, I would argue that the very core functionality you’re after here (trying to have interactions in one tab affect what’s going on in a different tab) is in fact something that wouldn’t make any sense if the tabs are being used properly (which might have something to do with why it’s not easy to do).

I think of tabs like rooms in a house. If I go from the bedroom to the kitchen, and make something to eat, then head back to the bedroom, I would expect the bedroom to be just as I left it. I wouldn’t expect taking a jar of mustard out of the fridge to change the sheets and teleport me back to the bedroom.