Ngx-bootstrap typeahead does not show dropdown menu

I am porting an application from AngularJS to Angular and I hit a brick wall with a new implementation for typeahead, it has been a day since and I tried with several APIs, finally decided to go the most similar one I used in the AngularJS version ( this )

So in my template I am doing this: (you can also find the 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 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 posts is simplistic, I created it to test the typeahead, which should just display a list of objects whose name property looks more like what is entered in the input field, but does absolutely nothing.

When debugging in web developer tools, I can see the ng-blur options trigger when I type in a field, but nothing happens from there

The console is cleared of errors and the placeholder is displayed in full order until I start typing, which is the expected behavior

I would like someone to help me solve this puzzle, but would it be really great if someone could also point out how to debug a problem like this?

EDIT: add plunker