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

Climbing Accessories Tools Knives

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;
    });
  }
}

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.

Cooking Gear 
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();
  }
}

Show Option Select Checkbox

showOptionSelectCheckbox: boolean  
Default Value: false

Property was responsible for enable checkbox for each option on dropdown option selection.

Select 
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();
  }
}

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.

Sleeping Bags 
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];
  }
}

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.

Cooking Gear Sleeping Bags Lanterns Safety 
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);
  }
}

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:

  1. single: single option selection
  2. single-toggle: single toggle option selection
  3. multi: multiple option selection
  1. 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.

    Select 
    import { 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();
  }
}
  2. 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).

    Select 
    import { 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();
  }
}
  3. Multiple Option Selection

    In Multiple option selection user allow to selects multiple options from the dropdown view.

    Select 
    import { 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();
  }
}

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.

Select 
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();
  }
}

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.

Select 
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();
  }
}

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.

Cooking Gear Sleeping Bags Lanterns Safety 
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);
  }
}

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.

Select 
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 {
}
Events
Translations
API Doc for Dropdown Option Selection