I created a menu component which has the menu-button and the ion-menu inside because i want to use this component on multiple pages. To use this component on different pages, i created a module with the menu component inside which than gets imported on every page that should have the menu. When accessing the page i get the error
Menu: must have a "content" element to listen for drag events on
app.component.html
<ion-app>
<ion-router-outlet id="main-menu"></ion-router-outlet>
</ion-app>
menu.component.html
<div id="menu-button" (click)="this.toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<ion-menu side="start" contentId="main-menu" menuId="main-menu">
<ion-content>
<ion-menu-toggle auto-hide="false">
<ion-list lines="none">
<ion-item [routerLink]="'/list-view'">
<ion-icon name="list-outline" slot="start"></ion-icon>
{{ 'PAGES.LISTVIEW.LISTVIEW' | translate }}
</ion-item>
<ion-item [routerLink]="'/settings'">
<ion-icon name="list-outline" slot="start"></ion-icon>
{{ 'PAGES.SETTINGS.PKEY' | translate }}
</ion-item>
<ion-item (click)="logout()">
<ion-icon name="log-out-outline" slot="start"></ion-icon>
{{ 'PAGES.LOGIN.LOGOUT' | translate }}
</ion-item>
</ion-list>
</ion-menu-toggle>
</ion-content>
</ion-menu>