ngx-bootstrap typeahead not showing dropdown

Question

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 ( this )

So, in my template I do this: (you can also find pluker link at the bottom)

<input [(ngModel)]="publication"
       [typeahead]="publications"
       typeaheadOptionField="name"
       typeaheadOptionsLimit="25"
       placeholder="Type it"
       class="form-control">

Against this component.ts:

  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) => (this.formDTO = result, this.formDTOLoaded = true),
            (error) => (alert('Publication with Id:' + id + ' was not found in Database'), this.formDTOLoaded = false));
        this.loadAll();

    }

    registerChangeInForm() {
        this.eventSubscriber = this.eventManager.subscribe('formListModification', (response) => this.loadAll());
    }

    trackPublicationTypeById(index: number, item: PublicationType) {
        return item.id;
    }

    private onError(error) {
        this.alertService.error(error.message, null, null);
    }

}

And the module.ts:

  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 {}

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.

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

The console is clean of errors and the placeholder displays fine until I start typing, which is the expected behaviour

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?

EDIT: to add plunker

Answer 1

Make sure that your versions of Angular and that of Bootstrap are compatible. It happened when I was using Angular 4 with ng2-bootstrap 1.6.x. Better yet, instead of ng2-bootstrap you should be using ngx-bootstrap. To get the dropdown working, add the container attribute:

<div class="btn-group" dropdown  container="body"></div>

Answer 2

First of all

import { TypeaheadModule } from '../../../../../node_modules/ngx-bootstrap/typeahead';

Should be:

import { TypeaheadModule } from 'ngx-bootstrap/typeahead';

Without binding [] , options limit will be set as a string typeaheadOptionsLimit="25" , so it should be [typeaheadOptionsLimit]="25"

I don't even see that typeahead was attached :( remove this: schemas: [CUSTOM_ELEMENTS_SCHEMA] and most probably you will see an error that typeahead is unknown property

Then try to remove all options and apply them from samples:

https://valor-software.com/ngx-bootstrap/#/typeahead#static

You should end up with something like this:

https://valor-software.com/ngx-bootstrap/#/typeahead#async