Angular 2 Search
<p>I'm trying to use a search box to filter a list of items using Angular 2 but when I type stuff into the search box it never fires the search method on the service. I know I'm probably missing something simple but any help would be much appreciated.</p>

<p><strong>company.service.ts:</strong></p>

<pre><code>import { Injectable }    from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/toPromise';

import { CompanyModel } from './company';
import { CompaniesModel } from './company';

@Injectable()
export class CompanyService {

  private headers = new Headers({'Content-Type': 'application/json'});

  constructor(private http: Http) { }

  search(term: string): Observable&lt;CompaniesModel&gt; {
      console.log('search service', term);
      return this.http
          .get('/api/Company/Search/?search=' + term)
          .map((r: Response) =&gt; r.json().data as CompaniesModel);
  }
}
</code></pre>

<p><strong>companies.component.ts:</strong></p>

<pre><code>import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { FormControl } from '@angular/forms';

import { CompanyModel } from './company';
import { CompaniesModel } from './company';
import { CompanyService } from './company.service';

@Component({
  moduleId: module.id,
  selector: 'companies-list',
  templateUrl: 'companies.component.html'
})
export class CompaniesComponent implements OnInit {
    companiesModel: Observable&lt;CompaniesModel&gt;;
    private searchTerms = new Subject&lt;string&gt;();

  constructor(
      private companyService: CompanyService,
    private router: Router) { }

  search(term: string): void {
      this.searchTerms.next(term);
  }

  ngOnInit(): void {
      this.companiesModel = this.searchTerms
          .debounceTime(300) 
          .distinctUntilChanged()
          .switchMap(term =&gt; this.companyService.search(term));

  }

  gotoDetail(company: CompanyModel): void {
      let link = ['/company', company.Id];
      this.router.navigate(link);
  }
}
</code></pre>

<p><strong>companies.component.html</strong></p>

<pre><code>&lt;h2&gt;Companies&lt;/h2&gt;
&lt;div&gt;
    &lt;label&gt;Search: &lt;/label&gt;
    &lt;input #searchBox id="search-box" (keyup)="search(searchBox.value)" /&gt;
&lt;/div&gt;
&lt;div&gt;
    &lt;button (click)="create()"&gt;
        Add
    &lt;/button&gt;
&lt;/div&gt;
&lt;div *ngIf="companiesModel" class="grid grid-pad"&gt;
    &lt;ul&gt;
        &lt;li *ngFor="let company of companiesModel.Companies | async" (click)="gotoDetail(company)"&gt;
            &lt;div&gt;
                &lt;h4&gt;{{company.Name}}&lt;/h4&gt;
            &lt;/div&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>