Ionic Angular side-menu doesn't show up when I click on the icon

Question

I try to make a side-menu in ionic Angular. I want to use it in more pages. I made a component named "menu-for-client", I imported it in "Components.module.ts" and then I imported the ComponentsModule in my pages. The menu doesn't show up.
This is my Components.module.ts :

import { NgModule } from '@angular/core';
import { MenuForClientComponent } from "./menu-for-client/menu-for-client.component";
import {IonicModule} from "@ionic/angular";
import { RouterModule } from "@angular/router";


@NgModule({
  declarations: [MenuForClientComponent],
  imports: [
    IonicModule, RouterModule
  ],
  exports: [MenuForClientComponent]
})
export class ComponentsModule{}

In component menu-for-client.component.html I have this:

<ion-menu side="start" menuId="first" content-id="main" type="overlay">
    <ion-header>
      <ion-toolbar color="success">
        <ion-title color="dark">Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-menu-toggle>
          <ion-item routerLink="/browse">
            <ion-icon name="search" slot="start"></ion-icon>
            <ion-label>Browse</ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-menu-toggle>
          <ion-item routerLink="/orders">
            <ion-icon name="list-circle-outline" slot="start"></ion-icon>
            <ion-label>Orders</ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-menu-toggle>
          <ion-item routerLink="/discount-codes">
            <ion-icon name="barcode" slot="start"></ion-icon>
            <ion-label>Discount Codes</ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-menu-toggle>
          <ion-item routerLink="/login">
            <ion-icon name="arrow-back-circle-outline" slot="start"></ion-icon>
            <ion-label>Sign Out</ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
  <ion-router-outlet id="main"></ion-router-outlet>

In my browse.page.html I have this :

<ion-content scroll-y="false">
  <ion-toolbar>
    <app-searchbar></app-searchbar>
    <ion-buttons slot="start">
      <ion-menu-button color="dark" menu="first"></ion-menu-button>
      <ion-router-outlet></ion-router-outlet>
      <app-menu-for-client></app-menu-for-client>
    </ion-buttons>
</ion-content>

browse.page.module.ts looks like this :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { BrowsePageRoutingModule } from './browse-routing.module';

import { BrowsePage } from './browse.page';
import {SearchbarModule} from "../Components/searchbar/searchbar.module";
import {CategoryItemModule} from "../Components/category-item/category-item.module";
import {ComponentsModule} from "../Components/Components.module";


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    BrowsePageRoutingModule,
    SearchbarModule,
    CategoryItemModule,
    ComponentsModule
  ],
  declarations: [BrowsePage],
  exports: []

})
export class BrowsePageModule {}

Please can someone tell me what am I doing wrong?

Have you tried looking at the console output for any errors? — , Dec 12 '21 at 18:15
try to remove "menu="first" from `ion-menu-button` and replace with "" — Ravi Ashara, Dec 13 '21 at 06:17
Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). — Community, Dec 18 '21 at 13:23

score 0 · Answer 1 · answered Jan 10 '23 at 17:13

this works finde:

    <ion-menu contentId="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Aktivitäten</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">

<ion-list>
  <ion-item routerLink="/login">
    <ion-label>Test</ion-label>
    <ion-icon name="mail"></ion-icon>
  </ion-item>
</ion-list>

  </ion-content>
</ion-menu>
<div class="ion-page" id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
      <ion-title>Aktivitäten</ion-title>
    </ion-toolbar>
  </ion-header>

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jan 14 '23 at 20:30

Ionic Angular side-menu doesn't show up when I click on the icon

1 Answers1