Item Selection

Item selection can be done in various ways with different available options. basically this functionality will helps to select specific item or item set from the dropdown. available configuration options will be discuss on Useful Properties section in-detail.

What You Will See

Below example will demonstrate how

Climbing Accessories Tools Knives

Selected Item(s)

Knives
Tools
Climbing Accessories

import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-item-selection-usage',
  templateUrl: './item-selection-usage.component.html',
  styleUrls: ['../../dropdown-item-selection.component.scss']
})
export class ItemSelectionUsageComponent {
  public items: ExampleData[];
  public selectedOptions: ExampleData[];
  public selectedItems: any[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
    this.selectedOptions = this.items.slice(5, 8);
  }

  public onSelectChange(event: ExampleData[]): void {
    this.selectedItems = event.map((exampleData: ExampleData) => {
      return exampleData.productType;
    });
  }
}

Basic Usage

For enable basic item selection on dropdown, simply provide a unique data field name to selectTrackBy property otherwise select item tracking will not function properly. by default it value was 'key'. for more details about capturing user click events on dropdown items 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 item 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 items: ExampleData[];
  public selectedOptions: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }
}

Show Option Select Checkbox

showOptionSelectCheckbox: boolean  
Default Value: false

Property was responsible for enable checkbox for each item on dropdown item 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 items: ExampleData[];
  public selectedOptions: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = 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 item 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 items: ExampleData[];
  public selectedOption: ExampleData;

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
    this.selectedOption = this.items[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 items: ExampleData[];
  public selectedOptions: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
    this.selectedOptions = this.items.slice(0, 4);
  }
}

Select Mode

selectMode: DropdownSelectMode = 'multi' | 'single' | 'single-toggle'  
Default Value: 'single-toggle'

Enable for users to configure the dropdown item selection type. there are three major item selection types are available for dropdown, which are:

  1. single: single item selection
  2. single-toggle: single toggle item selection
  3. multi: multiple item selection
  1. Single Item Selection

    In Single item selection user allow to select one specific item from dropdown view and they can be change their preference or de-select the item 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-item-selection-usage',
      templateUrl: './single-item-selection-usage.component.html'
    })
    export class SingleItemSelectionUsageComponent {
      public items: ExampleData[];
    
      constructor(private dataFetchService: DataFetchService) {
        this.items = this.dataFetchService.fetchStaticData();
      }
    }
    
  2. Single Toggle Item Selection

    This property functionality was similar to Select Mode Single Item Selection, only difference is user can toggle item selection but in this type, once the selection is made it can be removed by clicking the item 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-item-selection-usage',
      templateUrl: './single-toggle-item-selection-usage.component.html'
    })
    export class SingleToggleItemSelectionUsageComponent {
      public items: ExampleData[];
    
      constructor(private dataFetchService: DataFetchService) {
        this.items = this.dataFetchService.fetchStaticData();
      }
    }
    
  3. Multiple Item Selection

    In Multiple item selection user allow to selects multiple items from the dropdown view.

    Select
    import { Component } from '@angular/core';
    
    import { ExampleData } from 'helper-models';
    
    import { DataFetchService } from 'helper-services';
    
    @Component({
      selector: 'app-multi-item-selection-usage',
      templateUrl: './multi-item-selection-usage.component.html'
    })
    export class MultiItemSelectionUsageComponent {
      public items: ExampleData[];
    
      constructor(private dataFetchService: DataFetchService) {
        this.items = this.dataFetchService.fetchStaticData();
      }
    }
    

Show Clear Selection Button

showClearSelectionButton: boolean  
Default Value: false

Show clear selection button was responsible for de-selecting all the selected items 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 items: ExampleData[];
  public selectedOptions: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = 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 items when selectMode is on 'multi'. for more details about item 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 items: ExampleData[];
  public selectedOptions: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
  }
}

Multi Select Option Max Width

multiSelectOptionMaxWidth: boolean  
Default Value: 135

This property was uses to configure selected dropdown item(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 items: ExampleData[];
  public selectedOptions: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.items = this.dataFetchService.fetchStaticData();
    this.selectedOptions = this.items.slice(0, 4);
  }
}

Wrap Display Select Limit

wrapDisplaySelectLimit: number  
Default Value: undefined

This configuration is uses to limit selected item labels shown on dropdown when more items are selected and display a common string and selected item count to represent all the selected fields. for use of this configuration it is mandatory to use selectMode in 'multi' and available item 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 Item 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 Item Selection