From 3adbb94e062cb6ebad9815314bb8ca5d0b2078eb Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 15 Sep 2020 11:14:43 +0300
Subject: [PATCH] Added TrackBy in main menu

---
 ui-ngx/src/app/modules/home/menu/menu-toggle.component.html | 2 +-
 ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts   | 4 ++++
 ui-ngx/src/app/modules/home/menu/side-menu.component.html   | 2 +-
 ui-ngx/src/app/modules/home/menu/side-menu.component.ts     | 5 +++++
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
index 4ca7eb8f4c..b8acb0f624 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.html
@@ -24,7 +24,7 @@
         [ngClass]="{'tb-toggled' : sectionActive()}"></span>
 </a>
 <ul id="docs-menu-{{section.name | nospace}}" class="tb-menu-toggle-list" [ngStyle]="{height: sectionHeight()}">
-  <li *ngFor="let page of section.pages">
+  <li *ngFor="let page of section.pages; trackBy: trackBySectionPages">
     <tb-menu-link [section]="page"></tb-menu-link>
   </li>
 </ul>
diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
index 4054bc4b4f..9a515bcfba 100644
--- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
+++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts
@@ -44,4 +44,8 @@ export class MenuToggleComponent implements OnInit {
       return '0px';
     }
   }
+
+  trackBySectionPages(index: number, section: MenuSection){
+    return section.name;
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.html b/ui-ngx/src/app/modules/home/menu/side-menu.component.html
index b2302966dd..3819af5777 100644
--- a/ui-ngx/src/app/modules/home/menu/side-menu.component.html
+++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.html
@@ -16,7 +16,7 @@
 
 -->
 <ul fxFlex fxLayout="column" fxLayoutAlign="start stretch" class="tb-side-menu">
-  <li *ngFor="let section of menuSections$| async" [ngSwitch]="section.type === 'link'">
+  <li *ngFor="let section of menuSections$ | async; trackBy: trackByMenuSection" [ngSwitch]="section.type === 'link'">
     <tb-menu-link *ngSwitchCase="true" [section]="section"></tb-menu-link>
     <tb-menu-toggle *ngSwitchCase="false" [section]="section"></tb-menu-toggle>
   </li>
diff --git a/ui-ngx/src/app/modules/home/menu/side-menu.component.ts b/ui-ngx/src/app/modules/home/menu/side-menu.component.ts
index 40222e1110..b5d1be8610 100644
--- a/ui-ngx/src/app/modules/home/menu/side-menu.component.ts
+++ b/ui-ngx/src/app/modules/home/menu/side-menu.component.ts
@@ -16,6 +16,7 @@
 
 import { Component, OnInit } from '@angular/core';
 import { MenuService } from '@core/services/menu.service';
+import { MenuSection } from '@core/services/menu.models';
 
 @Component({
   selector: 'tb-side-menu',
@@ -29,6 +30,10 @@ export class SideMenuComponent implements OnInit {
   constructor(private menuService: MenuService) {
   }
 
+  trackByMenuSection(index: number, section: MenuSection){
+    return section.name;
+  }
+
   ngOnInit() {
   }