Ionic 5 ion-tabs hiding in some specific pages

Issue

I have created tab pages and included in my app.component.html file by selector my problem is that I want to hide tab in some specific pages can anyone help me with that. below I'm sharing the code which I have created tab page.

tab.page.html

        <ion-tabs>
            <ion-tab-bar slot="bottom">
                 <ion-tab-button tab="home">
                   <ion-icon name="home"></ion-icon>
                <ion-label>Home</ion-label>
            </ion-tab-button>
    
            <ion-tab-button tab="search">
                <ion-icon name="search"></ion-icon>
                <ion-label>Search</ion-label>
            </ion-tab-button>
    
            <ion-tab-button tab="click-history">
                <ion-icon name="color-wand"></ion-icon>
                <ion-label>Clicks</ion-label>
            </ion-tab-button>
    
            <ion-tab-button tab="profile">
                <ion-icon name="person"></ion-icon>
                <ion-label>Profile</ion-label>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>

app.component.html

    <ion-app>
        <app-menu></app-menu>
        <ion-router-outlet id="main"></ion-router-outlet>
        <app-tab></app-tab>
    </ion-app>

Solution

What do mean exactly by "pages"? If you mean specific routes, you could subscribe to Router and set a boolean flag in App component controller

app.component.ts

import { NavigationEnd, Router } from '@angular/router';

import { Subject } from 'rxjs';
import { takeUntil, filter } from 'rxjs/operators';

export class AppComponent implements OnInit, OnDestroy {
  closed$ = new Subject<any>();
  showTabs = true; // <-- show tabs by default

  constructor(private _router: Router) { }

  ngOnInit() {
    this._router.events.pipe(
      filter(e => e instanceof NavigationEnd),
      takeUntil(this.closed$)
    ).subscribe(event => {
      if (event['url'] === '/somePage') {
        this.showTabs = false; // <-- hide tabs on specific pages
      }
    });
  }
  
  ngOnDestroy() {
    this.closed$.next(); // <-- close subscription when component is destroyed
  }
}

app.component.html

<ion-app>
  <app-menu></app-menu>
  <ion-router-outlet id="main"></ion-router-outlet>
  <app-tab *ngIf="showTabs"></app-tab>
</ion-app>

Answered By - ruth