ngx-multiple-select

Integrated Web Accessibilty, can be used via keyboard only.

$3

---

Getting started

$3

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

$3

`js
import { NgxMultipleSelectModule } from 'ngx-multiple-select';

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

API

$3

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

$3

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

Example

$3

`shell
id="cities"
[enableAll]="true"
[enableSearch]="true"
[label]="'display'"
[value]="'id'"
[placeholder]="'Select City'"
[selectedData]="selectedCities"
[sourceData]="cities"
(onSelect)="onSelect($event)">

`

$3

`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