title: Angular data loss on reload using BehaviorSubject
body: <p>I'm using a data service to send the user data to the app and display the username in my header component. If I sign in in my app with login component the username is correctly displayed, but when I reload the page the user data disappears.</p>
  <p><strong>on login Before reload</strong></p>
  <p><a href="https://i.stack.imgur.com/UQiJi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UQiJi.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/KbSLe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KbSLe.png" alt="enter image description here" /></a></p>
  <p><strong>after reload</strong></p>
  <p><a href="https://i.stack.imgur.com/HZY4n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HZY4n.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/INNBH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/INNBH.png" alt="enter image description here" /></a></p>
  <p>the user data comes from a data service that use a BehaviorSubject:</p>
  <p><strong>data.service.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>    export class DataService {
      
        private userSource = new BehaviorSubject({});
        currentUser = this.userSource.asObservable().pipe(distinctUntilChanged());
      
        constructor(private injector: Injector, private api: UtentiApiService) { }
      
        getUser() {
          return this.currentUser;
        }
      
        getUserFromToken() {
          const authService = this.injector.get(AuthService);
          const token = authService.getToken();
          const userIdToken = jwt_decode(token);
          // console.log(userIdToken);
          return this.api.getUtente(userIdToken.userId);
        }
      
        getPermissionsFromToken(): Observable&lt;any&gt; {
          const authService = this.injector.get(AuthService);
          const token = authService.getToken();
          const userIdToken = jwt_decode(token);
      
          return of(userIdToken.permArr);
        }
        changeUser(user: object) {
          this.userSource.next(user);
        }
      
      }
  </code></pre>
  <p>in header component I consume the service:</p>
  <p><strong>header.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>    export class HeaderComponent implements OnInit {
        user: object;
      
        constructor(private router: Router, private authService: AuthService, private data: DataService) { }
      
      
        ngOnInit() {
          this.getUser();
        }
      
        getUser() {
          this.data.getUser().subscribe(utente =&gt; {
            this.user = utente;
            console.log(this.user);
          });
        }
      
        onLogout() {
          this.authService.logoutUser();
        }
      
        sendUser(user) {
          this.data.changeUser(user);
        }
      }
  </code></pre>
  <p>in the login component I send the user data to the data service, but on reload the login component is not fired, so I have no user data in the service nor in the header. How can I fix this bug?</p>
  <p>Here a stackblitz with the full code: <a href="https://stackblitz.com/github/ufollettu/SEANSA" rel="nofollow noreferrer">https://stackblitz.com/github/ufollettu/SEANSA</a></p>
  <p>Thank you for help</p>