Issue
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?
Solution
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>
Answered By - Greencoms
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.