From 784febf3fc20e4bfb3dc2b5c1a6700da2d99ca7c Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 15 Sep 2020 11:23:03 +0300
Subject: [PATCH] Added TrackBy in breadcrumb

---
 ui-ngx/src/app/shared/components/breadcrumb.component.html | 2 +-
 ui-ngx/src/app/shared/components/breadcrumb.component.ts   | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.html b/ui-ngx/src/app/shared/components/breadcrumb.component.html
index 1264acc3a2..d7d4438566 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.component.html
+++ b/ui-ngx/src/app/shared/components/breadcrumb.component.html
@@ -19,7 +19,7 @@
   <h1 fxFlex fxHide.gt-sm *ngIf="lastBreadcrumb$ | async; let breadcrumb">
     {{ breadcrumb.ignoreTranslate ? (breadcrumb.labelFunction ? breadcrumb.labelFunction() : breadcrumb.label) : (breadcrumb.label | translate) }}
   </h1>
-  <span fxHide.lt-md fxLayout="row" *ngFor="let breadcrumb of breadcrumbs$ | async; last as isLast;" [ngSwitch]="isLast">
+  <span fxHide.lt-md fxLayout="row" *ngFor="let breadcrumb of breadcrumbs$ | async; trackBy: trackByBreadcrumbs; last as isLast;" [ngSwitch]="isLast">
 	    <a *ngSwitchCase="false" [routerLink]="breadcrumb.link" [queryParams]="breadcrumb.queryParams">
         <mat-icon *ngIf="breadcrumb.isMdiIcon" [svgIcon]="breadcrumb.icon">
 	    	</mat-icon>
diff --git a/ui-ngx/src/app/shared/components/breadcrumb.component.ts b/ui-ngx/src/app/shared/components/breadcrumb.component.ts
index a934e29093..651ed77831 100644
--- a/ui-ngx/src/app/shared/components/breadcrumb.component.ts
+++ b/ui-ngx/src/app/shared/components/breadcrumb.component.ts
@@ -110,4 +110,8 @@ export class BreadcrumbComponent implements OnInit, OnDestroy {
     }
     return newBreadcrumbs;
   }
+
+  trackByBreadcrumbs(index: number, breadcrumb: BreadCrumb){
+    return breadcrumb.labelFunction ? breadcrumb.labelFunction() : breadcrumb.label;
+  }
 }