Ionic 3 Show/Hide TabBar "directive" to programmatically hide/show tabs using this.tabs.show()/this.tabs.hide().

1. tab-bar.directive.ts

import {Directive} from '@angular/core';

/*
 * This is technically a directive
 * but we have to treat it like a provider to be able to manipulate it directly.
 * So it must be imported into our app.module as a provider, instead of a directive.
 *
 * The reason I'm keeping it as a directive, instead of a service provider, is because it interacts with the DOM
 * and not any data retrial / presentation, even though it's imported as one...weird I know.
 * 
 * We inline the tabBarElement:any = document.querySelector('.tabbar.show-tabbar'); because sometimes 
 * Angular/Ionic runs into issues trying to access the document on page transitions. This was the best option I found.
 */


@Directive({})
export class TabBarDirective {

  /*
   * Shows the tabs.
   */
  public show() {
    let tabBarElement:any = document.querySelector('.tabbar.show-tabbar');
    tabBarElement.style.display = 'flex';
  }

  /*
   * Hides the tabs.
   */
  public hide() {
    let tabBarElement:any = document.querySelector('.tabbar.show-tabbar');
    tabBarElement.style.display = 'none';
  }
}

2. (example) home.ts

import {TabBarDirective} from '../../directives/tab-bar.directive';
import {IonicPage} from 'ionic-angular'; 

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})

export class HomePage {

  constructor(private tabs: TabBarDirective){ 
  }

  ionViewWillEnter(){
    // this.tabs.hide();
    // or 
    // this.tabs.show();
  }
}