ng2-label-multiselect

Label multiselect library for Angular 2

Dependencies

The module relies only on core angular components. The control has been designed to allow you to add in custom classes to style as you wish.

Installation

To include in your project install via NPM with:

npm i --save ng2-label-multiselect

You will then need to include the module in your app.module.ts:

import { LabelMultiselectModule } from 'ng2-label-multiselect';

// ...

@NgModule({
    imports: [
        LabelMultiselectModule
    ]
})
//...

Finally, include the component in your component HTML as per the next section.

HTML Component Markup

Once the module is installed, you will need to add HTML markup to include the multiselect in a component. The minimum requirement is an [(ngModel)] attribute.

<label-multiselect
    [(ngModel)]="labelModel">
</label-multiselect>

The [(ngModel)] attribute represents the selected labels in the multiselect, this should be an array of objects with the following properties:

Property	Type	Required	Description
id	any	Yes	A unique key for this label.
label	string	Yes	The value displayed for this label.

To aid in development, ng2-label-multiselect exposes a TypeScript interface for the object properties, this can be referenced as a type in your component by importing it:

import { ILabelItem } from 'ng2-label-multiselect';

Which can then be used as the type of the model object:

public labelModel: ILabelItem[];

ngOnInit() {
    this.labelModel = [
        {
            id: 1,
            label: 'Purple'
        }
        // ...
    ];
}

It is possibe to configure 'ng2-label-multiselect' by providing a configuration object to the [labelConfig] attribute (see the next section for more details on this object):

<label-multiselect
    [(ngModel)]="labelModel"
    [labelConfig]="labelMultiselectOptions">
</label>

Configuration

ng2-label-multiselect exposes an interface to provide an indication of valid configuration properties, this can be referenced as a type for your configuration object by importing it:

import { ILabelMultiselectConfig } from 'ng2-label-multiselect';

Which can then be used as the configuration object type in your component:

public labelMultiselectConfiguration: ILabelMultiselectConfig;

Current list of configuration options, types and default values:

Property	Type	Default	Description
minHeight	number	34	Sets the minimum height of the control.
disabledEmptyPlaceholder	string	''	Message displayed when the control is empty and disabled.
noOptionsPlaceholder	string	'No options available.'	Message displayed when no options provided to the control.
inputClasses	any[]	[]	Array of classes to be added to the html representing the input.
disabledEmptyClasses	string[]	[]	Array of classes added to the element wrapping the disabledEmptyPlaceholder.
dropdownItemClasses	string[]	[]	Array of classes added to each item in the dropdown list of available options.
noOptionsClasses	string[]	[]	Array of classes added to the element wrapping the noOptionsPlaceholder.
labelClasses	string[]	[]	Array of classes added to each of the labels.
autoTag	boolean	false	Provides the ability for the user to type in text to be converted to tags whenever a tagSeperators item occurs.
tagSeperators	string[]	[',']	Each string in the array will trigger the creation of a new tag when used with autoTag = true.

Dropdown options

// TODO

AutoTag

// TODO