Whenever I navigate in my ionic app, I notice that the tabs-bar disappears when I go to different pages and then return to the tabs.
See Demo
Code
tab1
Here is a sample link to navigate to other pages:
<ion-label routerDirection="forward" [routerLink]="['/tabs/', 'groups', group.id]">sample text</ion-label>
On one of my other pages, there is a back button as shown below:
<ion-header>
<ion-toolbar class="header-bg">
<ion-buttons slot="start">
<ion-back-button></ion-back-button> // takes you back to tab1
</ion-buttons>
<ion-title [innerHTML]="messages?.name"></ion-title>
</ion-toolbar>
</ion-header>
However, I have noticed that there is code within my page component that hides the tabs when I am on that particular page.
ngOnInit() {
// hide tab bar in current page
const tabs = document.querySelectorAll('ion-tab-bar');
Object.keys(tabs).map((key) => {
tabs[key].style.display = 'none';
});
}
Note: The above code only hides the tab bars on the second page and not on the tabs page. Normally, the tabs should be visible when I navigate back to the tabs.
PS:I'm not suggesting that this code is causing the issue, but I thought it was worth mentioning.
Any thoughts on why my tabs are not showing up when I go back to the tabs pages?