feat(trackByFn): allow to provide custom trackBy function

closes #1134
ng-select · May 18, 2019 · 0afa9c1 · 0afa9c1
1 parent e994937
commit 0afa9c1
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -144,6 +144,7 @@ map: {
 | placeholder | `string` | `-` | no | Placeholder text. |
 | [searchable] | `boolean` | `true` | no | Allow to search for value. Default `true`|
 | [searchFn] | `(term: string, item: any) => boolean` | `null` | no | Allow to filter by custom search function |
+| [trackByFn] | `(item: any) => any` | `null` | no | Provide custom trackBy function |
 | [clearSearchOnAdd] | `boolean` | `true` | no | Clears search input when item is selected. Default `true`. Default `false` when **closeOnSelect** is `false` |
 | [selectOnTab] | `boolean` | `false` | no | Select marked dropdown item using tab. Default `false`|
 | [openOnEnter] | `boolean` | `true` | no | Open dropdown using enter. Default `true`|

diff --git a/demo/app/examples/search.component.ts b/demo/app/examples/search.component.ts
@@ -50,6 +50,7 @@ import { Subject, Observable, of, concat } from 'rxjs';
                    [addTag]="true"
                    [multiple]="true"
                    [hideSelected]="true"
+                   [trackByFn]="trackByFn"
                    [loading]="people3Loading"
                    [typeahead]="people3input$"
                    [(ngModel)]="selectedPersons">
@@ -85,6 +86,10 @@ export class SelectSearchComponent {
         return item.name.toLocaleLowerCase().indexOf(term) > -1 || item.gender.toLocaleLowerCase() === term;
     }
 
+    trackByFn(item: Person) {
+        return item.id;
+    }
+
     private loadPeople() {
         this.peopleLoading = true;
         this.dataService.getPeople().subscribe(x => {

diff --git a/src/ng-select/ng-select.component.html b/src/ng-select/ng-select.component.html
@@ -3,7 +3,7 @@
         <div class="ng-placeholder">{{placeholder}}</div>
 
         <ng-container *ngIf="!multiLabelTemplate && selectedItems.length > 0">
-            <div [class.ng-value-disabled]="item.disabled" class="ng-value" *ngFor="let item of selectedItems">
+            <div [class.ng-value-disabled]="item.disabled" class="ng-value" *ngFor="let item of selectedItems; trackBy: trackByOption">
                 <ng-template #defaultLabelTemplate>
                     <span class="ng-value-icon left" (click)="unselect(item);" aria-hidden="true">×</span>
                     <span class="ng-value-label">{{item.label}}</span>
@@ -83,7 +83,7 @@
 
     <ng-container>
         <div class="ng-option" [attr.role]="item.children ? 'group' : 'option'" (click)="toggleItem(item)" (mouseover)="onItemHover(item)"
-                *ngFor="let item of viewPortItems"
+                *ngFor="let item of viewPortItems; trackBy: trackByOption"
                 [class.ng-option-disabled]="item.disabled"
                 [class.ng-option-selected]="item.selected"
                 [class.ng-optgroup]="item.children"

diff --git a/src/ng-select/ng-select.component.ts b/src/ng-select/ng-select.component.ts
@@ -102,6 +102,7 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
     @Input() selectableGroup = false;
     @Input() selectableGroupAsModel = true;
     @Input() searchFn = null;
+    @Input() trackByFn = null;
     @Input() excludeGroupsFromDefaultSelection = false;
     @Input() clearOnBackspace = true;
 
@@ -473,6 +474,14 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
         return this.clearable && (this.hasValue || this.filterValue) && !this.disabled;
     }
 
+    trackByOption = (_: number, item: NgOption) => {
+        if (this.trackByFn) {
+            return this.trackByFn(item.value);
+        }
+
+        return null;
+    };
+
     get showAddTag() {
         if (!this.filterValue) {
             return false;