Angular 4 dynamic headers based on user type

Question

I'm trying to implement a dynamic header component which changes based on user role.

Here is my header component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
    currentUser:any;
  constructor(

  ) {
     this.currentUser = JSON.parse(localStorage.getItem('currentUser')); 

  }

  ngOnInit() {

  }

}

This is my header template

<nav class="navbar navbar-default" >
 <div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav navbar-right">
    <li class="menu_item" *ngIf="!currentUser"><a [routerLink]="['/login']"> Login </a></li>
    <li class="menu_item" *ngIf="currentUser"><a [routerLink]="['/signin']">Logout</a></li>
  </ul>
</div>
</nav>

But the problem is

• after logged in, that header text is not changing ( not changing login -> logout )
• after logout, that header text is not changing ( not changing logout -> login )
• But it change the header text if I refresh the page. But not changing automatically with the route change

Can anyone help me on this ?

Answer 1

You need to let the HeaderComponent know that the authentication status has changed. You could use an observable for this:

1. introduce isAuthenticated$ observable inside AuthService

2. inject that service in HeaderComponent, and use the isAuthenticated$ inside the template, with async pipe

3. when logging in/out, call next() on that observable to trigger changes

Something like this should do the job:

class AuthService {

    isAuthenticated$ = new BehaviorSubject<boolean>(false);

    constructor() {
        const authenticated = !!JSON.parse(localStorage.getItem('currentUser')); 
        this.isAuthenticated$.next(authenticated);
    }

    login() {
        this.isAuthenticated$.next(true);
    }

    logout() {
        this.isAuthenticated$.next(false);
    }

}

Header component controller:

class HeaderComponent implements OnInit {

  public currentUser: any;
  public isAuthenticated$ = this.auth.isAuthenticated$;

  private (private auth: AuthService) {}

  ngOnInit() {
    this.isAuthenticated$.subscribe(authenticated => {
      if (authenticated) {
        this.currentUser = JSON.parse(localStorage.getItem('currentUser')); 
      } else {
        this.currentUser = null;
      }
    });
  }

}

Your template:

<nav class="navbar navbar-default" >
  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav navbar-right">
      <li class="menu_item" *ngIf="!(isAuthenticated$ | async)"><a [routerLink]="['/login']"> Login </a></li>
      <li class="menu_item" *ngIf="(isAuthenticated$ | async) && currentUser.someField === 'someValue'"><a [routerLink]="['/signin']">Logout</a></li>
    </ul>
  </div>
</nav>

Answer 2

Please use ng-template

  `  <ul class="navbar-nav">
                <ng-template #anonymousUser>
                  <li class="nav-item">
                    <a class="nav-link" routerLink="/login">Login</a>
                  </li>
                </ng-template>

                <li ngbDropdown *ngIf="appUser ;else anonymousUser " class="nav-item dropdown ">
                  <a ngbDropdownToggle class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    {{appUser.name}}</a>
                  <div ngbDropdownMenu class="dropdown-menu " aria-labelledby="dropdown01">
                    <a class="dropdown-item" routerLink="/my/orders">My Orders</a>
                    <ng-container *ngIf="appUser.isAdmin">
                      <a class="dropdown-item" routerLink="/admin/orders">Manage Order</a>
                      <a class="dropdown-item" routerLink="/admin/products">Manage Products</a>
                    </ng-container>

                    <a class="dropdown-item" (click)=logOut()>Log Out</a>
                  </div>
                </li>
              </ul>`