Single Select

Select can take a regular select box with search options within the Select control.

Basic Select

Use ng-select for basic select control.

Disabled Mode

Select will respond to the disabled attribute on <ng-select> elements. You can also initialize Select with [disabled]: true to get the same effect.

Hiding the search box

Select allows you to hide the search box depending on the number of options which are displayed. In this example, we use the value [searchable]="false" to tell Select to never display the search box.

Multiple Select

Select also supports multi-value select boxes. The select below is declared with the multiple attribute.

Basic Multi Select

Use ng-select for basic select control. Use [multiple]="true" attribute for multiple select box.

Disabled Mode

Select will respond to the disabled attribute on <ng-select> elements. You can also initialize Select with [disabled]: true to get the same effect.

Multi Select with Label

Select multi-value select boxes can set restrictions regarding the maximum number of options selected. The select below is declared with the [multiple]="true" attribute with maxSelectedItems in the select options.

Programmatic control

DOM Events

Select will trigger some events on the original select element, allowing you to integrate it with other components.

DOM Single
DOM Multiple

Programmatic access

Select supports methods that allow programmatic control of the component.

Programmatic Single
Programmatic Multiple

Advance Options

Single Select Options

Loading Array Data

Select provides a way to load the data from a local array. You can provide initial selections with array data by providing the option tag for the selected values, similar to how it would be done for a standard select.

Templating

Various display options of the Select component can be changed: You can access the <ng-select > element and any attributes on those elements using .element. Templating is primarily controlled by the ng-template options.

   {{item.item_text}}    {{item.item_text}}

Multiple Select Options

Tagging Support

Select can be used to quickly set up fields used for tagging. That when tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far.>

Customizing How Results Are Matched

Unlike other dropdowns on this page, this one matches options only if the term appears in the beginning of the string as opposed to anywhere: This custom matcher uses a compatibility module that is only bundled in the full version of Select. You also have the option of using a more complex matcher.