Dropdown

Basic examples

Pick an option Option 1 Option 2 Option 2 Option 2 Option 2 Option 3 Option 4

With dynamic width



Pick an option Option 1 Option 2 Option 2 Option 2 Option 2 Option 3 Option 4

With notification

(*) Mandatory field

Notification Type None {{notificationType.viewValue}} Hint/Info Success Warning Error

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

Required Disabled

Multiple selection

(*) Mandatory field

Pokemon {{ creature.viewValue }} You have to select an option

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

Required Disabled

With disabled options

Pokemon Disabled Disabled {{ creature.viewValue }}

Option groups

Pokemon {{ creature.viewValue }}

Multiple Selection

Pokemon {{ creature.viewValue }}

Multiple Selection and disabled options

Pokemon Disabled Option Disabled Option {{ creature.viewValue }}

Other exmaples

Without Angular forms

Digimon None {{ creature.viewValue }}

Value: {{ currentDigimon }}

Required

Using FormControl

Food I like {{ food.viewValue }}

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

Toggle Disabled

Change event

Starter Pokemon {{ creature.viewValue }}

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