valor-software / ng2-select

Angular based replacement for select boxes

Native UI Select Angular component (demo)

ng2-select

Quick start

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

npm i ng2-select --save

2. Include ng2-select.css in your project

3. More information regarding of using ng2-select is located in demo and demo sources.

API

Properties

• items - (Array<any>) - Array of items from which to select. Should be an array of objects with id and text properties. As convenience, you may also pass an array of strings, in which case the same string is used for both the ID and the text. Items may be nested by adding a children property to any item, whose value should be another array of items. Items that have children may omit having an ID. If items are specified, all items are expected to be available locally and all selection operations operate on this local array only. If omitted, items are not available locally, and the query option should be provided to fetch data.
• active (?Array<any>) - selection data to set. This should be an object with id and text properties in the case of input type 'Single', or an array of such objects otherwise. This option is mutually exclusive with value.
• allowClear (?boolean=false) (not yet supported) - Set to true to allow the selection to be cleared. This option only applies to single-value inputs.
• placeholder (?string='') - Placeholder text to display when the element has no focus and selected items.
• disabled (?boolean=false) - When true, it specifies that the component should be disabled.
• multiple - (?boolean=false) - Mode of this component. If set true user can select more than one option. This option only applies to single-value inputs, as multiple-value inputs don't have the search input in the dropdown to begin with.

Events

• data - it fires during all events of this component; returns Array<any> - current selected data
• selected - it fires after a new option selected; returns object with id and text properties that describes a new option.
• removed - it fires after an option removed; returns object with id and text properties that describes a removed option.
• typed - it fires after changing of search input; returns string with that value.

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!

License

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

ng2-select's Issues

Zone.js call stack exceeded

I'm having difficulty troubleshooting an issue I'm having with ng2-select and my ionic2/angular2 app. I'm encountering this issue when attempting to inject ng2-select into my app like so:

---

import { Select } from 'ng2-select';
@App({
  template: require('./app.html'),
  providers: [Select],
})

---

It causes the entire app to crash because of a stack overflow. It seems that zone.js is at the root of the stack trace. Can anyone give me any insight into this? Is this a bug in ng2-select or is it more likely I am doing something wrong?

---

EXCEPTION: Template parse errors:
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
<ion-menu side="left" type="reveal" [ERROR ->][content]="content">
  <ion-content class="hamburger-menu">
    <ion-list>
"): DeveloperApp@1:36
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
[ERROR ->]<ion-menu side="left" type="reveal" [content]="content">
  <ion-content class="hamburger-menu">
    <"): DeveloperApp@1:0
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
[ERROR ->]<ion-menu side="left" type="reveal" [content]="content">
  <ion-content class="hamburger-menu">
    <"): DeveloperApp@1:0
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
[ERROR ->]<ion-menu side="left" type="reveal" [content]="content">
  <ion-content class="hamburger-menu">
    <"): DeveloperApp@1:0
