@rignonnoel/angular-multiselect v2.0.0

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

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

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