Usage

1. Installngx-select-exthroughnpmpackage manager using the following command:

   npm i ngx-select-ex --save

   For usage with Angular 4 install using the following command:

   npm i ngx-select-ex@ng4 --save

2. Add NgxSelectModule into your AppModule class. app.module.ts would look like this:

   import {NgModule} from '@angular/core';
    import {BrowserModule} from '@angular/platform-browser';
    import {AppComponent} from './app.component';
    import { NgxSelectModule } from 'ngx-select-ex';
   
    @NgModule({
      imports: [BrowserModule,NgxSelectModule],declarations: [AppComponent],bootstrap: [AppComponent],})
    export class AppModule {
    }

   If you want to change the default options then use next code:

   import {NgModule} from '@angular/core';
    import {BrowserModule} from '@angular/platform-browser';
    import {AppComponent} from './app.component';
    import { NgxSelectModule,INgxSelectOptions } from 'ngx-select-ex';
   
    const CustomSelectOptions: INgxSelectOptions = { // Check the interface for more options
        optionValueField: 'id',optionTextField: 'name'
    };
   
    @NgModule({
      imports: [BrowserModule,NgxSelectModule.forRoot(CustomSelectOptions)],})
    export class AppModule {
    }

3. Include Bootstrap styles. For example add to your index.html

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

4. Add the tag<ngx-select>into some html

   <ngx-select [items]="items" [(ngModel)]="itemId">

5. More information regarding of usingngx-select-exis located indemo.

API

Any item can be@H_404_62@disabledfor prevent selection. For disable an item add the property@H_404_62@disabledto the item.

optionValueFieldoptionTextFieldoptGroupLabelField[allowClear][placeholder][noAutoComplete][disabled][defaultValue]autoSelectSingleOptionautoClearSearchnoResultsFoundsizesearchCallback

Input	Type	Default	Description
[items]	any[]	@H_404_62@[]	Items array. Should be an array of objects with@H_404_62@idand@H_404_62@textproperties. As convenience,you may also pass an array of strings,in which case the same string is used for both the ID and the text. Items may be nested by adding a@H_404_62@optionsproperty to any item,whose value should be another array of items. Items that have children may omit to have an ID.
string	'id'	Provide an opportunity to change the name an@H_404_62@idproperty of objects in the@H_404_62@items
'text'	Provide an opportunity to change the name a@H_404_62@textproperty of objects in the@H_404_62@items
'label'	labelproperty of objects with an@H_404_62@optionsproperty in theoptGroupOptionsField	'options'	Provide an opportunity to change the name of an@H_404_62@optionsproperty of objects in the[multiple]	boolean	false	Mode of this component. If set@H_404_62@trueuser can select more than one option
Set to@H_404_62@trueto allow the selection to be cleared. This option only applies to single-value inputs
''	truePlaceholder text to display when the element has no focus and selected items
trueSet to@H_404_62@trueto hide the search input. This option only applies to single-value inputs
When@H_404_62@true,it specifies that the component should be disabled
Use to set default value
Auto select a non disabled single option
Auto clear a search text after select an option. Has effect for@H_404_62@multiple = true
'No results found'	The default text showed when a search has no results
'small'/'default'/'large'	'default'	Adding bootstrap classes: form-control-sm,input-sm,form-control-lg input-lg,btn-sm,btn-lg
(search: string,item: INgxSelectOption) => boolean	null	The callback function for custom filtering the select list

Output(focus)(blur)(open)(close)(select)(remove)(navigated)(selectionChanges)

(typed)	Fired on changing search input. Returns@H_404_62@stringwith that value.
Fired on select focus
Fired on select blur
Fired on select dropdown open
Fired on select dropdown close
Fired on an item selected by user. Returns value of the selected item.
Fired on an item removed by user. Returns value of the removed item.
Fired on navigate by the dropdown list. Returns:@H_404_62@INgxOptionNavigated.
Fired on change selected options. Returns:@H_404_62@INgxSelectOption[].

Warning!Although the component contains the@H_404_62@selectand the@H_404_62@removeevents,the better solution is using@H_404_62@valueChangesof the@H_404_62@FormControl.

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

