Dropdown List Option Selection
Dropdown supports multi ,single and single toggle option selection modes out of the box. Basically this functionality will help to select specific option(s) from the dropdown. Available configuration options are be discussed in Useful Properties section in-detail.
What You Will See
Below example will demonstrate how
Selected Option(s)
Knives
Tools
Climbing Accessories
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-option-selection-usage', templateUrl: './option-selection-usage.component.html', styleUrls: ['../../dropdown-option-selection.component.scss'] }) export class OptionSelectionUsageComponent { public options: ExampleData[]; public selectedOptions: ExampleData[]; public selectedItems: any[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); this.selectedOptions = this.options.slice(5, 8); } public onSelectChange(event: ExampleData[]): void { this.selectedItems = event.map((exampleData: ExampleData) => { return exampleData.productType; }); } }
<ng-dropdown [id]="'products_features_12'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [selectMode]="'multi'" [options]="options" [selectedOptions]="selectedOptions" [multiSelectOptionMaxWidth]="200" [showOptionSelectCheckbox]="true" [showSelectedOptionRemoveButton]="true" [showClearSelectionButton]="true" [triggerSelectChangeOnInit]="true" (selectChange)="onSelectChange($event)"> </ng-dropdown> <!-- selected option ids view on Bootstrap labels. --> <br/> <div *ngIf="selectedItems.length"> <h5>Selected Option(s)</h5> <p class="event-output"> <span *ngFor="let selectedOption of selectedItems.slice().reverse()">{{ selectedOption }}<br/></span> </p> </div>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { OptionSelectionUsageComponent } from './option-selection-usage.component'; @NgModule({ bootstrap: [OptionSelectionUsageComponent], declarations: [OptionSelectionUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class OptionSelectionUsageModule { }
Basic Usage
For enable basic option selection on dropdown, simply provide a unique data field name to selectTrackBy
property otherwise select option tracking will not function properly. by default it value was 'key'. for more details about capturing user click events on dropdown options please refer Events Select Change section.
<ng-dropdown ... [selectTrackBy]="'id'"> </ng-dropdown>
Useful Properties
There are set of useful properties that can be uses when on option select on dropdown.
Set First Option Selected
setFirstOptionSelected: boolean
Default Value: false
Property was responsible for select the first property immediately after success data retrieval and view on top of dropdown.
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-set-first-option-selected-usage', templateUrl: './set-first-option-selected-usage.component.html' }) export class SetFirstOptionSelectedUsageComponent { public options: ExampleData[]; public selectedOptions: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_features_07'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [setFirstOptionSelected]="true"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { SetFirstOptionSelectedUsageComponent } from './set-first-option-selected-usage.component'; @NgModule({ bootstrap: [SetFirstOptionSelectedUsageComponent], declarations: [SetFirstOptionSelectedUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class SetFirstOptionSelectedUsageModule { }
Show Option Select Checkbox
showOptionSelectCheckbox: boolean
Default Value: false
Property was responsible for enable checkbox for each option on dropdown option selection.
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-show-option-select-checkbox-usage', templateUrl: './show-option-select-checkbox-usage.component.html' }) export class ShowOptionSelectCheckboxUsageComponent { public options: ExampleData[]; public selectedOptions: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_features_04'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [showOptionSelectCheckbox]="true"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { ShowOptionSelectCheckboxUsageComponent } from './show-option-select-checkbox-usage.component.component'; @NgModule({ bootstrap: [ShowOptionSelectCheckboxUsageComponent], declarations: [ShowOptionSelectCheckboxUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class ShowOptionSelectCheckboxUsageModule { }
Selected Option
selectedOption: any
Default Value: N/A
Property was responsible for select a specific property immediately after a success data retrieval and view on top of dropdown. process is similar to Set First Option Selected but in here user allows to select any preferred single option from dropdown.
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-selected-option-usage', templateUrl: './selected-option-usage.component.html' }) export class SelectedOptionUsageComponent { public options: ExampleData[]; public selectedOption: ExampleData; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); this.selectedOption = this.options[1]; } }
<ng-dropdown [id]="'products_features_11'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [selectedOption]="selectedOption"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { SelectedOptionUsageComponent } from './selected-option-usage.component'; @NgModule({ bootstrap: [SelectedOptionUsageComponent], declarations: [SelectedOptionUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class SelectedOptionUsageModule { }
Selected Options
selectedOptions: any[]
Default Value: []
Property was responsible for select a specific data set immediately after success data retrieval and view on top of dropdown if selectMode
was 'multi' unless it won't be functional properly.
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-selected-options-usage', templateUrl: './selected-options-usage.component.html' }) export class SelectedOptionsUsageComponent { public options: ExampleData[]; public selectedOptions: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); this.selectedOptions = this.options.slice(0, 4); } }
<ng-dropdown [id]="'products_features_10'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [selectMode]="'multi'" [selectedOptions]="selectedOptions"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { SelectedOptionsUsageComponent } from './selected-options-usage.component'; @NgModule({ bootstrap: [SelectedOptionsUsageComponent], declarations: [SelectedOptionsUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class SelectedOptionsUsageModule { }
Select Mode
selectMode: DropdownSelectMode = 'multi' | 'single' | 'single-toggle'
Default Value: 'single-toggle'
Enable for users to configure the dropdown option selection type. there are three major option selection types are available for dropdown, which are:
- single: single option selection
- single-toggle: single toggle option selection
- multi: multiple option selection
Single Option Selection
In Single option selection user allow to select one specific option from dropdown view and they can be change their preference or de-select the option by select on another value field if it is available.
Selectimport { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-single-option-selection-usage', templateUrl: './single-option-selection-usage.component.html' }) export class SingleOptionSelectionUsageComponent { public options: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_features_08'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [selectMode]="'single'" [options]="options" [limit]="50"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { SingleOptionSelectionUsageComponent } from './single-option-selection-usage.component'; @NgModule({ bootstrap: [SingleOptionSelectionUsageComponent], declarations: [SingleOptionSelectionUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class SingleOptionSelectionUsageModule { }
Single Toggle Option Selection
This property functionality was similar to Select Mode Single Option Selection, only difference is user can toggle option selection but in this type, once the selection is made it can be removed by clicking the option itself or by un-checking the checkbox (if Show Option Select Checkbox is enabled).
Selectimport { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-single-toggle-option-selection-usage', templateUrl: './single-toggle-option-selection-usage.component.html' }) export class SingleToggleOptionSelectionUsageComponent { public options: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_features_03'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [selectMode]="'single-toggle'" [options]="options" [limit]="50"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { SingleToggleOptionSelectionUsageComponent } from './single-toggle-option-selection-usage.component'; @NgModule({ bootstrap: [SingleToggleOptionSelectionUsageComponent], declarations: [SingleToggleOptionSelectionUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class SingleToggleOptionSelectionUsageModule { }
Multiple Option Selection
In Multiple option selection user allow to selects multiple options from the dropdown view.
Selectimport { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-multi-option-selection-usage', templateUrl: './multi-option-selection-usage.component.html' }) export class MultiOptionSelectionUsageComponent { public options: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_features_09'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [selectMode]="'multi'" [options]="options"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { MultiOptionSelectionUsageComponent } from './multi-option-selection-usage.component'; @NgModule({ bootstrap: [MultiOptionSelectionUsageComponent], declarations: [MultiOptionSelectionUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class MultiOptionSelectionUsageModule { }
Show Clear Selection Button
showClearSelectionButton: boolean
Default Value: false
Show clear selection button was responsible for de-selecting all the selected options on dropdown which will be displaying a cross symbol on right side corner of dropdown. simply set it true to enable clear all selections symbol on dropdown.
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-show-clear-selection-button-usage', templateUrl: './show-clear-selection-button-usage.component.html' }) export class ShowClearSelectionButtonUsageComponent { public options: ExampleData[]; public selectedOptions: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_features_05'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [showClearSelectionButton]="true"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { ShowClearSelectionButtonUsageComponent } from './show-clear-selection-button-usage.component'; @NgModule({ bootstrap: [ShowClearSelectionButtonUsageComponent], declarations: [ShowClearSelectionButtonUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class ShowClearSelectionButtonUsageModule { }
Show Selected Option Remove Button
showSelectedOptionRemoveButton: boolean
Default Value: false
Property was responsible for enable de-select symbol on each and every selected options when selectMode
is on 'multi'. for more details about option selection modes please refer Select Mode section.
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-show-selected-option-remove-button-usage', templateUrl: './show-selected-option-remove-button-usage.component.html' }) export class ShowSelectedOptionRemoveButtonUsageComponent { public options: ExampleData[]; public selectedOptions: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_features_01'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [selectMode]="'multi'" [showSelectedOptionRemoveButton]="true"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { ShowSelectedOptionRemoveButtonUsageComponent } from './show-selected-option-remove-button-usage.component'; @NgModule({ bootstrap: [ShowSelectedOptionRemoveButtonUsageComponent], declarations: [ShowSelectedOptionRemoveButtonUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class ShowSelectedOptionRemoveButtonUsageModule { }
Multi Select Option Max Width
multiSelectOptionMaxWidth: boolean
Default Value: 135
This property was uses to configure selected dropdown option(s) label maximum width allocation on dropdown. please note, before use multi select option max width property it is mandatory to set selectMode
to 'multi' otherwise it will not function properly.
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-multi-select-option-max-width-usage', templateUrl: './multi-select-option-max-width-usage.component.html' }) export class MultiSelectOptionMaxWidthUsageComponent { public options: ExampleData[]; public selectedOptions: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); this.selectedOptions = this.options.slice(0, 4); } }
<ng-dropdown [id]="'products_features_02'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [selectMode]="'multi'" [multiSelectOptionMaxWidth]="80" [selectedOptions]="selectedOptions"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { MultiSelectOptionMaxWidthUsageComponent } from './multi-select-option-max-width-usage.component'; @NgModule({ bootstrap: [MultiSelectOptionMaxWidthUsageComponent], declarations: [MultiSelectOptionMaxWidthUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class MultiSelectOptionMaxWidthUsageCModule { }
Wrap Display Select Limit
wrapDisplaySelectLimit: number
Default Value: undefined
This configuration is uses to limit selected option labels shown on dropdown when more options are selected and display a common string and selected option count to represent all the selected fields. for use of this configuration it is mandatory to use selectMode
in 'multi' and available option count should be more than given wrap display selection limit.
User can provide their own wrap display message by using translations. please refer Translations Selected Option Wrap Placeholder section for more details.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { WrapDisplaySelectLimitUsageComponent } from './wrap-display-select-limit-usage.component.component'; @NgModule({ bootstrap: [WrapDisplaySelectLimitUsageComponent], declarations: [WrapDisplaySelectLimitUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class WrapDisplaySelectLimitUsageModule { }
import { Component } from '@angular/core'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-wrap-display-select-limit-usage', templateUrl: './wrap-display-select-limit-usage.component.html' }) export class WrapDisplaySelectLimitUsageComponent { public options: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_features_06'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [selectMode]="'multi'" [wrapDisplaySelectLimit]="1"> </ng-dropdown>
Suggested Links
EventsTranslations
API Doc for Dropdown Option Selection