import { SelectDropDownModule } from 'ngx-select-dropdown'

@NgModule({
  imports: [
    ...,
    SelectDropDownModule
  ],
  ...
})
class YourModule { ... }

 "styles": [
        "../node_modules/ngx-select-dropdown/dist/assets/style.css"
      ],

<ngx-select-dropdown [instanceId]="'instance1'" (change)="selectionChanged($event)" [multiple]="true" [(ngModel)]="dataModel" [config]="config" [options]="dropdownOptions"></ngx-select-dropdown>

<ngx-select-dropdown [instanceId]="'instance2'"  (change)="selectionChanged($event)" formControlName="selectData" [multiple]="true" [config]="config" [options]="dropdownOptions"></ngx-select-dropdown>

<ng-template #optionTemplate let-item="item" let-config="config">
  <i class="fa fa-plus"></i>
  {{item.name}}
  <span class="new badge"></span>
</ng-template>

<ngx-select-dropdown [optionItemTemplate]="optionTemplate" [selectedItemTemplate]="optionTemplate" tabindex="0" [multiple]="true" [(ngModel)]="modelVar" [options]="options"
[config]="config">
</ngx-select-dropdown>

config = {
        displayFn:(item: any) => { return item.hello.world; } //to support flexible text displaying for each item
        displayKey:"description", //if objects array passed which key to be displayed defaults to description
        search:true //true/false for the search functionlity defaults to false,
        height: 'auto' //height of the list so that if there are more no of items it can show a scroll defaults to auto. With auto height scroll will never appear
        placeholder:'Select' // text to be displayed when no item is selected defaults to Select,
        customComparator: ()=>{} // a custom function using which user wants to sort the items. default is undefined and Array.sort() will be used in that case,
        limitTo: 0 // number thats limits the no of options displayed in the UI (if zero, options will not be limited)
        moreText: 'more' // text to be displayed whenmore than one items are selected like Option 1 + 5 more
        noResultsFound: 'No results found!' // text to be displayed when no items are found while searching
        searchPlaceholder:'Search' // label thats displayed in search input,
        searchOnKey: 'name' // key on which search should be performed this will be selective search. if undefined this will be extensive search on all keys
        clearOnSelection: false // clears search criteria when an option is selected if set to true, default is false
        inputDirection: 'ltr' // the direction of the search input can be rtl or ltr(default)
        selectAllLabel: 'Select all' // label that is displayed in multiple selection for select all
        enableSelectAll: false, // enable select all option to select all available items, default is false
      }

this.options.push({id: 34, description: 'Adding new item'});

// or

config.height = '200px';

this.options = [...this.options, {id: 34, description: 'Adding new item'}];

// or

config = {...config, height:'200px'};

 Added a change event so that user can attach a change event handler.
 If multiselect the selected text will display first item and + count for eg. (Option 1 + 2 more) .

 Angular 4 and above support.
 Bug with search functionality fixed.

 Support for Observable data source for options and async pipe.
 IE bug with styling.
 Few other minor bug fixes.

 Use arrows keys and enter to select items from available options.
 Case insensitive search.
 Few other minor bug fixes.

 Support for scroll bar with too many list items.
 Few other minor bug fixes.

 Support for limito pipe to limit number of options displayed in case of too many options.
 Support for customComparator / custom sort function
 Few other minor bug fixes.

 Support for angular 6
 Removed dependency on rxjs

 No Results found indicator with custom text passed with config
 Custom text for *more* when more than 1 items selected
 Open event emitted
 Close event emitted
 Search placeholder text

 Search on a specified key value.
 Support for Reactive forms
 Few other minor imoprovements and fixes

 Search text change event searchChange

 Clear search on selection config
 Disable with reactive forms .disable()

Custom function for displaying text for each option
Add disabled class to different items based on item.disabled

Angular library approach opted for development
Angular Ivy compatibility

Dropdown singleton service to interact with dropdown instances
Instance identifier
Upgraded to Angular v14 development environment

Auto drop based on the screen position
Over-ride css styles for available and selected items using class names `selected-item(s)` and `available-item(s)`

Ability to select all available items using a select all checkbox

Custom templates for available options, selected items and the dropdown button
Other minor fixes