title: Value parsed to observable before being subscribed to
body: <p>I have a service (data.service.ts) and a component (page.component.ts). </p>
  
  <p>In this data.service.ts service there is an observable called <code>changes$</code></p>
  
  <p>When I load my page it successfully gets the data from storage and parses (using .next()) to the observable. </p>
  
  <p>In my page.component.ts component it is subscribed to this observable, every following changes do get handled but the first one (on page load) does not. </p>
  
  <p>Why? My data.service.ts parses the data (using .next()) before the page.component.ts is subscribed to this <code>changes$</code> observable.</p>
  
  <p>What would be the best way to "wait" till the component is subscribed?</p>
  
  <p>I've found a workaround using <code>setTimeout(() =&gt; { ... }, 0)</code> but it doesn't feel right (if you know what I mean)</p>
  
  <p>Here is some code:</p>
  
  <p>data.service.ts: </p>
  
  <pre><code>export class DoorService implements OnDestroy {
      private data: DoorServiceData;
  
      private destroy$: Subject&lt;void&gt; = new Subject();
      private changesSubject$: Subject&lt;IDoorSettings&gt; = new Subject();
      // this way users cannot parse values to the subject. read-only...
      public changes$: Observable&lt;IDoorSettings&gt; = this.changesSubject$.asObservable().pipe(takeUntil(this.destroy$));
  
      constructor(){
          this.init();
      }
  
  
      // service initializer, set data etc. 
      private init() {
          setTimeout(() =&gt; {
              let savedData: DoorServiceData = this.getFromStorage();
              if(!savedData)
              {
                  savedData =  {settings: {usedInStore: false, isValid: false}};
              }
              this.data = savedData;
              this.changesSubject$.next(this.data.settings);
              console.log("DOOR SERVICE DATA SET");
          }, 0)
      }
  }
  </code></pre>
  
  <p>page.component.ts: </p>
  
  <pre><code>export class SearchComponent implements OnInit{
      public settings: IDoorSettings;
  
      constructor(public doorService: DoorService) {}
  
      ngOnInit(): void {
          this.watchSettings();
      }
  
      private watchSettings() {
          console.log("Watching settings");
          this.doorService.changes$.subscribe((val) =&gt; {
              this.settings = val;
          });
      }
  }
  </code></pre>
  
  <p>Using the chrome console I can tell it parses the data before the component is subscribed (<b>when I don't use the "setTimeout" workaround</b>)</p>
  
  <p>What would be the best way to handle this scenario? </p>
  
  <p>I've also tried the <code>async</code> pipe, but no luck there.</p>
  
  <p>Thanks in advance.</p>