Cannot manage multiple menus

Ionic Framework Ionic Angular
1

Hello !

I would like to manage multiple menus in my app, but I could not figure out how to do it.

As I understood from the doc page of Ionic (ion-menu: API Framework Docs for Types of Menu Components), I have to create a class where I define the action to be made when the button is clicked on.

When I create this class directly in the page where the menu is to be used, it works. But, as I want this menus to appear on multiple pages, I would like to define the class at one single location and be able to call it wherever I want.

When doing this, he always tells me that the property does not exist. Do you know what am I doing wrong?

Thanks A LOT for your help !

Here are the details :

--------------My “services.ts” file where I define my class ----------------

import { Injectable } from ‘@angular/core’;
import { MenuController } from ‘@ionic/angular’;

@Injectable({
providedIn: ‘root’
})
export class MenuService {

constructor(private menuCtrl: MenuController) {}

openFirstMenu() {
this.menuCtrl.open(‘first-menu’);
}

openSecondMenu() {
this.menuCtrl.open(‘second-menu’);
}

openEndMenu() {
this.menuCtrl.open(‘end’);
}

------------- My app module file ----------------------------

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { RouteReuseStrategy } from ‘@angular/router’;

import { IonicModule, IonicRouteStrategy } from ‘@ionic/angular’;

import { AppComponent } from ‘./app.component’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { MenuService } from ‘…/Services/services’;

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, MenuService],
bootstrap: [AppComponent],
})
export class AppModule {
}

------------ My app components file -------------------

import { Component } from ‘@angular/core’;
import { MenuService } from ‘…/Services/services’;

@Component({
selector: ‘app-root’,
templateUrl: ‘app.component.html’,
styleUrls: [‘app.component.scss’],
})

export class AppComponent {

constructor(private menuService: MenuService) {}

public appPages = [
{ title: ‘Dashboard’, url: ‘/dashboard’, icon: ‘bar-chart’},
{ title: ‘Maintenance’, url: ‘/maintenance’, icon: ‘construct’ },
{ title: ‘Favorites’, url: ‘/folder/favorites’, icon: ‘heart’ },
{ title: ‘Archived’, url: ‘/folder/archived’, icon: ‘archive’ },
{ title: ‘Trash’, url: ‘/folder/trash’, icon: ‘trash’ },
{ title: ‘Spam’, url: ‘/folder/spam’, icon: ‘warning’ },
];
public labels = [‘Family’, ‘Friends’, ‘Notes’, ‘Work’, ‘Travel’, ‘Reminders’];

public enginePropertyList = [
{ id: ‘0’, sn:‘my serial number’, model: ‘my engine model’},
];

ngOnInit() {
this.menuService.openFirstMenu();
this.menuService.openSecondMenu();
this.menuService.openEndMenu();
}

}

-------------- My maintenance.page.ts where I try to import the elements of my class ---------------

import { Component, OnInit } from ‘@angular/core’;
import { MenuService } from ‘…/…/Services/services’;

@Component({
selector: ‘app-maintenance’,
templateUrl: ‘./maintenance.page.html’,
styleUrls: [‘./maintenance.page.scss’],
})
export class MaintenancePage implements OnInit {

constructor(private menuService: MenuService) {}

ngOnInit() {
this.menuService.openFirstMenu();
this.menuService.openSecondMenu();
this.menuService.openEndMenu();
}

}

-------------- My html code where I have my buttons to access my menus ----------------

Menu

Tap a button below to open a specific menu.

  <ion-button expand="block" (click)="openFirstMenu()">Open First Menu</ion-button>
  <ion-button expand="block" (click)="openSecondMenu()">Open Second Menu</ion-button>
  <ion-button expand="block" (click)="openEndMenu()">Open End Menu</ion-button>
</ion-content>

-------------- The displayed errors ---------------------------

[ng] Error: src/app/maintenance/maintenance.page.html:37:43 - error TS2339: Property ‘openFirstMenu’ does not exist on type ‘MaintenancePage’.
[ng]
[ng] 37 <ion-button expand=“block” (click)=“openFirstMenu()”>Open First Menu
[ng] ~~~~~~~~~~~~~
[ng]
[ng] src/app/maintenance/maintenance.page.ts:6:16
[ng] 6 templateUrl: ‘./maintenance.page.html’,
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] Error occurs in the template of component MaintenancePage.
[ng]
[ng]
[ng] Error: src/app/maintenance/maintenance.page.html:38:43 - error TS2339: Property ‘openSecondMenu’ does not exist on type ‘MaintenancePage’.
[ng]
[ng] 38 <ion-button expand=“block” (click)=“openSecondMenu()”>Open Second Menu
[ng] ~~~~~~~~~~~~~~
[ng]
[ng] src/app/maintenance/maintenance.page.ts:6:16
[ng] 6 templateUrl: ‘./maintenance.page.html’,
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] Error occurs in the template of component MaintenancePage.
[ng]
[ng]
[ng] Error: src/app/maintenance/maintenance.page.html:39:43 - error TS2339: Property ‘openEndMenu’ does not exist on type ‘MaintenancePage’.
[ng]
[ng] 39 <ion-button expand=“block” (click)=“openEndMenu()”>Open End Menu
[ng] ~~~~~~~~~~~
[ng]
[ng] src/app/maintenance/maintenance.page.ts:6:16
[ng] 6 templateUrl: ‘./maintenance.page.html’,
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] Error occurs in the template of component MaintenancePage.
[ng]
[ng]
[ng]
[ng] × Failed to compile.