title: ngx-bootstrap data from http service
body: <p>I am trying to write a typeahead using <a href="https://valor-software.com/ngx-bootstrap/#/typeahead" rel="nofollow noreferrer">ngx-bootstrap</a>. In order to get the values for the list, it requires an http.get from the API. So I added an event binding to my input to trigger the http request and update the components array for the typeahead.</p>
  
  <pre><code>&lt;input class="form-control"
      container="body"
      formControlName="prefix"
      typeaheadOptionField="name"
      [typeahead]="accounts"
      (typeaheadOnSelect)="onSelect($event)"
      (keyup)="getAccounts()"&gt; 
  </code></pre>
  
  <p>then in my component, the getAccounts() method is fired on keyup:</p>
  
  <pre><code>getAccounts() {
      this.users.accountTypeAhead(this.userForm.value.prefix).subscribe(
          response =&gt; {
              this.accounts = this.apiHandler.responseHandler(response);
              console.log(this.accounts);
          },
          (err) =&gt; {
              this.apiHandler.errorHandler(err);
          }
      );
  }
  </code></pre>
  
  <p>this calls the service to make the get request:</p>
  
  <pre><code>accountTypeAhead(param, url = this.accountAutoComplete) {
      let params = new HttpParams();
      params = params.set('prefix', param);
      return this.http.get(url, {params: params});
  }
  </code></pre>
  
  <p>this all seems to be partially working. The keyup event is fired and when I watch in console, I can see the that <code>this.accounts</code> is update with the results. </p>
  
  <p>The challenge that I am having is that the typeahead dropdown is not showing as/after I type. Am I missing something here?</p>