@gmerabishvili/ngx-picklist NPM

ngx-picklist

See Demo or try in Stackblitz

Features

Control buttons to reorder items.
Drag and Drop.
Customizable API.
Custom 'item', 'sourceHeader' and 'targetHeader' templates.
Multiple selection.
Keyboard navigation.
Accessibility.

Getting started

ngx-picklist is used to reorder items between different lists. Items can be reordered using control buttons and drag and drop.
ngx-picklist uses @angular/cdk's DragDropModule: npm i @angular/cdk

Step 1: Install `ngx-picklist`:

NPM

npm i ngx-picklist

Step 2: Import the NgxPicklistModule:

import {NgxPicklistModule} from '@gmerabishvili/ngx-picklist';

@NgModule({
  declarations: [AppComponent],
  imports: [NgxPicklistModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Usage sample

  <ngx-picklist
  [source]="sourceBooks"
  [target]="targetBooks"
  [itemTemplate]="itemTemplate"
  [sourceHeaderTemplate]="sourceHeaderTemplate"
  [targetHeaderTemplate]="targetHeaderTemplate"
  (movedToTarget)="onMoveToTarget($event)"
  (movedToSource)="onMoveToSource($event)">

  <ng-template #sourceHeaderTemplate>
    <h3 class="title">Available</h3>
  </ng-template>

  <ng-template #targetHeaderTemplate>
    <h3 class="title">Selected</h3>
  </ng-template>

  <ng-template #itemTemplate let-item>
    <div class="item">
      <div class="image-container">
        <img src="assets/images/{{item.image}}" [alt]="item.name" class="image"/>
      </div>
      <div class="item-detail">
        <h4>{{item.name}}</h4>
        <span class="text">{{item.category}}</span>
      </div>
      <div class="item-description">
        <h5>${{item.price}}</h5>
        <span class="text">{{item.description}}</span>
      </div>
    </div>
  </ng-template>

</ngx-picklist>

class TestComponent {
  sourceBooks: any[] = [
    {
      id: 1,
      name: "Design Patterns",
      description: "Book Description",
      image: "design-patterns.jpg",
      category: "Programming",
      price: 99
    },
    {
      id: 2,
      name: "Eloquent Javascript",
      description: "Book Description",
      image: "eloquent-javascript.jpg",
      category: "Programming",
      price: 150
    },
    {
      id: 3,
      name: "Javascript Ninja",
      description: "Book Description",
      image: "javascript-ninja.jpg",
      category: "Programming",
      price: 250
    }
    ];

  targetBooks: any[] = []
  
  
  onMoveToTarget(event: any) {
    // console.log(event);
  }

  onMoveToSource(event: any) {
    // console.log(event);
  }
}

API

Inputs

Input	Type	Default	Required	Description
source	`Array<any>`	`[]`	yes	An array of objects for the source list.
target	`Array<any>`	`[]`	yes	An array of objects for the target list.
showControls	`boolean`	`true`	no	Whether to show control buttons.
showResetControl	`boolean`	`false`	no	Whether to show reset control button. It is hidden by default.
styleClass	`string`	`-`	no	Style class of the component.
disabled	`boolean`	`false`	no	When present, it specifies that the component should be disabled.
dragdropDisabled	`boolean`	`false`	no	When present, it specifies that the Drag and Drop should be disabled.
trackBy	`(index: number, item: any) => item`	`Function`	no	Function to optimize the DOM operations by delegating to ngForTrackBy, default algorithm checks for object identity.
sourceHeaderTemplate	`TemplateRef<any>`	`null`	no	Custom header template of source list.
targetHeaderTemplate	`TemplateRef<any>`	`null`	no	Custom header template of target list.
itemTemplate	`TemplateRef<any>`	`null`	yes	Custom item template. Parameters: $implicit: Data of the item; index: Index of the item

Outputs

Output	Description
(movedToTarget)	Event is emitted when items are moved from source to target.
(movedAllToTarget)	Event is emitted when all items are moved from source to target.
(movedToSource)	Event is emitted when items are moved from target to source.
(movedAllToSource)	Event is emitted when all items are moved from target to source.
(targetReordered)	Event is emitted when items are reordered within target list.
(sourceReordered)	Event is emitted when items are reordered within source list.
(targetSelected)	Event is emitted when items are selected within target list.
(sourceSelected)	Event is emitted when items are selected within target list.
(reset)	Event is emitted when reset control button is present and clicked.