ngx-multiple-select

Integrated Web Accessibilty, can be used via keyboard only.

See Demo

Getting started

Step 1: Install ngx-multiple-select:

NPM

npm install ngx-multiple-select 

Step 2: Import the NgxMultipleSelectModule module:

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

<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

  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