Menu
I have the following code:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ionic 4 - Menu</title>
<link rel="stylesheet" href="https://unpkg.com/@ionic/[email protected]/css/ionic.bundle.css" />
<script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>
<script>
window.addEventListener('load', event => {
document.querySelector('.button_details').addEventListener('click', (event) => {
document.querySelector('.menu_main').toggle();
});
});
</script>
</head>
<body>
<ion-menu class="menu_main" side="start">
<ion-header>
<ion-toolbar color="secondary">
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Hello World!
</ion-content>
</ion-menu>
<ion-menu-controller></ion-menu-controller>
<ion-card style="display:inline-block;width:300px">
<ion-card-header>
<ion-card-title>Hello World</ion-card-title>
</ion-card-header>
<div style="padding:10px 10px;text-align:right;">
<ion-button color="primary" class="button_details">Details</ion-button>
</div>
</ion-card>
</body>
</html>
It works fine with one exception: when the page loads, there is the following error on the console:
Error: "Menu: must have a 'content' element to listen for drag events on."
Here you have the CodePen.io:
https://codepen.io/anon/pen/qJgEzZ/?editors=1011
And below you can try the code right here on StackOverflow:
window.addEventListener('load', event => {
document.querySelector('.button_details').addEventListener('click', (event) => {
document.querySelector('.menu_main').toggle();
});
});<script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script>
<link href="https://unpkg.com/@ionic/[email protected]/css/ionic.bundle.css" rel="stylesheet"/>
<ion-menu class="menu_main" side="start">
<ion-header>
<ion-toolbar color="secondary">
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
Hello World!
</ion-content>
</ion-menu>
<ion-menu-controller></ion-menu-controller>
<ion-card style="display:inline-block;width:300px">
<ion-card-header>
<ion-card-title>Hello World</ion-card-title>
</ion-card-header>
<div style="padding:10px 10px;text-align:right;">
<ion-button color="primary" class="button_details">Details</ion-button>
</div>
</ion-card>Any idea on how to solve this problem? What is it missing here?
Could you please fork my CodePen.io with a proper code?
Thanks!
960
There are two key parts to adding a menu into an existing Ionic 4 application: The menu markup in app.component.html: The menu button in a page toolbar: However, after running the application, there was no sign of the menu button. In the browser console, I noticed the following error:
The id of the main content. When using a router this is typically ion-router-outlet. When not using a router, this is typically your main view's ion-content. This is not the id of the ion-content inside of your ion-menu. If true, the menu is disabled. The edge threshold for dragging the menu open.
These can be controlled from the templates, or programmatically using the MenuController. While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component. The id of the main content. When using a router this is typically ion-router-outlet.
Because of the component root element ( app-sidemenu in my case), the ion-element is nested one level deeper in the markup. Hence, the above code is looking for the main attribute inside app-sidemenu element instead of inside the ion-app element. Of course, it can't find it.
Theion-menu needs a contentId and the ion-router-outlet needs an id, so the menu contentId must be the ion-router-outlet id:
<ion-menu side="start" contentId="menuContent">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="menuContent"></ion-router-outlet>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
