ng-select/ng-select

:star: Native angular select component

ng-select's Issues

Custom label template in multi select

Allow to have custom template for selected values in multi select as it already supported in single mode. E.g.

<ng-template ng-label-tmp let-item="item" let-unselect="unselect">
   <span><b>{{item.name}}</b></span>
   <span (click)="unselect(item)">x</span>
</ng-template>

• Custom label
• Custom unselect

Clicking on select input triggers multiple 'open', 'blur' and 'focus' events

Not working in lazy child modules

I have tried the following but cant get the plugin to work.

app.module.ts:
import {NgSelectModule} from '@ng-select/ng-select';
...
imports: [NgSelectModule]

And when trying to use it on lazy loaded module, i'm getting this error.

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'items' since it isn't a known property of 'ng-select'.
1. If 'items' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. 
            <ng-select [ERROR ->][items]="templates"
                       bindLabel="name"
                       bindValue="id"
"): 
'ng-select' is not a known element:
1. If 'ng-select' is an Angular component, then verify that it is part of this module.
2. If 'ng-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 

I also have shared module which is working with every other component. When I import the ng-select on shared.module i'm getting this error:

ERROR Error: Uncaught (in promise): Error: NgSelectModule is already loaded. Import it in the AppModule only
Error: NgSelectModule is already loaded. Import it in the AppModule only

Any ideas?

Please fill below information if issuing a bug report.

More Info

ng -v:
@angular/cli: 1.4.4
node: 7.8.0
os: darwin x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.4
@angular/compiler-cli: 4.4.4
typescript: 2.2.2

ng-select version: [the latest, installed 1h ago]

browser: [latest chrome]

reproducable in demo page: [NO]

keyboard Tab problem

If I use (shift) Tab to go next and previous field, dropdown is not closed. Also when entering and exit field an option from the list get selected. Shift-Tab and Tab shouldn't change anything

Disable Issue

Hi, anjmao
I face a problem about multi select disable, when the ngSelect inside FormGroup tag and modal, it wont disable the multi select. so how can fix it?

More Info

ng-select version: [0.2.5]

browser: [Google Chrome]

reproducable in demo page: [YES]

Wrong 'KeyCode.Enter' priority when ng-select focused.

npm run integration error

Hello @anjmao,
i have some freetime now and i'm trying your library seed.
I've noticed that integration tests are failing, looks like a configuration error

This is the console log:

C:\Users\a.corzani\Documents\ang-select>npm run integration

> [email protected] preintegration C:\Users\a.corzani\Documents\ang-select
> npm run clean && npm run build && cd integration && npm install


