Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 230776

Ionic 4 , side menu not working

$
0
0

Well, this works for me very good.

First, I have the menu on app.component.html

<ion-app>
  <ion-menu side="start">
    <ion-header>
      <ion-toolbar>
        <ion-title>
          Title
        </ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-menu-toggle>
          <ion-item lines="none" routerLink="/somePath">
            <ion-icon name="business" slot="start"></ion-icon>
            <ion-label>item 1</ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-menu-toggle>
          <ion-item lines="none" routerLink="/somePath">
            <ion-icon name="checkbox-outline" slot="start"></ion-icon>
            <ion-label>item 2</ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-menu-toggle>
          <ion-item lines="none" (click)="someAction()" button>
            <ion-icon name="exit" slot="start"></ion-icon>
            <ion-label>item 3</ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>
// and then you set your normal ion-router-outlet 
  <ion-router-outlet main></ion-router-outlet>
</ion-app>

Whenever you want to add the menu button on another .html file, then you just

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>  <!-- see how there are no complicated things here -->
    </ion-buttons>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>

Viewing all articles
Browse latest Browse all 230776

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>