I am using Ionic 3 and Angular 4 to develop an app right now and I have my HomePage with two side menus with some options and buttons in each, one side menu has a button to show results in an ion-list of ion-cards. But when I try and put buttons anywhere in the view (other than inside the header or menus) they are not clickable and do not cause the (click) event to be fired. I have traced it down to the tag I have added to my tag to get the menus to pop open. If I remove the new ion-nav tag the buttons are clickable but the menus do not work. Below is a minimal amount of code to show what I have done.
home.html
<ion-header>
<ion-navbar style="text-align: center">
<ion-buttons left>
<button ion-button icon-only item-left (click)="toggleSettings()">
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>
Battles
</ion-title>
<ion-buttons end>
<button ion-button icon-only item-right (click)="toggleFilter()">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="home" overflow-scroll="true">
<ion-list [virtualScroll]="battles">
<ion-card *virtualItem="let battle" (click)="openDetails(battle)">
<ion-item>
<button ion-button (click)="openDetails()">Details</button>
</ion-item>
<ion-card-content>
</ion-card-content>
<ion-row responsive-sm wrap>
</ion-row>
<ion-row>
</ion-row>
</ion-card>
</ion-list>
<ion-menu [content]="nav" id="settings" side="left">
<ion-content>
<ion-list>
<button ion-item (click)="logOut()">Log Out</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-menu [content]="nav" id="filter" side="right">
<ion-content>
<ion-item>
<button ion-button (click)="loadItems()">Search</button>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #nav [root]="rootPage"></ion-nav>
</ion-content>
app.html
<ion-nav #nav [root]="rootPage"></ion-nav>
I am sure it has something to do with the scope of the nav bar but I am unsure of how to get buttons to work within my ion list while also having those menus open on the home.html page.