Native select

Native select element, for comparing features and behavior.

Bind to string[]

Bind to a simple string array as source.

Value: ""

Bind to number[]

Bind to a simple number array with a lot of items as source.

[source]="numberArray" 5 Value: 5

Bind to boolean values

Set source to [true, false] to bind to boolean values. To format the values, use a formatter.

[source]="[true, false]" Value:

Bind to Enums

Pass an Enum reference as source to display the enum items. To format the values, use a formatter.

[source]="Sexuality" Female Value: "Female"

Bind to objects

Pass an object array as source.

[source]="personList1" Value:

Format items

To format the display of items in the select component, use "formatBy" input.
To format a value, you need a formatter.
There is a set of built-in formatters available, or you can create your own custom formatters.

Some built-in formatters:
  • Field formatter
  • Locale formatter
  • Number formatter (soon)
  • Currency formatter (soon)
To read more about formatters, check the formatters page.
Field formatter:

A field formatter uses a field name of the object to display the value.

[source]="personList1"; formatBy="name" Value:
Locale formatter:

A locale formatter, formats the value according to the current locale.
To use a locale formatter, specify the locale formatter name prefixed with an * (e.g., "*formatterName").

[source]="[true, false]"; formatBy="*OnOffBoolean" Value:
formatBy="*EnableDisableBoolean" Value:
[source]="Sexuality" formatBy="*SexualityEnum" Value:
[source]="personList1" formatBy="*personFormatter1" Value:
Custom formatter:
Using a formatBy function: [formatBy]="functionName"
[source]="personList1" [formatBy]="personFormatterFunc" Value:

Compare items:

When working with reference types (e.g., object arrays), you need to specify how to compare the source items with the selected value(s).
By default, the select component uses strict equality (===) to compare items. You can change this behavior using the compareBy input.
You can compare items by a specific field or by a custom function.

[source]="personList1"; compareBy="id" Doe Value: 2
[source]="personList1"; [compareBy]="personComparerFunc" Smith Value: { "id": 3 }

Custom value writer:

When user selects an item, the select component writes back the selected value to the bound variable.
Sometimes you want customize the value that is written back. This is useful when you want to bind the component to a specific property of an object instead of the whole object.
you can write back the selected value(s) by a specific field or by a custom function.

[source]="personList1" (default, without using writeBy) Value:
[source]="personList1"; writeBy="id" Value:
[source]="personList1"; [writeBy]="personIdWriterFunc" Value:
Note: Using a value writer is useful when binding to database foreign keys.

Bind to RemoteDataSource

This select is bound to a RemoteDataSource. A remote data source is a data source that retrieves data from a remote server (or any source that is resolved asynchronously).

[source]="fakeRemoteDataSource1" Smith Value: 3

Manipulating items

You can change(add/remove/replace) select items.

[source]="stringArray" Value:

Multi select

A multi-select component allows the user to select multiple options from a list.

[source]="stringArray"; multiple="true" Value:
[source]="stringArray"; multiple="true"; showSelectionIndicator="true" Value:

Filter

To filter the options in the select component, set filterable to true and provide a filter predicate.
You can pass the name of the property to filter by using the filterBy input or a custom filter function.
By default, the select component will filter item values using a default filter function.

[source]="stringArray"; filterable="true" Value:
[source]="personList1"; filterable="true"; filterBy="name" Value:
[source]="personList1"; filterable="true"; [filterBy]="filterFunc" Value:

Custom Item templates

You can customize the display of items in the select dropdown by using ng-template.

[source]="personList1"; formatBy="name" Value:
This feature is not stable yet. Do not use it for the moment.

Disabled state

Disable the select by setting the disabled property to true.

[source]="stringArray" Value:

Events

Handle valueChange event to react on value changes. Select an item and See the browser console log.

[source]="stringArray"; (valueChange)="onValueChange($event)" Value: []

On this page: