Multiselect Reorder List

Table of contents

• Demo
  • StackBlitz Demo
• Installation
• Usage
• Methods
• Creator
  • Yogesh Kumawat

stackblitz-demo

Working Demo

Installation

multiselect-reorder-list is available via npm Using npm:

$ npm i multiselect-reorder-list --save

Usage

Import MultiselectReorderList in in the root module(AppModule):

import { NgModule } from '@angular/core';
// Import library module
import { MultiselectReorderList } from 'multiselect-reorder-list';

@NgModule({
  imports: [
    // ...
    MultiselectReorderList
  ]
})
export class AppModule {}

Wherever you want to use the multiselect-reorder-list.

 
class AppComponent implements OnInit {
  constructor() {}
  columns= [];
  ngOnInit() {
  this.columns = [
    {
      columnName: "Role 1",
      ticked: true
    },
    {
      columnName: "Role 2 ",
      ticked: true
    },
    {
      columnName: "Role 3 ",
      ticked: true
    }
  ];
  }

   onSelect(event) {
    console.log(event);
  }

  orderUp(event) {
    console.log(event);
  }
  orderDown(event) {
    console.log(event);
  }

}

Now use in your template

<multiselect-reorder-list [columns]="columns" [total]="columns.length" [classWrapper]="'wrapper-class'" (onSelectHandler)="onSelect($event)" (onOrderUpHandler)="orderUp($event)" (onOrderDownHandler)="orderDown($event)"></multiselect-reorder-list>

Methods

• onSelectHandler()
• onOrderUpHandler()
• onOrderDownHandler()

Creator

Yogesh Kumawat

• @GitHub