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?)
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;
}
}) //...
}
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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With