title: Filter Observable array based on FormControl value changes
body: <p>I'm trying to use <code>Observable</code>s to render two lists of items. One with the complete result, and one with a filtered result.</p>
  
  <p>I have this component:</p>
  
  <pre><code>@Component({
      template: `
          &lt;div *ngFor="let item of items | async"&gt;
              &lt;span&gt;{{item.name}}&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;input [formControl]="filterControl" /&gt;
          &lt;div *ngFor="let item of filteredItems | async"&gt;
              &lt;span&gt;{{item.name}}&lt;/span&gt;
          &lt;/div&gt;
      `
  })
  export class TestComponent implements OnInit {
      private filterControl = new FormControl();
      private items: Observable&lt;Item[]&gt;;
      private filteredItems: Observable&lt;Item[]&gt;;
  
      ngOnInit() {
          this.items = this.dataService.get("items");
  
          this.filteredItems = this.filterControl.valueChanges
          .debounceTime(300)
          .distinctUntilChanged()
          .combineLatest(this.items, (filterValue, items) =&gt; {
              return items.filter((item: any) =&gt; item.name.toLowerCase().indexOf(filterValue.toLowerCase()) !== -1);
          });
      }
  }
  </code></pre>
  
  <p>The code will only send one http request, not one per typed filter letter, which is good. The problem is however that no filtered items will show until <code>filterControl</code> emits its first value (when I type something in the <code>input</code>). </p>
  
  <p>Is there a way to set a default value, or a better way to solve a problem like this?</p>