How to disable a single option inside side menu in ionic?

Question

I want to disable a button inside the side menu based on a condition in ionic. The condition needed to check will be available only after I login to the application. I'm defining my pages in the app.component.ts like this

// used for an example of ngFor and navigation
this.pages = [
  {
    title: "menu",
    component: MenuPage,
    src: "assets/imgs/grid.png",
    color:
      this.localStorage.getItem("highlight") == "menu" ? "danger" : "light",
    class:
      this.localStorage.getItem("highlight") == "menu"
        ? "item-md-danger"
        : "",
    isEnabled: true,
  },
  {
    title: "about app",
    component: AboutPage,
    src: "assets/imgs/smartphone.png",
    color:
      this.localStorage.getItem("highlight") == "about app"
        ? "danger"
        : "light",
    class:
      this.localStorage.getItem("highlight") == "menu"
        ? "item-md-danger"
        : "",
    isEnabled: true,
  },
  .
  .
  .
  {
    title: "Renew Subscription",
    component: PlansPage,
    src: "assets/imgs/subscription.png",
    color: "light",
    isEnabled:
      this.localStorage.getItem("plantoptitle") == "Subscription expired"
        ? true
        : false,
  },
  {
    title: "Logout",
    component: LoginPage,
    src: "assets/imgs/logout_m.png",
    color: "light",
    isEnabled: true,
  },
];

}

Here you can see the Renew Subscription page, I've used a condition there to enable and stable the option, which I get only after login from API response. This is my app.html page

<ion-menu
  [content]="content"
  side="right"
  persistent="true"
  (ionOpen)="openMenu()"
>
  <ion-header>
    <ion-toolbar>
      <ion-title>
        <div class="menutp"><img src="assets/imgs/header_tp.png" /></div>
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button
        id="{{p.title}}"
        menuClose
        ion-item
        *ngFor="let p of pages"
        color="{{p.color}}"
        (click)="openPage(p)"
        [disabled]="!p.isEnabled"
      >
        <span><img src="{{p.src}}" class="imgH" /></span>
        <span>{{p.title}}</span>
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

But this condition is not working properly. If my subscription is expired and when I tried to login for the first time, entered the menu page & open the side menu to check the Renew option it is still disabled. But, say I'm in the menu page right now after login, and when I try to run the build again and after successful build and try to open the side menu, now it is enabled or if I swipe closed the application after login and reopened it, the button is enabled. How do I solve the issue? I think the isEnabled condition check is not properly calling, I want it to be enabled/disabled based on the Subscription expired status.

Answer 1

I solved it by fetching the button id and then based on the condition I enabled/disabled it when the side menu open button is clicked.

openMenu() {
 if(this.localStorage.getItem("plantoptitle") == "Subscription expired") {
  (<HTMLInputElement> document.getElementById("Renew Subscription")).disabled = false;
 } else (<HTMLInputElement> document.getElementById("btnExcel")).disabled = true;
}