Dropdown (Beta)

Feedback wanted!

Why is there a new component?
This demo uses the <bci-select> component, instead of the previously used <mat-select>.
With our own implementation of the select component, we fixed some UX-related issues and enable the select panel to open to the top and to the bottom while using a dynamic width.

Custom Input Variables:

What to consider when using the bci-select:

For a detailed comparison, scroll to the bottom.


Basic example

None Option 1 Option 2 Option 2 Option 2 Option 2 Option 3 Option 4 Please select some option

Basic example with dynamic width



Option 1 Option 2 Option 2 Option 2 Option 2 Option 3 Option 4

Basic example with scrolling options

Option 1 Option 2 Option 2 Option 2 Option 2 Option 3 Option 4 Option 4 Option 4 Option 4

Basic example with scrolling select value

Option 1 Option 2 Option 2 Option 2 Option 2 Option 3 Option 4 Option 4 Option 4 Option 4

Basic example (with notification)

None {{ notificationType.viewValue }} {{currentNotificationType && capitalizeFirstLetterOfNotificationType()}} {{currentNotificationType && capitalizeFirstLetterOfNotificationType()}} {{currentNotificationType && capitalizeFirstLetterOfNotificationType()}} {{currentNotificationType && capitalizeFirstLetterOfNotificationType()}} You have to select an option

Value: {{ currentNotificationType }}, Touched: {{ notificationTypeControl.touched }}, Dirty: {{ notificationTypeControl.dirty }}, Status: {{ notificationTypeControl.control?.status }}

Required Disabled

Multiple selection

{{ creature.viewValue }} Mandatory field
Value: {{ currentPokemon }}, Touched: {{ pokemonControl.touched }}, Dirty: {{ pokemonControl.dirty }}, Status: {{ pokemonControl.control?.status }}

Required Disabled

Multiple selection (with disabled options)

Disabled Disabled Checked {{ creature.viewValue }}

Without Angular forms

None {{ creature.viewValue }}

Value: {{ currentDigimon }}

Required


Option groups

{{ creature.viewValue }}

Option groups (Multiple Selection)

{{ creature.viewValue }}

Option groups (Multiple Selection and disabled options)

Disabled Option Disabled Option {{ creature.viewValue }}

Option groups with multiple selection, disabled options, scrolling value and scrolling options

Long Scrolling Option Disabled Option long and scrolling {{ creature.viewValue }}

Other examples

formControl

{{ food.viewValue }}

Value: {{ foodControl.value }}, Touched: {{ foodControl.touched }}, Dirty: {{ foodControl.dirty }}, Status: {{ foodControl.status }}

Toggle Disabled

Change event

{{ creature.viewValue }}
Change event value: {{ latestChangeEvent?.value }}

Comparison Mat-Select vs. Bci-Select

Mat Select (Angular Material Select)

<mat-form-field>

<mat-label>Pick an option</mat-label>

<mat-select placeholder="Select" [(ngModel)]="currentOption">

<mat-option value="option-1">Option 1</mat-option>

<mat-option value="option-2">Option 2 Option 2 Option 2 Option 2</mat-option>

<mat-option value="option-3">Option 3</mat-option>

<mat-option value="option-4">Option 4</mat-option>

</mat-select>

</mat-form-field>

Bci Select (New)

<bci-select placeholder="Select" label="Pick an option" [(ngModel)]="currentOption">

<mat-option value="option-1">Option 1</mat-option>

<mat-option value="option-2">Option 2 Option 2 Option 2 Option 2</mat-option>

<mat-option value="option-3">Option 3</mat-option>

<mat-option value="option-4">Option 4</mat-option>

</bci-select>