joebrinkman-earnin/ng2-typeahead

Autocomplete component for Angular 2

[deprecated] ng2-typeahead

A simple Angular2 typeahead/autocomplete component.

This package is no longer being developed.

See ng2-typeahead on GitHub

Installation

1. A recommended way to install ng2-typeahead is through the npm package manager using the following command:

npm i ng2-typeahead --save

Alternatively, you can download it in a ZIP file.

2. Currently ng2-typeahead contains one directive: typeahead.

Example

my.component.ts

import { Typeahead } from 'ng2-typeahead';

@NgModule({
   declarations: [ Typeahead ],
})

@Component({
    selector: 'my-component',
    template: require('./my.component.html'),
    styles: [`
        .typeahead-input,
        .typeahead-typeahead{
            width: 250px;
            padding: 8px;
            border-radius: 5px;
        }
    `]
})
export class MyComponent {

  fruitName: string;
  fruits: any[] = [
    {
      id: 1,
      name: "Apple",
      searchText: "apple"
    },
    {
      id: 2,
      name: "Orange",
      searchText: "orange"
    },
    {
      id: 3,
      name: "Banana",
      searchText: "banana"
    }
  ];

  selectedFruit: any = this.fruits[0];

  public fruitSelected(fruit) {
    this.fruitName = fruit ? fruit.name : 'none';
  }

}

my.component.html

<typeahead
  [(ngModel)]="selectedFruit"
  [list]="fruits"
  [searchProperty]="'searchText'" [displayProperty]="'name'"
  [maxSuggestions]="2"
  (suggestionSelected)="fruitSelected($event)"
  placeholder="Begin typing a fruit">
</typeahead>

<p>You selected {{ fruitName }}</p>

The following adjustments may be required in systemjs.config.js to run the example code. Issue #7

var map = {
    ...
    'ng2-typeahead':              'node_modules/ng2-typeahead',                             
  };
  ...
  var packages = {
    ...
    'ng2-typeahead':              { main: 'ng2-typeahead.js', defaultExtension: 'js' }
  };

Demo

API for typeahead

This is the only directive. Provide a list of suggestions as an object array, specify the display and search properties, and handle the selection event however you like.

Properties

Binding Property	Type	Remarks
[(ngModel)]	any	The model property to which the component is bound. Optional.
[list]	any[]	The complete list of items. These can be any type of object. This is required.
[displayProperty]	string	The property of a list item that should be displayed. The default is 'name'.
[searchProperty]	string	The property of a list item that should be used for matching. The default is 'name'.
[maxSuggestions]	number	The maximum number of suggestions to display. The default is -1 (no limit).

Note: displayProperty and searchProperty can be the same property or different properties based on your needs.

Events

Event Binding	Remarks
(suggestionSelected)	Called when a suggestion has been selected. The only parameter is the selected item.

Styles

Selector	Remarks
.typeahead	The outer div which holds all component elements.
.typeahead-input	The input element into which the user enters text.
.typeahead-input-has-selection	The input element into which the user enters text when a suggestion is selected. This alerts the user that a selection has been made.
.typeahead-typeahead	The type-ahead input element which displays the suggested text.
.typeahead-suggestions	The div which holds the suggestions elements.
.typeahead-suggestions ul	The unordered list of suggestions.
.typeahead-suggestions ul li	The individual suggestion elements.
.typeahead-suggestion-active	The active (highlighted) suggestion in the suggestions list.

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

1. Use GitHub Issues board to report bugs and feature requests (not our email address)
2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding, and apologies for any issues experienced thus far.

License

The MIT License (see the LICENSE file for the full text)

ng2-typeahead's Issues

SyntaxError.BaseError

I declared in app.module.ts

import { Typeahead } from 'ng2-typeahead';

@NgModule({
 ...
  declarations: [
        ....
        Typeahead,
    ],
    ....
})

cause following error:
"Unexpected value 'Typeahead' declared by the module 'AppModule'"

