Change Tabs via TypeScript

I have an Angular application which does NOT use routing. I have set up Ion-Tabs to be used without routing in my app.component.html as follows

 <ion-tabs #mobileTabs *ngIf="mobile">
    <ion-tab tab="schedule">
      <app-schedule></app-schedule>
    </ion-tab>
    <ion-tab tab="account" *ngIf="!authenticated">
      <app-login></app-login>
    </ion-tab>
    <ion-tab tab="chat" *ngIf="displayChat && authenticated">
      <app-chat></app-chat>
    </ion-tab>
    <ion-tab tab="settings" *ngIf="authenticated">
      <app-mobile-settings></app-mobile-settings>
    </ion-tab>
    
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="schedule">
          <ion-icon name="calendar"></ion-icon>
          <ion-label>Schedule</ion-label>
        </ion-tab-button>
    
        <ion-tab-button tab="account" *ngIf="!authenticated">
          <ion-icon name="person-circle"></ion-icon>
          <ion-label>Account</ion-label>
        </ion-tab-button>
        
        <ion-tab-button tab="chat" *ngIf="displayChat && authenticated">
          <ion-icon name="chatbox"></ion-icon>
          <ion-label>Chat</ion-label>
        </ion-tab-button>
  
        <ion-tab-button tab="settings" *ngIf="authenticated">
          <ion-icon name="cog"></ion-icon>
          <ion-label>settings</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>

As you can see from the code above, Tab Buttons become visible when the user is Authenticated and the Account tab will be removed when Authenticated. The issue I have is, the User clicks on the Account tab which is now the Selected Tab and Logs in. Once logged in obviously they are authenticated therefore the Account Tab goes away. However, the Account tab is still currently the Selected Tab.

I am attempting to change the selected tab after authentication is complete and default back to the Schedule tab. I have setup 2 ViewChilds on the app.component.ts file

 @ViewChild(IonTabBar) ionTabBar: IonTabBar;
 @ViewChild(IonTabs) ionTabs: IonTabs;

and once Authentication is complete I do the following

this.ionTabs.tabBar.selectedTab = 'schedule';
this.ionTabs.select('schedule');

This does set the the Tab Bar selected tab to Schedule as I can see the Icon changed to the Selected coloring. However, it does not render the Schedule Tabs content. I have to physically select the Schedule tab again in order for the content to render on screen.

Is there something I am missing?

So it looks like only this.ionTabs.tabBar.selectedTab = ‘schedule’; is actually the one making the Schedule tab hightlight blue. The this.ionTabs.select(‘schedule’); is not doing anything. and there are no errors in the console

So I’m not 100% this will be possible, since ion-tabs are in angular are 100% driven by the router.

So I have a bit of a hacky solution but was hoping there would be a better solution.

this.ionTabs.tabBar.selectedTab = 'schedule';
this.ionTabs.select('schedule');
const element = document.getElementById('schedule');
element.classList.remove('tab-hidden');

this.ionTabs.tabBer.selectedTab = ‘schedule’ sets the selected tab in the tab bar. So I do see the Schedule showing as selected as the icon is blue indicating selected.

this.ionTabs.select(‘schedule’) doesnt seem to be doing anything visually but i feel like i have to do this so i just left it there

lastly it looks like the only reason the Schedule tab content is not showing on the screen is due to the tab-hidden class. One i remove the tab-hidden class i do see the content of the Schedule tab on screen so it looks like it would as if it was actually seleted.

Like i said it is hacky. I was hoping that the this.ionTabs.select(‘schedule’) would be the same as someone actually selecting the tab but it doesnt seem like it fires the same events.

Please don’t make tabs appear and disappear. It disorients users who expect navigational controls to be in consistent positions. Just enable and disable them instead, to preserve the opportunity for developing muscle memory.

A bit late on the reply (out on vacation), but this is trying to force tabs to do something that they were not designed to do.

unfortunately i need to run the tabs on an application that does not support routing. Is there a way to switch Tabs programmatically instead of user interaction?

So it looks like i was making this more complicated then it should be. It looks like the Ionic Tab listens for a button click event which fires the process to change the button.

@HostListener('ionTabButtonClick', ['$event'])

So its as simple as calling the click event on the element

const mapButton = document.getElementById('tab-button-map').click();