Is there a way to create a common footer for all pages with 5 buttons, where the first button is selected by default? The page opened by this first button should have three tabs. I have already created the tabs but am unsure how to add the footer without repeating it on every single page. Any suggestions?
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>