Angular 2- using *ngIf with multiple conditions

Question

I'm unable to selectively display links on my nav-bar. Based on who logs in (user or admin), I want to change which link shows on my nav-bar.

Below is the code for one such instance where the user/admin logs out.

In navbar.component.html -

<li *ngIf="authService.userLoggedIn()== true && authService.adminLoggedIn() == false" 
       [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> 
  <a (click)="onUserLogoutClick()" href="#">Logout</a>
</li>

<li *ngIf="(authService.adminLoggedIn() == true) && (authService.userLoggedIn() == false)" 
      [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
   <a (click)="onAdminLogoutClick()" href="#">Logout</a>
</li>

Both authService.adminLoggedIn() and authService.userLoggedIn() return tokenNotExpired;

Below is the relevant code in the navbar.component.ts -

 onUserLogoutClick() {
   this.authService.userLogout();
   this.flashMessage.show('You are now logged out', {cssClass: 'alert-success', timeout: 3000});
   this.router.navigate(['/login']);
   return false;   
 }

 onAdminLogoutClick() {
   this.authService.adminLogout();
   this.flashMessage.show('Administrator now logged out', {cssClass: 'alert-success', timeout: 3000});
   this.router.navigate(['/admin']);
   return false;   
 }

The authService.adminLogout() and authService.userLogout() just clears the token stored in local storage.

I apologize in advance if the mistake that I've made is silly. I'm new to Angular.

how are you identifying if admin logged in or user logged in — Aravind, Mar 25 '17 at 21:13
Can you please explain whether authService.adminLoggedIn() and authService.userLoggedIn() return tokenNotExpired but you are testing on boolean true? May I also ask whether you maybe prefer to make the logic as part of the JS code rather than in the template? It does not seem to have a template impact. — Ben Dadsetan, Mar 25 '17 at 21:19
I have different components for admin and user login on the navbar of my landing page. — Shakir Jameel, Mar 25 '17 at 21:20
@BenDadsetan, I referred to https://github.com/auth0/angular2-jwt to learn about angular2-jwt In the section of Checking Authentication to Hide/Show Elements and Handle Routing they also check the condition in *ngIf, I even tried without testing it to boolean value but it still didn't work. Link - https://github.com/auth0/angular2-jwt#checking-authentication-to-hideshow-elements-and-handle-routing — Shakir Jameel, Mar 25 '17 at 21:23

score 27 · Accepted Answer · answered Mar 25 '17 at 21:21

27

You can move these multiline conditions and complex conditions to your component method as below

showLogout(){
    if(this.authService.userLoggedIn()== true && this.authService.adminLoggedIn() == false)
        return true;
    else
        return false;
}

Also, as the angular4 has *ngIf and else you can use it as

 <div *ngIf="showLogout();then userLogout else adminlogout"></div>

<ng-template #userLogout><a (click)="onUserLogoutClick()" href="#">Logout</a></li></ng-template>
<ng-template #adminlogout><a (click)="onAdminLogoutClick()" href="#">Logout</a></li></ng-template>

answered Mar 25 '17 at 21:21

Aravind

40,391
16
91
110

Why not simplify the `showLogout` *method*? `return this.authService.userLoggedIn() && !this.authService.adminLoggedIn()`. – developer033 Mar 25 '17 at 22:07
@Aravind, Your solution works, but when nobody is logged in, the nav-bar is still showing the logout link for (onAdminLogoutClick). The tokens that I generate for admin have the ID of 'admin_token', and the tokens for the user have the ID of 'user_token'. So when I call authService.adminLoggedIn() it returns tokenNotExpired('admin_token') and for authService.userLoggedIn() it returns tokenNotExpired('user_token'). This is how I determine whether the user or the administrator is logged in. – Shakir Jameel Mar 26 '17 at 08:50
You need to check if the token is available in your method – Aravind Mar 26 '17 at 08:53
So is every thing is fine or u need more help – Aravind Mar 26 '17 at 12:31
It's working now. I made some edits. Before checking the method that you suggested (showLogout()), I added another method (clientLoggedIn()) to check if someone (either user or admin) is logged in or not. The HTML code -

clientLoggedIn(){ if(localStorage.getItem('user_token')=== null && localStorage.getItem('admin_token')=== null) return false else return true Thanks, @Aravind. – Shakir Jameel Mar 26 '17 at 12:37
I don't, @Aravind! :) – Shakir Jameel Mar 26 '17 at 12:37
In angular 7, The buttons are not showing up even when the method returns true. Not sure whats wrong here. Any clue would be appreciated. Thanks! – Amit Feb 10 '19 at 18:52

score 4 · Answer 2 · answered Mar 25 '17 at 21:45

authService.userLoggedIn() or authService.adminLoggedIn() in your expression wouldn't keep your template informed about who is logged in as your function is invoked only once.

Try make them getter in your service:

  get userLoggedIn(): boolean {
    return this.who.user; // your logic
  }

Then in your template:

<li *ngIf="authService.userLoggedIn && !authService.adminLoggedIn"...

score 1 · Answer 3 · answered Aug 21 '20 at 06:51

1

I think should be create a boolean properties in component and using it. In stead of writing function or complex expression in template. Function in template reduce performance. Complex expression make it not readble and maintainable.

answered Aug 21 '20 at 06:51

Cao Thanh Hà

11
1

Angular 2- using *ngIf with multiple conditions

3 Answers3

Linked