Tabs on HomePage - ionic-framework

Question

im trying to make tabs in my HomePage, but the page isnt loading when i put the HomePage as the selected index in tabs, here's my Code:
home.ts:
...
export class HomePage {
public isConnected: Boolean= true;
homeRoot = HomePage;
aRoot = SigninPage;
bRoot = SignupPage;
...
home.html:
///SOME CONTENT
<ion-tabs selectedIndex="0" *ngIf="isConnected">
<ion-tab [root]="homeRoot" tabTitle="Home"></ion-tab>
<ion-tab [root]="aRoot" tabTitle="Home"></ion-tab>
<ion-tab [root]="bRoot" tabTitle="Home"></ion-tab>
</ion-tabs>
app.compenents.ts:
//IMPORTS
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = HomePage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}

Answer 1

Create a new page TabsPage.
//Tabs.ts
export class TabsPage{
public isConnected: Boolean= true;
homeRoot = HomePage;
aRoot = SigninPage;
bRoot = SignupPage;
//Tabs.html
<ion-tabs selectedIndex="0" *ngIf="isConnected">
<ion-tab [root]="homeRoot" tabTitle="Home"></ion-tab>
<ion-tab [root]="aRoot" tabTitle="Home"></ion-tab>
<ion-tab [root]="bRoot" tabTitle="Home"></ion-tab>
</ion-tabs>
//app.component.ts
//IMPORTS
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = TabsPage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen:
SplashScreen) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}