I am trying to show the sidemenu icon on my Home page, which users can access from the Add-Contract page.
Even though I have enabled the sidemenu in home.ts using this.menu.enable(true);, the icon is not visible. However, I can still swipe and access the menu.
Can someone please provide guidance?
home.ts
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, private menu: MenuController) {
this.menu.enable(true);
}
accountSettings() {
this.navCtrl.push(AccountSettingsPage);
}
logout() {
this.navCtrl.push(LoginPage);
}
}
home.html
<ion-header>
<ion-navbar hideBackButton="true">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Home</ion-title>
<ion-buttons end>
<button (click)="accountSettings()" icon-only ion-button>
<ion-icon name="settings"></ion-icon>
</button>
<button (click)="logout()" icon-only ion-button>
<ion-icon name="log-out"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
//some more code here
</ion-content-padding>
add-contract.ts (this page takes the user to Home page)
@IonicPage()
@Component({
selector: 'page-add-contract',
templateUrl: 'add-contract.html',
})
export class AddContractPage {
constructor(private formBuilder: FormBuilder, private navCtrl: NavController, private menu: MenuController) {
this.menu.enable(false);
}
ionViewDidEnter() {
this.menu.swipeEnable(false);
}
ionViewDidLeave() {
this.menu.swipeEnable(true);
this.menu.enable(true);
}
//takes the user to Home page
addContract(val: any) {
this.navCtrl.push(HomePage);
}
}