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?