title: ngx-bootstrap typeahead not showing dropdown
body: <p>I'm migrating an application from AngularJS to Angular and I've hit a brick wall with the new implementation for typeahead, it's been a day now since and I've tried with several API, finally decided to go for the most similar one to what I was using in AngularJS version (<a href="http://valor-software.com/ngx-bootstrap/#/typeahead" rel="nofollow noreferrer">this</a>)</p>
  
  <p>So, in my template I do this: (you can also find pluker link at the bottom)</p>
  
  <pre><code>&lt;input [(ngModel)]="publication"
         [typeahead]="publications"
         typeaheadOptionField="name"
         typeaheadOptionsLimit="25"
         placeholder="Type it"
         class="form-control"&gt;
  </code></pre>
  
  <p>Against this component.ts:</p>
  
  <pre><code>  import { Component, OnInit, OnDestroy } from '@angular/core';
  import { ActivatedRoute, Router } from '@angular/router';
  import { Subscription } from 'rxjs/Rx';
  import { JhiEventManager, JhiParseLinks, JhiPaginationUtil, JhiAlertService } from 'ng-jhipster';
  import { FormService } from './form.service';
  import { ITEMS_PER_PAGE, Principal, ResponseWrapper } from '../shared';
  import { PaginationConfig } from '../blocks/config/uib-pagination.config';
  import {FormDTO} from './formDTO.model';
  
  
  @Component({
      selector: 'jhi-form',
      templateUrl: './uploadData.html'
  })
  
  export class FormComponent implements OnInit, OnDestroy {
  
      publication: String;
      public publications: any[] = [ {id: 1, name: 'this'}, {id: 2, name: 'is'}, {id: 21, name: 'list'}, {id: 4, name: 'of'}, {id: 5, name: 'string'}, {id: 6, name: 'element'}]
  
    /* in my app I hold a number of variables, cutted them out as irrelevant to issue */
  
      constructor(
          private alertService: JhiAlertService,
          private formService: FormService,
          private eventManager: JhiEventManager
  /*here I put in a number of entities that query the backend, cutted them out for this example as they're irrelevant*/
      ) {
      }
  
      ngOnInit() {
          this.loadAll();
          this.registerChangeInForm();
      }
  
      ngOnDestroy() {
          this.eventManager.destroy(this.eventSubscriber);
      }
  
      loadAll() {
          this.isSaving = false;
          /* loads a number of list for entities, irrelevant code for the question */
      }
  
      save() {
          console.log('save');
      }
  
  
  
      search(id) {
          this.formService.find(id).subscribe(
              (result) =&gt; (this.formDTO = result, this.formDTOLoaded = true),
              (error) =&gt; (alert('Publication with Id:' + id + ' was not found in Database'), this.formDTOLoaded = false));
          this.loadAll();
  
      }
  
      registerChangeInForm() {
          this.eventSubscriber = this.eventManager.subscribe('formListModification', (response) =&gt; this.loadAll());
      }
  
      trackPublicationTypeById(index: number, item: PublicationType) {
          return item.id;
      }
  
      private onError(error) {
          this.alertService.error(error.message, null, null);
      }
  
  }
  </code></pre>
  
  <p>And the module.ts:</p>
  
  <pre><code>  import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { RouterModule } from '@angular/router';
  
  import { DrugQualityDataManagerSharedModule } from '../shared';
  import {formRoute} from './form.route';
  import {FormComponent} from './form.component';
  import {FormService} from './form.service';
  import { NguiAutoCompleteModule } from '@ngui/auto-complete';
  import { TypeaheadModule } from '../../../../../node_modules/ngx-bootstrap/typeahead';
  import { FormsModule } from '@angular/forms';
  
   const ENTITY_STATES = [
       ...formRoute,
   ];
  
  @NgModule({
      imports: [
          DrugQualityDataManagerSharedModule,
          FormsModule,
          TypeaheadModule.forRoot(),
          RouterModule.forRoot(ENTITY_STATES, { useHash: true })
      ],
      declarations: [
          FormComponent,
      ],
      entryComponents: [
          FormComponent,
      ],
      providers: [
          FormService,
       ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  export class DrugQualityDataManagerFormModule {}
  </code></pre>
  
  <p>The array of publications is a simplified one, I created it to test the typeahead, which should just display the list of objects that have the name property most similar to what's being typed in the input box, but it does absolutely nothing.</p>
  
  <p>When debugging on the Web Developer tools I can see the ng-blur options triggering when I type in the box, but nothing happens from there</p>
  
  <p>The console is clean of errors and the placeholder displays fine until I start typing, which is the expected behaviour</p>
  
  <p>I would like someone to help me solve this puzzle, but it would be really awesome if someone could also point out how to debug an issue like this?</p>
  
  <p><strong>EDIT:</strong> to add <a href="https://plnkr.co/edit/vInjG56elnZsMmIHzWOe?p=preview" rel="nofollow noreferrer">plunker</a></p>