Ionic tabs vanish after using back button

0
votes

I have tabs in my ionic app, when i go to pages and back again to my tabs the tabs-bar will disappear.

Demo

Code

tab1

link sample to other pages

<ion-label routerDirection="forward" [routerLink]="['/tabs/', 'groups', group.id]">sample text</ion-label>

And then in my other page i have back button like:

<ion-header>
    <ion-toolbar class="header-bg">
        <ion-buttons slot="start">
        <ion-back-button></ion-back-button> // back to tab1
        </ion-buttons>
        <ion-title [innerHTML]="messages?.name"></ion-title>
    </ion-toolbar>
</ion-header>

But I also have this code in my page component which prevent tabs to be shown in that 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: code above only hides tab bars inside my second page and not tabs page, normally when i back to tabs they should be visible. PS: I'm not saying that this code cause the issue, I just thought it might be worth to mention that I have such code.

Any idea why my tabs not showing when I back to tabs pages?

2
javascriptangulartypescriptionic-framework
Do you have any errors in the JS console ? - Nicolas
@Nicolas no but i will double check just to be sure. - mafortis
@Nicolas no error at all. - mafortis
Can you check if the display property is still set to none when you don't see them. If so, i'd say a quick fix would be to set it back to something like block or flex. Just like you are doing to hide them. - Nicolas
@mafortis Well, you could check if their display is set to none, if so, you change the value to flex. But setting a display twice should not be a big deal, as long as it's the same value. - Nicolas

2 Answers

1
votes

solved

I've bring back my tabs style with this code

ionViewDidLeave() {
    const tabs = document.querySelectorAll('ion-tab-bar');
    Object.keys(tabs).map((key) => {
      tabs[key].style.display = 'flex';
    });
}

Code above restores my tabs default style when user is leaving my second page.

-Thanks to Nicolas suggestions.

0
votes

Remove none from style before leaving the page:

using ngOnDestroy or ionViewWillLeave

ngOnDestroy() {
    // hide tab bar in current page
    const tabs = document.querySelectorAll('ion-tab-bar');
    Object.keys(tabs).map((key) => {
      tabs[key].style.display = 'block';
    });
}