Maintain tabs while navigate using Menu

Ionic Framework ionic-v3
1

Hi guys,

I have a simple problem, i have been trying to build a side-menu with a bottom tabs and it works.

My problem is when i navigate through the menu the taps disappear, i need to always show the tabs even if i went to another page from the menu ?

Here is a snippet from app.component.ts

// used for an example of ngFor and navigation
    this.pages = [
      { title: 'HOME', component: TabsPage, icon: 'md-home' },
      { title: 'LOCKEROOM', component: LockerRoomPage, icon: 'md-chatbubbles' },
      { title: 'FEATURED', component: FeaturedPage, icon: 'md-star' },
      { title: 'OFFERS', component: OffersPage, icon: 'md-color-wand' },
      { title: 'PROMOTIONS', component: PromotionsPage, icon: 'md-briefcase' },
      { title: 'NOTIFICATIONS', component: NotificationsPage, icon: 'md-notifications-outline' }
    ];

openPage(page) {
    this.nav.setRoot(page.component);
  }

and Here is a snippet from app.html

    <ion-list>
      <button class="side-menu-list" color="secondary" icon-left menuClose ion-item 
               *ngFor="let p of pages" (click)="openPage(p)">`
        <ion-icon class="page-icon" [name]='p.icon'></ion-icon>
        <span class="page-name">{{p.title}}</span>
      </button>
    </ion-list>

from tabs.ts :

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="" tabIcon="md-flash"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="" tabIcon="md-heart"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="" tabIcon="md-person"></ion-tab>
</ion-tabs>

from tabs.ts :

export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;
  tab2Root: any = WorkoutsPage;
  tab3Root: any = ContactPage;
  tab4Root: any = ProfilePage;

  constructor() {

  }
}
2

the answer with illustrated example in the following forum post:

https://forum.ionicframework.com/t/sidemenu-tabs-together/37738/15

3

I actually tried this example but i got some errors,

could you tell me what is the class you imported to use app.getComponent ?

4

If forwarded you to that link before i try it: actually getComponent of the IonicApp class have been depricated:
https://github.com/driftyco/ionic/issues/6199
to get the a NavController instance use ViewChild instead
@ViewChild(Nav) nav: Nav;

5

Hi,

I observe you are using Promotions Page in your project. Can you please explain how to design and service of promotions page in ionic2 app. So can you please share the basic templates for the promotions page. Thanks in advance!

6

yea sure, it’s just a basic template containing input field with submit button and the button triggers method in my service.ts file which make the call the api nothing fancy,

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title class="header-title">promotions</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>

  <ion-list>
    <ion-item>
      <ion-input placeholder="Type Code Here" type="text" [(ngModel)]='code'></ion-input>
    </ion-item>
    <div>
      <button ion-button full color="secondary" (click)='checkPro()'>Check</button>
    </div>
  </ion-list>

</ion-content>