title: Getting undefined values from subscribing to BehaviorSubject returned as Observable
body: <p>So I want to put the name of the currently logged in user in the header. Right now, I can do it with login but if ever I refresh the page, I will lost the value which I found out is a normal behavior in SPA.(The data is still in the local storage though) So I created a function that would get again the currently logged in user in local storage and store it in my auth service. I'm doing this in the ngOnInit() of header component. However, I am getting undefined values. From what I understand, it should return the last value since I am subscribed to it. Besides, I am re-assigning the values first before I get it from the service.</p>
  
  <p><strong>auth service</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  import { Observable } from 'rxjs/Observable';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  
  import { CurrentUserInterface } from '../interfaces/current-user.interface';
  
  @Injectable()
  export class AuthenticationService {
  private rootUrl = 'testapi.com';
  
  private currentUser = new BehaviorSubject&lt;CurrentUserInterface&gt;();
  private isAuthorized: BehaviorSubject&lt;boolean&gt; = new BehaviorSubject(false);
  
  constructor(private http: HttpClient) { }
  
  setCurrentUser(): void {
      if(localStorage.getItem("currentUser")) {
          this.currentUser.next(JSON.parse(localStorage.getItem("currentUser")));
          this.isAuthorized.next(true);
      }
      else {
          this.isAuthorized.next(false);
      }
      console.log(this.currentUser.value); **//HAS VALUES**
  }
  
  getCurrentUser(): Observable&lt;CurrentUserInterface&gt; {
      return this.currentUser.asObservable();
  }
  
  checkAuth(): Observable&lt;boolean&gt; {
      return this.isAuthorized.asObservable();
  }
  }
  </code></pre>
  
  <p><strong>header component</strong></p>
  
  <pre><code>    import { Component, OnInit } from '@angular/core';
      import { Router } from '@angular/router';
  
      import { Observable } from 'rxjs/Observable';
  
      import { AuthenticationService } from '../_shared/services/authentication.service';
  
      import { CurrentUserInterface } from '../_shared/interfaces/current-user.interface';
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
  })
  export class HeaderComponent implements OnInit {
  
    private currentUser = new Observable&lt;CurrentUserInterface&gt;;
    private isAuthorized: Observable&lt;boolean&gt; = false;
  
    constructor(private router: Router,
        private authenticationService: AuthenticationService) { }
  
    ngOnInit() {
        this.authenticationService.setCurrentUser();
        this.isAuthorized = this.authenticationService.checkAuth()
        .subscribe(
            isAuthorized =&gt; {
                this.isAuthorized = isAuthorized;
            },
            error =&gt; {
                console.log(error);
            }
        );
  
        this.currentUser = this.authenticationService.getCurrentUser()
        .subscribe(
            currentUser =&gt; {
                this.currentUser = currentUser;
            },
            error =&gt; {
                console.log(error);
            }
        );
  
        console.log(this.currentUser.value); **// UNDEFINED**
        console.log(this.isAuthorized.value); **// UNDEFINED**
     }
  
     logout() {
            this.authenticationService.logout();
            this.router.navigate(['../login'], { relativeTo: this.route });
     }
  
  }
  </code></pre>