Somebody tried <ion-tab (select)="function()">?

Ionic Framework ionic-v3
1

Hi,

Right now, I have an issue with regular tabs. I have an app where I have few pages before ending to tabs view.

Page1 --> Page2 --> Page3 --> Tabs

I want to keep the history of Page 2 and 3. I now understand that once the [root] is set, I am creating a new path and new history. I can’t use the native “back” button to go back to Page3 once I am done with my Tabs view.

If you know how to resolve it, please tell meeeeee. :smile:

I patched it by adding the tabs within an ion-content. It worked, but don’t know how to remove the <ion-navbar-section> that each Tab has so it had an “empty line” between the navbar and the tab content.

If you know how to resolve it, please tell meeeeee. :smile:

So, I saw in the documentation that instead of using the [root], I could use (select) in my <ion-tab>. I added my 4 tabs with that (select), but instead of showing a regular Tab view, it calls my first “tab modal” and displays it and nothing else.

<ion-tabs preloadTabs="false">
  <ion-tab tabTitle="Details" tabIcon="information-circle" (select)="ctrlDetails()"></ion-tab>
  <ion-tab tabTitle="Location" tabIcon="pin" (select)="ctrlLocation()"></ion-tab>
  <ion-tab tabTitle="Tools" tabIcon="hammer" (select)="ctrlTools()"></ion-tab>
  <ion-tab tabTitle="Units" tabIcon="apps" (select)="ctrlUnits()"></ion-tab>
</ion-tabs>

I am probably does not understand that feature correctly, right? Would you mind to clarify it for me?

Thanks

UPDATE: With the help of another post, I added the below to fix the second issue :smile:

ion-navbar-section {
  display: none;
}