I’m trying to make a tab footer to attach some functionality, the idea is to add the component systemwide and with a function to be able to change the tabs and functions attached, as far as i have:
app.js:
...
import {TabsFooter} from './tabs-footer/tabs-footer'; @App({ templateUrl: 'app/app.html', providers: [Config, DB, Masters] }) class MyApp { ...
app.html:
...
</ion-menu> <ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav> <tab-footer></tab-footer> <ion-overlay id='overlay'></ion-overlay>
...
visit-day.js:
...
import {TabsFooter} from '../tabs-footer/tabs-footer';
@Page({
templateUrl: 'app/visit-day/visit-day.html',
})
export class VisitDayPage {
constructor(
private nav: NavController,
private tabs: TabsFooter,
private popup: Popup,
private conf: Config,
private db: DB
) {
....
this.TabsFooter.setTabs({
icon: 'refresh',
text: 'ACTUALIZAR'
});
}
tabs-footer.js
import {Component, NgIf} from 'angular2/angular2';
@Component({
directives: [NgIf],
properties: ['primary'],
selector: 'tabs-footer',
templateUrl: 'app/tabs-footer/tabs-footer.html'
})
export class TabsFooter {
constructor(
private nav: nav,
private popup: popup,
private tabs: []
) {
}
setTabs(tabs){
this.tabs = tabs;
}
}
tabs-footer.html:
<ion-tabs *ng-if="tabs.length">
<ion-tab *ng-for="#tab of tabs">
<icon tab-icon="tab.icon" tab-title="tab.text"></icon>
</ion-tab>
</ion-tabs>