Ionic 2 - Component containing Ion-Tabs not compiling

Perhaps I’m doing this wrong, or you aren’t able to do this in Ionic/Ionic2.

Code on Github

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:

import {Component} from 'angular2/angular2';

  selector: 'general-tabs',
  templateUrl: 'app/tabs/general-tabs.html'
export class GeneralTabs {

	constructor() {
		console.log('General Tabs Loaded');


  <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>

I also imported the directive to my page:

import {Page, NavController} from 'ionic/ionic';
import {GeneralTabs} from '../tabs/general-tabs'

import "./dashboard.scss";

  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)?


Played around with it awhile yesterday but still could not get it working. One bump for visibility before I chalk it up to something not possible in Ionic.