Angular4_支持多选,分组,自动完成,带图标,清理输入框可配置的select

Angular4_支持多选,分组,自动完成,过滤,带图标,清理输入框 可配置的select

效果图

Documentation

Usage

1. Install ngx-select-ex through npm package 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

1. 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)],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule {
 }

1. 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">

1. Add the tag 

<ngx-select>

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

1. More information regarding of using ngx-select-ex is located in demo.

API

Any item can be disabled for prevent selection. For disable an item add the property disabled

Warning! Although the component contains the select and the remove events, the better solution is using valueChanges of the 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 within BEM Methodology. As well it contains the "Bootstrap classes". Recommended use BEM classes for style customization.

List of styles for customization:

ngx-selectngx-select_multiplengx-select__disabledngx-select__selectedngx-select__togglengx-select__placeholderngx-select__selected-singlengx-select__selected-pluralngx-select__allow-clearngx-select__toggle-buttonsngx-select__toggle-caretngx-select__clearngx-select__clear-iconngx-select__searchngx-select__choicesngx-select__item-groupngx-select__itemngx-select__item_disabledngx-select__item_active

Templates

For extended rendering customisation you are can use the 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:

ngx-select-option-selected

1.  - Customization rendering selected options. Representing variables:

option

•  (implicit) - object of type 

INgxSelectOption

• .

text

•  - The text defined by the property 

optionTextField

• .

indexngx-select-option

1.  - Customization rendering options in the dropdown menu. Representing variables:

option

•  (implicit) - object of type 

INgxSelectOption

• .

text

•  - The highlighted text defined by the property 

optionTextField

• . It is highlighted in the search.

indexsubIndexngx-select-option-not-found