I have a bootstrap navbar, on the right side of navigation bar, i have some links like login,logout, register I put it on my appponent.html.ts

<div class="navbar-collapse collapse">
// Here i check if user is authenticated, display : Hello [email protected]
<ul *ngIf="user" class="nav navbar-nav navbar-right">
          //code in here
</ul>
// If user is not authenticated, display Login - Register
<ul *ngIf="!user"  class="nav navbar-nav navbar-right">
  <li><a routerLink="/register" id="registerLink">Register</a></li>
  <li><a routerLink="/login" id="loginLink">Log in</a></li>
</ul>     

In loginponent.ts i call my Authen.Service.ts to get token that is store on localStorage

import { UrlConstants } from './core/mon/url.constants';
import { LoggedInUser } from './core/domain/loggedin.user';
import { SystemConstants } from './core/mon/system.constants';


@Component({
  selector: 'app-login',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './loginponent.html',
  styleUrls: ['./loginponent.css']
})
    export class LoginComponent implements OnInit {
      public user: any;
      private isLoggedIn = false;


  loginUser(valid: boolean) {
    this.loading = true;
    if (valid) {
      const userData = {
        username: this.form.controls.username.value,
        password: this.form.controls.password.value
      }

      this._authenService.login(userData.username, userData.password).subscribe(data => {
        this.user = JSON.parse(localStorage.getItem(SystemConstants.CURRENT_USER));
        // If success redirect to Home view
        this._router.navigate([UrlConstants.HOME]);
      }, error => {
        this.loading = false;
      });

    }
  }  
  ngOnInit() {

  }

}

Here is my Authen.Service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import 'rxjs/add/operator/map';

import { SystemConstants } from '../mon/system.constants';
import { LoggedInUser } from '../domain/loggedin.user';


@Injectable()
export class AuthenService {

  constructor(private _http: Http) {
  }

  login(username: string, password: string) {
    let body = "userName=" + encodeURIComponent(username) +
      "&password=" + encodeURIComponent(password) +
      "&grant_type=password";
    let headers = new Headers();
    headers.append("Content-Type", "application/x-www-form-urlencoded");
    let options = new RequestOptions({ headers: headers });

    return this._http.post(SystemConstants.BASE_API + '/api/oauth/token', body, options).map((response: Response) => {
      let user: LoggedInUser = response.json();
      if (user && user.access_token) {
        localStorage.removeItem(SystemConstants.CURRENT_USER);
        localStorage.setItem(SystemConstants.CURRENT_USER, JSON.stringify(user));
      }
    });
  }

  logout() {
    localStorage.removeItem(SystemConstants.CURRENT_USER);
  }

  isUserAuthenticated(): boolean {
    let user = localStorage.getItem(SystemConstants.CURRENT_USER);
    if (user != null) {
      return true;
    }
    else
      return false;
  }

Here is my appponent.ts

    export class AppComponent implements OnInit {

    // the user object got from localStore 
    ngOnInit() {
        this.user = JSON.parse(localStorage.getItem(SystemConstants.CURRENT_USER));
        console.log(this.user);
      }
}

The problem i got is i cant update the navbar to change in right state (It still work, i have the token but i have to refresh the whole page to update the nav bar)

How can i update the navigation bar in angular way? Thanks

I have a bootstrap navbar, on the right side of navigation bar, i have some links like login,logout, register I put it on my app.ponent.html.ts

<div class="navbar-collapse collapse">
// Here i check if user is authenticated, display : Hello [email protected]
<ul *ngIf="user" class="nav navbar-nav navbar-right">
          //code in here
</ul>
// If user is not authenticated, display Login - Register
<ul *ngIf="!user"  class="nav navbar-nav navbar-right">
  <li><a routerLink="/register" id="registerLink">Register</a></li>
  <li><a routerLink="/login" id="loginLink">Log in</a></li>
</ul>     

In login.ponent.ts i call my Authen.Service.ts to get token that is store on localStorage

import { UrlConstants } from './core/mon/url.constants';
import { LoggedInUser } from './core/domain/loggedin.user';
import { SystemConstants } from './core/mon/system.constants';


@Component({
  selector: 'app-login',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './login.ponent.html',
  styleUrls: ['./login.ponent.css']
})
    export class LoginComponent implements OnInit {
      public user: any;
      private isLoggedIn = false;


