bitexpert / ng2-combobox

[DEPRECATED] The only true Angular Combobox component ;)

About

ng2-combox is an angular2 combobox / dropdown component, which handles remote or local data to display the list.

It is minimal styled and provides parameters for custom classes.

It can be used as a simple select box or as a typeahead / autocomplete field.

Usage

Install
npm i ng2-combobox

Import
import {ComboBoxModule} from 'ng2-combobox';
or
import {ComboBoxComponent} from 'ng2-combobox';

Use
<combo-box [listData]="types" [displayField]="'name'" [valueField]="'value'" [(ngModel)]="model.type"> </combo-box>

Parameters / Inputs

displayField: string;
name of the field in the selected data object which should be displayed. (e.g. data.items or data)

valueField: string;
name of the field in the selected data object which should be considered as value of the field. (e.g. data.items or data) if not set the whole object is the value of the field.

listData: Observable<Object[]> | Object[]
data used for selection list.

remote: boolean = false;
true if you want to use remote data.

clearOnSelect: boolean = false;
true if you want to clear field if a list item was selected.

forceSelection: boolean = true;
true if an item has to be selected.

localFilter: boolean = false;
true if local data should be filtered during typing.

localFilterCaseSensitive: boolean = true;
true if local data filtering should be case sensitive.

typeAheadDelay: number = 500;
delay before triggering search.

inputClass: string = 'form-control';
class to apply to the inner input field

inputPlaceholder: string = ''; value of the placeholder attribute of the inner input field

loadingIconClass: string = 'loader';
class to apply to the loading icon element

triggerIconClass: string = 'trigger';
class to apply to the loading icon element

dataRoot: string = ''; root element for list data (only first level at the moment)

disabledField: string = ''; member of data object which marks object as disabled (sets class and prevent selection)

noMatchesText: string = ''; text to appear when the input text does not match any item of the selection list.

Events / Outputs

onQuery: EventEmitter<string>();
fires during typing has to be handles to refresh remote data from backend

onSelect: EventEmitter<string>();
fires if an item from list is selected

onCreate: EventEmitter<string>();
fires if selection is triggered for an element which is not is the list (only when forceSelection = false)

onBlur: EventEmitter<any>();
fires when field blurs

onInitValue: EventEmitter<string>();
fires when the initial value has been set

Thank you

Thank you BrowserStack for prodiving us with the infrastructure needed to test ng2-combobox.

License

ng2-combobox is released under the Apache 2.0 license.

ng2-combobox's Issues

Length character on remote query

Is there any property to launch the remote search with a minimum length of characters?

Currently the query is launched when the text box receives the focus and I do not seem appropriate.

Thanks.

Can I use ng2-combobox with custom value?

In my project i need a combobox field, in that user can select pre-defined or type custom values.

I tried with ng2-combobox, but seems it doesn't provide feature that i need.

How i try to use it:

<pre>
   <combo-box [listData]="comboConstants"
                        [displayField]="'text'"
                        [valueField]="'id'"
                        [(ngModel)]="rule.value"
                        [ngModelOptions]="{standalone: true}"
                        [forceSelection]="false"
                        [inputClass]="'form-control mt-2'"
                        [clearOnSelect]="false"
                        (onInitValue)="initComboBoxValue($event)"></combo-box>
</pre>

When i setted forceSelection to false i expected that combobox will set value that i typed in input to rule.value, but it doesn't. (rule.value become undefined)

May be i'm doing something wrong... But i think, it would be a nice feature - a possibility to type custom values...

Best regards!

Implement a style API for consumers

Heya,

combo-box could use a style API that let consumers of combo-box apply styles to local-DOM elements of combo-box.

I only know how to do this with polymer, not with angular.
But there should be an angular way to implement a style APIs as well.

Examle Problem for this issue:
Implementing combo-box with the intend to style it's input color red when some conditions are met.

Error when trying to build the project in Angular 6+ AOT mode

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request

Plunkr Case (Bug Reports)

Current behavior

