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
– Aravind, Commented Mar 25, 2017 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
– Ben Dadsetan, Commented Mar 25, 2017 at 21:19
I have different components for admin and user login on the navbar of my landing page. — Shakir Jameel
– Shakir Jameel, Commented Mar 25, 2017 at 21:20
@BenDadsetan, I referred to 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 - github.com/auth0/… — Shakir Jameel
– Shakir Jameel, Commented Mar 25, 2017 at 21:23

Aravind · Accepted Answer · 2017-03-25 21:21:22Z

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, 2017 at 21:21

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

developer033 Over a year ago

Why not simplify the showLogout method? return this.authService.userLoggedIn() && !this.authService.adminLoggedIn().

Shakir Jameel Over a year ago

@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.

Aravind Over a year ago

You need to check if the token is available in your method

Aravind Over a year ago

So is every thing is fine or u need more help

Shakir Jameel Over a year ago

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 - <div *ngIf="clientLoggedIn()"> <div *ngIf="showLogout();then userLogout else adminLogout"></div> <ng-template.... </ng-template> </div> clientLoggedIn(){ if(localStorage.getItem('user_token')=== null && localStorage.getItem('admin_token')=== null) return false else return true Thanks, @Aravind.

|

bob · Accepted Answer · 2017-03-25 21:45:36Z

4

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"...

answered Mar 25, 2017 at 21:45

bob

2,7641 gold badge32 silver badges46 bronze badges

Comments

Cao Thanh Hà · Accepted Answer · 2020-08-21 06:51:27Z

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, 2020 at 6:51

Cao Thanh Hà

111 bronze badge

Collectives™ on Stack Overflow

Angular 2- using *ngIf with multiple conditions

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related