ngx-picklist

• See Demo or try in Stackblitz

Table of contents

• Features
• Getting started
• Usage
• API

Features

• [x] Control buttons to reorder items.
• [x] Drag and Drop.
• [x] Customizable API.
• [x] Custom 'item', 'sourceHeader' and 'targetHeader' templates.
• [x] Multiple selection.
• [x] Keyboard navigation.
• [x] 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. |

Support ngx-picklist!

If you do love ngx-picklist I would appreciate a donation :)

Author

• Giorgi Merabishvili

License

MIT