User Name in SideMenu

Ionic Framework ionic-v3
1

Hi,

how can i show user name in SideMenu after login. For example:

app.html
<ion-menu [content]=“content”>


{{USERNAME HERE}}








<button menuClose ion-item *ngFor=“let p of pages” (click)=“openPage§”>
{{p.title}}


LoginProvider
export class LoginProvider {
public currentUser: any;

public login(){
this.cuurentUser = userLogged;
}

2

If you import and inject the LoginProvider to your App component (assuming that is where the menu is), you should be able to do the following:

import { LoginProvider } from '...';

constructor(private loginProvider: LoginProvider) {}

{{loginProvider.currentUser.path.to.name}}
1 Like
3

Return this

Error in ./MyApp class MyApp - caused by: self.context.loginProvider.currentUser is undefined

My code:

{{loginProvider.currentUser.displayName}}

My class (app.components.ts)
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage = LoginPage;

pages: Array<{title: string, component: any}>;
constructor(platform: Platform, public loginProvider: LoginProvider) {

4

Is this typo also in your script? :slight_smile: It says “cuurent” but should say “current”

5

Sorry,

real method is:

private callBackStateChange(user ) {
this.ngZone.run(() => {
if (user == null) {
this.currentUser = null;
} else {
this.currentUser = user ;
}
})
}

6

Oh, I’m assuming it does this before you login? Then it makes perfect sense. Maybe if you wrap the {{loginProvider.currentUser.path.to.name}} in a span or whatever, and add an *ngIf like so:

<span *ngIf="loginProvider.currentuser">{{loginProvider.currentUser.path.to.name}}</span>
7

loginProvider.currentuser is null. I think that the app.components is not call again.

<span *ngIf="loginProvider.currentuser">Not Work</span> 

<span *ngIf="!loginProvider.currentuser">Work</span>
8

That shouldn’t be the issue. Are you sure your login is actually working? Just try debugging a bit and make sure that this.currentUser = user; is actually called. :slight_smile:

9

Yes, it is called but after app.component class

10

this return correct user name

private callBackStateChange(usuario) {
this.ngZone.run(() => {
if (usuario == null) {
this.currentUser = null;
} else {
this.currentUser = usuario;
console.log(this.currentUser.displayName);
}
})
}

11

If done correctly it shouldn’t matter if app.component is called first, as the *ngIf will just keep checking for changes to the loginProvider.currentuser. I’m not sure what’s wrong, if you could paste the entire app.component.html, app.component.ts and LoginProvider class that’d be more useful! Or as much as you want to show, but at least the parts which are relevant :slight_smile:

12

LoginProvider Class
export class LoginProvider {

public currentUser: any;
loginSucessEventEmitter: EventEmitter;
loginErrorEventEmitter: EventEmitter;
logoutEventEmitter: EventEmitter;

constructor(public http: Http,
public ngZone: NgZone,
public toastCtrl: ToastController,
public storage: Storage,
public events: Events) {

this.loginSucessEventEmitter = new EventEmitter();
this.loginErrorEventEmitter = new EventEmitter();
this.logoutEventEmitter = new EventEmitter();


firebase.auth().onAuthStateChanged(usuarioModel => {
  this.callBackStateChange(usuarioModel);
})

}

private callBackStateChange(usuario) {
this.ngZone.run(() => {
if (usuario == null) {
this.currentUser = null;
} else {
this.currentUser = usuario;
}
})
}
}

MyApp class(app.components)
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage = LoginPage;

pages: Array<{title: string, component: any}>;

constructor(platform: Platform, public loginProvider: LoginProvider) {

this.pages = [
  { title: 'Debates', component: ListDebatePage },
  { title: 'Meus debates', component: ListDebateUserPage }
];            

platform.ready().then(() => {
  // Okay, so the platform is ready and our plugins are available.
  // Here you can do any higher level native things you might need.
  StatusBar.styleDefault();
  Splashscreen.hide();    
});

}

openPage(page) {
// Reset the content nav to have just this page
// we wouldn’t want the back button to show in this scenario
//this.nav.push(page.component);
this.nav.setRoot(page.component);
}

}

App.html
<ion-menu [content]="content">
<ion-header>
<ion-toolbar color="debBackGround">
<ion-title>
<span *ngIf="loginProvider.currentuser">Not Work</span>
</ion-title>
<div text-center>
<img src="" />
</div>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>

</ion-menu>

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

Did you paste the correct stuff? For the App HTML, it says this:

<span *ngIf="loginProvider.currentuser">Not Work</span>

Meaning that it will say “Not Work” when the currentUser is set, also please note the capitalization. currentUser not currentuser. It should say this:

<span *ngIf="loginProvider.currentUser">{{loginProvider.currentUser.displayName}}</span>
14

small details make difference, Really loginProvider.currentuser was wrong. I Change to loginProvider.currentUser and work.

Thank you very much!!!

1 Like
15

you don’t need all of this code, you can just setup and observable or a behaviorSubject to track changes in authentication state without all of the eventEmitters

1 Like
16

Do You have any example for this?

17