Package Exports

@ng-select/ng-select

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ng-select/ng-select) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular ng-select - All in One UI Select, Multiselect and Autocomplete

See Demos or try in Plunker

Features

Custom bindings to property or object
Custom option and label templates
Virtual Scroll support with large data sets (>5000 items).
Keyboard navigation
Correct keyboard events behaviour
Multiselect
Flexible autocomplete with client/server filtering

Warning

Library is under active development and may not work as expected until stable 1.0.0 release.

Getting started

After installing the above dependencies, install ng-select via:

npm install --save @ng-select/ng-select

Once installed you need to import our main module:

import {NgSelectModule} from '@ng-select/ng-select';

The only remaining part is to list the imported module in your application module.:

import {NgSelectModule} from '@ng-select/ng-select';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgSelectModule, ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

SystemJS

If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

In your systemjs config file, map needs to tell the System loader where to look for ng-select:

map: {
  '@ng-select/ng-select': 'node_modules/@ng-select/ng-select/bundles/ng-select.umd.js',
}

Roadmap

Custom binding to property or object
Custom option and label templates
Virtual Scroll support with large data sets (>5000 items).
Filter data by display text
Filter data by custom filter function
Expose useful events like blur, change, focus, close, open ...
Correct keyboard events behaviour
Integration app generated with angular-cli
Good base functionality test coverage
Multiselect support
Autocomplete
Custom tags
Accessibility

Usage

API

Input	Type	Default	Required	Description
[items]	Array	`[]`	yes	Items array
bindLabel	string	`label`	no	Object property to use for label. Default `label`
bindValue	string	`-`	no	Object property to use for selected model. By default binds to whole object.
[clearable]	boolean	`true`	no	Allow to clear selected value. Default `true`
placeholder	string	`-`	no	Placeholder text.
[typeahead]	Subject	`-`	no	Custom autocomplete or filter.

Output	Description
(focus)	Fired on select focus
(blur)	Fired on select blur
(change)	Fired on selected value change
(open)	Fired on select dropdown open
(close)	Fired on select dropdown close

Basic example

This example in Plunkr

@Component({
    selector: 'cities-page',
    template: `
        <label>City</label>
        <ng-select [items]="cities"
                   bindLabel="name"
                   bindValue="id"
                   placeholder="Select city"
                   [(ngModel)]="selectedCityId">
        </ng-select>
        <p>
            Selected city ID: {{selectedCityId}}
        </p>
    `
})
export class CitiesPageComponent {
    cities = [
        {id: 1, name: 'Vilnius'},
        {id: 2, name: 'Kaunas'},
        {id: 3, name: 'Pabradė'}
    ];
    selectedCityId: any;
}

Flexible autocomplete

This example in Plunkr

@Component({
    selector: 'select-autocomplete',
    template: `
        <label>Search with autocomplete in Github accounts</label>
        <ng-select [items]="items"
                   bindLabel="login"
                   placeholder="Type to search"
                   [typeahead]="typeahead"
                   [(ngModel)]="githubAccount">
            <ng-template ng-option-tmp let-item="item">
                <img [src]="item.avatar_url" width="20px" height="20px"> {{item.login}}
            </ng-template>
        </ng-select>
        <p>
            Selected github account:
            <span *ngIf="githubAccount">
                <img [src]="githubAccount.avatar_url" width="20px" height="20px"> {{githubAccount.login}}
            </span>
        </p>
    `
})
export class SelectAutocompleteComponent {

    githubAccount: any;
    items = [];
    
    // event emmiter is just RxJs Subject
    typeahead = new EventEmitter<string>();

    constructor(private http: HttpClient) {
        this.typeahead
            .distinctUntilChanged()
            .debounceTime(200)
            .switchMap(term => this.loadGithubUsers(term))
            .subscribe(items => {
                this.items = items;
            }, (err) => {
                console.log(err);
                this.items = [];
            });
    }

    loadGithubUsers(term: string): Observable<any[]> {
        return this.http.get<any>(`https://api.github.com/search/users?q=${term}`).map(rsp => rsp.items);
    }
}

More demos

Visit https://github.com/ng-select/ng-select/tree/master/src/demo/app for more examples

Contributing

Contributions are welcome. You can start by looking at issues with label Help wanted https://github.com/ng-select/ng-select/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22 or creating new Issue with proposal or bug report.

Development

Perform the clone-to-launch steps with these terminal commands.

Run demo page in watch mode

git clone https://github.com/ng-select/ng-select
cd ng-select
npm install
npm run serve-demo

Testing

npm run test
or
npm run test-watch

Deploy demo to gh-pages

npm run gh-pages

// after swith to gh-pages branch run
./publish-demo.sh

Commits

Follow https://conventionalcommits.org/