AngularMultiselect
A multiple select component for angular 6.0+ that allow user to manage choices between two list.
Demo
https://rignonnoel.com/angular-multiselect/
Getting started
First install through npm:
npm install --save @rignonnoel/angular-multiselect
Finally import MultiselectModule into your app module:
import {MultiselectModule} from 'angular-multiselect';
@NgModule({
imports: [
MultiselectModule
]
})
export class MyModule {}
Example of usage
Here is a little example of usage:
- We create or get a list of choices
- We init the component
- We bind a filter function that will be trigger when user want to filter the list
At all time we can use the list of selected choices since this variable is bind to the multiselect.
example.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
// The list of item in our storage service (ALL the valid choices)
allChoices = [];
// The list of choices availables in the multiple select
choicesAvailable = [];
// The list of choices selected (feel free to populate it to init the multiselect with pre-selected options)
selectedChoices = [];
constructor() {
// You can replace this loop by a call to you storage service to get data from your DB for example.
for (let index = 0; index <= 200; index++) {
this.allChoices.push(
{
name: 'Choice ' + index.toString(),
}
);
}
this.choicesAvailable = this.allChoices;
}
// Here is the function we trigger each time the user want to filter the list inside the multiselect
// You can change this logic to just add a filter on the call to your storage service for example.
filter(search) {
console.log(search);
if (search != '') {
this.choicesAvailable = [];
for (const item of this.allChoices) {
if (item.name.indexOf(search) >= 0) {
this.choicesAvailable.push(item);
}
}
} else {
this.choicesAvailable = this.allChoices;
}
}
}example.component.html
<multiselect [list]="choicesAvailable"
[(selected)]="selectedChoices"
labelProperty="name"
(searchBar)="filter($event)"
typeOfSearch='text'>
</multiselect>Documentation
Inputs
| Attribut | Description | Type | Default value |
|---|---|---|---|
| list | The list of choices available in the multiselect | any[] | [] |
| selected | The list of selected choices in the multiselect | any[] | [] |
| labelProperty | Attribute name of list we want to use as display in the multiselect |
string | label |
| settings | General settings of the component, principally use for display configuration | Object | See below |
| typeOfSearch | The type of searchbar you want | 'text', 'datetime', 'datetime-range' | 'text' |
Settings
Here is the default value of the settings, feel free to change it to do some customization or internationalization.
{
searchBarPlaceholder: 'Type here to filter the list..',
listLabel: 'List of choices',
listEmptyLabel: 'No choices available',
selectedLabel: 'Selected choices',
selectedEmptyLabel: 'No choice selected',
datetime_range: {
start: 'Start',
end: 'End',
}
}
Outputs
| Attribut | Description | Type | Return |
|---|---|---|---|
| searchBar | Triggered each time the user change the content of the searchBar. This output is triggered after a little time without edition (1~2 seconds) to avoid abusive calculation on filtering | string | The text writed by the user to filter |
How to publish a new official version on npmjs
First create a new build of the package:
npm run packagr
Finally publish it on npmjs:
npm publish dist --access public
License
MIT