Ngx-bootstrap: Integrating Simple Typeahead

[webdev48]

I am trying to integrate simple typeahead using the example shown on your page : https://valor-software.com/ng2-bootstrap/#typeahead

My console says:

EXCEPTION: Error: Uncaught (in promise): No Directive annotation found on Typeahead

Here is my component:

import { TYPEAHEAD_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';

@Component({

    selector: 'my-search-box',
    providers: [],
    directives: [
        ...FORM_DIRECTIVES,TYPEAHEAD_DIRECTIVES
    ],
    pipes: [ ],
    styles: [],
    template: require('./task-config-module-search.html')
})
export class MySearchBox {

  public selected:string = '';
    public asyncSelected:string = '';
    public typeaheadLoading:boolean = false;
    public typeaheadNoResults:boolean = false;
    public states:Array<string> = ['Alabama', 'Alaska', 'Arizona', 'Arkansas',
        'California', 'Colorado',
        'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho',
        'Illinois', 'Indiana', 'Iowa',
        'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts',
        'Michigan', 'Minnesota',
        'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
        'New Jersey', 'New Mexico',
        'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon',
        'Pennsylvania', 'Rhode Island',
        'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
        'Virginia', 'Washington',
        'West Virginia', 'Wisconsin', 'Wyoming'];
    public statesComplex:Array<any> = [
        {id: 1, name: 'Alabama'}, {id: 2, name: 'Alaska'}, {id: 3, name: 'Arizona'},
        {id: 4, name: 'Arkansas'}, {id: 5, name: 'California'},
        {id: 6, name: 'Colorado'}, {id: 7, name: 'Connecticut'},
        {id: 8, name: 'Delaware'}, {id: 9, name: 'Florida'},
        {id: 10, name: 'Georgia'}, {id: 11, name: 'Hawaii'},
        {id: 12, name: 'Idaho'}, {id: 13, name: 'Illinois'},
        {id: 14, name: 'Indiana'}, {id: 15, name: 'Iowa'},
        {id: 16, name: 'Kansas'}, {id: 17, name: 'Kentucky'},
        {id: 18, name: 'Louisiana'}, {id: 19, name: 'Maine'},
        {id: 21, name: 'Maryland'}, {id: 22, name: 'Massachusetts'},
        {id: 23, name: 'Michigan'}, {id: 24, name: 'Minnesota'},
        {id: 25, name: 'Mississippi'}, {id: 26, name: 'Missouri'},
        {id: 27, name: 'Montana'}, {id: 28, name: 'Nebraska'},
        {id: 29, name: 'Nevada'}, {id: 30, name: 'New Hampshire'},
        {id: 31, name: 'New Jersey'}, {id: 32, name: 'New Mexico'},
        {id: 33, name: 'New York'}, {id: 34, name: 'North Dakota'},
        {id: 35, name: 'North Carolina'}, {id: 36, name: 'Ohio'},
        {id: 37, name: 'Oklahoma'}, {id: 38, name: 'Oregon'},
        {id: 39, name: 'Pennsylvania'}, {id: 40, name: 'Rhode Island'},
        {id: 41, name: 'South Carolina'}, {id: 42, name: 'South Dakota'},
        {id: 43, name: 'Tennessee'}, {id: 44, name: 'Texas'},
        {id: 45, name: 'Utah'}, {id: 46, name: 'Vermont'},
        {id: 47, name: 'Virginia'}, {id: 48, name: 'Washington'},
        {id: 49, name: 'West Virginia'}, {id: 50, name: 'Wisconsin'},
        {id: 51, name: 'Wyoming'}];

    private _cache:any;
    private _prevContext:any;

    public getContext():any {
        return this;
    }

    public getAsyncData(context:any):Function {
        if (this._prevContext === context) {
            return this._cache;
        }

        this._prevContext = context;
        let f:Function = function ():Promise<string[]> {
            let p:Promise<string[]> = new Promise((resolve:Function) => {
                setTimeout(() => {
                    let query = new RegExp(context.asyncSelected, 'ig');
                    return resolve(context.states.filter((state:any) => {
                        return query.test(state);
                    }));
                }, 200);
            });
            return p;
        };
        this._cache = f;
        return this._cache;
    }

    public changeTypeaheadLoading(e:boolean):void {
        this.typeaheadLoading = e;
    }

    public changeTypeaheadNoResults(e:boolean):void {
        this.typeaheadNoResults = e;
    }

    public typeaheadOnSelect(e:any):void {
        console.log(`Selected value: ${e.item}`);
    }

    //Typeahead ---------------------------------------


    constructor(private router:Router,public breadboardModuleServ:BreadboardModuleServ) {

    }

    ngOnInit() {

        this.breadboardModuleServ
            .moduleInterfaces
            .subscribe((response:any)=>{

           console.log("TaskConfig Module Search /ngOnInit() / Breadboard Module Serv :", response);

            });
    }



}

and here is my template:

<div class='container-fluid'>
    <h4>Static arrays</h4>
    <pre class="card card-block card-header">Model: {{selected | json}}</pre>
    <input [(ngModel)]="selected"
           [typeahead]="statesComplex"
           (typeaheadOnSelect)="typeaheadOnSelect($event)"
           [typeaheadOptionField]="'name'"
           class="form-control">

    <div *ngIf="typeaheadLoading===true">
        <i class="glyphicon glyphicon-refresh ng-hide" style=""></i>
    </div>
    <div *ngIf="typeaheadNoResults===true" class="" style="">
        <i class="glyphicon glyphicon-remove"></i> No Results Found
    </div>

</div>

What am I doing wrong?

I am using webpack with Angular 2.... but I don't think that matters. Do I need to add some script tag in my index.html or somewhere? Or do something else as well?

[webdev48]

My environment

Angular 2-beta.11
Typings 0.7.9

and I did a

npm install --save ng2-bootstrap

[afirdousi]

ng2bootstrap relies on beta 15 and since you are on beta 11, if you go look into your node_modules/ng2-bootstrap/node_modules , it must have created a separate angular 2 dependency there referring to beta 15 version. This is conflicting and the crazy part is, Angular won't complain about but nothing would work.

Quick Solution
Goto node_modules/ng2-bootstrap and rename node_modules to _node_modules

now ng2-bootstrap will start working since it will refer to the angular version dependency that you already have. There is no harm in having multiple versions of the same package in node, but some how it conflicts in angular scenario. Just do the above solution and things should work.

[webdev48]

Thanks. this really worked!!!