@gmerabishvili/ngx-picklist
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2 • Public • Published

    ngx-picklist

    Table of contents

    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

    License

    MIT

    Install

    npm i @gmerabishvili/ngx-picklist

    DownloadsWeekly Downloads

    35

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    173 kB

    Total Files

    16

    Last publish

    Collaborators

    • gmerabishvili