ngx-multi-selector

A small plugin which generates multi-selector control, it supports web api loading. Only supported angular 5.

Usage no npm install needed!

<script type="module">
  import ngxMultiSelector from 'https://cdn.skypack.dev/ngx-multi-selector';
</script>

README

ngx-multi-selector

Description:

  • This component provides a control which helps user to find records in service using keyword.
  • More than one item can be selected.
  • Angular >= 6 support.

Online demo can be found here:

<ngx-multi-selector #selector="ngx-multi-selector" 
                    [items]="customers"
                    [(ngModel)]="chosenCustomers"
                    [display-property]="'ContactName'"
                    [is-search-box-available]="true"
                    [is-clear-button-available]="true"
                    [placeholder-search-drop-down]="'Please select an item'"
                    [separation-character]="' - '"
                    [key-property]="'Id'" 
                    [value-property]="'Id'">
</ngx-multi-selector>

Template selector:

  • #selector="ngx-multi-selector": Get instance of ngx-multi-selector in component file. In component file, please use @ViewChild('selector', {static: false}) public ngxSelector: NgxMultiSelectorComponent to access to multi items selector functions.

Properties:

  • key (string): Property of object which determines whether item has been selected or not.

  • ngModel (string): An array which is for storing chosen items.

  • display-property (string): Property which should be used for item display.

  • value-property (string): Property which is used as value property.

  • key (depreated) (string): Property which is used for determining whether item is selected or not. If your selected value is object, this is very useful.

  • key-property (string): This property is a replacement key property. Please consider using this property, the deprecated one will be removed in future version.

  • items (Array): List of items which should be displayed inside drop-down menu.

  • is-clear-button-available (boolean): Whether clear button is available or not. This button is for cleaning chosen items list.

  • is-search-box-available (boolean): Whether search box is available or not. The search box is for typing keyword to search.

  • limit-item-amount (number): Number of items which can be displayed inside drop-down menu (Minimum: 1. Default: 1).

  • limit-item-selection (number): Maximum number of items which can be selected

  • placeholder-search-drop-down (string): Place holder text of search box inside drop-down list.

  • placeholder-title-drop-down (string): Pleace holder text of title box.

  • separation-character (string): Character which is used for separating items and items.

  • disabled (boolean): Whether multi drop-down selector control is disabled or not.

  • interval (number): Time between 2 times of emitting search event to another component to do the search.

  • item-template (string): Template of item displayed in drop-down list. Please see this example for more information.

Handlers:

  • load-available-items-handler(keyword: string) => Observable<any[]>: Load items asynchronously by using keyword. Observable of items should be returned, searched items will be listed in dropdown menu.

Events:

  • search-items (keyword: string): This event is fired when component detects value changed. This event is fired with keyword, another component can use that keyword to search records in data source.. Please use load-available-items-handler instead.

  • update-items(items: Array): This event is fired when chosen items list is modified. This event can be used for handling changes in chosen items list.