# ngx-multiple-select

> [![npm version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=js&r=r&type=6e&v=8.2.14&x2=0)](https://www.npmjs.com/package/ngx-multiple-select)

Latest version **0.0.13** (published 2021-06-29) · 0 weekly downloads

## Install

```sh
npm install ngx-multiple-select
pnpm add ngx-multiple-select
yarn add ngx-multiple-select
bun add ngx-multiple-select
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.13 |
| Published | 2021-06-29 |
| First published | 2021-06-25 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 218.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | krunalujwal |

## Links

- npm: https://www.npmjs.com/package/ngx-multiple-select
- npm.io page: https://npm.io/package/ngx-multiple-select

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 0.0.13 (latest) — 2021-06-29
- 0.0.12 — 2021-06-27
- 0.0.11 — 2021-06-27
- 0.0.10 — 2021-06-26
- 0.0.7 — 2021-06-26
- 0.0.6 — 2021-06-26
- 0.0.5 — 2021-06-26
- 0.0.3 — 2021-06-26
- 0.0.2 — 2021-06-25
- 0.0.1 — 2021-06-25

## README

[![npm version](https://d25lcipzij17d.cloudfront.net/badge.svg?id=js&r=r&type=6e&v=8.2.14&x2=0)](https://www.npmjs.com/package/ngx-multiple-select)

# ngx-multiple-select
Integrated <b>Web Accessibilty</b>, can be used via keyboard only.


### See [Demo](https://stackblitz.com/edit/ngx-multiple-select)
---

## Getting started
### Step 1: Install `ngx-multiple-select`:

#### NPM
```shell
npm install ngx-multiple-select 
```

### Step 2: Import the NgxMultipleSelectModule module:
```js
import { NgxMultipleSelectModule } from 'ngx-multiple-select';

@NgModule({
  declarations: [AppComponent],
  imports: [NgxMultipleSelectModule],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

## API
### Inputs
| Input  | Type | Default | Required | Description |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| [enableAll] | `boolean`  | `false` | No | Enable select all checkbox. |
| [enableSearch] | `boolean`  | `false` | No | Enable search input. |
| [label] | `string` |   `display` | Yes | Property from object array to show label. |
| [value]  | `string` | `id` | Yes | Property from object array to output on selection. |
| [placeholder]  | `string` | `Select` | No | Placeholder to show on multiple select. |
| [selectedData]  | `array` | `-` | No | Selected values in form of number array. |
| [sourceData]  | `array` | `-` | Yes | Data to show in control. |

### Outputs

| Output  | Description |
| ------------- | ------------- |
| (onSelect)  | Fired on selection items. Outputs added item |

## Example

### HTML

```shell
<ngx-multiple-select
  id="cities"
  [enableAll]="true"
  [enableSearch]="true"
  [label]="'display'"
  [value]="'id'"
  [placeholder]="'Select City'"
  [selectedData]="selectedCities"
  [sourceData]="cities"
  (onSelect)="onSelect($event)">
</ngx-multiple-select>
```
### Component
```js
  cities = [
    { id: 1, display: 'Nagpur' },
    { id: 2, display: 'Hyderabad' },
    { id: 3, display: 'Wardha' },
    { id: 4, display: 'Pune' },
    { id: 5, display: 'Mumbai' },
    { id: 6, display: 'Bangluru' },
    { id: 7, display: 'Delhi' },
    { id: 8, display: 'Indore' },
    { id: 9, display: 'Malegao' },
    { id: 10, display: 'Ahemdabad' },
    { id: 11, display: 'Goa' },
    { id: 12, display: 'Panjim' },
    { id: 13, display: 'Chandigad' },
    { id: 14, display: 'Noida' },
    { id: 15, display: 'Ramnagar' }
  ];
  selectedCities = [1, 2, 4, 6, 8, 9];
```

## Author

- [Krunal Sakharkar](https://github.com/krunalujwal/ngx-multiple-select/)

---
_Source: https://npm.io/package/ngx-multiple-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._