Ion-tabs page solid black when added to Hello Ionic

I was trying to experiment with navigation with Ionic 2. I started with the Hello Ionic starter application and added a page with ion-tabs and 3 ion-tab’s. When I run it the page with the ion-tabs just shows up as solid black.

My example project is here:

The new components are:


   <ion-tab tabIcon="water" [root]="tabCmp" [rootParams]="tabOne"></ion-tab>
   <ion-tab tabIcon="angular" [root]="tabCmp" [rootParams]="tabTwo"></ion-tab>
   <ion-tab tabIcon="cloud" [root]="tabCmp" [rootParams]="tabThree"></ion-tab>


import { Component } from '@angular/core';

import {
} from 'ionic-angular';

import {
} from './tab-content';

   templateUrl: 'tabs-page.html',
export class TabsPage {
   navCtrl: NavController;

   tabCmp: TabContent;

   tabOne = {name: 'Tab 1'};
   tabTwo = {name: 'Tab 2'};
   tabThee = {name: 'Tab 3'};

   constructor(navCtrl: NavController) {
      this.navCtrl = navCtrl;


   <p>This is the tab for {{name}}</p>


import { Component } from '@angular/core';

import {
} from 'ionic-angular';

   templateUrl: 'tab-content.html',
export class TabContent {
   name: string = '';

   constructor(navParams: NavParams) { = navParams.get('name');

Anyone see anything obvious? There are no compiler error or console log messages of note.

1 Like

I still haven’t been able to solve this. Is there any place to find examples of using ion-tabs in this way for navigation?

I ran into the same issue when trying to copy the demo tabs example from the ionic github project into my page.

I checked the documentation site again and found that the demonstration there also has the same black page: Is this a known issue?

Note: I did find that if I copied this bit of css the tabs should show up but they would not appear to control anything:

ion-tabs:first-child {
  margin-top: 60px;

ion-tabs {
  margin-bottom: 20px;

ion-tabs .tabbar {
  position: relative;
  top: auto;
  height: auto;
  visibility: visible;
  opacity: 1;


I’m having the same issue. Still, couldn’t solve it…