# ng2-label-multiselect > Label multiselect library for Angular 2 Latest version **1.0.0** (published 2016-12-02) · MIT license · 0 weekly downloads ## Install ```sh npm install ng2-label-multiselect pnpm add ng2-label-multiselect yarn add ng2-label-multiselect bun add ng2-label-multiselect ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2016-12-02 | | First published | 2016-09-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 10 | | Known vulnerabilities | 0 (+22 in 3 direct dependencies) | | Install scripts | yes | | GitHub stars | 0 | | Author | Andy Mepham | | Maintainers | andymeps | | Keywords | angular, 2, library, label, multiselect, select, option, bootstrap | ## Links - npm: https://www.npmjs.com/package/ng2-label-multiselect - Repository: https://github.com/AndyMeps/ng2-label-multiselect - Homepage: https://github.com/AndyMeps/ng2-label-multiselect#readme - Issues: https://github.com/AndyMeps/ng2-label-multiselect/issues - npm.io page: https://npm.io/package/ng2-label-multiselect ## Dependencies (10) - [rxjs](https://npm.io/package/rxjs.md) ^5.0.0-beta.12 - [core-js](https://npm.io/package/core-js.md) ^2.4.1 - [zone.js](https://npm.io/package/zone.js.md) ^0.6.23 - [systemjs](https://npm.io/package/systemjs.md) ^0.19.38 - [@angular/core](https://npm.io/package/@angular/core.md) ^2.0.0 - [@angular/forms](https://npm.io/package/@angular/forms.md) ^2.0.0 - [@angular/common](https://npm.io/package/@angular/common.md) ^2.0.0 - [reflect-metadata](https://npm.io/package/reflect-metadata.md) ^0.1.8 - [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^2.0.0 - [@angular/compiler-cli](https://npm.io/package/@angular/compiler-cli.md) ^0.6.2 ## Alternatives - [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads - [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads - [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads - [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads - [@modern-js/plugin-swc](https://npm.io/package/@modern-js/plugin-swc.md) — 3.4K weekly downloads ## Recent versions - 1.0.0 (latest) — 2016-12-02 - 0.1.9 — 2016-12-02 - 0.1.8 — 2016-10-25 - 0.1.7 — 2016-10-25 - 0.1.6 — 2016-10-25 - 0.1.5 — 2016-10-05 - 0.1.4 — 2016-10-03 - 0.1.3 — 2016-09-30 - 0.1.2 — 2016-09-30 - 0.1.1 — 2016-09-29 - 0.1.0 — 2016-09-29 ## README [![npm version](https://badge.fury.io/js/ng2-label-multiselect.svg)](https://badge.fury.io/js/ng2-label-multiselect) [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php) [![Dependency Status](https://www.versioneye.com/nodejs/ng2-label-multiselect/0.1.12/badge?style=flat-square)](https://www.versioneye.com/nodejs/ng2-label-multiselect/0.1.12) [![Build Status](https://travis-ci.org/AndyMeps/ng2-label-multiselect.svg?branch=master)](https://travis-ci.org/AndyMeps/ng2-label-multiselect) [![NPM](https://nodei.co/npm/ng2-label-multiselect.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/ng2-label-multiselect/) # ng2-label-multiselect Label multiselect library for Angular 2 ![Screenshot open with Bootstrap]() ## 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: ```typescript 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. ```html ``` 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: ```typescript import { ILabelItem } from 'ng2-label-multiselect'; ``` Which can then be used as the type of the model object: ```typescript 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): ```html ``` ## 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: ```typescript import { ILabelMultiselectConfig } from 'ng2-label-multiselect'; ``` Which can then be used as the configuration object type in your component: ```typescript 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 --- _Source: https://npm.io/package/ng2-label-multiselect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._