CODEWITHSUNDEEP
angularionic-frameworkionic3
user5405873
user5405873

Reputation:

how to show side menu item in ionic 3

i'm able to build side menu but i'm not sure how to link it to different pages , please help me with this regard

here is demo: https://stackblitz.com/edit/ionic-lkxqz6?file=pages%2Fhome%2Fhome.html

question:i want to display 2 menus onclick of the menu which are ProfilePage and PostPage

<ion-header>

</ion-header>

<ion-content padding>

<button ion-button menuToggle icon-only class="menuButton"> 
  <ion-icon name="menu"></ion-icon>
</button>

<ion-menu [content]="mycontent">
  <ion-content>
    <ion-list>
      <p>some menu content, could be list items</p>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav #mycontent type="overlay"></ion-nav> 

</ion-content>

here is demo:https://stackblitz.com/edit/ionic-lkxqz6?file=pages%2Fhome%2Fhome.html

Upvotes: 1

Views: 5940

Answers (1)

Kay
Kay

Reputation: 19718

You can use the NavController https://ionicframework.com/docs/api/navigation/NavController/

Onclick of button in your nav menu you can use the NavContoller to push a page.

Step 1: Inject the Navigation Controller in your component

import { NavController } from 'ionic-angular';

class MyComponent {
  constructor(public navCtrl: NavController) {

  }
}

Step 2: Create a click event in the menu.

 <ion-menu [content]="content">
  <ion-content>
    <ion-list>
      <button menuClose ion-item (click)="openProfilePage()">
        Profile
      </button>

Post

Step 3: Push the new page in your controller function

   openProfilePage() {

      this.nav.push(ProfilePage);
   }

  openPostPage() {

          this.nav.push(PostPage);
  }

Upvotes: 1

Related Questions