Ionic use different tabs bar in component

Question

I'm currently building my first ionic app with Angular. As a template I use the base setup from the recommended generate command, which has tabs:

ionic start chat-app tabs --type=angular --capacitor

On every tab, I use ion-nav to open Subcomponents. For example, on chats tab, I can open a single chat by the following code:

import { NavController } from '@ionic/angular';
...

@Component({
  templateUrl: '<button (click)=openChat(chat) *ngFor="let chat of chats">...</button>'
})
...

constructor(
  public navCtrl: NavController
) { }

openChat(chat: any): void {
  this.navCtrl.navigateForward(["chats", chat.id]);
}

It works as expected. The only issue is, that I still can see the navigation tabs on the bottom. I would like to change the footer bar within the Subcomponents.

An example is whatsapp, which uses the text field in the footer in single chat. Is that possible?

Answer 1

You see the tab Footer when you use the /tabs/tab Route:

Add this to your app-routing:

  {
    path: 'chats',
    loadChildren: () => import('./chats/chats.module').then(m => m.ChatsPageModule)
  }

Try these different Urls in your Browser:

url: "localhost:port/chats" //without tab footer
url: "localhost:port/tabs/chats" //with tab footer

This should load your chat page without the tab footer:

this.navCtrl.navigateRoot(["chats", chat.id]);

Obvious problem with this is you cant use

this.navCtrl.back();

As an Alternative you could use something like this:

  constructor(private navctrl: NavController, private tab: TabsPage) {}

  openChat(chat: any): void {
    this.navCtrl.navigateForward(["chats", chat.id]);
    this.tab.footer = false;
  }

Tabs.page.ts

export class TabsPage {
  footer: boolean;
  constructor() {}
}

Tabs.page.html

  <ion-tab-bar slot="bottom" [hidden]="!footer">
    ...
  </ion-tab-bar>