Reloading ion menu when a user log in

Ionic Framework ionic-v3
1

There is a {{user_name}} variable in my app. component.ts and want to use it for displaying user name which i am getting from local storage after the user log in .
But this loads only at app start and want to reload it after user log in . I cant under stand how to reload it .
cause when i close and reopen app after log in it works fine and user name displayed . but at first it shows only hi not showing user name.

<ion-menu [content]="content" >
        <ion-header>
          <ion-toolbar>
            <ion-title>
                <p>
                HI! {{user_name}}
            </p></ion-title>
          </ion-toolbar>
         
        </ion-header>
      
        <ion-content>
            
          <ion-list >
        
            <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
              {{p.title}}
              
            </button>
            <button  menuClose ion-item (click)="logout()" >
              Log Out
            </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>
2

When your user logs in publish an event. Then place an event.subscribe where you wish to display the name.

Example Login:

constructor(public events: Events){}

login(userData) {
    this.events.publish('user:login', userData);
}

Example Read User:

constructor(public events: Events) {
    events.subscribe('user-login', (user) => {
        console.log('Welcome Back ', user);
    }
}
3

thanks a lot it worked