title: Angular 2 RxJS Observable Skipping Subscribe on First Call
body: <p>I'm using a shared service to communicate between a number of components which reside within a modal window, and I'm attempting to get a value which is set within the modal in the component within which it resides.</p>
  
  <p>However, when I subscribe to the getSelectedSourceField function in my service, it skips over the subscribe the first time a user selects a source in the modal, but subsequent times it works as expected (i.e. returning the selected field in the success callback).</p>
  
  <p>Any thoughts?</p>
  
  <p>My service:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Subject } from 'rxjs/Subject';
  import { Observable } from 'rxjs/Observable';
  import { Source, SourceField } from '../source/source';
  import { DataService } from './dataService';
  
  @Injectable()
  export class SFieldSelectService {
  private selectedSource: Source = null;
  private selectedSourceField: SourceField = null;
  private filteredSourceFields: SourceField[] = [];
  
  private selectedSourceSubj = new Subject&lt;Source&gt;();
  private selectedSourceFieldSubj = new Subject&lt;SourceField&gt;();
  private filteredSourceFieldsSubj = new Subject&lt;SourceField[]&gt;();
  private hasSourceFieldSubj = new Subject&lt;boolean&gt;();
  
  //Source methods
  setSelectedSource(source: Source) {
      this.selectedSource = source;
      this.selectedSourceSubj.next(source);
  
      //Set the availabel source fields
      this._dataService.GetSingle('SourceSelect', this.selectedSource["sourceId"])
          .subscribe(sourceFields =&gt; {
              this.filteredSourceFields = sourceFields
              this.filteredSourceFieldsSubj.next(sourceFields);
          });   
  
      this.hasSourceFieldSubj.next(false);
  }
  getSelectedSource(): Observable&lt;Source&gt; {
      return this.selectedSourceSubj.asObservable();
  }
  
  //Sourcefield methods
  setSelectedSourceField(sourceField: SourceField) {
      this.selectedSourceField = sourceField;
      this.selectedSourceFieldSubj.next(sourceField);
  
      this.hasSourceFieldSubj.next(true);
  }
  getSelectedSourceField(): Observable&lt;SourceField&gt; {
      return this.selectedSourceFieldSubj.asObservable();
  }
  
  //Filtered sourcefields
  getFilteredSourceFields(): Observable&lt;SourceField[]&gt; {
      return this.filteredSourceFieldsSubj.asObservable();
  }
  
  //Whether or not the modal has a selected sourcefield
  hasSelectedSourceField(): Observable&lt;boolean&gt; {
      return this.hasSourceFieldSubj.asObservable();
  }
  
  constructor(private _dataService: DataService) {}
  }
  </code></pre>
  
  <p>Component where I'm subscribing:</p>
  
  <pre><code>import { Component, ViewChild, OnInit } from '@angular/core';
  import { DataService } from '../../services/dataService';
  import { Response, Headers } from '@angular/http';
  import { Condition } from '../transformation';
  import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
  import { SourceFieldListComponent } from '../../source/selection/sourcefield-list.component';
  import { SourceListComponent } from '../../source/selection/source-list.component';
  import { SFieldSelectService } from '../../services/source-select.service';
  
  @Component({
      selector: 'condition-addedit',
      templateUrl: 'app/transformation/condition/condition-addedit.component.html',
      providers: [DataService, SFieldSelectService]
  })
  export class ConditionAddEditComponent implements OnInit {
      active: boolean = true;
      condSeqCount = 1;
      selectingCondition: Condition;
      hasSelectedSourceField: boolean = false;
  
      //List of Conditions currently in the add/edit list
      public conditions: Condition[] = [];
  
      //Modal Functions
      closeResult: string;
      openSourceSelect(content, condition) {
          this.selectingCondition = condition;
          this.modalService.open(content, { size: 'lg' }).result.then((result) =&gt; {
              //User selected source field in modal
              if (result == 'Select SField') {
                  this.selectService.getSelectedSourceField()
                      .subscribe(sourceField =&gt; { &lt;--- SKIPS THIS THE FIRST TIME BUT NOT AFTER
                          alert(sourceField.name);
                          this.selectingCondition.sourceField = sourceField
                      }
                  , (error) =&gt; alert(error));
              }
          }, (reason) =&gt; {
              this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
          });
      }
  
      private getDismissReason(reason: any): string {
          if (reason === ModalDismissReasons.ESC) {
              return 'by pressing ESC';
          } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
              return 'by clicking on a backdrop';
          } else {
              return `with: ${reason}`;
          }
      }
  
      //Add a new condition to the list of conditions
      addCondition() {
          this.conditions.push(new Condition(this.condSeqCount++, (this.condSeqCount == 1) ? '' : 'or', '', '', '', '', null));
      }
  
      constructor(private _dataService: DataService, private modalService: NgbModal, private selectService: SFieldSelectService) {}
      ngOnInit(): void {
          this.selectService.hasSelectedSourceField().subscribe(hasSelectedSourceField =&gt; this.hasSelectedSourceField = hasSelectedSourceField);
      }
  }
  </code></pre>