RangeError: Maximum call stack size exceeded ("
      <button
        ion-item
        [ERROR ->]*ngFor="#page of pages"
        (click)="go(page.page, page.params)">
        {{page.name}}
"): DeveloperApp@6:8
RangeError: Maximum call stack size exceeded ("
        ion-item
        *ngFor="#page of pages"
        [ERROR ->](click)="go(page.page, page.params)">
        {{page.name}}
      </button>
"): DeveloperApp@7:8
RangeError: Maximum call stack size exceeded ("
        ion-item
        *ngFor="#page of pages"
        (click)="go(page.page, page.params)">[ERROR ->]
        {{page.name}}
      </button>
    </ion-list>
"): DeveloperApp@7:45
RangeError: Maximum call stack size exceeded ("

<!-- main navigation -->
<ion-nav id="nav" [ERROR ->][root]="root" #content></ion-nav>
"): DeveloperApp@15:18BrowserDomAdapter.logError @ browser_adapter.js:76BrowserDomAdapter.logGroup @ browser_adapter.js:86ExceptionHandler.call @ exception_handler.js:56(anonymous function) @ application_ref.js:192NgZone._notifyOnError @ ng_zone.js:430errorHandling.onError @ ng_zone.js:328Zone.run @ zone-microtask.js:1221(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$$internal$$tryCatch @ zone-microtask.js:442lib$es6$promise$$internal$$invokeCallback @ zone-microtask.js:454lib$es6$promise$$internal$$publish @ zone-microtask.js:425(anonymous function) @ zone-microtask.js:97microtask @ ng_zone.js:383Zone.run @ zone-microtask.js:1217(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$asap$$flush @ zone-microtask.js:236
browser_adapter.js:76 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:58(anonymous function) @ application_ref.js:192NgZone._notifyOnError @ ng_zone.js:430errorHandling.onError @ ng_zone.js:328Zone.run @ zone-microtask.js:1221(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$$internal$$tryCatch @ zone-microtask.js:442lib$es6$promise$$internal$$invokeCallback @ zone-microtask.js:454lib$es6$promise$$internal$$publish @ zone-microtask.js:425(anonymous function) @ zone-microtask.js:97microtask @ ng_zone.js:383Zone.run @ zone-microtask.js:1217(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$asap$$flush @ zone-microtask.js:236
browser_adapter.js:76 Error: Template parse errors:
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
<ion-menu side="left" type="reveal" [ERROR ->][content]="content">
  <ion-content class="hamburger-menu">
    <ion-list>
"): DeveloperApp@1:36
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
[ERROR ->]<ion-menu side="left" type="reveal" [content]="content">
  <ion-content class="hamburger-menu">
    <"): DeveloperApp@1:0
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
[ERROR ->]<ion-menu side="left" type="reveal" [content]="content">
  <ion-content class="hamburger-menu">
    <"): DeveloperApp@1:0
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
[ERROR ->]<ion-menu side="left" type="reveal" [content]="content">
  <ion-content class="hamburger-menu">
    <"): DeveloperApp@1:0
RangeError: Maximum call stack size exceeded ("
      <button
        ion-item
        [ERROR ->]*ngFor="#page of pages"
        (click)="go(page.page, page.params)">
        {{page.name}}
"): DeveloperApp@6:8
RangeError: Maximum call stack size exceeded ("
        ion-item
        *ngFor="#page of pages"
        [ERROR ->](click)="go(page.page, page.params)">
        {{page.name}}
      </button>
"): DeveloperApp@7:8
RangeError: Maximum call stack size exceeded ("
        ion-item
        *ngFor="#page of pages"
        (click)="go(page.page, page.params)">[ERROR ->]
        {{page.name}}
      </button>
    </ion-list>
"): DeveloperApp@7:45
RangeError: Maximum call stack size exceeded ("

<!-- main navigation -->
<ion-nav id="nav" [ERROR ->][root]="root" #content></ion-nav>
"): DeveloperApp@15:18
    at new BaseException (exceptions.js:15)
    at TemplateParser.parse (template_parser.js:83)
    at template_compiler.js:132
    at Zone.run (zone-microtask.js:1217)
    at Zone.run (ng_zone.js:343)
    at zoneBoundFn (zone-microtask.js:1194)
    at lib$es6$promise$$internal$$tryCatch (zone-microtask.js:442)
    at lib$es6$promise$$internal$$invokeCallback (zone-microtask.js:454)
    at lib$es6$promise$$internal$$publish (zone-microtask.js:425)
    at zone-microtask.js:97
    at microtask (ng_zone.js:383)
    at Zone.run (zone-microtask.js:1217)
    at Zone.run (ng_zone.js:343)
    at zoneBoundFn (zone-microtask.js:1194)
    at lib$es6$promise$asap$$flush (zone-microtask.js:236)BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:59(anonymous function) @ application_ref.js:192NgZone._notifyOnError @ ng_zone.js:430errorHandling.onError @ ng_zone.js:328Zone.run @ zone-microtask.js:1221(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$$internal$$tryCatch @ zone-microtask.js:442lib$es6$promise$$internal$$invokeCallback @ zone-microtask.js:454lib$es6$promise$$internal$$publish @ zone-microtask.js:425(anonymous function) @ zone-microtask.js:97microtask @ ng_zone.js:383Zone.run @ zone-microtask.js:1217(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$asap$$flush @ zone-microtask.js:236

Cannot import the component using node module resolution.

Hi,

I'm getting GET http://localhost:3000/ng2-select/ng2-select.js 404 (Not Found)fetchTextFromURL @
if I tweak systemjs and

Uncaught SyntaxError: Unexpected token < Evaluating http://localhost:3000/ng2-select/ng2-select Error loading http://localhost:3000/app/main.jsZone.run without tweaking.

Import statement

import {SELECT_DIRECTIVES} from "ng2-select/ng2-select";

Angular 2 beta7. To reproduce just walk through latest getting started guide, and try to import the module without copying files to the app/ source folder.

See selection options using only the keyboard and without typing

If I'm a keyboard only user, I can't see the options until I start typing. The options start filtering and I can see some of them. I can delete what I typed and then see all the options and cycle through them with the arrow keys (nice).

I expected arrow keys to show the options like a standard <select> element would behave. This would make the select box a bit more accessible to keyboard only users.

Multiple ng-select on one screen

Hi all,

I have got an issue using multiple ng-select on one screen.
If there are two instances of ng-select and I click on one of them, both are being opened for selection.

Problem can be reproduced like this: https://gist.github.com/anonymous/1654ac588f27ac628079

Thanks a lot!
Lu.

Add an option to have the searchbox UI look like select 2

Original select2 differs from this plugin visually because in select2 when you open the dropdown, the search box is below the actual dropdown. This allows the user to visually see what is currently selected. In the screenshot you can see that the input search field is below the dropdown.

initData instead of data

In documentation of "Properties" data should be initData. Further it seems an array is expected always.

removed event not fired

When using initData for setting initial value and multiple input set to false, removed event is not fired when removing selected option (when another option/or the same option is selected by mouseclick, everything works fine). When handling clck event, activeoption is not set yet and the event can not be fired.

 <div tabindex="0"
     *ngIf="multiple === false"
     (keyup)="mainClick($event)"
     class="ui-select-container ui-select-bootstrap dropdown open">
    <div [ngClass]="{'ui-disabled': disabled}"></div>
    <div class="ui-select-match"
         *ngIf="!inputMode">
      <span tabindex="-1"
          class="btn btn-default btn-secondary form-control ui-select-toggle"
          (^click)="matchClick()"
          style="outline: 0;">
        <span *ngIf="active.length <= 0" class="ui-select-placeholder text-muted">{{placeholder}}</span>
        <span *ngIf="active.length > 0" class="ui-select-match-text pull-left"
              [ngClass]="{'ui-select-allow-clear': allowClear && active.length > 0}"
              [innerHTML]="active[0].text"></span>
        <i class="dropdown-toggle pull-right"></i>
        <i class="caret pull-right"></i>
        <a *ngIf="allowClear && active.length>0" style="margin-right: 10px; padding: 0;"
          (click)="remove(activeOption)" class="btn btn-xs btn-link pull-right">
          <i class="glyphicon glyphicon-remove"></i>
        </a>
      </span>
    </div>

I suggest for the template.
(click)="remove(active[0])" class="btn btn-xs btn-link pull-right">

Am I using the component incorrectly or is this really a bug? Thanks a lot.

Clear selection from function

Hi, is there a way to clear selection inside a function?, for example i need to clear my selection after a variable changes.

Make opening the popup a local event

I was trying to put an ng2-select inside a dropdown. that didn't work since opening the select dropdown is a global event and I don't want the dropdown to close when clicking on the select so I stopped the click from propagating.
This is my quick&dirty fix:

    this.offSideClickHandler = this.getOffSideClickHandler(this);
    document.addEventListener('click', this.offSideClickHandler);
    this.clickHandler = this.getClickHandler(this);
    this.element.nativeElement.addEventListener('click', this.clickHandler);

  private getClickHandler(context:any) {
    return function (e:any) {
      if (e.target && e.target.nodeName === 'INPUT'
        && e.target.className && e.target.className.indexOf('ui-select') >= 0) {
        return;
      }

      if (e.srcElement && e.srcElement.className &&
        e.srcElement.className.indexOf('ui-select') >= 0) {
        if (e.target.nodeName !== 'INPUT') {
          context.matchClick(null);
        }
        return;
      }
    };
  }

  private getOffSideClickHandler(context:any) {
    return function (e:any) {
      if (e.target && e.target.nodeName === 'INPUT'
        && e.target.className && e.target.className.indexOf('ui-select') >= 0) {
        return;
      }

      if (e.srcElement && e.srcElement.className &&
        e.srcElement.className.indexOf('ui-select') >= 0) {
        return;
      }

      context.inputMode = false;
      context.optionsOpened = false;
    };
  }

It works for me. what do you think?

naming conflict in ng2-select initial data selector

The docs and demo examples are using the data attribute for initial data. Whereas actually it is initData in implemented code. If anyone going to use data, he will not get desired results. Kindly update the docs and demo examples, as it took me so many frustrating hours to figure this out.

How to set the option of the ng2-select which is coming from responce

I have posted my que here http://stackoverflow.com/questions/35572021/how-to-set-the-option-of-the-ng2-select-which-is-coming-from-responce

Invalid filtering due to using "RegExp.test()"

After banging my head for most of a day, I've stumbled upon an odd side-effect caused by using "RegExp.text() in select.ts:filter() (line ~515). Seems RegExp keeps a back reference from the last test, which negates the next test! Changing the code to use .match() resolves this issue, at the theoretical expense of performance.

This can be verified / tested using the following plunker
Ng2 test() v match() test

References:

• MDN text() - test() called multiple times on the same global regular expression instance will advance past the previous match
• S/O (final answer)

Multiple dropdown being triggered at the sametime

If I have multiple instance on the same page, they will be triggered at the same time.

Duplicates in ng2-select, select by Enter in multiple mode

In multiple mode, click on input and press Enter
https://drive.google.com/file/d/0B5sf8URbEXr8T3lDdHFON0xZc2M/view?usp=sharing
then press Enter again and again
https://drive.google.com/file/d/0B5sf8URbEXr8aUN1RVZLZThmanc/view?usp=sharing

Can you make it possible to add custom values?

Can you make it possible to add custom values when 'multiple' is set to true?
So when a user enters a value and not suggestions occur for that value, a custom value is added to the list, and added to the 'value' array when the (data) event is called.

Using more selects on one page

Hi,
I used more selects(single) on one page and clicking on one of these activate all selects on page.
Any solution for this?

I am using component select-input:

<ng-select [allow-clear]="true" [items]="selectItems" [initData]="modelValue" (data)="refreshValue($event)" placeholder="{{placeholder ? placeholder : ''}}"> </ng-select>

B.

reference Error

hello, if i reference the ng2-select i get duplicate identifier errors etc in my Visual Studio 2015,

i did it like " import {select} from 'ng2-select/ng2-select';"

but the other package from valor-software "ng2-bootstrap" works like :

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

anyone got a suggestion?

Feature request: display checkbox to select and show the current state in dropdown

Using ng2-select

Hello,

I am trying to include this component in my project. I have created select component and it does not load. I am getting this error:

This is the code for component:

import {Component} from 'angular2/core';

import {SELECT_DIRECTIVES} from 'ng2-select';

@Component({
  selector: 'my-select',
  directives: [SELECT_DIRECTIVES],
  template: `
    <h3>Select a hero</h3>
    <ng-select></ng-select>
    `
})

export class SelectComponent { 

}

I am using routes to navigate to that component. The project is located here - https://github.com/stanimirtt/Angular-2-App

I have notice that if I remove directives: [SELECT_DIRECTIVES] it loads. In the other way, stuck to loadin... Thanks in advance for the help!

In 1.0.1-beta.0, if there are multiple selects in a single view they both open when clicked

In addition, clicking on the first one always locates my cursor for typing in the last one.

The demo in this fork / branch shows the problem: https://github.com/rlodge/ng2-select/tree/issue-22-demo

children Demo doesn't work on firefox

Click the down arrow. no dropdown data. no error on console.

Highlighted selected item in the dropdown like select2

Select2 highlights the currently selected item in the dropdown with a different color than the mouse hover. This adds to the usability allowing a user to know which item is currently selected.
In the image below you can see that the selected item, Alaska, has a gray background color and the item I am currently hovering on, California, has a blue color.

[data] does not work on single or multiple

Your own example does not display 'Athens' as the selected option on the multiple tab.

Is there a way to manually set the default?

SO: http://stackoverflow.com/questions/37380576/how-to-set-default-for-ng2-select

App fails to compile when using rootDir in tsconfig

As soon as I import either Select or SELECT_DIRECTIVES I get the following compile errors

error TS6059: File '/node_modules/ng2-select/components/select.ts' is not under 'rootDir' 'src'. 'rootDir' is expected to contain all source files.
error TS6059: File '/node_modules/ng2-select/components/select/select-interfaces.ts' is not under 'rootDir' 'src'. 'rootDir' is expected to contain all source files.
error TS6059: File '/node_modules/ng2-select/components/select/select-item.ts' is not under 'rootDir' 'src'. 'rootDir' is expected to contain all source files.
error TS6059: File '/node_modules/ng2-select/components/select/select-pipes.ts' is not under 'rootDir' 'src'. 'rootDir' is expected to contain all source files.
error TS6059: File '/node_modules/ng2-select/components/select/select.ts' is not under 'rootDir' 'src'. 'rootDir' is expected to contain all source files.

Here is my tsconfig

{
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "build",
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules",
    "typings/browser.d.ts",
    "typings/browser"
  ]
}

• angular2: 2.0.0-beta.15
• ng2-select: 1.0.1-beta.0
• typescript: 1.8.10

initial values

Is it possible to load data on combox only when I click. I try but the list not refresh. I must click a second time to see the changed list

select programmatically

it is often important to be able to select a value programmatically.
as an example, in my project, i have a dropdown whose values may be updaed by an RxJs.Observable stream that may be driven by other components.
Currently there is no way to change the selection with means other than direct interaction with the ui

Dropdown does not open when clicked on right end areas when multi-select enabled

I encountered this issue on your demo page

How to add required check

I am finding it difficult to add HTML5 based required attribute on ng-select directive. Does anyone know how can this achieved...?

Dynamic list values

I'm trying to create a select drop down that populates based off of an http request.

Relevant code is
public clients: any[] = [];

ngOnInit() {
    this._clientListService.getClients()
      .subscribe(res => {
        this.clients = res;
        console.log(this.clients)
      })
  }

<ng-select [allowClear]="true"
              [items]="clients"
              (data)="refreshValue($event)"
              placeholder="Please select a client">
</ng-select>

However, the dropdown options are blank. Populating this on a works fine: <select class="form-control"> <option *ngFor="let client of clients" value="client.client_id">{{client.client_id}} - {{client.client_id_name}}</option> </select> Any clues? I'm guessing it's change detection not kicking in. Ftr, I'm seeing you refer to a "query" option, but I can't find it anywhere. I find a couple mentions in your source, but not as input/output shrug

Disabled option don't add disabled on search input

Using [disabled]="disabled" don't add disabled on search input.

Indeed, in the template, the code is [disabled]="disabled" and should be [disabled]="_disabled".

does not work in Firefox

The demo page does not work very well in Firefox (tried 45 and 34). Nothing happens clicking at the Single or Children tab. Only thing working is the Multiple tab.

It works in Chrome...

Change the behavior on set items instead of on initialization

The behavior is set on initialization, but sometimes the items are not available on initialization and they are only received a bit afterwords causing errors since the behavior is governed by the first item.
instead you can move the logic to the items setter

  @Input() set items(value:Array<any>) {
    this._items = value;
    this.itemObjects = this._items.map((item:any) => new SelectItem(item));
    this.behavior = this.itemObjects.length > 0 && this.itemObjects[0].hasChildren() ?
      new ChildrenBehavior(this) : new GenericBehavior(this);
  }

(maybe you could somehow check if the previous behavior is like the new one for not creating a new behavior all the time, or just create both lazily and store them, then switch between the two if the items change)

No Directive annotation found on SelectComponent

Ng2-select was working fine until I re-installed my node modules. Now I get "No Directive annotation found on SelectComponent". Is there a solution for this?

Help! Unexpected token <(…)

Hi guys! I am just starting with Angular 2 and I am getting a lot of pain trying to install this component but I don't know where is the problem!

Just installed through npm and included da CSS file on my index.html.

There is my Component:

`import {Component} from 'angular2/core';
import {Select} from "ng2-select/ng2-select";

@component({
templateUrl: 'src/views/lead/lists.view.html',
directives: [Select],
})
export class LeadListsComponent {
team: string = "Ringo";
teams: string[] = ["John", "Paul", "George", "Ringo"];
}`

And I am facing this issue:

angular2-polyfills.js:332 Error: SyntaxError: Unexpected token <(…)ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434 browser-sync-client.2.11.2.js:1 XHR finished loading: POST "http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=LE_vEJl&sid=HBaWZ-iVa8xKruebAAC6".Request.create @ browser-sync-client.2.11.2.js:1Request @ browser-sync-client.2.11.2.js:1XHR.request @ browser-sync-client.2.11.2.js:1XHR.doWrite @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:2proxy @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:2(anonymous function) @ browser-sync-client.2.11.2.js:2exports.encodePacket @ browser-sync-client.2.11.2.js:2encodeOne @ browser-sync-client.2.11.2.js:2eachWithIndex @ browser-sync-client.2.11.2.js:2map @ browser-sync-client.2.11.2.js:2exports.encodePayload @ browser-sync-client.2.11.2.js:2Polling.write @ browser-sync-client.2.11.2.js:1Transport.send @ browser-sync-client.2.11.2.js:1Socket.flush @ browser-sync-client.2.11.2.js:1Socket.sendPacket @ browser-sync-client.2.11.2.js:1Socket.write.Socket.send @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:3Encoder.encode @ browser-sync-client.2.11.2.js:3Manager.packet @ browser-sync-client.2.11.2.js:3Socket.packet @ browser-sync-client.2.11.2.js:3Socket.emit @ browser-sync-client.2.11.2.js:3(anonymous function) @ browser-sync-client.2.11.2.js:24Emitter.emit @ browser-sync-client.2.11.2.js:3Socket.onevent @ browser-sync-client.2.11.2.js:3Socket.onpacket @ browser-sync-client.2.11.2.js:3(anonymous function) @ browser-sync-client.2.11.2.js:3Emitter.emit @ browser-sync-client.2.11.2.js:3Manager.ondecoded @ browser-sync-client.2.11.2.js:2(anonymous function) @ browser-sync-client.2.11.2.js:3Emitter.emit @ browser-sync-client.2.11.2.js:2Decoder.add @ browser-sync-client.2.11.2.js:3Manager.ondata @ browser-sync-client.2.11.2.js:2(anonymous function) @ browser-sync-client.2.11.2.js:3Emitter.emit @ browser-sync-client.2.11.2.js:2Socket.onPacket @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:1Emitter.emit @ browser-sync-client.2.11.2.js:2Transport.onPacket @ browser-sync-client.2.11.2.js:1callback @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:2exports.decodePayloadAsBinary @ browser-sync-client.2.11.2.js:2exports.decodePayload @ browser-sync-client.2.11.2.js:2Polling.onData @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:1Emitter.emit @ browser-sync-client.2.11.2.js:2Request.onData @ browser-sync-client.2.11.2.js:1Request.onLoad @ browser-sync-client.2.11.2.js:1xhr.onreadystatechange @ browser-sync-client.2.11.2.js:1wrapFn @ angular2-polyfills.js:771ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431

Somebody have any clue?

Feature Request: AJAX - Loading Remote Data

Select2 has the option to load data through ajax calls when a phrase is searched.

I think this is important as sometimes the list could be huge and you don't want to load all the data on init.

Make Angular2 beta.0 compatible ng-for, ng-if, ng-class etc...

Angular2 has switched to camel case from kebab case.

Error during evaluation of "keyup" e.srcElement is undefined

I tried to use this but i get :

EXCEPTION: Error during evaluation of "keyup" angular2.dev.js:23514:9

ORIGINAL EXCEPTION: TypeError: e.srcElement is undefined angular2.dev.js:23514:9

ORIGINAL STACKTRACE: angular2.dev.js:23514:9

Select.prototype.mainClick@http://localhost:5555/node_modules/ng2-select/components/select/select.js:101:9
anonymous/ChangeDetector_Select_1.prototype.handleEventInternal@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js line 10897 > Function:432:18
AbstractChangeDetector</AbstractChangeDetector.prototype.handleEvent@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:8788:17
AppView</AppView.prototype.dispatchEvent@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:9396:19
AppView</AppView.prototype.dispatchRenderEvent@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:9391:14
DefaultRenderView</DefaultRenderView.prototype.dispatchRenderEvent@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:7819:32
createRenderView/eventDispatcher@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:9781:14
createEventHandler/<@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:9852:14
decoratePreventDefault/<@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:15370:34
DomEventsPlugin</DomEventsPlugin.prototype.addEventListener/outsideHandler/<@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:7874:18
run@http://localhost:5555/node_modules/angular2/bundles/angular2-polyfills.js:138:14
NgZone</NgZone.prototype._createInnerZone/<.$run/<@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:5719:22
NgZone</NgZone.prototype.run@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:5681:18
DomEventsPlugin</DomEventsPlugin.prototype.addEventListener/outsideHandler@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:7873:1
run@http://localhost:5555/node_modules/angular2/bundles/angular2-polyfills.js:138:14
zoneBoundFn@http://localhost:5555/node_modules/angular2/bundles/angular2-polyfills.js:111:14
angul

Children select printing as a single select

If the first element of the input array has the property children defined but empty, it won't display as a group select.

This is due to the fact that on the template the ngIf has itemObjects[0].hasChildren()

public hasChildren():boolean {
    return this.children && this.children.length > 0;
 }

Not sure if its worth fixing, but if you don't filter that from the server response, your select won't display properly.

Is it worth fixing? One solution would be checking the entire array to see if any of it has children.

Strip html tags from search

I'm trying to use HTML-rich strings in my "text" elements as shown:

But, when search for a value (ie "blue"), then results content are invalid, as shown:

I should have "blue 10" through "blue 100", but for some yet to be debugged reason, it only shows every other entry. I'm thinking that the string filtering is getting confused.

My "text" entries are as such:

`<colorbox style='background-color:${c.hex};'></colorbox> ${c.name} (${c.hex})`

make it work with angular ^2.0.0-rc.1

I tried to use it but I couldn't make it work after the recent modules restructuring

update angular version from beta 1 to beta 11

Can you please update angular2 version to angular beta 11

Add no results found message when there are no results based on input

When a user types text in the search that doesn't match any options in the dropdown, the user is just left with an input filled with their text. It is poor usability because it will confuse the user thinking that it will accept the typed option. Instead, the functionality should be like the existing select2 one where a No Results Found message is displayed.

Difference to ng2-selectivity

I am confused with another project called ng2-selectivity. Can you explain the difference?

Using the 'query' option

In the readme file where the items property is described there is a reference to a query property for those of us who would like to load the select box with non-local data. Is this feature not fully implemented - or is it not fully documented?

Select Multiple - html entities.

Html entities show up correctly in the drop down menu of for select multiple but not in the boxes for the selected state.

eg ℃ showing as &#8451

Clic on arrow don't work

The click on the right arrow don't work.
The problem is on the method getOffSideClickHandler(context:any).
The test to call matchClick should be :
e.srcElement.className.indexOf('ui-select') >= 0 should be e.srcElement.className.indexOf('ui-select') >= 0 || e.srcElement.className.indexOf('caret pull-right') >= 0

Add option to disable manual input

Original select2 had an option called Hiding the search box which would disable manual user input for a dropdown. This is very useful when you have a small list of options in a dropdown and don't want the user to be able to type.

How to set the multiselect values dynamically

I have posted my que here http://stackoverflow.com/questions/35551444/how-to-set-the-selected-value-of-the-ng2-select

Code snippet in demo site using wrong selector

As far as I know, the ng2-select package exports a directive called ng-select instead of ng2-select.

http://valor-software.com/ng2-select/

If activeOption is not defined, select crashes

When combining ng2-select with routerOnReuse and changing the items on each reuse the select will crash when the template calls isActive(o).

Currently its like this:

private isActive(value:SelectItem):boolean {
    return this.activeOption.text === value.text;
}

Easy solution would be doing:

private isActive(value:SelectItem):boolean {
    return this.activeOption && this.activeOption.text === value.text;
}