Capturing ion-tab click on active tab event

Hi,
I want to execute a method when a user clicks on the active ion-tab.

I tried (ionChange)="myFunction()" in the ion-tabs parent element, but that only fires when the tab changes. I want to capture the event even when the tab doesn’t change (final goal is to make the current tab reload itself / scroll up).

Any ideas on how to achieve this with Ionic 2?

1 Like

I guess this is not possible with the current Beta … :confused:

Might help to check the docs for this.

<ion-tabs>
  <ion-tab [root]="tab1Root" (ionSelect)="myMethod()"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>
9 Likes

Hi @mhartington, thank you for your reply. I have tried exactly what you posted before as well.

The issue with that solution is that (ionSelect) only fires when the selection changes.

Because the selection does not change when you select an already active tab, it does not fire. Therefore I can’t use it for my purposes. I need something that fires even when it selects the same tab that you are on.

1 Like

did you found a way to resolve it? I’m trying to implement the same behaviour on my app.

No, I did not find any way to solve it. I still have the issue.

I also did not get any further response from @mhartington or the Ionic Team about this issue, a bit sad really :confused: looks like this is currently not possible.

Hi,

I have the same issue any updates ?

Try something like this:

<ion-tabs>
  <ion-tab [root]="tab1Root" (click)="myMethod()"></ion-tab>
  <ion-tab [root]="tab2Root"></ion-tab>
  <ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>

Putting (click)=“myMethod()” responds to the contents of the tab being clicked on, rather than the tab selector itself.

1 Like

Any news on this? Im trying to have a different page show up when the active tab is clicked. Any help would be greatly appreciated!

I have the same question/need, and I asked it in the forum as well, with no replies.

This has been fixed in RC 2! use (ionSelect) by itself.

This doesn’t seem to work for me (in RC2). When the tab A is being viewed and tab B is selected then ionSelect fires. When tab B is viewed and tab B is selected then ionSelect does not fire.
The goal is to be able to detect tab B was selected when tab B contents were being viewed, this is to allow some refresh/view reset/scroll to top to occur

2 Likes

You have it exactly.

Same wish there was a way to do this.

I used it to open a model so that they don’t have to press again for the behavior. Plus, how frequently do users click the active tab?

I need it too, I want to use it to show unread messages on top in active tab.

In adittion to this, I need a MouseEvent class.

e.g.

(click)=“myMethod($event)”

ionSelect don’t provide a mouseEvent. So, I can’t use a popover in a correct position.

1 Like

I’d like to solve for the same feature as @danielabbatt - it is, for many heavy mobile users, a known action when you click on an already active tab you will scroll to the top of that tab page, so you don’t have to manually scroll all the way back up if you’ve been going through a number of search results, or something similar. Any response/solution for this yet?

To resolve this issue, you need to modify from the source code for now
inside the ionic project at node_modules\ionic-angular\components\tabs\tabs.js (or tabs.ts)

In different rc build, the source code of tabs.js(or tabs.ts) might be different.

Basically, the guideline is in the select tab function

Tabs.prototype.select = function (tabOrIndex, opts)

if (selectedTab.root) //this is the active tab
you will still need to file the event and the code is
this.ionChange.emit(selectedTab);

Hope it is helpful for the people who is looking for the solution.
This is very inconvenience that can’t select the active tab for some scenarios.