dropdown list position and custom primary key features

README.md

@@ -220,6 +220,9 @@ The following list of settings are supported by the component. Configure the set
 | groupBy | String | Name of the field by which the list should be grouped. | none |
 | searchAutofocus | Boolean | Autofocus search input field| true |
 | labelKey | String | The property name which should be rendered as label in the dropdown| itemName |
+| primaryKey | String | The property by which the object is identified. Default is 'id'.| id |
+| position | String | Set the position of the dropdown list to 'top' or 'bottom'| bottom |
+
 
 
 ### Callback Methods

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-multiselect-dropdown",
-  "version": "2.7.0",
+  "version": "2.8.0",
     "description": "Angular 2 and angular 4 multiselect dropdown component.",
       "keywords": [
     "angular 2 multiselect dropdown",

src/app/angular2-multiselect-dropdown/clickOutside.ts

@@ -1,4 +1,4 @@
-import {Directive, ElementRef, Output, EventEmitter, HostListener, Input} from '@angular/core';
+import { Directive, ElementRef, Output, EventEmitter, HostListener, Input, OnInit, OnChanges } from '@angular/core';
 
 @Directive({
     selector: '[clickOutside]'
@@ -40,21 +40,44 @@ export class ScrollDirective {
     }
 }
 @Directive({
-  selector: '[styleProp]'
+    selector: '[styleProp]'
 })
 export class styleDirective {
 
-  constructor(private el: ElementRef) {
+    constructor(private el: ElementRef) {
 
-   }
+    }
 
-  @Input('styleProp') styleVal: number;
+    @Input('styleProp') styleVal: number;
 
-   ngOnInit() {
+    ngOnInit() {
 
-      this.el.nativeElement.style.top = this.styleVal;
-   }
+        this.el.nativeElement.style.top = this.styleVal;
+    }
     ngOnChanges(): void {
-       this.el.nativeElement.style.top = this.styleVal;
-  }
+        this.el.nativeElement.style.top = this.styleVal;
+    }
+}
+
+
+@Directive({
+    selector: '[setPosition]'
+})
+export class setPosition implements OnInit, OnChanges {
+
+    @Input('setPosition') height: number;
+
+    constructor(public el: ElementRef) {
+
+    }
+    ngOnInit() {
+        if (this.height) {
+            this.el.nativeElement.style.bottom = parseInt(this.height + 15 + "") + 'px';
+        }
+    }
+    ngOnChanges(): void {
+        if (this.height) {
+            this.el.nativeElement.style.bottom = parseInt(this.height + 15 + "") + 'px';
+        }
+    }
 }

src/app/angular2-multiselect-dropdown/list-filter.ts

@@ -1,13 +1,12 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
-import { ListItem } from './multiselect.model';
 
 @Pipe({
     name: 'listFilter',
     pure: false
 })
 export class ListFilterPipe implements PipeTransform {
-    transform(items: ListItem[], filter: any): ListItem[] {
+    transform(items: any[], filter: any): any[] {
         if (!items || !filter) {
             return items;
         }

src/app/angular2-multiselect-dropdown/menu-item.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, NgModule, TemplateRef, AfterContentInit, ContentChild, EmbeddedViewRef, OnChanges, ViewContainerRef, ViewEncapsulation, Input, Output, EventEmitter, ElementRef, AfterViewInit, Pipe, PipeTransform } from '@angular/core';
+import { Component, OnInit, OnDestroy, NgModule, TemplateRef, AfterContentInit, ContentChild, EmbeddedViewRef, OnChanges, ViewContainerRef, ViewEncapsulation, Input, Output, EventEmitter, ElementRef, AfterViewInit, Pipe, PipeTransform, Directive } from '@angular/core';
 import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser';
 import { CommonModule }       from '@angular/common';
 

src/app/angular2-multiselect-dropdown/multiselect.component.html

@@ -1,59 +1,61 @@
 <div class="cuppa-dropdown" (clickOutside)="closeDropdown()">
-    <div class="selected-list">
+    <div class="selected-list" #selectedList>
         <div class="c-btn" (click)="toggleDropdown($event)" [ngClass]="{'disabled': settings.disabled}">
             <span *ngIf="selectedItems?.length == 0">{{settings.text}}</span>
             <span *ngIf="settings.singleSelection">
-                <span *ngFor="let item of selectedItems;trackBy: trackByFn;">
+                <span *ngFor="let item of selectedItems;trackBy: trackByFn.bind(this);">
                     {{item[settings.labelKey]}}
                 </span>
             </span>
             <div class="c-list" *ngIf="selectedItems?.length > 0 && !settings.singleSelection">
-                <div class="c-token" *ngFor="let item of selectedItems;trackBy: trackByFn;let k = index" [hidden]="k > settings.badgeShowLimit-1">
+                <div class="c-token" *ngFor="let item of selectedItems;trackBy: trackByFn.bind(this);let k = index" [hidden]="k > settings.badgeShowLimit-1">
                     <span *ngIf="!badgeTempl" class="c-label">{{item[settings.labelKey]}}</span>
                     <span *ngIf="badgeTempl" class="c-label">
                         <c-templateRenderer [data]="badgeTempl" [item]="item"></c-templateRenderer>
                     </span>
                     <span class="fa fa-remove" (click)="onItemClick(item,k,$event)"></span>
                 </div>
-            </div> 
+            </div>
             <span class="countplaceholder" *ngIf="selectedItems?.length > settings.badgeShowLimit">+{{selectedItems?.length - settings.badgeShowLimit }}</span>
             <span class="fa" [ngClass]="{'fa-angle-down': !isActive,'fa-angle-up':isActive}"></span>
-        </div>      
+        </div>
     </div>
-    <div class="dropdown-list" [hidden]="!isActive">
-    <div class="arrow-up arrow-2"></div>
-    <div class="arrow-up"></div>
-    <div class="list-area">
-        <div class="pure-checkbox select-all" *ngIf="settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection" (click)="toggleSelectAll()">
-            <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelectAll" [disabled]="settings.limitSelection == selectedItems?.length"/>
-            <label>
+    <div [setPosition]="selectedListHeight?.val" class="dropdown-list" [ngClass]= "{'dropdown-list-top': settings.position == 'top'}" [hidden]="!isActive">
+        <div [ngClass]= "{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}"  class="arrow-2"></div>
+        <div [ngClass]= "{'arrow-up': settings.position == 'bottom', 'arrow-down': settings.position == 'top'}"></div>
+        <div class="list-area">
+            <div class="pure-checkbox select-all" *ngIf="settings.enableCheckAll && !settings.singleSelection && !settings.limitSelection"
+                (click)="toggleSelectAll()">
+                <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelectAll" [disabled]="settings.limitSelection == selectedItems?.length"
+                />
+                <label>
                 <span [hidden]="isSelectAll">{{settings.selectAllText}}</span>
                 <span [hidden]="!isSelectAll">{{settings.unSelectAllText}}</span>
             </label>
-        </div>   
-        <div class="list-filter" *ngIf="settings.enableSearchFilter && !settings.lazyLoading">
-            <span class="fa fa-search"></span>
-            <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" [(ngModel)]="filter">
-        </div> 
-        <div class="list-filter" *ngIf="settings.enableSearchFilter && settings.lazyLoading">
-            <span class="fa fa-search"></span>
-            <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" (keyup)="filterInfiniteList($event)">
-        </div>
-    <ul *ngIf="!settings.groupBy" [style.maxHeight] = "settings.maxHeight+'px'" class="lazyContainer" >
-        <span *ngIf="itemTempl">
+            </div>
+            <div class="list-filter" *ngIf="settings.enableSearchFilter && !settings.lazyLoading">
+                <span class="fa fa-search"></span>
+                <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" [(ngModel)]="filter">
+            </div>
+            <div class="list-filter" *ngIf="settings.enableSearchFilter && settings.lazyLoading">
+                <span class="fa fa-search"></span>
+                <input #searchInput type="text" [placeholder]="settings.searchPlaceholderText" (keyup)="filterInfiniteList($event)">
+            </div>
+            <ul *ngIf="!settings.groupBy" [style.maxHeight]="settings.maxHeight+'px'" class="lazyContainer">
+                <span *ngIf="itemTempl">
             <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">
             <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>
             <label></label>
             <c-templateRenderer [data]="itemTempl" [item]="item"></c-templateRenderer>
         </li>
         </span>
-        <span *ngIf="!itemTempl && !settings.lazyLoading" >
+                <span *ngIf="!itemTempl && !settings.lazyLoading">
         <li *ngFor="let item of data | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">
             <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>
             <label>{{item[settings.labelKey]}}</label>
         </li>
         </span>
-        <span *ngIf="!itemTempl && settings.lazyLoading" >
+                <span *ngIf="!itemTempl && settings.lazyLoading">
             <div [ngStyle]="{'height':totalHeight+'px'}" style="position: relative;">
 
 
@@ -63,26 +65,26 @@
         </li>
         </div>
         </span>
-    </ul>
-    <div *ngIf="settings.groupBy" [style.maxHeight] = "settings.maxHeight+'px'" style="overflow: auto;">
-    <ul *ngFor="let obj of groupedData ; let i = index;" class="list-grp">
-        <h4 *ngIf="(obj.value | listFilter:filter ).length > 0">{{obj.key}}</h4>
-        <span *ngIf="itemTempl" >
+            </ul>
+            <div *ngIf="settings.groupBy" [style.maxHeight]="settings.maxHeight+'px'" style="overflow: auto;">
+                <ul *ngFor="let obj of groupedData ; let i = index;" class="list-grp">
+                    <h4 *ngIf="(obj.value | listFilter:filter ).length > 0">{{obj.key}}</h4>
+                    <span *ngIf="itemTempl">
         <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">
             <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>
             <label></label>
             <c-templateRenderer [data]="itemTempl" [item]="item"></c-templateRenderer>
         </li>
         </span>
-        <span *ngIf="!itemTempl" >
+                    <span *ngIf="!itemTempl">
         <li *ngFor="let item of obj.value | listFilter:filter; let i = index;" (click)="onItemClick(item,i,$event)" class="pure-checkbox">
             <input *ngIf="settings.showCheckbox" type="checkbox" [checked]="isSelected(item)" [disabled]="settings.limitSelection == selectedItems?.length && !isSelected(item)"/>
             <label>{{item[settings.labelKey]}}</label>
         </li>
         </span>
-    </ul>
-    </div>
-    <h5 class="list-message" *ngIf="data?.length == 0">{{settings.noDataLabel}}</h5>
-    </div>
+                </ul>
+            </div>
+            <h5 class="list-message" *ngIf="data?.length == 0">{{settings.noDataLabel}}</h5>
+        </div>
     </div>
 </div>

src/app/angular2-multiselect-dropdown/multiselect.component.scss

@@ -106,7 +106,7 @@ $base-color: #0079FE;
         background: #f2f2f2;
     }
 }
-.arrow-up {
+.arrow-up, .arrow-down {
   width: 0; 
   height: 0; 
   border-left: 13px solid transparent;
@@ -116,10 +116,19 @@ $base-color: #0079FE;
   position: absolute;
   top: 0;
 }
+.arrow-down {
+  bottom: -14px;
+  top: unset;
+  transform: rotate(180deg);
+}
 .arrow-2{
     border-bottom: 15px solid #ccc;
     top: -1px;
 }
+.arrow-down.arrow-2 {
+    top: unset;
+    bottom: -16px;
+}
 .list-area{
     border: 1px solid #ccc;
     border-radius: 3px;