Click event for ion-tab?

I want to log something when a user clicks on a tab. How can I do this?

Unfortunately (ionSelect) is not the answer as this is only triggered when the tab is selected, so when the execution of all the previous code is already done. I need an event as near as possible to the action the user triggers.

I am also currently looking for a way to do this. I will update if I find anything.

The output event is ionChange. Is there a reason you can’t use this?

It doesnt seem to be firing.
Here is my code:
tabs.html
<ion-tab [root]="tab1Root" tabTitle="Title" tabIcon="pricetag" (ionChange)="eventTest()" #specialsTab></ion-tab>
tabs.ts

      console.log('click please');
}```
Anything I am missing?
2 Likes

You might look in here, where they solved it by adding the function

ionSelected(){}

to the component, you’re selecting.
capturing-ion-tab-click-on-active-tab-event
The event should then fire, even if you’re on the same page

1 Like

(ionChange) has to be used on <ion-tabs>, not <ion-tab>: https://ionicframework.com/docs/api/components/tabs/Tabs/ - then it works.

Unfortunately it fires even after (ionSelect) @AaronSterling .
At least in my testing and so is not suitable for my needs :disappointed:

1 Like

ionSelected() only “triggers” when you are already on that tab I think. It can not be used to find out when someone clicks on a “new” tab to switch to it. Or did I miss anything?

Edit: I think this is the code for it - only occurence of ionSelected in all of Ionic:


So only if the tab is alredy active.

But a few posts under the one you linked to I found this:

Using (tap) on ion-tabs really triggers before anything else I tried. Makes sense.

Unfortunately it now seems to be a lot more complicated to find out which tab the user tapped as this can be different target elements. Hmm…

2 Likes

Oh, much bigger problem:
This fires on all taps everywhere now.
Makes sense if you think about it - ion-tabs is the container for everything.

I think I am still searching…

I get suspicious when people ask questions about minutia of framework event timing. In my experience, that sort of thing is not very reliable. Can you not design things so that you can be a bit more flexible as far as precise sequencing goes?

I hate tabs because there’s always some weird issue like this. But maybe you could solve this completely differently. Have a provider subscribe to NavController.viewWillEnter() and take the desired step whenever a (different) root tabs page is the newly entered page.

In this case I just want to understand the timing of things - when does the user click, how long does it take for the tab to be switched successfully and data shown?

But to start doing things that need to happen after a tab is selected as soon as possible is always a good thing, isn’t it? There really is no reason why this shouldn’t be possible for tabs.

Won’t this be identical to implementing an ionViewWillEnter() on the page of the tab being navigated to?
That I already have right now and is the earliest “event” I could find.

I’ll put it this way: if you have to worry about this, then you’re doing too much (synchronous) heavy work in constructors and lifecycle events, or your templates are overcomplicated. If everything you do in there is asynchronous and straightforward, the framework overhead should be imperceptible.

If this is basically for testing/profiling purposes, then perhaps you could try adding event listeners directly to the anchor tags that actually take the click of the tabs first I think.

How would I do that with the <ion-tabs>?

Code looks like this:

<ion-tabs (ionChange)="log('change ion-tabs')" (tap)="log('tap', $event)">
  <ion-tab (ionSelect)="log('select tab popular')" [root]="tab1Root" tabTitle="Find" tabIcon="search"></ion-tab>
  ...
</ion-tabs>

You can use the document object to find all the anchors by class name, the tabs would have the class tab-button

Hmm dirty and hackish… but of course might work!
(Hoping someone comes forward with a “this is supported by Ionic out of the box” solution before I try this though)

Haha! Yep not for production I am afraid.

A post was split to a new topic: Event that gets triggered even before (ionSelect)?