Hi,
I am trying to set up an optional tabs or menu layout.
Wile for now I didn’t conditionaly hide my menu I’m having the current html
<ion-tabs *ngIf="menuType == 'tabs'" #myTabs itemsPlacement="bottom" primary>
<ion-tab *ngFor="let item of items" [tabIcon]="item.icon" [root]="item.type" [tabTitle]="item.title | translate | async"></ion-tab>
</ion-tabs>
<ion-menu [persistent]="true" side="left" [content]="content">
Hoi
<ion-content>
<ion-list>
<button ion-button item-left *ngFor="let item of items">
<ion-icon [name]="item.icon"></ion-icon>
{{item?.title | translate | async}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>
The idea is to have a *ngIf on the ion-nav at the bottom
This is linked to a component
import {Tabs, MenuController} from 'ionic-angular';
import {Component, ViewChild} from '@angular/core';
import {Overview} from "./tabs/overview/overview";
import {Reload} from "./tabs/reload/reload";
import {Messages} from "./tabs/messages/messages";
import {Faq} from "./tabs/faq/faq";
import {MenuService} from "./tabs/menu.service";
import {MessageService} from "../../providers/message/message.service";
import {Config} from "../../config/config";
@Component({
template: require('./maintabs.html'),
})
export class MainMenu {
public selectedIndex = 0;
public rootPage;
public items = [];
get menuType() {
return Config.menuType;
}
@ViewChild('myTabs') tabRef: Tabs;
constructor(
private menuService: MenuService,
private messageService: MessageService,
private menuCtrl: MenuController
) {
Config.config.pages.forEach(p => {
this.items.push({
type: MainMenu.getTypeFromString(p),
title: "tab_" + p,
icon: MainMenu.getIconFromString(p)
});
});
if (this.menuType === 'drawer') {
this.rootPage = this.items[0].type;
}
this.menuService.subscribe(tabAsString => {
if (tabAsString === 'toggle_menu') {
this.toggleMenu();
return;
}
let count = 0;
Config.config.pages.forEach(p => {
if (p === tabAsString) {
if (Config.menuType === 'tabs') {
this.tabRef.select(count);
} else if (Config.menuType === 'drawer') {
//we know it exists go for it
this.rootPage = MainMenu.getTypeFromString(tabAsString);
}
}
count++;
});
})
}
/**
*
* Adding a new type? Make sure the key tab_{tabname} exists so the label can be displayed
* The icons used can be found on the website of ionic (ionic icons)
*
*/
private static getTypeFromString(p: string): any {
switch(p) {
case "overview":
case "overview_bars":
return Overview;
case "reload":
case "reload_tabbed":
return Reload;
case "messages":
return Messages;
case "faq":
return Faq;
default:
console.error("We don't know this page: " + p);
return null;
}
}
private static getIconFromString(p:string): string {
switch (p) {
case "overview":
case "overview_bars":
return "stats";
case "reload":
case "reload_tabbed":
return "cart";
case "messages":
return "mail";
case "faq":
return "chatbubbles";
default:
console.error("We don't know this page: " + p);
return "";
}
}
private toggleMenu() {
console.info("toggling menu")
this.menuCtrl.toggle("left");
}
}
As you see i’ve added some stuff to try to open the menu.
Could anyone tell me why this doesn’t work (No errors).
Do I have to be in the root component to add a menu? My root component is a ion-nav which includes this page. Originally it will show a login/activation page.