Ionic-framework: bug: certain tab methods missing on framework integrations

[znotdead]

Bug Report

Ionic version:


[x] 4.11.5

Current behavior:
this.tabs.getTab is not a function

Expected behavior:
getTab should return tab component

Steps to reproduce:
on page with tabs:
@ViewChild(IonTabs, { static: false }) tabs: IonTabs;
And run this code:

const currentTab = this.tabs.getSelected();
console.log(this.tabs.getTab(currentTab));

This gives error: ERROR TypeError: "this.tabs.getTab is not a function"
In console:
error TS2339: Property 'getTab' does not exist on type 'IonTabs'.

According to docs: https://ionicframework.com/docs/api/tabs :

getTab
--
Get a specific tab by the value of its tab property or an element reference.
getTab(tab: string \| HTMLIonTabElement) => Promise<HTMLIonTabElement \| undefined>

Related code:

const currentTab = this.tabs.getSelected();
console.log(this.tabs.getTab(currentTab));

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.2
   Ionic Framework               : @ionic/angular 4.11.5
   @angular-devkit/build-angular : 0.803.8
   @angular-devkit/schematics    : 8.3.8
   @angular/cli                  : 8.3.19
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 8 other plugins)

Utility:

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

System:

   Android SDK Tools : 26.1.1 
   NodeJS            : v12.13.0 
   npm               : 6.12.0
   OS                : Linux 4.15

[liamdebeasi]

Thanks for the issue. What are you hoping to be able to do with getTab? We weren’t clear of the benefit of it in Angular apps, so we didn’t expose it there. We’re willing to add it but would like to understand the use case first.

[znotdead]

I have a page with tabs.
Situation: Page1 has opened Tab1.
When navigate away from Page1 there are lifecycle events fired up.
I do have Page1 ionViewWillLeave but do not have Tab1 ionViewWillLeave.
so I tried to do on Page1 ionViewWillLeave event:

• getSelected tab
• if it's tab that I'm interested in than getTab to get component
• call methods for this tab that should be fired on Tab1 ionViewWillLeave.

Of course I do not need getTab if during navigation to another page the next will be called:

1. Tab1 ionViewWillLeave
2. Page1 ionViewWillLeave
   as I'm leaving 2 pages ( Page1 and Tab1) in the same time.

[liamdebeasi]

Apologies for the delay. Thanks for the follow up. Would you be able to provide a repo with you use case that we could debug?

[znotdead]

Yes sure
https://github.com/TimberTracks/ionic_tabs_example.
To try it out. When you have a menu. You may open some tabs but it will not fire ionWillLeave if you go to another page from menu.

About will Leave. about.page.ts:17:12
Tabs will Enter. tabs.page.ts:13:12
Tab1 will Leave. tab1.page.ts:17:12
Tab2 will Enter. tab2.page.ts:14:12
Tabs will Leave. tabs.page.ts:17:12
About will Enter. about.page.ts:13:12

Tab2 will Enter. tab2.page.ts:14:12
HERE SHOULD BE Tab2 will Leave
Tabs will Leave. tabs.page.ts:17:12
About will Enter. about.page.ts:13:12

[sjregan]

My use case for the getTab function is to try and attach data to a tab element, then read that data within the ionTabsWillChange event.

It would be super useful to have the online documentation state which frameworks functions and attributes are present/used in, I waste a lot of time trying to do things that turn out to be impossible due to methods and attributes being specific to certain frameworks but no indicators within the documentation.

[cmeuser]

In my case, I need to access a tab to change its label when the user changes a value in a page form. I find it extremely frustrating that the documentation indicates a feature exists that doesn't. It looks like you guys have been aware of this issue for some time. Is it possible to get this method exposed or let people know you're not going to do it and close this thread.

[chriswep]

@liamdebeasi is there any way to get an instance of IonTab? i couldn't find a way. If i read the code directly ionic-angular doesn't even use the ion-tab element. However it has a dedicated page in the documentation.

My use case is resetting tabs to their root/inital components/pages on logout.

[cmasdf]

@liamdebeasi is there any way to get an instance of IonTab? i couldn't find a way. If i read the code directly ionic-angular doesn't even use the ion-tab element. However it has a dedicated page in the documentation.

My use case is resetting tabs to their root/inital components/pages on logout.

I think that's one of the main reasons why there is some confusion about this. It looks like the default angular tab app created with ionic cli is using a different approach for rendering tabs and their content. In this example the tabs are independent angular components, which do not use the ionic-tab element. So one basic use case for getTab would be to get the currently visible instance if a tab has been changed, since the ionic-events are only accessible from tabs.page.ts and the angular events (e.g. OnInit) are only fired once on app startup. Or is there any other hidden magic which allows to respond on tab changes from within the new selected tab? Using the angular router or a custom service exposing the values from the parent tab.page.ts does not seem like a convenient solution to me.