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 on

Answer 1

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>

Answer 2

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

Answer 3

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.