Angular 2 - Bootstrap (Ng2-Bootstrap) typeahead implementation

I'm trying to implement the NG2-Bootstrap typeahead with no success.

This is my code:

import {Component} from "angular2/core";
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {TYPEAHEAD_DIRECTIVES} from 'ng2-bootstrap';
@Component({
selector: "side-bar",
directives: [TYPEAHEAD_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES],
template: `
<div class="searchArea" [ngClass]="{searchAreaForceLargeWidth: forceShowSearch}">
   <form class="searchBlock" [ngClass]="{searchBlockForceShow: forceShowSearch}">
        <div class="form-group">
       <input [(ngModel)]="asyncSelected"
       [typeahead]="getAsyncData(getContext())"
       (typeaheadLoading)="changeTypeaheadLoading($event)"
       (typeaheadNoResults)="changeTypeaheadNoResults($event)"
       (typeaheadOnSelect)="typeaheadOnSelect($event)"
       [typeaheadOptionsLimit]="7"
       placeholder="Locations loaded with timeout"
       class="form-control">
        </div>
   </form>
</div>
`,
})
export class SideBarComponent {
forceShowSearch = false;
showCalendar = false;
dateFrom = "01/01/2023";
doSearch;

///////////
private selected: string = '';
private asyncSelected: string = '';
private typeaheadLoading: boolean = false;
private typeaheadNoResults: boolean = false;
private 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'];
private 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 getContext() {
    return this;
}

private _cache: any;
private _prevContext: any;

private 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;
}

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

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

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

constructor() {
    this.doSearch = function() {
        //this.forceShowSearch = false;
        console.log("Search");
    };
}
}

The code above is basically the same of the sample page of the ng2-bootstrap page.

I cannot see results. The page get stucked in "Loading" and throw this exception:

angular2-polyfills.js:1243 SyntaxError: Unexpected token <
Evaluating http://localhost:3000/ng2-bootstrap
Error loading http://localhost:3000/app/main.js
at SystemJSLoader.__exec (http://localhost:3000/node_modules/systemjs/dist/system.src.js:1395:16)
at entry.execute (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3521:16)
at linkDynamicModule (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3126:32)
at link (http://localhost:3000/node_modules/systemjs/dist/system.src.js:2969:11)
at Object.execute (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3301:13)
at doDynamicExecute (http://localhost:3000/node_modules/systemjs/dist/system.src.js:703:25)
at link (http://localhost:3000/node_modules/systemjs/dist/system.src.js:905:20)
at doLink (http://localhost:3000/node_modules/systemjs/dist/system.src.js:557:7)
at updateLinkSetOnLoad (http://localhost:3000/node_modules/systemjs/dist/system.src.js:605:18)
at http://localhost:3000/node_modules/systemjs/dist/system.src.js:417:11

And I was wondering : Is this everything ? Maybe I missed something ?


ANSWERS:


I would revert all the changes you made, until you don't have any more errors. Including all the imports you made in order to add the directive. Then add this:

import {TypeaheadModule} from 'ng2-bootstrap';

to your app.module.ts and add it to your imports like so:

imports: [
    ...,
    TypeaheadModule.forRoot()
],

Then it should work.


You need to add an entry in the map block of your SystemJS configuration:

<script>
  System.configure({
    map: {
      'ng2-bootstrap': 'node_modules/ng2-bootstrap'
    },
    packages: {
      (...)
    }
  });
  System.import(...);
</script>


 MORE:


 ? Dynamically added using angular bootstrap date-time-picker not working
 ? how can i use "SystemJsNgModuleLoader" in angular 2 to import dynamic modules to app?
 ? ngModule import module for entire app?
 ? Angular 2 build error - '../@angular/platform-browser-dynamic' no exported member 'bootstrap'
 ? Angular 2 Login Module with template
 ? PHP Array, Dynamic Array Name or Other Technique
 ? PHP Array, Dynamic Array Name or Other Technique
 ? PHP Array, Dynamic Array Name or Other Technique
 ? Building a multidimensional array dynamically from another array with PHP?
 ? Counting rows/records in a multidimensional array