title: Angular - When observable is complete, do something
body: <p>I have a 2 part process that I am working with. </p>
  
  <p><strong>Component 1</strong> allows me to import a list of usernames and submit it to a service. That service then returns the user profile data which I use in <strong>Component 2</strong>.</p>
  
  <p>My issue is that I am trying to do something when I receive the data back from the observable I am subscribed to but it doesn't appear to be firing.</p>
  
  <p><strong>Component 1:</strong></p>
  
  <pre><code>import { Component, EventEmitter, NgModule, OnInit, Output } from '@angular/core';
  import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
  import { MassEmpService } from "app/mass-change/shared/mass.service";
  import { Observable } from 'rxjs/Observable';
  
  @Component({
      selector: 'app-import-list',
      templateUrl: './import-list.component.html',
      styleUrls: ['./import-list.component.css'],
  })
  export class ImportListComponent implements OnInit {
  
      // Define the data types used for the import list
      importForm: FormGroup;
      message: {};
      error: string;
  
      constructor(
          private fb: FormBuilder,
          private _massEmpService: MassEmpService
      ) {
      }
  
      ngOnInit() {
          this.createForm();
      }
  
      // Generate the form
      createForm() {
          this.importForm = this.fb.group({
              dataType: ['-1', Validators.required],
              data: ['', Validators.required]
          });
      }
  
      // Process the data for the form
      onProccess(data) {
  
          // Define our vars
          let i: number;
          const dat: string = data.data.split('\n');
          const dataType: string = data.dataType;
          const validArray = [];
          const invalidArray = [];
  
          // Loop over each line
          for (i = 0; i &lt; dat.length; i++) {
              // Validate our data point
              if (this.validateData(dataType, dat[i])) {
                  validArray.push(dat[i]);
              } else {
                  invalidArray.push(dat[i]);
              }
          }
  
          // Do we have any invalid data?
          if (invalidArray.length) {
              this.renderMessage('danger', 'fa-warning', 'Oops! Please check for invalid data.', false);
          } else {
              // Receive the data based on the imported criteria.
              this._massEmpService.processImport(dataType, validArray)
                  .subscribe(
                      data =&gt; { this._massEmpService.fetchImportedResults(data); },
                      error =&gt; { this.error = error.statusText; }
                  );
  
          }
      }
  ... Other Code Here ...
  }
  </code></pre>
  
  <p><strong>Component 2:</strong></p>
  
  <pre><code>export class EmployeeSelectionComponent implements OnInit {
  
      // Define our search results
      public searchResults: ImportResults[] = [];
  
      constructor(
          private _massEmpService: MassEmpService
      ) {
      }
  
      ngOnInit() {
          this.fetchData();
      }
  
      fetchData() {
          // Push our results to the array if they don't already exist
          this._massEmpService.importedResults
          .subscribe(
              data =&gt; {
                  this.searchResults.push(...data);
                  console.log('I made it here');
              },
              () =&gt; {
                  console.log('.. but not here');
              }
          );
      }
  }
  </code></pre>
  
  <p><strong>Service:</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response, Headers } from '@angular/http';
  import { RouterLink } from '@angular/router';
  import { FrameworkService } from '@aps/framework';
  import { Observable } from 'rxjs/Observable';
  import { Subject } from 'rxjs/Subject';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/catch';
  
  @Injectable()
  export class MassEmpService {
  
      // API URL
      baseUrl = 'https://internal/api';
  
      // Define the token headers for the service calls
      headers: Headers = new Headers({
          "Authorization": this._frameworkService.getSessionInfo().token
      });
  
      // Create a subject to observe the results and changes over time
      public importedResults = new Subject&lt;any&gt;();
      public transitionFields = new Subject&lt;any&gt;();
  
      constructor(
          private _http: Http,
          private _frameworkService: FrameworkService
      ) { }
  
      // Given a dataset, return the users based on data points submitted
      processImport(dataType, dataSet): Observable&lt;any&gt; {
          return this._http.post(this.baseUrl + '/fetchEmployeesFromImport', { "dataType": dataType, "data": dataSet }, { "headers": this.headers })
              .map((result: Response) =&gt; result.json())
              .share()
              .catch(this.handleError);
      };
  
      // Pass the data received from the import process through our subject to observe
      fetchImportedResults(data){
          this.importedResults.next(data);
      }
  
  }
  </code></pre>
  
  <p><strong>The Question:</strong></p>
  
  <p>In <code>component 2</code>, I am trying to check when I get data back so I can do something else in that component. I don't seem to reach the completed part of the observable though.</p>
  
  <p>Any thoughts as to what I am doing wrong?</p>