CODEWITHSUNDEEP
ionic-frameworkhidetabbar
Jason G
Jason G

Reputation: 128

Tabbar is not hided on subpages in Ionic 5

In ionic 4 or 5, tabbar is not hided on subpages. Of course, it works well in ionic 2 or 3. Please let me know how to solve this issue.

Upvotes: 0

Views: 58

Answers (1)

Jason G
Jason G

Reputation: 128

This is my solution. But hope the best solution.

  1. create TabsService
  2. import this in app.module.ts Here is full code of TabsService
import { Injectable } from '@angular/core';
import { filter } from 'rxjs/operators';
import { NavigationEnd, Router } from '@angular/router';
import { Platform } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class TabsService {
  constructor(private router: Router, private platform: Platform) {
    this.platform.ready().then(() => {
      this.navEvents();
    });
  }

  public hideTabs() {
    const tabBar = document.getElementById('kidesiaTabBar');
    if (tabBar && tabBar.style.display !== 'none') {
      tabBar.style.display = 'none';
    }
  }

  public showTabs() {
    const tabBar = document.getElementById('kidesiaTabBar');
    if (tabBar && tabBar.style.display !== 'flex') {
      tabBar.style.display = 'flex';
    }
  }

  private navEvents() {
    this.router.events
      .pipe(filter(e => e instanceof NavigationEnd))
      .subscribe((e: any) => {
        this.showHideTabs(e);
      });
  }

  private showHideTabs(e: any) {
    const urlArray = e.url.split('/');
    if (urlArray.length >= 3) {
      let shouldHide = true;
      if (urlArray.length === 3 && urlArray[1] === 'tabs') {
        shouldHide = false;
      }
      try {
        setTimeout(() => (shouldHide ? this.hideTabs() : this.showTabs()), 300);
      } catch (err) {}
    }
  }
}

Upvotes: 1

Related Questions