Add tab component in a view with menu side

@Lovit wrote:

Hello, I'd like to add a tabs component in a view with a menu side. My problem is that the app has 2 different menus and I don't know how to insert tabs and menu.

This my code:

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { MenuPage } from './../pages/menu/menu';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = MenuPage;

  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();
    });
  }
}

menu.html

<ion-menu [content]="eventMenu" id="home">
  <ion-header no-border>
    <ion-toolbar color="primary">
      <ion-item color="none" class="item-header">
        <ion-thumbnail item-left>
          <img src="">
        </ion-thumbnail>
        <h2 style="text-align: left">João Carlos</h2>
        <p style="text-align: left">joao.carlos@gmail.com</p>
      </ion-item>
    </ion-toolbar>
  </ion-header>

  <ion-content class="background">
    <ion-list>
      <ion-item menuClose detail-none (click)="openPage(homePage)">Principal</ion-item>
      <ion-item menuClose detail-none (click)="openPage(settingsPage)">Configurações</ion-item>
      <ion-item menuClose detail-none (click)="openPage(invitePage)">Indique um Amigo</ion-item>
      <ion-item menuClose detail-none (click)="openPage(helpPage)">Ajuda</ion-item>
      <ion-item menuClose detail-none (click)="openPage(aboutPage)">Sobre</ion-item>
      <ion-item menuClose detail-none (click)="openPage(loginPage)">Login</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-menu [content]="eventMenu" id="event">
  <ion-header no-border>
    <ion-toolbar color="primary">
      <ion-item color="none" class="item-header">
        <ion-thumbnail item-left>
          <img src="">
        </ion-thumbnail>
        <h2 style="text-align: left">João Carlos</h2>
        <p style="text-align: left">joao.carlos@gmail.com</p>
      </ion-item>
    </ion-toolbar>
  </ion-header>

  <ion-content class="background">
    <ion-list>
      <ion-item menuClose detail-none (click)="openPage(homePage)">Principal</ion-item>
      <ion-item menuClose detail-none (click)="openPage(settingsPage)">Agenda</ion-item>
      <ion-item menuClose detail-none (click)="openPage(invitePage)">Inscrição</ion-item>
      <ion-item menuClose detail-none (click)="openPage(helpPage)">Network</ion-item>
      <ion-item menuClose detail-none (click)="openPage(aboutPage)">Evento</ion-item>
      <ion-item menuClose detail-none (click)="openPage(loginPage)">Acesso Cordenação</ion-item>
      <ion-item menuClose detail-none (click)="openPage(loginPage)">Indique um Amigo</ion-item>
      <ion-item menuClose detail-none (click)="openPage(loginPage)">Sair do Evento</ion-item>
      <ion-item menuClose detail-none (click)="openPage(loginPage)">Ajuda</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #eventMenu swipeBackEnabled="false"></ion-nav>

menu.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

import { HomePage } from './../home/home';
import { LoginPage } from './../login/login';

@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html',
})
export class MenuPage {
  private rootPage;
  private homePage;
  private loginPage;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.rootPage = LoginPage;
    this.loginPage = LoginPage;
    this.homePage = HomePage;
  }

  openPage(p) {
    this.rootPage = p;
  }

}

home.ts

import { Component } from '@angular/core';
import { NavController, MenuController } from 'ionic-angular';

import { EventPage } from './../event/event';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private menuCtrl: MenuController) {

  }

  ionViewDidLoad() {
    this.menuCtrl.enable(true, 'home');
    this.menuCtrl.enable(false, 'event');
  }

  imgEvent(){
    this.navCtrl.setRoot(EventPage);
  }

}

tabs.ts

import { EventPage } from './../event/event';
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
})
export class TabsPage {
  rootPage:any = EventPage;
  tab1:any = EventPage;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.tab1 = EventPage;
  }

}

tabs.html

<ion-tabs>
  <ion-tab tabIcon="water" tabTitle="Water" [root]="tab1"></ion-tab>
  <ion-tab tabIcon="leaf" tabTitle="Life" [root]="tab1"></ion-tab>
  <ion-tab tabIcon="flame" tabTitle="Fire" [root]="tab1"></ion-tab>
  <ion-tab tabIcon="magnet" tabTitle="Force" [root]="tab1"></ion-tab>
  <ion-tab tabIcon="magnet" tabTitle="Force" [root]="tab1"></ion-tab>
</ion-tabs>

event.html (which need have menu and tabs)

<ion-header>
  <ion-navbar color="light">
    <button ion-button menuToggle="left"><ion-icon name="md-menu"></ion-icon></button>
    <ion-title>EVENT-NAME</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

</ion-content>

event.ts

import { TabsPage } from './../tabs/tabs';
import { Component } from '@angular/core';
import { NavController, NavParams, MenuController} from 'ionic-angular';

@Component({
  selector: 'page-event',
  templateUrl: 'event.html',
})
export class EventPage {
  rootPage:any = TabsPage;

  constructor(public navCtrl: NavController, public navParams: NavParams, private menuCtrl: MenuController) {
  }

  ionViewDidLoad() {
    this.menuCtrl.enable(false, 'home');
    this.menuCtrl.enable(true, 'event');
  }

}

I tried a lot of things but not successful at the moment

Posts: 1

Participants: 1

Read full topic