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:
<mat-form-field>
wrapper.For a detailed comparison, scroll to the bottom.
Value: {{ currentNotificationType }}, Touched: {{ notificationTypeControl.touched }}, Dirty: {{
notificationTypeControl.dirty }}, Status: {{ notificationTypeControl.control?.status }}
Value: {{ currentPokemon }}, Touched: {{ pokemonControl.touched }}, Dirty: {{ pokemonControl.dirty }}, Status: {{
pokemonControl.control?.status }}
Value: {{ currentDigimon }}
Value: {{ foodControl.value }}, Touched: {{ foodControl.touched }}, Dirty: {{ foodControl.dirty }}, Status: {{ foodControl.status }}
Change event value: {{ latestChangeEvent?.value }}
<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 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>