Ionic 3 update sidebar after logging in

Question

I need to display side menu items according to user role. so I check app.html if the page (role) is equal to the registered role. but it does not display elements in the side menu immediately after logging in, but after updating the application using the browser button of the browser, it displays the correct elements as it should. I think the problem is that ion caches the menu view, if so, how can I update the application to display the new displayed menu items.

Each time I log out of another user / role, it displays a menu according to the previous user / role.

app.component.ts

constructor() { this.initializeApp(); this.pages = [ { title: 'Home', component: 'HomePage', icon: 'home', role: 5 }, { title: 'Profile', component: 'ProfilePage', icon: 'person', role: 5 }, { title: 'Account', component: 'AccountPage', icon: 'home', role: 5 }, { title: 'Search Employee', component: 'AtlasemployeehomePage', icon: 'home', role: 4 } ]; } 

app.html

 <ion-list> <div *ngFor="let p of pages"> <button menuClose ion-item *ngIf="p.role == role" (click)="openPage(p)"> <ion-icon name="{{p.icon}}" style="margin-right:10%"></ion-icon> {{p.title}} </button> </div> <button menuClose ion-item (click)="presentLogout()"> <ion-icon name="log-out" style="margin-right:10%"></ion-icon> Logout </button> </ion-list> 

I set the role variable according to the registered user.

Answer 1

You can use the event API for this.

Events are a publish-subscribe-style event system for sending and responding to events at the application level in your application.

 import { Events } from 'ionic-angular'; // login.ts page (publish an event when a user is created) constructor(public events: Events) {} createUser(user) { console.log('User created!') this.events.publish('user:created', user, Date.now()); } // app.component.ts page (listen for the user created event after function is called) constructor(public events: Events) { events.subscribe('user:created', (user, time) => { // user and time are the same arguments passed in `events.publish(user, time)` console.log('Welcome', user, 'at', time); }); }