CODEWITHSUNDEEP
angularionic3
Mahi Parmar
Mahi Parmar

Reputation: 525

menu does not swipe back after clicking on menu item

I have created side menu on the fly based on user role.but my issue is when i click on menu item my page does not get swipe back. The screen stuck on menu only. I need to click on pages manually to see the page.

app.html

<ion-menu [content]="content" swipeEnabled="true" class="menu" type="reveal" width="100px">
<ion-header>
    <ion-toolbar color="navbar">
      <ion-grid>
        <ion-row class="menu-title">
            <ion-title end>MENU</ion-title>
        </ion-row>
      </ion-grid>
    </ion-toolbar>
</ion-header>
<ion-list>
  <ion-item class="menu-item" *ngFor="let item of menuItems" (click)="itemClick(item.component, $event)">{{item.name}}
    <ion-list *ngIf="item.subMenu">
      <ion-item class="menu-item" *ngFor="let subItem of item.subMenu" (click)="itemClick(subItem.component, $event)">{{subItem.name}}</ion-item>
    </ion-list>
  </ion-item>
</ion-list>

Upvotes: 0

Views: 117

Answers (1)

ashfaq.p
ashfaq.p

Reputation: 5469

You need to use menuClose attribute.

<ion-menu [content]="content" swipeEnabled="true" class="menu" type="reveal" width="100px">
<ion-header>
    <ion-toolbar color="navbar">
      <ion-grid>
        <ion-row class="menu-title">
            <ion-title end>MENU</ion-title>
        </ion-row>
      </ion-grid>
    </ion-toolbar>
</ion-header>
<ion-list>
  <ion-item menuClose  class="menu-item" *ngFor="let item of menuItems" (click)="itemClick(item.component, $event)">{{item.name}}
    <ion-list *ngIf="item.subMenu">
      <ion-item menuClose  class="menu-item" *ngFor="let subItem of item.subMenu" (click)="itemClick(subItem.component, $event)">{{subItem.name}}</ion-item>
    </ion-list>
  </ion-item>
</ion-list>

Now clicking on these items will close the menu automatically

Upvotes: 1

Related Questions