Disable buttons inside side menu in ionic

What if I want to disable a button based on a condition inside the side menu? The condition needed to check will be available only after I login to the application. In the app.component.ts I’m defining my pages like

this.pages = [
   title: "a",
   component: aPage,
   src: "..",
 }, ......, {}

And in my app.html I’m using ngFor inside a button to loop through the pages to display like

<ion-menu [content]="content side="right persistent="true" (ionOpen)="openMenu()">
     *ngFor="let p of pages"

I want to disable a button based on a condition hot to do that ?

Here is some code I had in an Ionic 3 app hope it helps

    //Pages navigaton Array
    this.leftPages = [
      { title: 'Home', component: "HomePage", category: "" },
      { title: 'All Categories', component: "CategoriesPage", category: "" },
      { title: 'Shopping Cart', component: "ShoppingCartPage", category: "" },
      { title: 'Account', component: "AccountPage", category: "" },
      { title: 'Shopping Lists', component: "ShoppingListPage", category: "" },
      { title: 'Order History', component: "OrderHistoryPage", category: "" },
      { title: 'Login', component: "LoginPage", category: "" },
      { title: 'Help', component: "HelpPage", category: "" },

    this.activePage = this.leftPages[0];

// Navigate via code
    this.nav.setRoot(page.component, category);
    this.activePage = page;

  //Check for the active page
  checkActive(page) {
    return page == this.activePage;
      <button ion-item menuClose="main-menu-left" *ngFor="let leftpage of leftPages"
        [class.activeHighlight]="checkActive(leftpage)" (click)="openPage(leftpage)">

In this you’re highlighting the page which is currently active right? What I want to accomplish is , could you please check this link? I think here I’ve explained in a bit more detail.

My strategy would be to create a provider/service that exposes an observable specifically a BehaviorSubject

// Imports here
import ....

// The initial value of the this observable be an empty string
 highlightState = new BehaviorSubject('');

constructor( private storage: Storage)
    this.storage.ready().then(() => {
// When storage is ready get the stored value and emit it as the next value 
// I've used async here so that I can wait for the stored value to be available
async checkHighlight() {
    return await this.storage.get('highlight')
      .then((res) => {
        if (res === null) {
          // No previously stored highlight
        } else {
          // Emit the stored value

    return this.highlightState.value;

Then in your app ts file you could get the value by calling the service in the initialize func but make sure that storage is ready

// This will get the latest value emitted and can be used in your menus

this.highlight = this.myHighligtService.getcurrentHighlight();

this.pages = [
    title: "menu",
    component: MenuPage,
    src: "assets/imgs/grid.png",
      this.highlight === "menu" ? "danger" : "light",
      this.highlight === "menu"
        ? "item-md-danger"
        : "",
    isEnabled: true,

The reason I would use such a strategy is so that I can monitor the highlight incase a change of its status is initiated by any other page the user is visiting, this means any other page watching highlight will get the new status.

1 Like