ng2-typeahead version is 1.2.0

angular version is 2.0.0-rc.7
If it is not use this linbrary when angular version is older, pleash show me.

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator'..

Hey,

I've tried to import ng2-typeahead into the app module like this

//ng2-typehead
import { Typeahead } from 'ng2-typeahead';

imports: [
    ...
    Typeahead
  ],
...

But when I run ng build -w I get this error:

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Directive in /home/sikander/proxloop/proxloop-server/proxloop-server/node_modules/ng2-typeahead/node_modules/@angular/core/src/metadata/directives.d.ts, resolving symbol Component in /home/sikander/proxloop/proxloop-server/proxloop-server/node_modules/ng2-typeahead/node_modules/@angular/core/src/metadata/directives.d.ts, resolving symbol Component in /home/sikander/proxloop/proxloop-server/proxloop-server/node_modules/ng2-typeahead/node_modules/@angular/core/src/metadata/directives.d.ts, resolving symbol Component in /home/sikander/proxloop/proxloop-server/proxloop-server/node_modules/ng2-typeahead/node_modules/@angular/core/src/metadata.d.ts, resolving symbol Component in /home/sikander/proxloop/proxloop-server/proxloop-server/node_modules/ng2-typeahead/node_modules/@angular/core/src/core.d.ts, resolving symbol Component in /home/sikander/proxloop/proxloop-server/proxloop-server/node_modules/ng2-typeahead/node_modules/@angular/core/index.d.ts, resolving symbol Typeahead in /home/sikander/proxloop/proxloop-server/proxloop-server/node_modules/ng2-typeahead/src/ng2-typeahead.ts, resolving symbol Typeahead in /home/sikander/proxloop/proxloop-server/proxloop-server/node_modules/ng2-typeahead/src/ng2-typeahead.ts

Please help

Unexpected token <

This might be due to the fact that being new to Angular I don't know how to implement this control. The steps I took are as follows:

npm install ng2-typeahead --save

import { Typeahead } from 'ng2-typeahead';

directives: [ Typeahead]

