title: Angular 2 - http.get never being call
body: <p>Im learning Angular 4 and have run into a problem that I cannot seem to find a solution to. Here is the context:
  I have a simple app that displays info about US Presidents. 
  The backend is a rest API provided by webapi...this works fine.
  The front end is an Angular app.</p>
  
  <p>Ive distilled the problem down to 3 components, 1 data service and 1 model.
  Here is the model:</p>
  
  <pre><code>export class President {
    constructor(
      public id: number,
      public presidentName: string,
      public presidentNumber: number,
      public yearsServed: string,
      public partyAffiliation: string,
      public spouse: string) {}
  }
  </code></pre>
  
  <p>The 3 components are
  1. SearchComponent
  2. HomeComponent
  3. PresidentComponent</p>
  
  <p>When the app bootstraps, it loads the ApplicationComponent - it is the root component:</p>
  
  <pre><code>import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
      selector: 'my-app',
      template: `
          &lt;search-component&gt;&lt;/search-component&gt;
          &lt;home-component&gt;&lt;/home-component&gt;
      `
  })
  export class ApplicationComponent  {}
  </code></pre>
  
  <p>PresidentComponent is a child component of HomeComponent. When home component loads, it makes an http call to the api to get a list of presidents and renders 1 presidentComponent for each row returned. This works fine.</p>
  
  <p>What Im trying to do is implement a search feature where the dataService exposes an EventEmitter and provides the search method as shown here:</p>
  
  <pre><code>import { Injectable, EventEmitter, Output } from '@angular/core'
  import { President } from '../models/President'
  
  import { Http } from '@angular/http';
  import 'rxjs/add/operator/toPromise';
  import 'rxjs/add/operator/map';
  import { Observable } from 'rxjs/Observable';
  
  @Injectable()
  export class DataService {
  
      constructor(private http: Http) {
      }
  
      searchEvent: EventEmitter&lt;any&gt; = new EventEmitter();
  
      // simple property for the url to the api
      get presidentUrl {
          return "http://localhost:51330/api/presidents";
      }
  
      search(params: any): Observable&lt;President[]&gt; {
          let encParams = encodeParams(params);
          console.log(encParams);
          return this.http
            .get(this.presidentUrl, {search: encParams})
            .map(response =&gt; response.json());
      }
  
  
      getParties(): String[] {
          return ['Republican', 'Democrat', 'Federalist', 'Whig', 'Democratic-Republican', 'None'];
      }
  
      getPresidents(): Observable&lt;President[]&gt; {
          return this.http.get(this.presidentUrl)
                          .map(response =&gt; response.json());
      }
  
  }
  
  /**
   * Encodes the object into a valid query string.
   * this function is from the book Angular2 Development with TypeScript
   */
  function encodeParams(params: any): URLSearchParams {
      return Object.keys(params)
        .filter(key =&gt; params[key])
        .reduce((accum: URLSearchParams, key: string) =&gt; {
          accum.append(key, params[key]);
          return accum;
        }, new URLSearchParams());
    }
  </code></pre>
  
  <p>The Search Component houses the search form and when the search button is clicked, it executes the onSearch() function and calls emit on the data service:</p>
  
  <pre><code>onSearch(){
              if(this.formModel.valid){
                  console.log('emitting event from search.ts');
                  this.dataService.searchEvent.emit(this.formModel.value);
              }
          }
  </code></pre>
  
  <p>Then, in the HomeComponent, I want to subscribe to this event and execute a search via the dataservice when it fires:</p>
  
  <pre><code> ngOnInit(): void {
          //when component loads, get list of presidents
          this.dataService.getPresidents()
          .subscribe(
              presidents =&gt; {
                  console.log('sub');
                  this.presidents = presidents;
  
              },
              error =&gt; console.error(error)
          )
  
      //when search event is fired, do a search
      this.dataService.searchEvent
          .subscribe(
              params =&gt; {
                  console.log('in home.ts subscribe ' + JSON.stringify(params));
                  this.result = this.dataService.search(params);
              },
              err =&gt; console.log("cant get presidents. error code: %s, URL: %s"),
              () =&gt; console.log('done')
          );
      }
  </code></pre>
  
  <p>When I run this in the browser, everything works except the http call is never executed. If I subscribe() to the http.get call in the dataservice itself, it executes but why should I have to do that when I have a subscription being setup on the HomeComponent?
  I want to handle the Observable in the HomeComponent and update the list of presidents that is being displayed in the UI based on the search result.
  Any advice is greatly appreciated.</p>