Perhaps I’m doing this wrong, or you aren’t able to do this in Ionic/Ionic2.
I am trying to create a directive that adds the bottom tabs to a page. I have pages 1 and 2 that should have a bottom tab menu with certain button ABC, and pages 3 and 4 with a tab menu containing buttons XYZ.
I created my directive:
app/tabs/general-tabs.ts
import {Component} from 'angular2/angular2';
@Component({
selector: 'general-tabs',
templateUrl: 'app/tabs/general-tabs.html'
})
export class GeneralTabs {
constructor() {
console.log('General Tabs Loaded');
}
}
app/tabs/general-tabs.html
<ion-tabs>
<ion-tab tab-icon="water" tab-title="Water" [root]="tab1"></ion-tab>
<ion-tab tab-icon="leaf" tab-title="Life" [root]="tab2"></ion-tab>
<ion-tab tab-icon="flame" tab-title="Fire" [root]="tab3"></ion-tab>
<ion-tab tab-icon="magnet" tab-title="Force" [root]="tab4"></ion-tab>
</ion-tabs>
I also imported the directive to my page:
import {Page, NavController} from 'ionic/ionic';
import {GeneralTabs} from '../tabs/general-tabs'
import "./dashboard.scss";
@Page({
templateUrl: 'app/dashboard/dashboard.html',
directives: [GeneralTabs]
})
and placed the element on my page (<general-tabs></general-tabs>).
It’s constructing my directive and outputting the message to the console, however it’s not compiling the tabs component of my directive. I know it’s pulling in the HTML because if I change it to something like <strong>Hello World</strong> it outputs Hello World on the page.
I also tried import {Tabs} from 'ionic/ionic' and adding the Tabs directive to my General-Tabs component.
So… Am I doing something wrong or is it just not possible (at this time or ever)?
Cheers!