in the html <typeahead> (also tried <typeahead [list]="areas></typeahead> as well as <input type="text" typeahead>

It may be helpful if you have full instruction on how to use this for the numpties like myself that are new to ng2.

Thanks

How can i customize the style? I've already tried the mycomponent.component.css file and nothing.

Error - When run on angular 2.4

node_modules/ng2-typeahead/src/ng2-typeahead.ts(123,3): error TS1031: 'declare' modifier cannot appear on a class element.
node_modules/ng2-typeahead/src/ng2-typeahead.ts(123,3): error TS7008: Member 'abstract' implicitly has an 'any' type.

Issue working with angular 2.3.0

Any module that imports Typeahead using angular version 2.3.0 does not load. No errors to display unfortunately. Have you guys had any luck with the latest version?

Not working with Web Pack

We are not using systemjs.config.js file. We are using webpack.config.js file. How to use with this file. I made all possible changes and still see error "Unable to find module"

Can you please provide way to reset typeahead selection

Hi There,

First thing, it's great directive. Great job!

I have one request, could you please provide way to reset typeahead selection or let me know API if it is already there? I have gone through code but couldn't find it any.

Thanks!

Site does not working

https://brinkmanjg.github.io/ng2-typeahead/

Error: Child compilation failed:
Entry module not found: Error: Cannot resolve 'file' or 'directory' /Users/j583306/Projects/ng2-typeahead/demo/index.html in /Users/j583306/Projects/ng 2-typeahead:
Error: Cannot resolve 'file' or 'directory' /Users/j583306/Projects/ng2-typeahead/demo/index.html in /Users/j583306/Projects/ng2-typeahead

how to use ng2-typeahead with service call which returns json response

how to use ng2-typeahead with service call which returns json response with each kepup event it should
search and return

Performing 'start-with' instead of 'contains' search

Hello,

Is there a way of filtering the suggestion list using 'start-with' the characters the user just entered instead of 'contains'?

Thank you,
Anca

Is it working with angular2 rc5?

Is it working with angular2 rc5?

Thank you.

No suggestions provided when the input is the same

Click into the input element
Type a character (e.g. 'w')
Hit backspace to delete the character
Type the same character (e.g. 'w') again
Observed behavior: no suggestions are provided
Expected behavior: the same suggestions should be provided

It could be that the suggestions visibility flag is not being set correctly or that the suggestions population function is not being run again

npm install failing

When doing npm install:
Failed at the [email protected] postinstall script 'typings install'.

How to configure typeahead with Angular-cli

Hi,

Please help on how to configure typeahead with angularcli. Iam using angular cli and i have installed typeahead with npm command.Now how to import that and configure in the component. since there is no systemjs in angular-cli.

Show suggestion list when Arrow Up or Arrow Down are keyed

I'm implementing autocomplete for some objects where we store the most commonly used names in a database. As such, typeahead is very useful, however I did run into an issue in user testing.

When the textbox is empty the users expected to be able to display all possible suggestions and select them from the list. This isn't possible without modifying the component itself. I have to get it to work for our users, but I also feel this should be a standard behavior when there isn't a maximum suggestion limit.

I've opened this issue in hopes of some discussion, however this will be implemented on my end no matter what. If everyone likes the idea I'm happy to send a PR along when it's done!

getting 'undefined' error.

I have this error caused by: Cannot read property 'ingredient' of undefined.

I have this code:

<typeahead [(ngModel)]="selectedRecipeIngredient.ingredient"
               [list]="ingredients"
               [searchProperty]="'name'" [displayProperty]="'name'"
               [maxSuggestions]="2"
               (suggestionSelected)="ingredientSelected($event)"
               placeholder="Begin to search for ingredient">
    </typeahead>

and i have entities like this:

export class RecipeIngredient implements IRecipeIngredient {
    ingredient: IIngredient = new Ingredient();
    quantity: number;
}

export class Ingredient implements IIngredient {
    id: number;
    name: string;
    image: string;
    category: ICategory = new Category(); 
}

and my addrecipe.component.ts looks like this:

selectedRecipeIngredient: IRecipeIngredient = new RecipeIngredient();

I thought it was my error, but for example if i use this code:

    <select class="form-control" id="selectedCategory"
            required
            [(ngModel)]="selectedRecipeIngredient.ingredient" name="selectedCategory">
        <option *ngFor="let ingredient of ingredients" [ngValue]="ingredient">{{ingredient.name}}</option>
    </select>

and I do not get this error,, it works fine.

Return typed text if option doesn't exist

Hi.
Thanks the Type Ahead functionality works really well.
But I need to return the partially typed text if the option is not exist in your list.
I haven't been able to find a way to return the partially typed text.
Is this possible?

Unexpected value 'Typeahead' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation.

Example error when starting server

hi,
i am getting below error when tried with given example.

node_modules/ng2-typeahead/src/ng2-typeahead.ts(123,3): error TS7008: Member 'abstract' implicitly has an 'any' type.
src/app/app.component.ts(40,24): error TS7006: Parameter 'fruit' implicitly has an 'any' type.

Google Places as Remote Url

possible to use google places for remote data?

No value accessor for form control with unspecified name

Hi Team,

I have successfully import the "ng2-typeahead" module in my app, now I can view the text box and can track the key event in console but during initializing I am getting below error:

"No value accessor for form control with unspecified name"

Can any body guide me in this ?

Can't bind to 'list' since it isn't a known property of 'typeahead'

("
<typeahead
[(ngModel)]="selectedFruit"
[ERROR ->][list]="fruits"
[searchProperty]="'searchText'" [displayProperty]="'name'"
[maxSuggestions]="2"
"): PortSearchComponent@6:2
Can't bind to 'searchProperty' since it isn't a known property of 'typeahead'. ("
[(ngModel)]="selectedFruit"
[list]="fruits"
[ERROR ->][searchProperty]="'searchText'" [displayProperty]="'name'"
[maxSuggestions]="2"
(suggestionSelect"): PortSearchComponent@7:2
Can't bind to 'displayProperty' since it isn't a known property of 'typeahead'. ("
[(ngModel)]="selectedFruit"
[list]="fruits"
[searchProperty]="'searchText'" [ERROR ->][displayProperty]="'name'"
[maxSuggestions]="2"
(suggestionSelected)="fruitSelected($event)"
"): PortSearchComponent@7:34
Can't bind to 'maxSuggestions' since it isn't a known property of 'typeahead'. ("
[list]="fruits"
[searchProperty]="'searchText'" [displayProperty]="'name'"
[ERROR ->][maxSuggestions]="2"
(suggestionSelected)="fruitSelected($event)"
placeholder="Begin typing a fru"): PortSearchComponent@8:2
'typeahead' is not a known element:

1. If 'typeahead' is an Angular component, then verify that it is part of this module.
2. If 'typeahead' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

error TS2307: Cannot find module 'ng2-Typeahead'

Hi

I am keep getting error after following steps mentioned in readme file-

app/app.module.ts(7,27): error TS2307: Cannot find module 'ng2-Typeahead'.

Below is my code-

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent }   from './app.component';
//import { Typeahead } from './ng2-Typeahead';
import { Typeahead } from 'ng2-Typeahead';

@NgModule({
    imports:      [ BrowserModule, FormsModule ],
    declarations: [ AppComponent, Typeahead  ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts

    import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      template: `<h1>My First Angular App</h1>
      <typeahead
  [(ngModel)]="selectedFruit"
  [list]="fruits"
  [searchProperty]="'searchText'" [displayProperty]="'name'"
  [maxSuggestions]="2"
  (suggestionSelected)="fruitSelected($event)"
  placeholder="Begin typing a fruit">
</typeahead>
      `
    })
    export class AppComponent { 

        fruits: any[] = [
    {
      id: 1,
      name: "1 - Apple",
      searchText: "apple"
    },
    {
      id: 2,
      name: "2 - Orange",
      searchText: "orange"
    },
    {
      id: 3,
      name: "3 - Banana",
      searchText: "banana"
    }
  ];

  selectedFruit: any = this.fruits[0];

  public fruitSelected(fruit) {
    this.selectedFruit = fruit;
  }
    }

systemjs.config.js

    /**
     * System configuration for Angular samples
     * Adjust as necessary for your application needs.
     */
    (function (global) {
      System.config({
        paths: {
          // paths serve as alias
          'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
          // our app is within the app folder
          app: 'app',
          // angular bundles
          '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
          '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
          '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
          '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
          '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
          '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
          '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
          '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
          // other libraries
          'rxjs':                       'npm:rxjs',
          'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
          'ng2-Typeahead': 'npm:ng2-Typeahead',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
          app: {
            main: './main.js',
            defaultExtension: 'js'
          },
          rxjs: {
            defaultExtension: 'js'
          },
          'angular2-in-memory-web-api': {
            main: './index.js',
            defaultExtension: 'js'
          },
          'ng2-Typeahead': { main: './index.js', defaultExtension: 'js' }
        }
      });
    })(this);

ng2-typeahead.js not found

Hi,

I have complied after configuration changes also. still getting the below error

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3001/node_modules/ng2-typeahead/ng2-typeahead.js
Error: XHR error (404 Not Found) loading http://localhost:3001/node_modules/ng2-typeahead/ng2-typeahead.js
at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3001/node_modules/zone.js/dist/zone.js:1199:29) []
at Zone.runTask (http://localhost:3001/node_modules/zone.js/dist/zone.js:165:47) [ => ]
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3001/node_modules/zone.js/dist/zone.js:460:38) []
Error loading http://localhost:3001/node_modules/ng2-typeahead/ng2-typeahead.js as "ng2-typeahead" from http://localhost:3001/app/app.module.js
at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3001/node_modules/zone.js/dist/zone.js:1199:29) []
at Zone.runTask (http://localhost:3001/node_modules/zone.js/dist/zone.js:165:47) [ => ]
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3001/node_modules/zone.js/dist/zone.js:460:38) []
Error loading http://localhost:3001/node_modules/ng2-typeahead/ng2-typeahead.js as "ng2-typeahead" from http://localhost:3001/app/app.module.js

browserify doesn't include typeahead when it does its stuff

When I build my app for production, using enableProdMode() and this:
npm run build && browserify -s main app/main.js > app/bundle.js
On load I get:

Error: (SystemJS) Unexpected value 'Typeahead' declared by the module 'AppModule'

This doesn't happen when I build it without browserify. Not very familiar with browserify, but it seems to be pruning a dependency on Typeahead, which I actually need.

In systemjs.config.js, the map section (npm points to node_modules):
'ng2-typeahead': 'npm:ng2-typeahead',
In the packages section:
'ng2-typeahead': { main: './index', defaultExtension: 'js' }
In dependencies in package.json:
"ng2-typeahead": "^1.2.0",
At the top of app.module.ts:
import { Typeahead } from 'ng2-typeahead';
In the @NgModule:
declarations: [ AppComponent, ContentDisplayComponent, EllipsisPipe, Typeahead ],
And in the subcomponent that actually uses it (which is probably overkill):
import { Typeahead } from 'ng2-typeahead';

error in example code (wrong list name)

In my.component.ts name of list is fruits, but in my.component.html typeahead refers to items.

fix:

<typeahead
  [list]="fruits" <!-- changed items to fruits -->
  [searchProperty]="'searchText'" [displayProperty]="'name'"
  [maxSuggestions]="2"
  (suggestionSelected)="fruitSelected($event)"
  placeholder="Begin typing a fruit">
</typeahead>
`

Error: Can't find module "ng2-typeahead'.

Hi All,

An issue regarding adding "ng2-typeahead' module.
I have added "ng2-typeahead' through npm and its properly added in my node_modules folder but

when I do :
import { Typeahead } from 'ng2-typeahead';
Error: Can't find module "ng2-typeahead'.

It's only working when I do:

import { Typeahead } from '../../../node_modules/ng2-typeahead/src/ng2-typeahead';

Can any body guide me why I need to give path from node_modules ?

after puttng ng2-typeahead-master folder npm start giving error

I follow instructions given in https://github.com/brinkmanjg/ng2-typeahead for installation typeahead

**A recommended way to install ng2-typeahead is through the npm package manager using the following command:

npm i ng2-typeahead --save

Alternatively, you can download it in a ZIP file.**

but when i started my server then I am getting error

D:\feedback\sharex\my-proj>npm start

[email protected] start D:\feedback\sharex\my-proj
tsc && concurrently "tsc -w" "lite-server"

ng2-typeahead-master/components/typeahead/ng2-typeahead.ts(2,9): error TS2305: M
odule '"D:/feedback/sharex/my-proj/node_modules/@angular/common/index"' has no e
xported member 'FORM_DIRECTIVES'.
ng2-typeahead-master/components/typeahead/ng2-typeahead.ts(2,26): error TS2305:
Module '"D:/feedback/sharex/my-proj/node_modules/@angular/common/index"' has no
exported member 'COMMON_DIRECTIVES'.
ng2-typeahead-master/components/typeahead/ng2-typeahead.ts(2,45): error TS2305:
Module '"D:/feedback/sharex/my-proj/node_modules/@angular/common/index"' has no
exported member 'CORE_DIRECTIVES'.
ng2-typeahead-master/components/typeahead/ng2-typeahead.ts(111,5): error TS2345:
Argument of type '{ selector: string; template: string; styles: string[]; direc
tives: any[]; providers: undefined[]...' is not assignable to parameter of type
'ComponentMetadataType'.
Object literal may only specify known properties, and 'directives' does not ex
ist in type 'ComponentMetadataType'.

npm ERR! Windows_NT 6.1.7600
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\Sony\AppData\R
oaming\npm\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v4.5.0
npm ERR! npm v3.10.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: tsc && concurrently "tsc -w" "lite-se rver"
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] start script 'tsc && concurrent
ly "tsc -w" "lite-server" '.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-quickstart p
ackage,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc && concurrently "tsc -w" "lite-server"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-quickstart
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-quickstart
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\feedback\sharex\my-proj\npm-debug.log

D:\feedback\sharex\my-proj>

I put the ng2-typeahead-master folder in parallel of node_modules folder.

Images for README

NestedObject Selection

I want to select nestedobject ex:

sources :[ {
id:1,
city: {
"id":1,
"name": "Newyork"
}
},
{
id:2,
city: {
"id":2,
"name": "DC"
}
}
]
I want to select city.name in the display property , [list] will be sources

I tried to use [(ngModel)]=selectedSource
[displayProperty]=city.name

but it doesn't seems to work. could you please suggest how can I use nested object

Can't bind to 'ngModel' since it isn't a known property of 'typeahead'.

Hi,

I have complied after configuration changes also. still getting the below error

Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'typeahead'. ("<typeahead [ERROR ->][(ngModel)]="selectedFruit" [list]="fruits" [searchProperty]="'searchText'" [displayProperty]="'name'"): ng:///LoginFormModule/LoginFormComponent.html@0:11
Can't bind to 'list' since it isn't a known property of 'typeahead'. ("<typeahead [(ngModel)]="selectedFruit" [ERROR ->][list]="fruits" [searchProperty]="'searchText'" [displayProperty]="'name'" [maxSuggestions]="2" (sugg"): ng:///LoginFormModule/LoginFormComponent.html@0:39
Can't bind to 'searchProperty' since it isn't a known property of 'typeahead'. ("<typeahead [(ngModel)]="selectedFruit" [list]="fruits" [ERROR ->][searchProperty]="'searchText'" [displayProperty]="'name'" [maxSuggestions]="2" (suggestionSelected)="): ng:///LoginFormModule/LoginFormComponent.html@0:55
Can't bind to 'displayProperty' since it isn't a known property of 'typeahead'. ("<typeahead [(ngModel)]="selectedFruit" [list]="fruits" [searchProperty]="'searchText'" [ERROR ->][displayProperty]="'name'" [maxSuggestions]="2" (suggestionSelected)="fruitSelected($event)" placehol"): ng:///LoginFormModule/LoginFormComponent.html@0:87
Can't bind to 'maxSuggestions' since it isn't a known property of 'typeahead'. ("gModel)]="selectedFruit" [list]="fruits" [searchProperty]="'searchText'" [displayProperty]="'name'" [ERROR ->][maxSuggestions]="2" (suggestionSelected)="fruitSelected($event)" placeholder="Begin typing a fruit">"): ng:///LoginFormModule/LoginFormComponent.html@0:114
'typeahead' is not a known element:

1. If 'typeahead' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]<typeahead [(ngModel)]="selectedFruit" [list]="fruits" [searchProperty]="'searchText'" [displayProper"): ng:///LoginFormModule/LoginFormComponent.html@0:0
   at syntaxError (http://localhost:4200/vendor.bundle.js:46254:34)
   at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:57374:19)
   at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:71526:39)
   at http://localhost:4200/vendor.bundle.js:71446:62
   at Set.forEach (native)
   at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:71446:19)
   at http://localhost:4200/vendor.bundle.js:71333:19
   at Object.then (http://localhost:4200/vendor.bundle.js:46243:148)
   at JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:71332:26)
   at JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:71261:37)

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

import { LoginModule } from './login';

import { Typeahead } from 'ng2-typeahead';

@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule,
LoginModule
],
declarations: [
AppComponent,
Typeahead
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

A couple of suggestions

1. When clicking on the input, could there be a flag to where it expands and shows all the options? And then you can start typing from there to filter down?

2. In the example when you load the page, it starts with Apple selected, then you click it and it says "Begin typing a fruit", and then when you click off of it, the palceholder text still says "Begin typing a fruit". I feel like it should go to be something else, like the state it was at before I clicked it?

Error: Unexpected value 'Typeahead' declared by the module 'AppModule

Hi,
I have done everything as mentioned in thishttps://www.npmjs.com/package/ng2-typeahead site. But getting below error.
Unexpected value 'Typeahead' declared by the module 'AppModule

Please assist.

Wrong configuration, just not working

I was playing around with configuration, starting from instalatioin, then configuring systemjs.config.js and NgModule.
After hours spent i am giving up.

package.json:
{
"typings": "^2.1.1",
"ng2-typeahead": "^1.2.0"
}

systemjs.config.js:
map: {
'ng2-typeahead' : 'node_modules/ng2-typeahead'
},
packages: {
'ng2-typeahead': { main: 'ng2-typeahead.js', defaultExtension: 'js' }
}

import { Typeahead } from 'ng2-typeahead';

@NgModule({
declarations: [ Typeahead ],
})

logs:
Failed to load resource: the server responded with a status of 404 (Not Found)
zone.js:522 Unhandled Promise rejection: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/src/app/tmp/scripts/bootstrap.js
Error: XHR error (404 Not Found) loading http://localhost:3000/src/app/tmp/scripts/bootstrap.js
at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1242:29) []
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:166:47) [ => ]
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:420:38) []
Error loading http://localhost:3000/src/app/tmp/scripts/bootstrap.js ; Zone: ; Task: Promise.then ; Value: ZoneAwareError (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/src/app/tmp/scripts/bootstrap.js
Error: XHR error (404 Not Found) loading http://localhost:3000/src/app/tmp/scripts/bootstrap.js
at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1242:29) []
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:166:47) [ => ]
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:420:38) []
Error loading http://localhost:3000/src/app/tmp/scripts/bootstrap.js

I have tried a lot of things, like:
setting packages to:
'ng2-typeahead' : { main: 'index.js', defaultExtension: 'js' }
or
'ng2-typeahead' : { main: 'lib/ng2-typeahead.js', defaultExtension: 'js' }

also seeting import in NgModules
import { Typeahead } from 'ng2-typeahead/src/ng2-typeahead';
import { Typeahead } from 'ng2-typeahead/lib/ng2-typeahead';

reading all issues
Well, nothing worked, time wasted

Databinding for existing value

Hello,

would like to thank you for a great typehead. Can you tell me if it is possible to have the input show any previously selected data? For example I can set the value in my form but when I come to edit an existing record the typeahead does not fill the existing value.

If we could bind an ng-model maybe?

Thanks

Richard

Issue on loading of router-outlet suggestionSelected event is called.

i am using angular2 and when i load my router outlet then suggestionSelected event is called automatically.

adjustments in systemjs.config.js to run example code

You should also mentioned that changes in systemjs.config.js are necessary.

I had to make following adjustments:

  var map = {
    ...
    'ng2-typeahead':              'node_modules/ng2-typeahead',                             
  };
  ...
  var packages = {
    ...
    'ng2-typeahead':              { main: 'ng2-typeahead.js', defaultExtension: 'js' }
  };

Correlate the keyboard arrows with the vertical scroll bar

Hello,

The dropdown of my suggestion list has a vertical scroll.
Is there a way to correlate the keyboard up and down arrows with the scroll bar? Because currently I am navigation with the arrows, but the scroll does not move. So basically in this case I found myself in a situation in which I am seeing some items in my dropdown list, but my selection is somewhere outside the visible items area.

Thank you,
Anca

how to use with reactive/model driven form

How to use this component with reactive/model driven form?

custom templates

This is really a great component, having options for custom templates would be great.