There are a pair of Ionic2 menus; one is currently visible while the other remains hidden

I am having an issue with my Ionic2 app where I have two pages, each with similar menus named XXX.html. One page displays its menu correctly, but the other does not show its menu at all. Is there a limitation in Ionic2 that prevents having two menus on the same side for different pages?

story.html works:

<ion-header>
  <ion-navbar #storyNav>
    <ion-title>Originaltöne</ion-title>
    <button ion-button menuToggle="checkMenu" right>
        <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-content>

<ion-menu id="checkMenu" side="right" [content]="storyNav">
  <ion-content>
    Lorem ipsum...
    <ion-item menuClose="checkMenu" detail-none>Close Menu</ion-item>
  </ion-content>
</ion-menu>

However, story-dashboard.html is encountering issues:

<ion-header>
  <ion-navbar #dashboardNav>
    <ion-title>Originaltöne</ion-title>
    <button ion-button menuToggle="favMenu" right>
        <ion-icon name="menu"></ion-icon>
    </button>
  </ion-navbar>
</ion-content>

<ion-menu id="favMenu" side="right" [content]="dashboardNav">
  <ion-content>
    Lorem ipsum...
    <ion-item menuClose="favMenu" detail-none>Close Menu</ion-item>
  </ion-content>
</ion-menu>
angulartypescriptionic-frameworkionic2

Answer №1

If you encounter a simple error while creating a page, it may be due to the automatic display of app.html (located in myapp/src/app/). In such cases, when working with menus, it is advisable to place them inside the app.html rather than on individual pages.

To address this issue, you can create two different menus within the app.html and then choose which one to open using buttons with menuToggle functionality like 

<button ion-button menuToggle>Toggle Menu</button>
, or call a specific one by invoking a function upon clicking.

// Identify the menu you want to call
openMenu(id) {
  this.menuCtrl.open(id);
}

For further guidance, I suggest referring to the documentation on Menu and MenuController.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When working with Typescript, NextAuth throws errors while embedding

When attempting to implement NextAuth into my Typescript application, I encounter two errors: one with NextAuth and the other with NextAuthOptions. import NextAuth from "next-auth" import { NextAuthOptions } from "next-auth" import Go ...

typescriptnext.jsnext-auth

I find it frustrating that Angular consistently redirects me to the login page every time I attempt to navigate to a different page

I currently have a website with both normal user-accessible pages and an admin dashboard accessible only by admins through ngx-admin. To restrict users from accessing the admin dashboard, I've implemented an auth guard that redirects them to the logi ...

htmlangularngx-admin

Configuring rows in React datagrid

I am working on a component where I receive data from the backend and attempt to populate a DataGrid with it. Below is the code for this component: export const CompaniesHouseContainer: React.FC<Props> = () => { const classes = useStyl ...

javascriptreactjstypescriptmaterial-ui

Lack of MaterialUI Table props causing issues in Storybook

Currently, I am utilizing MaterialUI with some modifications to create a personalized library. My tool of choice for documentation is Storybook, using Typescript. An issue I have encountered is that the storybook table props are not consistently auto-gene ...

reactjstypescriptmaterial-uistorybook

Is your Angular2 form page experiencing reloading issues?

I am currently incorporating Angular2 into my project. I am facing an issue where the page keeps refreshing, and I'm unable to determine the cause. Below is a snippet of my form: <form> <div class="form-group"> ...

javascripttypescriptangular2-forms

Modify the CSS for the selected values in an angular material multi-select component

I am looking to customize the CSS for selected values in a material multi select. <mat-form-field class="mat-form-field-fluid"> <mat-select placeholder="User Permissions" [(value)]="selectedPermissions" multipl ...

angularangular-material

Having trouble selecting all checkboxes in Angular

Having issues with selecting all checkboxes in a populated Angular dataTable. I've tried the code below but it doesn't seem to be working. Can you help me find a solution? Please check out the Stackblitz link for a demo. isChecked = false; checku ...

angularangular-datatables

How can I implement a "remember me" feature on login using Firebase in the routes.js file?

I am currently developing an ionic app that utilizes Firebase Google authentication. Despite having a working login logic, I am facing issues with the routing as it crashes the app. Strangely, there are no errors displayed in the console, the app simply go ...

angularjsionic-frameworkfirebaseangularfire

Troubleshooting the excessive time taken for Angular Material tree re-rendering

I am currently using mat-tree with large data sets in child nodes retrieved from an API call, with each child node containing around 3k records. My approach involves updating the dataSource by adding the children from the API under the existing dataSource ...

angularmaterial-uiangular-material2

Mastering the Art of Mocking ControlContainer in Angular Unit Testing

Is there a way to simulate a ControlContainer instance in order to effectively test my component? One of my child components incorporates a ControlContainer within the constructor, leading to usage like this: <acr-score-card formGroupName="score">& ...

angularangular-test

Updating an object property within an array in Angular Typescript does not reflect changes in the view

I am currently delving into Typescript and Angular, and I have encountered an issue where my view does not update when I try to modify a value in an array that is assigned to an object I defined. I have a feeling that it might be related to the context b ...

javascriptangulartypescriptionic-framework

"Null value is no longer associated with the object property once it has

What causes the type of y to change to string only after the destruction of the object? const obj: { x: string; y: string | null } = {} as any const { x, y } = obj // y is string now ...

typescript

Utilizing Observable Data in Angular 4 TypeScript Components

Looking to extract and assign a JSON value obtained from an API into a variable. Here is an example: TS this.graphicService.getDatas().subscribe(datas => { this.datas = datas; console.log(datas); }); test = this.datas[0].subdimensions[0].entr ...

javascriptangulartypescript

Distilling the Essence of "Deity" in Handling Runtime Errors

Working with a client who has a unique "God" component for creating form fields can be quite challenging. The complexity arises from the fact that we are using material design for non-mobile platforms and Ionic for mobile platforms. This special component ...

angular

Changing elements transferred from component to service

Currently, I am in the process of refactoring my code by consolidating common component methods into a shared service. However, I have encountered an issue where I am unable to overwrite a component's public object property that is passed to the servi ...

angular

Obtain the result and retrieve it using `window.angularComponentRef.zone.run`

In my work, I have been able to successfully call angular functions within a component through a static file. For reference, you can visit this link: How to expose angular 2 methods publicly?. The method suggested in the link involves using Zones in Angul ...

angular

Analyzing feedback according to the ResponseHeaders

When sending a request to a REST API using http.get(), the response headers usually contain metadata related to page number, total results, and page count. Angular's HttpClient handles parsing and returning data from the response.body in an Observabl ...

angularangular-services

Remove all spaces from input fields in angular Typescript, excluding the enter key

I've encountered an issue where the code below removes all spaces, but it's also removing the enter key. Is there a way to remove only spaces and not affect the enter key? static stripDoubleSpaces(str: string): string { if (!!str) { ...

javascriptangulartypescript

Round off Kendo Column Chart edges and add a personalized highlight shade

Is there a way to create a kendo column chart with rounded borders similar to the image provided? Below is the code snippet I am currently using. Additionally, how can I customize the hover-over color for the columns in the chart? <kendo-chart-series& ...

angularchartskendo-uikendo-chart

"Unlocking Angular event intellisense in Visual Studio Code: A Step-by-Step Guide

Currently, I am enrolled in an Angular course on Udemy. The instructor prefers using VS Code as his code editor, and one interesting feature he showcased was when he tried to add events to a button element. As soon as he opened the parenthesis after the bu ...

angularvisual-studio-code