title: Angular Observable error handling
body: <p>I'm following Angular tutorial to build a simple app. The app sends ajax to search users when I type terms in the input box. I'm confused with the Observable here. </p>
  
  <p><code>(1)</code> I want to clear the data if the search term is shorter than 3 words. I use <code>Observable.of</code> to return an empty array. </p>
  
  <p><code>(2)</code> An empty array also will be returned in <code>catch</code> block if a http error occurs.</p>
  
  <p>However after one of these two cases, it seems the stream 'stops' because I point <code>this.users</code> to a new Observable. Should I do something like <code>this.users = new Subject()</code> again? What's the correct way to do it here?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;input #searchBox id="search-box" (keyup)="search(searchBox.value)" /&gt;
      &lt;div class="loader" [hidden]="!loading"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>getUserService: </p>
  
  <pre><code>//Sending ajax, return an Observable
  </code></pre>
  
  <p>component:</p>
  
  <pre><code>export class searchComponent implements OnInit {
  
    constructor(private getUserService: GetUserService) { }
  
      private searchTerms = new Subject&lt;string&gt;();
  
      users: Observable&lt;User[]&gt;;
      loading: boolean = false;
  
      search(term: string): void {
          if(term.length &gt;= 3) {
              this.loading = true;
              this.searchTerms.next(term);
          } else {
  
              //issue (1) occurs after this
  
              this.users = Observable.of&lt;User[]&gt;([]);
          }
    }
  
    ngOnInit(): void {
      this.users = this.searchTerms
        .debounceTime(400)
        .distinctUntilChanged()
        //service will not be called after (1) or (2) occurs
        .switchMap(term =&gt; this.getUserService.getUser(term))
              .map(data =&gt; {
                  this.loading = false;
                  return data;
              })
        .catch(error =&gt; {
  
          //issue (2) occurs after this
  
          this.loading = false;
          return Observable.of&lt;User[]&gt;([]);
        });
    }
  }
  </code></pre>