Disable buttons inside side menu in ionic

Ionic Framework Ionic Angular
1

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()">
 <ion-header>
 ......
 </ion-header>
 <ion-content>
  <ion-list>  
  <button 
      id="{{p.title}} 
      menuClose 
      ion-item 
     *ngFor="let p of pages"
     (click)="openPage(p)"
   ><span>{{p.title}}</span></button>
  </ion-list>
 </ion-content>
</ion-menu>

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

2

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;
  }

<ion-list>
      <button ion-item menuClose="main-menu-left" *ngFor="let leftpage of leftPages"
        [class.activeHighlight]="checkActive(leftpage)" (click)="openPage(leftpage)">
        {{leftpage.title}}
      </button>
</ion-list>
3

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.

4

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(() => {
      this.checkHighlight();
    });
}
// 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
          return;
        } else {
          // Emit the stored value
          this.highlightState.next(res.highlight);
          return;
        }
      });
  }

  getcurrentHighlight(){
    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",
    color:
      this.highlight === "menu" ? "danger" : "light",
    class:
      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