magic-multi-select

This component let you create two multiple select element (right and left selection)

and transfer an item between the two selections.

Installation

To install this library, run:

$ npm install magic-multi-select --save

Consuming your library

From your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { MagicModule } from 'magic-multi-select';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MagicModule.forRoot(),
    // Specify your library as an import
    LibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import { MagicMultiSelectComponent } from 'magic-multi-select';
import { SelectionOptions } from 'magic-multi-select';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options: SelectionOptions = {
    leftSelection: [
      {key:'0', value: 'BANANA'},
      {key:'3', value: 'ORANGE'},
      {key:'2', value: 'RASPBERRY'},
      {key:'5', value: 'ANANAS'},
      {key:'1', value: 'LEMON'},
      {key:'4', value: 'MELON'},
      {key:'10', value: 'APPLE'},
    ],
    rightSelection:[
     
    ]
  };
  logeSelection(event){
    console.log(event);
  }

}

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->
<magic-multi-select [options]="options" (selectionChange)="logSelection($event)"></magic-multi-select>

License

MIT © Abderrahime FARHANE