@Component({
    selector: 'app-example',template: `<ngx-select [items]="['111','222']" [formControl]="selectControl"></ngx-select>`
})
class ExampleComponent {
    public selectControl = new FormControl();

    constructor() {
        this.selectControl.valueChanges.subscribe(value => console.log(value));
    }
}

Styles and customization

Currently,the component contains CSS classes named withinBEM Methodology. As well it contains the "Bootstrap classes". Recommended use BEM classes for style customization.

List of styles for customization:

• @H_404_62@ngx-select- Main class of the component.
• @H_404_62@ngx-select_multiple- Modifier of the multiple mode. It's available when the property multiple is true.
• @H_404_62@ngx-select__disabled- Layer for the disabled mode.
• @H_404_62@ngx-select__selected- The common container for displaying selected items.
• @H_404_62@ngx-select__toggle- The toggle for single mode. It's available when the property multiple is false.
• @H_404_62@ngx-select__placeholder- The placeholder item. It's available when the property multiple is false.
• @H_404_62@ngx-select__selected-single- The selected item with single mode. It's available when the property multiple is false.
• @H_404_62@ngx-select__selected-plural- The multiple selected item. It's available when the property multiple is true.
• @H_404_62@ngx-select__allow-clear- The indicator that the selected single item can be removed. It's available while properties the multiple is false and the allowClear is true.
• @H_404_62@ngx-select__toggle-buttons- The container of buttons such as the clear and the toggle.
• @H_404_62@ngx-select__toggle-caret- The drop-down button of the single mode. It's available when the property multiple is false.
• @H_404_62@ngx-select__clear- The button clear.
• @H_404_62@ngx-select__clear-icon- The cross icon.
• @H_404_62@ngx-select__search- The input field for full text lives searching.
• @H_404_62@ngx-select__choices- The common container of items.
• @H_404_62@ngx-select__item-group- The group of items.
• @H_404_62@ngx-select__item- An item.
• @H_404_62@ngx-select__item_disabled- Modifier of a disabled item.
• @H_404_62@ngx-select__item_active- Modifier of the activated item.

Templates

For extended rendering customisation you are can use the@H_404_62@ng-template:

<ngx-select [items]="items" optionValueField="hex" optionTextField="name" [(ngModel)]="ngxValue">

    <ng-template ngx-select-option-selected let-option let-text="text">
        <span class="color-Box" [style]="style('background-color:' + option.value)"></span>
        <span [innerHtml]="text"></span>
        ({{option.data.hex}})
    </ng-template>

    <ng-template ngx-select-option let-option let-text="text">
        <span class="color-Box" [style]="style('background-color:' + option.value)"></span>
        <span [innerHtml]="text"></span>
        ({{option.data.hex}})
    </ng-template>

    <ng-template ngx-select-option-not-found>
        Nothing found
    </ng-template>

</ngx-select>

Also,you are can mix directives for reducing template:

<ngx-select [items]="items" optionValueField="hex" optionTextField="name" [(ngModel)]="ngxValue">
    <ng-template ngx-select-option-selected ngx-select-option let-option let-text="text">
        <span class="color-Box" [style]="style('background-color:' + option.value)"></span>
        <span [innerHtml]="text"></span>
        ({{option.data.hex}})
    </ng-template>

    <ng-template ngx-select-option-not-found>
        Not found <button (click)="addItem()">(+) Add new item</button>
    </ng-template>
</ngx-select>

Description details of the directives:

1. @H_404_62@ngx-select-option-selected- Customization rendering selected options. Representing variables:
   • @H_404_62@option(implicit) - object of type@H_404_62@INgxSelectOption.
   • @H_404_62@text- The text defined by the property@H_404_62@optionTextField.
   • @H_404_62@index- Number value of index the option in the select list. Always equal to zero for the single select.
2. @H_404_62@ngx-select-option- Customization rendering options in the dropdown menu. Representing variables:
   • @H_404_62@text- The highlighted text defined by the property@H_404_62@optionTextField. It is highlighted in the search.
   • @H_404_62@index- Number value of index for the top level.
   • @H_404_62@subIndex- Number value of index for the second level.
3. @H_404_62@ngx-select-option-not-found- Customization "not found text". Does not represent any variables.