I'm using Ionic CLI v3.5.0 and Ionic2 Super Tabs v3.0.2
But the tabs are not displaying properly. On clicking the tabs, page changes but they are not displaying.
Here is my app.module.ts. I have added SuperTabsModule.forRoot() as indicated in the docs.
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { SuperTabsController} from 'ionic2-super-tabs';
import { MyApp } from './app.component';
import { ExplorePage } from '../pages/explore/explore';
import { SuperTabsModule } from 'ionic2-super-tabs';
import { CoachingsPage } from '../pages/coachings/coachings';
import { TutorsPage } from '../pages/tutors/tutors';
@NgModule({
declarations: [
MyApp,
ExplorePage,
CoachingsPage,
TutorsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
SuperTabsModule.forRoot(),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
ExplorePage,
CoachingsPage,
TutorsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
This is my tab.ts file. Here my pages doesn't use lazy loading so I haven't added SuperTabsModule here. I had added it but that didn't work.
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { CoachingsPage } from '../coachings/coachings';
import { TutorsPage } from '../tutors/tutors';
/**
* Generated class for the ExplorePage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-explore',
templateUrl: 'explore.html',
})
export class ExplorePage {
tab1Root:any = CoachingsPage;
tab2Root:any = TutorsPage;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad ExplorePage');
}
}
Here's the tabs.html file:
<super-tabs>
<super-tab [root]="tab1Root" title="Top Tutors"></super-tab>
<super-tab [root]="tab2Root" title="Top Coaching"></super-tab>
</super-tabs>