When i build my project using ng2-combobox in AOT mode it fails with error:
ERROR in node_modules/ng2-combobox/src/combo-box.component.ts.ComboBoxComponent.html(18,57): : Property 'getDisplayValue' is private and only accessible within class 'ComboBoxComponent'. node_modules/ng2-combobox/src/combo-box.component.ts.ComboBoxComponent.html(14,57): : Expected 0 arguments, but got 1. node_modules/ng2-combobox/src/combo-box.component.ts.ComboBoxComponent.html(14,97): : Expected 0 arguments, but got 1.

Expected behavior

successful build =)
Minimal reproduction of the problem with instructions
Just run angular 6+ AOT compilation
What is the motivation / use case for changing the behavior?

I am very need for AOT in my project
Please tell us about your environment:

Angular 7.2, webpack 3.5.4, npm 6.2.0, node v10.9.0

• Language: TypeScript ~2.4.2
• Node (for AoT issues): node --version = node v10.9.0

Combobox list will not appear until focus is removed off the browser tab.

I am having a problem with the combobox, where if I open a new instance of the browser (in my case Chrome), fill the combobox with a list of items, and press the down arrow, the list will not appear. The text box is displaying the first item in the list, but the list will not appear. To get the list to appear, I have to remove focus off the tab in anyway.

Example:

1. Create a new tab.
2. Click on another application.
3. Click on the desktop.
4. Press F12 to bring up the devtools.

When focus is lost on the tab, the list automatically pops open. Afterwards, so long as the browser stays open, I no longer have an issue. I can close all tabs, and reopen the page in a new tab and have no problem with the combobox. The issue only occurs the first time the component is used after a new instance of the browser is opened.

TypeError: Cannot read property 'filter' of undefined at ComboBoxComponent

Hi.

I found a issue when you load data from a server and you have filter=true, it displays this error:

<combo-box [listData]="brands" (onSelect)="selectValue()" [localFilter]="true" [displayField]="'brand_name'" [valueField]="'brand_id'" [(ngModel)]="brand">

ERROR TypeError: Cannot read property 'filter' of undefined
at ComboBoxComponent

On the component I found the issue:

private loadData() {
    if (!this.remote) {
        if (this.localFilter) {
            this.data = this._initialData.filter((item) => {

If we validate this._initialData as well we will avoid the error:

private loadData() {
    if (!this.remote) {
        if (this.localFilter && this._initialData) {
            this.data = this._initialData.filter((item) => {

Is it possible that you add this to the code?

Regards.

Publish new release with placeholder included

Hi,

I see you've added placeholder support to the combobox. But we cannot reuse this functionality because latest version is still 0.5.4

demo page with examples

rxjs/rx no longer needed

When I install the component, I'm getting these errors:

Module '".../node_modules/rxjs/Rx"' has no exported member 'Observable'.
node_modules/ng2-combobox/src/combo-box.component.ts(2,21): error TS2305: Module '".../node_modules/rxjs/Rx"' has no exported member 'Subscription'.

In the code you have import { Observable, Subscription} from 'rxjs/Rx';.
As of Angular 6, it needs to be just ...from 'rxjs';

Implicit 'any' type

TS7008: Member '_input' implicitly has an 'any' type.

This can be solved by simply typing the _input viewchild as any.

Not working with Angular CLI >= 1.5.0

Could you please update the library to work with newer CLI versions?

We were using CLI 1.4.7 (and everything was OK) but now when we upgrade to 1.5.0 (or newer e.g. 1.7.3) there are build errors.

We have upgraded to Angular 5 so have to use at least [email protected].

Error:
Module build failed: Error: node_modules\ng2-combobox\src\combo-box.module.ts is missing from the TypeScript compilation.
Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library.
TS files in published libraries are often a sign of a badly packaged library.
Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).

Drop Down List Not Displaying

Have an issue with the the drop down list not displaying always. Below are the steps to recreate.

Open page with combo-box
Initial focus is placed in combo-box
Note combo-box list is populated and displays
Click combo-box drop down arrow
Note combo-box list is no longer displayed
Click combo-box drop down arrow
Note combo-box list briefly appears and then is no longer displayed
Note repeated clicks of combo-box drop down arrow cannot force list to be displayed again
Place focus elsewhere on page
Return focus to combo-box
Note that combo-box list is populated and displays

focus selected item in long lists