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.
1 post - 1 participant
Read full topic
