See Demos or try in Stackblitz or Plunker

• Features
• Getting started
• API
• Change detection
• Custom styles
  • Validation state
• Contributing
• Development
• Inspiration

• Custom binding to property or object
• Custom option, label, header and footer templates
• Virtual Scroll support with large data sets (>5000 items).
• Infinite scroll
• Keyboard navigation
• Multiselect
• Flexible autocomplete with client/server filtering
• Custom search
• Custom tags
• Append to
• Group items
• Output events
• Accessibility
• Good base functionality test coverage
• Themes

Library is under active development and may have API breaking changes for subsequent major versions after 1.0.0.

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

yarn add @ng-select/ng-select

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

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

To allow customization and theming, ng-select bundle includes only generic styles that are necessary for correct layout and positioning. To get full look of the control, include one of the themes in your application. If you're using the Angular CLI, you can add this to your styles.scss or include it in angular-cli.json.

@import "~@ng-select/ng-select/themes/default.theme.css";
// ... or 
@import "~@ng-select/ng-select/themes/material.theme.css";

You can also set global configuration and localization messages by providing custom NG_SELECT_DEFAULT_CONFIG

    providers: [
        {
            provide: NG_SELECT_DEFAULT_CONFIG,
            useValue: {
                notFoundText: 'Custom not found'
            }
        }
    ]

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',
}

Ng-select component implements OnPush change detection which means the dirty checking checks for immutable data types. That means if you do object mutations like:

this.items.push({id: 1, name: 'New item'})

Component will not detect a change. Instead you need to do:

this.items = [...this.items, {id: 1, name: 'New item'}];

This will cause the component to detect the change and update. Some might have concerns that this is a pricey operation, however, it is much more performant than running ngDoCheck and constantly diffing the array.

If you are not happy with default styles you can easily override them with increased selector specificity or creating your own theme. E.g.

<ng-select class="custom"></ng-select>

.ng-select.custom {
    border:0px;
    min-height: 0px;
    border-radius: 0;
}
.ng-select.custom .ng-select-container  {            
    min-height: 0px;
    border-radius: 0;
}

By default when you use reactive forms validators or template driven forms validators css class ng-invalid will be applied on ng-select. You can show errors state by adding custom css style

ng-select.ng-invalid.ng-touched .ng-select-container {
    border-color: #dc3545;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px #fde6e8;
}

Contributions are welcome. You can start by looking at issues with label Help wanted or creating new Issue with proposal or bug report. Note that we are using https://conventionalcommits.org/ commits format.

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

git clone https://github.com/ng-select/ng-select
cd ng-select
yarn
yarn run start

yarn run test
or
yarn run test:watch

To release to npm just run ./release.sh, of course if you have permissions ;)

This component is inspired by React select and Vitual scroll. Check theirs amazing work and components :)