How to reload app.component on event in ionic 4

I'm stuck with the following problem.

app.component.ts is listening to event 'login' which works fine. But, when then event is firing I want to reload my app.component-page as I want to show a different side menu when a user is logged in.

I found some examples with Content but Content is not included in @ionic/angular anymore.

Has someone a working example? This would me a lot.

Thank you in advance.

Following my environment infos

Ionic CLI : 5.2.6 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.4.2 @angular-devkit/build-angular : 0.13.9 @angular-devkit/schematics : 7.3.9 @angular/cli : 7.3.9 @ionic/angular-toolkit : 1.5.1

Solution

Instead of reloading the page which is not a best practice, you should bind the menu to a list of data that you can change depending on the logged in status.

If you want to make structural changes as well then you can just put those on a *ngIf for the two versions.

This tutorial shows how to bind the menu from an array of pages.

You just set up a data structure to hold the menu items:

sideMenu()
  {
    this.navigate =
    [
      {
        title : "Home",
        url   : "/home",
        icon  : "home"
      },
      {
        title : "Chat",
        url   : "/chat",
        icon  : "chatboxes"
      },
      {
        title : "Contacts",
        url   : "/contacts",
        icon  : "contacts"
      },
    ]
  }

And then loop it on the front end:

    <ion-list *ngFor="let pages of navigate">
      <ion-menu-toggle auto-hide="true">
        <ion-item [routerLink]="pages.url" routerDirection="forward">
            <ion-icon [name]="pages.icon" slot="start"></ion-icon>
               {{pages.title}} 
        </ion-item>
      </ion-menu-toggle>
    </ion-list>