How to update value inside ionic 2 side menu

Question

How to "transfer" date from page into side-menu in Ionic2, i.e - Having app.page.html like following:

<ion-menu [content]="content">

    <ion-content class="menu-left">
        <!-- User profile -->
        <div text-center padding-top padding-bottom class="primary-bg menu-left">
            <a menuClose>
                <h4 light>{{userName}}</h4>
            </a>
        </div>

        <ion-list class="list-full-border">
            <button ion-item menuClose *ngFor="let page of pages" (click)="openPage(page)">
        <ion-icon item-left name="{{ page.icon }}"></ion-icon>
        {{ page.title }}
        <ion-badge color="danger" item-right *ngIf="page.count">{{ page.count }}</ion-badge>
      </button>
        </ion-list>
    </ion-content>

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

how to update userName value upon the action in the page upon the data gotten from facebookLogin.page ?

facebookLogin.page.ts:

...
fbLogin() {
    Facebook.login(["public_profile", "email"])
      .then((resp: FacebookLoginResponse) => {

        if (resp.status === "connected") {
          Facebook.api("/me", ["public_profile", "email"])
            .then(res => {
             this.userName = res.name
              this.login({name: this.userName})
            })
        ...
      );
  }

 login(params) {
    this.nav.setRoot(HomePage, params);
  }
...

(so, how would I import the userName which I get after login with facebook into ion-sideMenu in app.html; how I could make EventEmmiter, service/observe for changes in app.html's ion-menu ... some other way?)

Answer 1

ionic2 - using Events

Check out the Events docs

They allow you to 'publish' an action from any page, and subscribe to it in another page to retrieve the value. Your scenario would look a bit like this.

Import (both on Facebooklogin.component and app.component)

import { Events } from 'ionic-angular'; and in your constructor constructor(public events: Events)

Then, whenever you change your userName (f.e. in the handler of the facebook login) publish the value like this.

fbLogin() {
    Facebook.login(["public_profile", "email"])
      .then((resp: FacebookLoginResponse) => {

        if (resp.status === "connected") {
          Facebook.api("/me", ["public_profile", "email"])
            .then(res => {
             this.userName = res.name
             // publish the username change to the events
             this.events.publish('username:changed', this.userName);
              this.login({name: this.userName})
            })
        //...
      );
  }

And subscribe to any publishes being made in your app.component

userName: string;

constructor(events: Events) {
   this.userName = "not logged in";

   events.subscribe('username:changed', username => {
      if(username !== undefined && username !== ""){
        this.userName = username;
      }
   }) //... 
}

---

angular2 - using EventEmitter

import { EventEmitter } from '@angular/core';

public userChanged = new EventEmitter();

fbLogin() {
        Facebook.login(["public_profile", "email"])
          .then((resp: FacebookLoginResponse) => {

            if (resp.status === "connected") {
              Facebook.api("/me", ["public_profile", "email"])
                .then(res => {
                 this.userName = res.name
                 // publish the username change to the events
                 this.userChanged.emit(this.userName);
                 this.login({name: this.userName})
                })
            ...
          );
      }

App.component

import { FacebookLogin } from '../pages/facebook/facebook.component';

public userName;

constructor(fb: FacebookLogin){

    this.userName = "";
    //subscribe to the page's EventEmitter
    this.fb.userChanged.subscribe(username => {
       this.userName = username;
    });
}

OR use the EventEmitter as an Output as described in this S.O. answer: What is the proper use of an EventEmitter?