  loginUser(valid: boolean) {
    this.loading = true;
    if (valid) {
      const userData = {
        username: this.form.controls.username.value,
        password: this.form.controls.password.value
      }

      this._authenService.login(userData.username, userData.password).subscribe(data => {
        this.user = JSON.parse(localStorage.getItem(SystemConstants.CURRENT_USER));
        // If success redirect to Home view
        this._router.navigate([UrlConstants.HOME]);
      }, error => {
        this.loading = false;
      });

    }
  }  
  ngOnInit() {

  }

}

Here is my Authen.Service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import 'rxjs/add/operator/map';

import { SystemConstants } from '../mon/system.constants';
import { LoggedInUser } from '../domain/loggedin.user';


@Injectable()
export class AuthenService {

  constructor(private _http: Http) {
  }

  login(username: string, password: string) {
    let body = "userName=" + encodeURIComponent(username) +
      "&password=" + encodeURIComponent(password) +
      "&grant_type=password";
    let headers = new Headers();
    headers.append("Content-Type", "application/x-www-form-urlencoded");
    let options = new RequestOptions({ headers: headers });

    return this._http.post(SystemConstants.BASE_API + '/api/oauth/token', body, options).map((response: Response) => {
      let user: LoggedInUser = response.json();
      if (user && user.access_token) {
        localStorage.removeItem(SystemConstants.CURRENT_USER);
        localStorage.setItem(SystemConstants.CURRENT_USER, JSON.stringify(user));
      }
    });
  }

  logout() {
    localStorage.removeItem(SystemConstants.CURRENT_USER);
  }

  isUserAuthenticated(): boolean {
    let user = localStorage.getItem(SystemConstants.CURRENT_USER);
    if (user != null) {
      return true;
    }
    else
      return false;
  }

Here is my app.ponent.ts

    export class AppComponent implements OnInit {

    // the user object got from localStore 
    ngOnInit() {
        this.user = JSON.parse(localStorage.getItem(SystemConstants.CURRENT_USER));
        console.log(this.user);
      }
}

The problem i got is i cant update the navbar to change in right state (It still work, i have the token but i have to refresh the whole page to update the nav bar)

How can i update the navigation bar in angular way? Thanks

• javascript
• html
• css
• angular
• typescript

• Given html code is in login.ponent.html? – Maciej Treder Commented Jun 25, 2017 at 14:31
• No, it's in app.ponent.html, i have login.ponent.html as well, it in another module, i want to navigate to home page which is app.ponent.html if login success and change the navbar something like Hello, abc@ – mkzpizza Commented Jun 25, 2017 at 14:38
• Does you provide user value to app ponent? Can you attach code of app.ponent? – Maciej Treder Commented Jun 25, 2017 at 14:40
• ment the line changeDetection: ChangeDetectionStrategy.OnPush, and than try and let us know if it works. – Dhyey Commented Jun 25, 2017 at 14:43
• sorry, it's not working, only if i refresh the whole page it work – mkzpizza Commented Jun 25, 2017 at 14:47

2 Answers 2

As i understood your problem it is: How to hide "login" link located on main ponent after user signed himself in

I can think about solution like following:

Inside your AuthService you can add public boolean member "isLoggedIn":

  @Injectable()
  export class AuthService {
     isLoggedIn = false;
  }

You can share this service between ponents

Inside login ponent you can set isLoggedIn to true after successful login

login(){

 this.auth.isLoggedIn = true

}

In your app.ponent you can subscribe to NavigationEnd event of the router :

 export class AppComponent {
  constructor(
  private router: Router, private auth:AuthService){}

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event.constructor.name === "NavigationEnd") {
       this.isLoggedin = this.auth.isLoggedIn;
      }
    })
  }

}

And then, in app ponent template you can show "login" menu with *ngIf="!isLoggedin"

here is plunker hope it helps...

In the AuthenService, use a BehaviorSubject to municate changes in the user's authentication status. Subscribe to this in the AppComponent and update the user variable accordingly. The navigation bar will update automatically without needing a page refresh.

1. inside AuthenService, declare a BehaviorSubject:

   private userSubject = new BehaviorSubject<LoggedInUser>(null); user$: Observable<LoggedInUser> = this.userSubject.asObservable();

2. inside login and logout methods, emit a new value for the userSubject:

   this.userSubject.next(user)

3. inside AppComponent, subscribe to the user$ observable and update the user variable:

   this.authenService.user$.subscribe(user => this.user = user)

whenever the user logs in or out, the user variable in AppComponent will automatically be updated and the navigation bar will reflect the current state.