ionic3 footer with ion-tabs

Question

I want to make a common footer for all the pages , the footer have 5 buttons, the first one is selected by default and this one or the page opened by the first button have three tabs, i made the three tabs and everything fine,but i don't know how to add the footer? should i add it on every single page? (there will be a lot of repetition) any idea ? the ion-tabs it not appear on all pages as i want because i add on app.module.ts

tabsHideOnSubPages: true
<ion-tabs [selectedIndex]="mySelectedIndex"
          name="mainTabs"
          tabsPlacement="top"
          tabsLayout="icon-hide"
          tabsHighlight="true"
          [ngClass]="showTabs? 'appear-tabs':'disappear-tabs'">
  <ion-tab [root]="exploreRoot" tabTitle="A"></ion-tab>
  <ion-tab [root]="spotlightRoot" tabTitle="B"></ion-tab>
  <ion-tab [root]="webinarsRoot" tabTitle="C"></ion-tab>
</ion-tabs>

footer:

<ion-footer>
  <ion-toolbar>
    <ion-buttons>
      <!--Main-->
      <button ion-button block color="icons-color">
        <div>
          <ion-icon name="md-home"></ion-icon>
          <label class="title-icon-footer">AAA</label>
        </div>
      </button>
      <!--my Programs-->
      <button ion-button block color="icons-color">
        <div>
          <ion-icon name="ios-play"></ion-icon>
          <label class="title-icon-footer">BBB</label>
        </div>
      </button>
      <!--my webinars-->
      <button ion-button block color="icons-color">
        <div>
          <ion-icon name="md-desktop"></ion-icon>
          <label class="title-icon-footer">CCC</label>
        </div>
      </button>
      <!--my notification-->
      <button ion-button block color="icons-color">
        <div>
          <ion-icon name="md-notifications"></ion-icon>
          <label class="title-icon-footer">CCC</label>
        </div>
      </button>
      <!--my account-->
      <button ion-button block color="icons-color">
        <div>
          <ion-icon name="md-person"></ion-icon>
          <label class="title-icon-footer">DDD</label>
        </div>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

Answer 1

I wanted to do the same and ended up not using tabs and created a footer component that I included on every page. I passed the navController from the page to the footer so the footer could navigate to pages.

On every page .html <ion-footer> <my-footer [navController]="navController"></my-footer> </ion-footer>

Footer component .html <ion-grid no-padding> <ion-row align-items-center> <ion-col col-6 text-center> <button ion-button icon-only (click)="gotoPage('HomePage')"> <ion-icon name="md-apps"></ion-icon> <span>Home</span> </button> </ion-col> <ion-col text-center> <button ion-button icon-only (click)="gotoPage('ContactPage')"> <ion-icon name="md-list-box"></ion-icon> <span>Contact</span> </button> </ion-col> </ion-row> </ion-grid>

Footer component .ts import { Component, Input } from '@angular/core'; import { NavController } from 'ionic-angular';

@Component({
    selector: 'mwc-footer',
    templateUrl: 'mwc-footer.html'
})
export class MwcFooterComponent {

    @Input('navController') navController;

    constructor() { }

    public gotoPage(page: string): void {
        this.navController.setRoot(page);
    }
}