I'm currently facing a challenge in my Ionic 2 app where I am trying to implement two simple tabs. However, my lack of experience with AngularJs and ionic 2 is causing some difficulties. I have gone through the Ionic documentation and searched online, but I believe there is something missing as I am unable to display the tabs. Below are the codes that I am working with:
HOME.TS
import { Component } from '@angular/core';
import { LoadingController } from 'ionic-angular';
import { NavController } from 'ionic-angular';
import { TabsPage } from './tabs'
import * as io from 'socket.io-client';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
tabs: any;
socket: any;
chat_input: string;
chats = [];
prova = [];
photoValue = [];
rangeSettings: number;
slideValueBadge = [];
constructor(public navCtrl: NavController, public loadingCtrl: LoadingController) {
this.socket = io('http://192.168.1.21:3000');
this.socket.on('photo', (value) => {
//Debug purpose
//console.log("Luminosità: ", value);
this.photoValue.push(value);
});
this.tabs = TabsPage;
}
//SOME OTHER CODES
}
TABS.TS
import { Component } from '@angular/core';
import { HomePage } from '../home/home';
import { ServerSetts } from '../home/serverSetts';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root: any = HomePage;
tab2Root: any = ServerSetts;
constructor() {
}
}
SERVERSETTS.TS
import { Component } from '@angular/core';
@Component({
templateUrl: 'serverSetts.html'
})
export class ServerSetts {
constructor() {}
}
APP.MODULE.TS
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ServerSetts } from '../pages/home/serverSetts';
import { TabsPage } from '../pages/home/tabs';
@NgModule({
declarations: [
MyApp,
HomePage,
ServerSetts,
TabsPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ServerSetts,
TabsPage
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
It's important to note that I have tabs.html, serverSetts.html, and home.html files. While the app is functioning properly, the tabs are not being displayed. Any assistance would be greatly appreciated. Thank you.