> [email protected] clean C:\Users\a.corzani\Documents\ang-select
> rimraf out-tsc dist/*


> [email protected] prebuild C:\Users\a.corzani\Documents\ang-select
> npm run clean


> [email protected] clean C:\Users\a.corzani\Documents\ang-select
> rimraf out-tsc dist/*


> [email protected] build C:\Users\a.corzani\Documents\ang-select
> node build.js

Inlining succeeded.
ES2015 compilation succeeded.
ES5 compilation succeeded.
Typings and metadata copy succeeded.
All bundles generated successfully.
Package files copy succeeded.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arc
h":"x64"})

> [email protected] integration C:\Users\a.corzani\Documents\ang-select
> npm run integration:aot && npm run integration:jit


> [email protected] integration:aot C:\Users\a.corzani\Documents\ang-select
> cd integration && npm run e2e:aot


> [email protected] pree2e:aot C:\Users\a.corzani\Documents\ang-select\integration
> npm run build:e2e && npm run build:aot


> [email protected] build:e2e C:\Users\a.corzani\Documents\ang-select\integration
> tsc -p e2e/


> [email protected] build:aot C:\Users\a.corzani\Documents\ang-select\integration
> node build.js

Error at C:/Users/a.corzani/Documents/ang-select/integration/out-tsc/node_modules/ang-select/ang-select.ngfactory.ts:250:44: Property 'viewPortItems' d
oes not exist on type 'AngSelectComponent'.
Error at C:/Users/a.corzani/Documents/ang-select/integration/out-tsc/node_modules/ang-select/ang-select.ngfactory.ts:275:35: Property 'filteredItems' i
s private and only accessible within class 'AngSelectComponent'.
Error at C:/Users/a.corzani/Documents/ang-select/integration/out-tsc/node_modules/ang-select/ang-select.ngfactory.ts:278:35: Property 'viewPortItems' d
oes not exist on type 'AngSelectComponent'.
Error at C:/Users/a.corzani/Documents/ang-select/integration/out-tsc/node_modules/ang-select/ang-select.ngfactory.ts:280:36: Property 'filteredItems' i
s private and only accessible within class 'AngSelectComponent'.
(node:12688) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Could not resolve '../out-tsc/src/app/app.module.n
gfactory' from C:\Users\a.corzani\Documents\ang-select\integration\src\main-aot.js

> [email protected] e2e:aot C:\Users\a.corzani\Documents\ang-select\integration
> concurrently "npm run serve:e2e-aot" "npm run protractor" --kill-others --success first

[1]
[1] > [email protected] preprotractor C:\Users\a.corzani\Documents\ang-select\integration
[1] > webdriver-manager update
[1]
[0]
[0] > [email protected] serve:e2e-aot C:\Users\a.corzani\Documents\ang-select\integration
[0] > lite-server -c bs-config.e2e-aot.json
[0]
[1] [12:37:04] I/update - chromedriver: file exists C:\Users\a.corzani\Documents\ang-select\integration\node_modules\protractor\node_modules\webdriver-
manager\selenium\chromedriver_2.31.zip
[1] [12:37:04] I/update - chromedriver: unzipping chromedriver_2.31.zip
[1] [12:37:05] I/update - chromedriver: chromedriver_2.31.exe up to date
[1] [12:37:05] I/update - selenium standalone: file exists C:\Users\a.corzani\Documents\ang-select\integration\node_modules\protractor\node_modules\web
driver-manager\selenium\selenium-server-standalone-3.5.0.jar
[1] [12:37:05] I/update - selenium standalone: selenium-server-standalone-3.5.0.jar up to date
[1] [12:37:06] I/update - geckodriver: file exists C:\Users\a.corzani\Documents\ang-select\integration\node_modules\protractor\node_modules\webdriver-m
anager\selenium\geckodriver-v0.18.0.zip
[1] [12:37:06] I/update - geckodriver: unzipping geckodriver-v0.18.0.zip
[1] [12:37:06] I/update - geckodriver: geckodriver-v0.18.0.exe up to date
[1]
[1] > [email protected] protractor C:\Users\a.corzani\Documents\ang-select\integration
[1] > protractor protractor.config.js
[1]
[1] [12:37:07] I/launcher - Running 1 instances of WebDriver
[1] [12:37:07] I/direct - Using ChromeDriver directly...
[1] Started
[1]
[1] [12:37:19] E/protractor - Could not find Angular on page http://localhost:8080/ : retries looking for angular exceeded
[1] F
[1]
[1]
[1] Failures:
[1] 1) AngSelect Lib E2E Tests should display lib
[1]   Message:
[1]     Failed: Angular could not be found on the page http://localhost:8080/.If this is not an Angular application, you may need to turn off waiting f
or Angular.
[1]                               Please see
[1]                               https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular-on-page-load
[1]   Stack:
[1]     Error: Angular could not be found on the page http://localhost:8080/.If this is not an Angular application, you may need to turn off waiting fo
r Angular.
[1]                               Please see
[1]                               https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular-on-page-load
[1]         at executeAsyncScript_.then (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\protractor\lib\browser.ts:936:29)
[1]         at ManagedPromise.invokeCallback_ (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:1366:
14)
[1]         at TaskQueue.execute_ (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:2970:14)
[1]         at TaskQueue.executeNext_ (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:2953:27)
[1]         at asyncRun (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:2813:27)
[1]         at C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:676:7
[1]         at process._tickCallback (internal/process/next_tick.js:109:7)
[1]     From: Task: Run beforeEach in control flow
[1]         at UserContext.<anonymous> (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\jasminewd2\index.js:94:19)
[1]     From asynchronous test:
[1]     Error
[1]         at Suite.<anonymous> (C:\Users\a.corzani\Documents\ang-select\integration\e2e\app.e2e-spec.ts:5:3)
[1]         at Object.<anonymous> (C:\Users\a.corzani\Documents\ang-select\integration\e2e\app.e2e-spec.ts:3:1)
[1]         at Module._compile (module.js:570:32)
[1]         at Object.Module._extensions..js (module.js:579:10)
[1]         at Module.load (module.js:487:32)
[1]         at tryModuleLoad (module.js:446:12)
[1]   Message:
[1]     Failed: Error while waiting for Protractor to sync with the page: "window.angular is undefined.  This could be either because this is a non-ang
ular page or because your test involves client-side navigation, which can interfere with Protractor's bootstrapping.  See http://git.io/v4gXM for detai
ls"
[1]   Stack:
[1]     Error: Error while waiting for Protractor to sync with the page: "window.angular is undefined.  This could be either because this is a non-angu
lar page or because your test involves client-side navigation, which can interfere with Protractor's bootstrapping.  See http://git.io/v4gXM for detail
s"
[1]         at runWaitForAngularScript.then (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\protractor\lib\browser.ts:653:19)
[1]         at ManagedPromise.invokeCallback_ (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:1366:
14)
[1]         at TaskQueue.execute_ (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:2970:14)
[1]         at TaskQueue.executeNext_ (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:2953:27)
[1]         at asyncRun (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:2813:27)
[1]         at C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:676:7
[1]         at process._tickCallback (internal/process/next_tick.js:109:7)Error
[1]         at ElementArrayFinder.applyAction_ (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\protractor\lib\element.ts:482:23)
[1]         at ElementArrayFinder.(anonymous function) [as getText] (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\protractor\lib\el
ement.ts:96:21)
[1]         at ElementFinder.(anonymous function) [as getText] (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\protractor\lib\element
.ts:873:14)
[1]         at UserContext.<anonymous> (C:\Users\a.corzani\Documents\ang-select\integration\e2e\app.e2e-spec.ts:14:34)
[1]         at C:\Users\a.corzani\Documents\ang-select\integration\node_modules\jasminewd2\index.js:112:25
[1]         at new ManagedPromise (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:1067:7)
[1]         at ControlFlow.promise (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:2396:12)
[1]         at schedulerExecute (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\jasminewd2\index.js:95:18)
[1]         at TaskQueue.execute_ (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:2970:14)
[1]         at TaskQueue.executeNext_ (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:2953:27)
[1]     From: Task: Run it("should display lib") in control flow
[1]         at UserContext.<anonymous> (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\jasminewd2\index.js:94:19)
[1]         at C:\Users\a.corzani\Documents\ang-select\integration\node_modules\jasminewd2\index.js:64:48
[1]         at ControlFlow.emit (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\events.js:62:21)
[1]         at ControlFlow.shutdown_ (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:2565:10)
[1]     From asynchronous test:
[1]     Error
[1]         at Suite.<anonymous> (C:\Users\a.corzani\Documents\ang-select\integration\e2e\app.e2e-spec.ts:13:3)
[1]         at Object.<anonymous> (C:\Users\a.corzani\Documents\ang-select\integration\e2e\app.e2e-spec.ts:3:1)
[1]         at Module._compile (module.js:570:32)
[1]         at Object.Module._extensions..js (module.js:579:10)
[1]         at Module.load (module.js:487:32)
[1]         at tryModuleLoad (module.js:446:12)
[1]   Message:
[1]     Expected [ Entry({ level: SEVERE, message: 'http://localhost:8080/bundle.js - Failed to load resource: the server responded with a status of 40
4 (Not Found)', timestamp: 1502447829702, type: '' }), Entry({ level: SEVERE, message: 'http://localhost:8080/bundle.js - Failed to load resource: the
server responded with a status of 404 (Not Found)', timestamp: 1502447829709, type: '' }) ] to equal [  ].
[1]
[1]   Stack:
[1]     Error: Failed expectation
[1]         at C:\Users\a.corzani\Documents\ang-select\integration\e2e\app.e2e-spec.ts:9:26
[1]         at ManagedPromise.invokeCallback_ (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:1366:
14)
[1]         at TaskQueue.execute_ (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:2970:14)
[1]         at TaskQueue.executeNext_ (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:2953:27)
[1]         at asyncRun (C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:2813:27)
[1]         at C:\Users\a.corzani\Documents\ang-select\integration\node_modules\selenium-webdriver\lib\promise.js:676:7
[1]         at process._tickCallback (internal/process/next_tick.js:109:7)
[1]
[1] 1 spec, 1 failure
[1] Finished in 10.399 seconds
[1]
[1] [12:37:20] I/launcher - 0 instance(s) of WebDriver still running
[1] [12:37:20] I/launcher - chrome #01 failed 1 test(s)
[1] [12:37:20] I/launcher - overall: 1 failed spec(s)
[1] [12:37:20] E/launcher - Process exited with error code 1
[1]
[1] npm
[1]  ERR! Windows_NT 6.3.9600
[1] npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\a.corzani\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "protra
ctor"
[1] npm ERR! node v6.11.2
[1] npm ERR! npm  v3.10.8
[1] npm ERR! code ELIFECYCLE
[1] npm ERR! [email protected] protractor: `protractor protractor.config.js`
[1] npm ERR! Exit status 1
[1] npm ERR!
[1] npm ERR! Failed at the [email protected] protractor script 'protractor protractor.config.js'.
[1] npm ERR! Make sure you have the latest version of node.js and npm installed.
[1] npm ERR! If you do, this is most likely a problem with the integration-test package,
[1] npm ERR! not with npm itself.
[1] npm ERR! Tell the author that this fails on your system:
[1] npm ERR!     protractor protractor.config.js
[1] npm ERR! You can get information on how to open an issue for this project with:
[1] npm ERR!     npm bugs integration-test
[1] npm ERR! Or if that isn't available, you can get their info via:
[1] npm ERR!     npm owner ls integration-test
[1] npm ERR! There is likely additional logging output above.
[1]
[1] npm ERR! Please include the following file with any support request:
[1] npm ERR!     C:\Users\a.corzani\Documents\ang-select\integration\npm-debug.log
[1] npm run protractor exited with code 1
--> Sending SIGTERM to other processes..
[0] npm run serve:e2e-aot exited with code 1

npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\a.corzani\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "e2e:aot"
npm ERR! node v6.11.2
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] e2e:aot: `concurrently "npm run serve:e2e-aot" "npm run protractor" --kill-others --success first`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] e2e:aot script 'concurrently "npm run serve:e2e-aot" "npm run protractor" --kill-others --success first'.

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 integration-test package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     concurrently "npm run serve:e2e-aot" "npm run protractor" --kill-others --success first
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs integration-test
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls integration-test
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\a.corzani\Documents\ang-select\integration\npm-debug.log

npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\a.corzani\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "integratio
n:aot"
npm ERR! node v6.11.2
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] integration:aot: `cd integration && npm run e2e:aot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] integration:aot script 'cd integration && npm run e2e:aot'.
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 ang-select package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cd integration && npm run e2e:aot
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ang-select
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ang-select
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\a.corzani\Documents\ang-select\npm-debug.log

npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\a.corzani\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "integratio
n"
npm ERR! node v6.11.2
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] integration: `npm run integration:aot && npm run integration:jit`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] integration script 'npm run integration:aot && npm run integration:jit'.
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 ang-select package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run integration:aot && npm run integration:jit
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ang-select
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ang-select
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\a.corzani\Documents\ang-select\npm-debug.log

Is it working on a clean install on your environment? I'm trying on master branch.

Possible change detection issue?

I am using this plugin on an application that has two scenarios. Data is read only, text on the page with no inputs, and one where its editable where ng-select is shown.

Essentially, the input is wrapped in an *ngIf that shows/hides it when needed.

When I show the input (ngIf = true), I store the original selection in an object before any changes are made to the model. If I make a change to the input in some way and then call my "cancel" method which resets the field back to its original state, I am getting en error. b

This is where I set the value manually for my model and the input reflects these changes.
this.ruleAttributeForm.controls['AttributeValue'].patchValue(this.initialValueInput)

Immediately after this, I remove the input from the component by setting ngIf = false. I believe this is where I am running into a problem as I get the following error:

AttributeComponent.html:51 ERROR Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges
    at viewDestroyedError (core.es5.js:8459)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13083)
    at checkAndUpdateView (core.es5.js:12263)
    at callWithDebugContext (core.es5.js:13486)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:13026)
    at ViewRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewRef_.detectChanges (core.es5.js:10189)
    at NgSelectComponent.webpackJsonp.../../../../@ng-select/ng-select/ng-select.es5.js.NgSelectComponent.writeValue (ng-select.es5.js:1557)
    at forms.es5.js:1845
    at forms.es5.js:3040
    at Array.forEach (<anonymous>)

I don't know if this is something related to the plugin or not. I would assume that there may be still some open reference thats writing changes and when it comes time for the change detection to fire off again, its noticing that the input is no longer there and throws an error.

Is there any better way of removing or destroying the input aside from ngIf?

Again, this may be nothing to do with your plugin and and a wrong approach I am taking. Haven't found many work-arounds (that work) for the specified error.

Cannot debug demo app on chrome

Hey @anjmao ,
thank you for your work.
I'm following this repository because i'm also interested in building an angular library with webpack.

Just a question, are you able to debug your sources when you run the demo?
I can put breakpoints, but they are not hitting.

Ciao!

Bind Value - How to use?

This is probably working as intended but I figured I would ask.

I am using a reactive form, my control value is an array of objects. When I use bingLabel, everything is fine. When I bindValue to a property within the objects, it throws an error.

ERROR Error: Binding object with bindValue is not allowed.

cities: = [
      {id: '1', name: 'Vilnius'},
      {id: '2', name: 'Kaunas'},
      {id: '3', name: 'Pavilnys'} 
  ];
     
  ngOnInit(){
      this.heroForm = this.fb.group({
          city: [this.cities]
      });
  }

<ng-select 
   [items]="cities"
   placeholder="Select city"
   bindValue="id"
   bindLabel="name"
   formControlName="city">
</ng-select>

Should I be able to bind to the property of an object such as bindValue="cities.id" or bindValue="city.id"?

I may be over thinking this, seems to work without the bindValue there at all but was curious why I was getting the error.

https://plnkr.co/edit/eRnhdJBeIQhTTcmmK4Zv?p=preview

Add public method to change option state

Problem:
Because we are using OnPush change detection it is not possible to change option state and set it disabled, selected or marked programmatically.

Possible solution:
Create public method setOptionState(option) in ng-select component which would allow to change option state and trigger change detection.

UX not found should clear and close

(really impressed by the last commits thank you!!!)
demo page:
when TAB

• dropdown should close
• when not found, should clear the not found entry input
  

Text string placeholders not working

Please fill below information if issuing a bug report.

Expected behaviour

When defining the attributes typeToSearchText and notFoundText, I would expect that the two areas that show the default text would be replaced with the user provided data.

Actual behaviour

The default data is used for both attributes.

More Info

ng-select version: 0.1.2

browser: google chrome

reproducible in demo page: unsure, attributes not used

---

Example Code:

<ng-select  [items]="employees"
bindLabel="NTID"
placeholder="Search Employees"
typeToSearchText="Enter 2 characters to begin your search.."
notFoundText="No employee records found"
[typeahead]="typeahead"
[(ngModel)]="employeeModel"
[clearable]="false"
formControlName="exceptionUser">

Cannot install module into existing angular-cli app

I've tried both testing with npm install ang-select --save and it's not registered with npm.

I also tried installing locally but running npm run build inside the project and using npm install "../ang-select" --save and I get errors running the application:

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'ang-select'.
1. If 'ang-select' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'ang-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
                    bindText="name"
                    [allowClear]="true"
                    [ERROR ->][(ngModel)]="selectedCity">
        </ang-select>
        
"): ng:///BlogPageModule/BlogPageComponent.html@9:20
Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'ang-select'.
1. If 'ang-select' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'ang-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
                    bindText="name"
                    [allowClear]="true"
                    [ERROR ->][(ngModel)]="selectedCity">
        </ang-select>
        
"): ng:///BlogPageModule/BlogPageComponent.html@9:20
    at syntaxError (http://localhost:4200/vendor.bundle.js:21366:34)
    at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:4200/vendor.bundle.js:32478:19)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:46523:39)
    at http://localhost:4200/vendor.bundle.js:46443:62
    at Set.forEach (native)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:46443:19)
    at http://localhost:4200/vendor.bundle.js:46330:19
    at Object.then (http://localhost:4200/vendor.bundle.js:21356:156)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:46329:26)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:46258:37)
    at syntaxError (http://localhost:4200/vendor.bundle.js:21366:34)
    at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:4200/vendor.bundle.js:32478:19)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:46523:39)
    at http://localhost:4200/vendor.bundle.js:46443:62
    at Set.forEach (native)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:46443:19)
    at http://localhost:4200/vendor.bundle.js:46330:19
    at Object.then (http://localhost:4200/vendor.bundle.js:21356:156)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:46329:26)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:46258:37)
    at resolvePromise (http://localhost:4200/polyfills.bundle.js:3193:31)
    at resolvePromise (http://localhost:4200/polyfills.bundle.js:3164:17)
    at http://localhost:4200/polyfills.bundle.js:3241:17
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2833:31)
    at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:51328:37)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2832:36)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.bundle.js:2600:47)
    at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:3005:35)
    at <anonymous>

Tag input support with adding of non exist text in the list

First of all, thanks for the nice component.
By the way, it would be better if this component support tag-input feature.
As a tag input component , if the searched query text not matched with the provided list, it will allow to add query text as new item.

Show placeholder when field is active?

I am not sure if this is a bug or intentional so I wanted to run it by as a question first.

I am using the typeahead setup from the demos and I noticed that when you click the field to enable the search, it leaves the current value there until you being typing.

Would this make sense to show the placeholder there instead?

In my use case, the placeholder is "Search Employees". When I then go to change the value by searching for another, I click the field but it is not really made clear that I can just begin typing for the next search. Should the default value be replaced with the placeholder unless you click away without making a change, then it defaults back to the value?

Just wondering if this is intentional or if you see any benefit to it showing the placeholder instead?

Control stucks when binded

Please fill below information if issuing a bug report.

Expected behaviour

The user should be available to scroll down to the end of the list.

Actual behaviour

1 - Cannot scroll until the end of the list
2 - When an option is selected, it is mixed with the placeholder

More Info

ng-select version: 0.2.5

browser: Chrome

reproducable in demo page: [YES/NO]

this.sharedService.getLanguages().then(languages => this.languages = languages);

and country array is like:

countries = [ 
    {
        name: 'Afghanistan',
        code: 'AF'
    }, {
        name: 'Åland Islands',
        code: 'AX'
    }, {
        name: 'Albania',
        code: 'AL'
    }, ....

and the template is:

<ng-select [items]="countries" bindLabel="name" bindValue="code" placeholder="Select country" [(ngModel)]="selectedCountryId">
                                    </ng-select>

If I remove [(ngModel)]="selectedCountryId" from the template, it works.

Where am I wrong?

Dropdown is hidden after cleared filter

Steps to reproduce:

1. Go to https://ng-select.github.io/ng-select#/bindings
2. Search for A to get No items found message
3. Remove search with backspace
4. No items are shown but after any other click they start to show.

Demo select in modal window

Add demo with select in modal window to make sure all elements are shown correctly.
Bootstrap v4 modal can be used for this https://getbootstrap.com/docs/4.0/components/modal/

Clearable doesn't reset the searched data

Please fill below information if issuing a bug report.

Expected behaviour

When clicking on the clear icon, I would expect that upon entering the field, the previous results would not be shown.

Actual behaviour

After clearing the field, upon selecting the input for a search, it shows the last results it found instead of starting over.

More Info

ng-select version: 0.2.1

browser: chrome

reproducible in demo page: yes

Visit: https://ng-select.github.io/ng-select#/filter-server

• Enter a search term.
• Clear the term.
• Open the field, previous results are shown.

Selecting mouse, leaving with tab leaves dropdown open

Describe how it actually works
Selecting mouse, leaving with tab leaves dropdown open. It seems only at first entry, or selecting with mouse. (My users combine entry's with mouse & keyboard)

feat(multiselect): add multiselect support

Autocomplete with server side data fetching

We need to have autocomplete functionality with observable and server side filtering.

// declare subject from rxjs package
todoFilter = new Subject<string>();
todos = [];

ngOnInit() {
   // in ngOnInit now we can use it like this
   this.todoFilter
            .distinctUntilChanged()
            .debounceTime(200)
            .subscribe(term => {
                // load from serve side
                this.loadTodos(term);
            });
}

<ng-select [items]="todos" [autocomplete]="todoFilter">
</ng-select>

valueKey: By default binds to whole object

Not sure why but when I use the package via npm install inside my application and try your example from the demo select-bindings.component.ts:

<label>Bind model to object</label>
        <ng-select [items]="cities"
                   labelKey="name"
                   placeholder="Select value"
                   [clearable]="false"
                   [(ngModel)]="selectedCity">
        </ng-select>

I have to add valueKey="this" to get the same result as in the demo. I guess this was the behavior prior d976c37 ? This is really weird since I checked the version number in my project (node_modules/@ng-select/ng-select/package.json) and it matched 0.0.5.

Unable to leverage unselect() feature when using ng-label-tmp

(I'm not sure if this is so much of a bug report or a feature request)

Expected behaviour

When using ng-template "ng-label-tmp" it should still be possible to leverage built-in unselect() action
(Alternatively, as a feature: allow user to optionally disable items in the input form that are disabled in the drop down <-- my guess is that this is probably much easier)

Actual behaviour

I am trying to be able to disable removal of an item from a select box when the disabled field is set to true (similar to the way it is in the dropdown menu).

As this is not supported out of the box, I was instead trying to leverage ng-label-tmp to remove the "x" button, however once I introduce the template the default unselect() action is no longer called. So I can't remove items from the list without returning to the dropdown menu

The use case is when I am pre-populating the initial state of the input field and I do not want the user to be able to remove some of the initial values

See below example

More Info

ng-select version: 0.3.0

browser: Chrome 61

reproducible in (fork of) demo page: YES
https://embed.plnkr.co/qgZgyfAUaGrZNVb2NfQQ/
(notice clicking the "x" on one of the pre-populated values that is not disabled doesn't do anything)

Sometimes option selected only after second click event

Then using custom option templates sometimes option is selected only after second mouse click. This may happen due to click on inner template html is not triggering actual click event or even bug in angular.

Steps to reproduce:

1. Open demo app http://localhost:8080#/forms in reactive forms demo tab
2. Select option from Favorite album fropdown using mouse.
3. Sometimes it is needed to click twice for option to be selected.

Navigating with arrows while having custom templates (bigger height) doesn't show current marked option

Close the option list when it lost focus

Thanks for the nice component and for the frequent updates.
By the way, I am using the ng-select component in one of my ionic 3 project.
In my project, i have found that if the "[multiple]="true"", the option list (drop down) doesn't close when I move focus to next component by pressing TAB key or even mouse click. Option list should close when ng-select component lost the focus. Please check whether it is my project specific problem or bug in ng-select.

thanks

Multiselect height on small resolution

Expected behaviour

Should not create new line if items can fit in select

Actual behaviour

On small resolution items can fit but new line is created because invisible filter width is 170px by default. It should not create new line if selected items can fill in the box. Probably we need to use flex to fill filter input all possible space.

More Info

ng-select version: 0.2.0

browser: all browsers

reproducable in demo page: YES

registerOnChange is not called if not ngModel

Handle case when ng-select is used without ngModel. To fix this just change https://github.com/ng-select/ng-select/blob/master/src/lib/src/ng-select.component.ts#L87

from

private propagateChange: (_: NgOption) => { };

to

private propagateChange = (_: NgOption) => { };

Append to body

We need to allow to append dropdown to body to handle cases there dropdown is shown in absolute containers with overflow:hidden.

Change in Single Item Template?

Was there a recent change in the custom template for a single item?

Here was my setup in 0.1.2:

<ng-select [items]="employees" bindLabel="NTID" placeholder="Search Employees" [typeahead]="typeahead" [(ngModel)]="employeeModel"
    [clearable]="false" type="text" formControlName="exceptionUser">
    <ng-template ng-display-tmp let-item="item">
        {{ item.FirstName + ' ' + item.LastName + ' ('+item.NTID+')'}}
    </ng-template>
    <ng-template ng-option-tmp let-item="item">
        <div class="row">
            <div class="col-md-1"><img src="https://mysite.com/images/{{item.QID}}.jpg" width="35px" height="45px"></div>
            <div class="col-md-11">
                {{ item.FirstName + ' ' + item.LastName }}
                <div class="row">
                    <div class="col-md-12">
                        <small>NTID: {{ item.NTID }} | Location: {{ item.CenterName }}</small>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>

After upgrading to 0.1.3, when I select an Item, the input is only using the bindingLabel value as the information that it shows in the dropdown instead of the custom template.

If this did change, how can I continue to use the template?

Toggling show/hide of input causes duplication

I have an input that is wrapped in a [hidden] directive. This input is using my reactive form model for its binding. It appears that when I toggle this input from hidden -> shown -> hidden - > shown, it causes the default options within the input to duplicate. The model seems unaffected and contains the original data.

<span [hidden]="!inEditMode()">
  <ng-select formControlName="AttributeValue" [items]="valueOptions" [multiple]="true" bindLabel="Value" placeholder="Select one or more values" class="test"></ng-select>
</span> 

Selected value is not set after data loaded asynchronous

Expected behaviour

Set selected item after items loaded asynchronous

Actual behaviour

Selected item is not set because writeValue method is called before items input is updated. Possible solution is to initialise itemsList only once and update its items on other changes.
https://ng-select.github.io/ng-select#/forms Selected photo should be first one after items loaded from backend.

More Info

ng-select version: 0.2.1
reproducible in demo page: YES

Show keyboard on mobile devices when focused

When select is focused keyboard should be sown on mobile devices. Seems like this code is not working correctly https://github.com/ng-select/ng-select/blob/master/src/lib/src/ng-select.component.ts#L211 on mobile.

Dropdown stays opened when opening another one

Expected behaviour

Dropdown should close when opening separate one.

1. Open first dropdown
2. Open next dropdown using mouse
3. First dropdown stays open

More Info

reproducable in demo page: YES

Allow to clear filter text value

Hello @anjmao, i'm evaluating your component in a project that i'm working on.
It's almost perfect for my needs, but there is an issue that I found about the behavior of the input (that is actually empty) when an option item is selected.

In your opinion, it's hard to do something like this?
http://plnkr.co/edit/l3phEaaU2HyAiHlJcmwQ?p=preview
I'd like to have text selectable and clearable directly from the filter input.

Mark item when entering filter

Currently when filtering items, you can't select item which best fits your search

Custom dropdown template

Currently we can customize label and option appearance which is great but there is cases when you want to fully control how items in dropdown are rendered, for example custom grouping. For this purpose we can allow to override full dropdown template to get maximum control and customization. Example:

<ng-select [items]="cities2" [(ngModel)]="selectedCity2" bindLabel="name" bindValue="name">
   <ng-template ng-dropdown-tmp let-context="context">
       <div (click)="context.select(item)" *ngFor="let item of context.viewPortItems">
           {{item.title}}
       </div>
   </ng-template>
</ng-select>

Check initial if value not empty array in multiselect

In multi select mode if ngModel is empty array we will get error because it will try to set .selected=true on undefined item
https://github.com/ng-select/ng-select/blob/master/src/lib/src/ng-select.component.ts#L193

UX problem color

Very nice component.

The first selection staying highlighted this is also confusing...
Besides color could/would it possible to to put an Icon 'tick' for the one(s) selected as extra?

Request to add support for multiple = true on typeahead

Please fill below information if issuing a bug report.

Expected behaviour

When using the type-ahead example with multiple=true, I would expect to be able to search for one or more values from a service and select them. Upon clicking on this field again to add more, I would expect that my new search wouldn't wipe out what was already there and replace it with the new results.

Actual behaviour

When using type-ahead with multiple=true, I can search for and click on one or more results. When I click on the input again to add more results, it is overwriting what I had previously selected. It also seems to retain the searched value in the input even after selecting a value from the results.

Example: https://giphy.com/gifs/3o7aDaWZdDy0nIV37G/fullscreen

My use case for this is that I have an input that allows me to select "tags" for support requests and those tags are provided to me from a service. When I go back to this page to edit the existing tags, I need to populate it with the current ones but still allow me to search for more via the service/typeahead.

More Info

ng-select version: 0.2.5

browser: chrome

reproducable in demo page: on plunkr for type-ahead

Multiple input, after search and select delete input

Please fill below information if issuing a bug report.

Expected behaviour

Multiple input, after search and select delete input.

Actual behaviour

After search and select, the input is not cleared. If you want to search for an whole other beginning/letter, the user uses backspace but that clears the selection. By default the input should be cleared in my opinion.

reproducable in demo page: [YES/NO]

Load components styles before page styles to ease styles overriding

Currently ng-select styles are loaded after app styles, which makes it hard to add your custom css. Need to see if we can change this behaviour and load it first in html page.

MultiSelect Two way bind

I Would like to set the value/ add a tag after the component has been instantiated. I currently have my code looking like this,

<ng-select
                [items]="accounts"
                bindLabel="currency"
                bindValue="id"
                [multiple]="true"
                [(ngModel)]="selectedAccounts">
        </ng-select>
<button (click) = "setModel()" class="btn btn-secondary btn-sm"> Set INR</button>

Component :

accounts = [
    {id: 0, currency: 'INR'},
    {id: 1, currency: 'USD'},
    {id: 2, currency: 'GBP'},
    {id: 3, currency: 'EUR'},
    {id: 4, currency: 'CSE'},
  ];

 setModel() {
    // logic to find if the the selected account is already present and if not,
  this.selectedAccounts.push(0);
  }

Expected behaviour

INR should be added as a tag in the drop down.

Actual behaviour

It does not listen to changes made in the selectedAccounts programatically, even if it is two way bound.

More Info

What works is this... I have to re assign a new array every time i need to bind something from the component to the view

let selectionAray: any[] = this.selectedAccounts.slice(0);
selectionAray.push(0);
this.selectedAccounts = selectionAray;

Typeahead allows me to clear the field when clearable is false

Please fill below information if issuing a bug report.

Expected behaviour

When I have clearable=false, I should not be able to clear out the value that is in the field. If I decide to begin searching and then remove the data by backspacing, I would expect the original value to still show up.

Actual behaviour

When I begin typing a result and then backspace and remove my search term, it lets me clear the field entirely and doesn't set the original value back.

Example: https://giphy.com/gifs/l0IsIbLEnkrpxBv8c/fullscreen

More Info

ng-select version: 0.2.5

browser: chrome

reproducable in demo page: yes if clearable=false

Update method to refresh data?

I have my select bound to my form control and may be running into an issue.

On init of my component, I am storing the initial value from my model in a variable. I allow the user to enable "edit Mode" on my page which gives them the multi-select drop down.

In the event that they want to back out of any changes that they made (selected/removed), I need to re-set the initial value.

this.ruleAttributeForm.controls['AttributeValue'].setValue(this.initialValueInput, {emitEvent: true})

I tried to do something like this, which updates the model and the input box itself, however, when i open the dropdown, the values that were previously selected are still marked at selected even though they dont appear in the input.

<ng-select formControlName="AttributeValue" [items]="valueOptions" [multiple]="true" bindLabel="Value" placeholder="Select one or more values" class="test"></ng-select>

Is there a method I need to invoke to refresh this or am I doing something wrong?

Integration app with E2E tests

1. Create integration app generated with angular cli and link built bundles.
2. Write basic e2e tests using protractor and integrate with TravisCI.

Setting default type-ahead model?

If using the type ahead setup, how can I populate the field with a default object (label and value)?

I am creating the "edit" portion of a page and I need to set this field to some data fetched from the database. It is still clearable and searchable but I need to set its default value.

After selecting and clearing, tab inserts item

After selecting and clearing, tab inserts item