title: ngx-bootstrap typeahead observable
body: <p>So I have a a typeahead input field that looks like this:</p>
  
  <pre><code>&lt;input formControlName="segment"
                [typeahead]="segments"
                (typeaheadLoading)="segmentsLoading($event)"
                (typeaheadNoResults)="segmentsNoResults($event)"
                (typeaheadOnSelect)="segmentOnSelect($event)"
                typeaheadOptionsLimit="10"
                typeaheadMinLength="3"
                typeaheadWaitMs="300"
                [typeaheadItemTemplate]="customSegmentTemplate"
                class="form-control"&gt;
  </code></pre>
  
  <p>And an Observable which helps me get the suggestions in typeahead.</p>
  
  <pre><code>this.segments = Observable.create((observer: any) =&gt; observer.next(this.segments))
    .mergeMap((number: string) =&gt; this.suggestionsService.getSegmentSuggestions(this.editForm.get('segment').value);
  </code></pre>
  
  <p>My problem is that the Observable sends a request even when my input field value length is less than 3 even if I have set <code>typeaheadMinLength="3"</code>. This happens when user types in a value and then deletes some of the characters quickly (quicker than my debounce time) and then tries to enter a new value. My API for suggestions fails when it recieves input value with length less than 3 and then my application breaks and I have to refresh the page to make it work again. I have tried to set debounce time to 0 and I didnt have this issue then, but that is a bad practice and it sends too many requests to my API. Any ideas on how to solve this?</p>