title: Angular BehaviorSubject usage in service and component, possible race condition
body: <p>I'm sure this is an easy problem, I just don't know where to pinpoint it.
  I have an UserProfile service that creates a BehaviorSubject for the userdata.
  When I log in I use this service to broadcast the userdata.
  Once logged in I subscribe to this userdata in my Dashbord component. But the userdata observable is only returning the first empty object when I first created the BehaviorSubject. It is as if the login function that pushes the new data with .next() is only running after the dashboard subscribed to the BehaviourSubject. I tried putting the subscribe of my dashboard in ngAfterContentInit() so that the .next() runs before the subscription, but I'm still getting a blank object. If I run a .next() via set_new_data() function within my dashbord to check if the observable work, I get the data passed by .next(); But I don't get the data my login-component set via the set_userdata() function within my service. </p>
  
  <p>Can we not share data like this using a service? Is the service destroyed after leaving the login component or what is happening?</p>
  
  <p>My USerProfile Service:</p>
  
  <pre><code>@Injectable()
  export class UserProfileService {
      public isLoggedIn: boolean = false;
      public userdata: BehaviorSubject&lt;any&gt; = new BehaviorSubject&lt;any&gt;({});
  
      constructor() {
  
      }
  
      public set_userdata(data) {
          // this.userdata = data;
          console.log(this.userdata);
          if (this.userdata === undefined) {
              console.log(data);
              //this.userdata = new BehaviorSubject&lt;any[]&gt;(data);
              console.log(this.userdata);
          } else {
              console.log(this.userdata);
              this.userdata.next(data);
          }
  
      }
  }
  </code></pre>
  
  <p>My Dashbord Component:</p>
  
  <pre><code>@Component({
      selector: 'dashboard',
      styleUrls: ['./dashboard.scss'],
      templateUrl: './dashboard.html'
  })
  export class Dashboard {
      public isLoggedIn: boolean;
      public curr_user: object;
  
      constructor(private _appGlobals: AppGlobals, private _user: UserProfileService) {
          this._appGlobals.isUserLoggedIn.subscribe(value =&gt; this.isLoggedIn = value);
          // this.curr_user = _user.userdata;
      }
  
      ngAfterContentInit() {
          console.log("this executes first");
          this._user.userdata.subscribe(value =&gt; {
              this.curr_user = value;
              console.log(value);
          });
      }
  
      set_new_data() {
          let obj = {
              name: "test",
              age: 45
          };
          this._user.userdata.next(obj);
      }
  }
  </code></pre>
  
  <p>My Console output, (shows empty object: {}, expected the userdata)</p>
  
  <p><a href="https://i.stack.imgur.com/KzNsZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KzNsZ.png" alt="enter image description here"></a></p>