menuClose is not working properly in Ionic3

I have created an application with ionic3 having a side menu.

 <ion-menu [content]="content" type="overlay" id="user-menu">
  <ion-header no-border>
    <ion-toolbar>
      <img src="assets/imgs/ic_southend_logo.png" class="width-50 margin-top-10">
    </ion-toolbar>
    <div class="user-info">
        <ion-row>
            <ion-col col-3>
                    <img src="assets/imgs/ic_avatar.png" class="user-image"> 
            </ion-col>
            <ion-col col-7>
                <div class="padding-top-10">
                        <label class="user-name"><b>USER1</b></label><br>
                        <label class="user-designation">Manager</label>
                </div>
            </ion-col>
            <ion-col col-2 text-center>
                    <img src="assets/imgs/ic_arrow_forward.png" class="arrow-forward"> 
            </ion-col>
        </ion-row>       
    </div>
  </ion-header>

  <ion-content scroll="true" scrollbar-y="true"> 
    <ion-list no-lines class="padding-top-10">
        <button ion-item menuClose  detail-none (tap)="openPageTab('ContactsPage')">
            <img class="menu-image" src="assets/imgs/ic_contact_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
            <h3 class="menu-text" [class.activeHighlight]="checkActive('ContactPage')"> Key Contacts</h3>
        </button>
        <button ion-item menuClose  detail-none (tap)="openPage('BroadcastPage')">
            <img class="menu-image" src="assets/imgs/ic_broadcast_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
            <h3 class="menu-text" [class.activeHighlight]="checkActive('BroadcastPage')"> Broadcasts</h3>
        </button>
        <button ion-item menuClose  detail-none (tap)="openPage('SettingsPage')">
            <img class="menu-image" src="assets/imgs/ic_settings_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
            <h3 class="menu-text" [class.activeHighlight]="checkActive('SettingsPage')"> Settings</h3>
        </button>
        <button ion-item menuClose  detail-none (tap)="openPage('KeyinfoPage')">
            <img class="menu-image" src="assets/imgs/ic_keyinfo_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
            <h3 class="menu-text" [class.activeHighlight]="checkActive('KeyinfoPage')"> Key info</h3>
        </button>
        <button ion-item menuClose  detail-none (tap)="openPage('FaqPage')">
            <img class="menu-image" src="assets/imgs/ic_faq_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
            <h3 class="menu-text" [class.activeHighlight]="checkActive('FaqPage')"> FAQ</h3>
        </button>

    </ion-list>
  </ion-content>
</ion-menu>

The issue here is menuClose is not working after multiple click on the side menu, means side menu is not closing even after touch on the menu.
Capture

Any help on this?

Thanks and Regards
Anand

Have you try using (click) instead of (tap)?

Thank you very much its working…!

1 Like