From c7df506d02c48675e70f4f8111a9c4ccbedb02ac Mon Sep 17 00:00:00 2001
From: Sibiraj <dev.sibiraj@outlook.com>
Date: Sat, 29 Jan 2022 20:19:28 +0530
Subject: [PATCH] perf: use trackBy with ngFor loops

---
 .../src/lib/modules/menu/bubble/bubble.component.html |  4 ++--
 .../src/lib/modules/menu/bubble/bubble.component.ts   |  4 ++++
 .../menu/color-picker/color-picker.component.html     |  4 ++--
 .../menu/color-picker/color-picker.component.ts       |  4 ++++
 .../lib/modules/menu/dropdown/dropdown.component.html |  2 +-
 .../lib/modules/menu/dropdown/dropdown.component.ts   |  4 ++++
 .../src/lib/modules/menu/menu.component.html          | 11 ++++++-----
 .../ngx-editor/src/lib/modules/menu/menu.component.ts |  4 ++++
 8 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.html b/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.html
index d875a99e..b25d2d4b 100644
--- a/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.html
+++ b/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.html
@@ -1,5 +1,5 @@
-<ng-container *ngFor="let toolbarItem of toolbar; let lastToolbarItem = last">
-  <ng-container *ngFor="let item of toolbarItem; let lastItem = last">
+<ng-container *ngFor="let toolbarItem of toolbar; let lastToolbarItem = last; trackBy: trackByIndex">
+  <ng-container *ngFor="let item of toolbarItem; let lastItem = last; trackBy: trackByIndex">
     <div class="NgxBubbleMenu__Icon" [ngClass]="{'NgxBubbleMenu__Icon--Active': this.activeItems.includes(item),
   'NgxEditor--Disabled': !this.execulableItems.includes(item)}" (mousedown)="onClick($event, item)"
       *ngIf="toggleCommands.includes(item)" [title]="getTitle(item)" [innerHTML]="getIcon(item)">
diff --git a/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.ts b/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.ts
index a5bb6d47..fe6ce4d0 100644
--- a/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.ts
+++ b/projects/ngx-editor/src/lib/modules/menu/bubble/bubble.component.ts
@@ -52,6 +52,10 @@ export class BubbleComponent implements OnInit, OnDestroy {
     return this.ngxeService.locals.get(name);
   }
 
+  trackByIndex(index: number): number {
+    return index
+  }
+
   onClick(e: MouseEvent, commandName: TBItems): void {
     e.preventDefault();
     e.stopPropagation();
diff --git a/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.html b/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.html
index 1eb97681..74f69a19 100644
--- a/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.html
+++ b/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.html
@@ -3,8 +3,8 @@
 </div>
 
 <div *ngIf="showPopup" class="NgxEditor__Popup">
-  <div *ngFor="let colorGroup of presets" class="NgxEditor__ColorContainer">
-    <button class="NgxEditor__Color" *ngFor="let color of colorGroup"
+  <div *ngFor="let colorGroup of presets; trackBy: trackByIndex" class="NgxEditor__ColorContainer">
+    <button class="NgxEditor__Color" *ngFor="let color of colorGroup; trackBy: trackByIndex"
       [ngStyle]="{backgroundColor: color, color:getContrastYIQ(color)}" [title]="color"
       (mousedown)="onColorSelect($event, color)"
       [ngClass]="{'NgxEditor__Color--Active': activeColors.includes(color)}"></button>
diff --git a/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.ts b/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.ts
index 960933d4..c62513bc 100644
--- a/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.ts
+++ b/projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.ts
@@ -91,6 +91,10 @@ export class ColorPickerComponent implements OnInit, OnDestroy {
     this.hidePopup();
   }
 
+  trackByIndex(index: number): number {
+    return index
+  }
+
   onColorSelect(e: MouseEvent, color: string): void {
     e.preventDefault();
 
diff --git a/projects/ngx-editor/src/lib/modules/menu/dropdown/dropdown.component.html b/projects/ngx-editor/src/lib/modules/menu/dropdown/dropdown.component.html
index 14f24c83..ed98140e 100644
--- a/projects/ngx-editor/src/lib/modules/menu/dropdown/dropdown.component.html
+++ b/projects/ngx-editor/src/lib/modules/menu/dropdown/dropdown.component.html
@@ -3,7 +3,7 @@
 </div>
 
 <div class="NgxEditor__Dropdown--DropdownMenu" *ngIf="isDropdownOpen">
-  <div class="NgxEditor__Dropdown--Item" *ngFor="let item of items" (mousedown)="onClick($event, item)"
+  <div class="NgxEditor__Dropdown--Item" *ngFor="let item of items; trackBy: trackByIndex" (mousedown)="onClick($event, item)"
     [ngClass]="{'NgxEditor__Dropdown--Active': item === activeItem, 'NgxEditor--Disabled':disabledItems.includes(item)}">
     {{getName(item)}}
   </div>
diff --git a/projects/ngx-editor/src/lib/modules/menu/dropdown/dropdown.component.ts b/projects/ngx-editor/src/lib/modules/menu/dropdown/dropdown.component.ts
index 0dd17794..af97e80f 100644
--- a/projects/ngx-editor/src/lib/modules/menu/dropdown/dropdown.component.ts
+++ b/projects/ngx-editor/src/lib/modules/menu/dropdown/dropdown.component.ts
@@ -57,6 +57,10 @@ export class DropdownComponent implements OnInit, OnDestroy {
     this.isDropdownOpen = !this.isDropdownOpen;
   }
 
+  trackByIndex(index: number): number {
+    return index
+  }
+
   onClick(e: MouseEvent, item: TBHeadingItems): void {
     e.preventDefault();
 
diff --git a/projects/ngx-editor/src/lib/modules/menu/menu.component.html b/projects/ngx-editor/src/lib/modules/menu/menu.component.html
index bf431bc9..3c1c387f 100644
--- a/projects/ngx-editor/src/lib/modules/menu/menu.component.html
+++ b/projects/ngx-editor/src/lib/modules/menu/menu.component.html
@@ -1,7 +1,8 @@
-<div class="NgxEditor__MenuBar" [ngClass]="{'NgxEditor--Disabled': disabled, 'NgxEditor__MenuBar--Reverse': dropdownPlacement === 'top'}">
+<div class="NgxEditor__MenuBar"
+  [ngClass]="{'NgxEditor--Disabled': disabled, 'NgxEditor__MenuBar--Reverse': dropdownPlacement === 'top'}">
 
-  <ng-container *ngFor="let toolbarItem of toolbar; let lastToolbarItem = last">
-    <ng-container *ngFor="let item of toolbarItem; let lastItem = last">
+  <ng-container *ngFor="let toolbarItem of toolbar; let lastToolbarItem = last; trackBy: trackByIndex">
+    <ng-container *ngFor="let item of toolbarItem; let lastItem = last; trackBy: trackByIndex">
 
       <!-- toggle icons -->
       <ngx-toggle-command [toolbarItem]="item" [class]="iconContainerClass" *ngIf="toggleCommands.includes(item)">
@@ -16,8 +17,8 @@
 
       <!-- dropdown -->
       <ng-container *ngIf="isDropDown(item)">
-        <ngx-dropdown *ngFor="let dropdownItem of getDropdownItems(item) | keyvalue" [class]="dropdownContainerClass"
-          [group]="dropdownItem.key" [items]="dropdownItem.value">
+        <ngx-dropdown *ngFor="let dropdownItem of getDropdownItems(item) | keyvalue; trackBy: trackByIndex"
+          [class]="dropdownContainerClass" [group]="dropdownItem.key" [items]="dropdownItem.value">
         </ngx-dropdown>
       </ng-container>
 
diff --git a/projects/ngx-editor/src/lib/modules/menu/menu.component.ts b/projects/ngx-editor/src/lib/modules/menu/menu.component.ts
index bae94f16..099164bc 100644
--- a/projects/ngx-editor/src/lib/modules/menu/menu.component.ts
+++ b/projects/ngx-editor/src/lib/modules/menu/menu.component.ts
@@ -91,6 +91,10 @@ export class MenuComponent implements OnInit {
     return colors;
   }
 
+  trackByIndex(index: number): number {
+    return index
+  }
+
   isDropDown(item: ToolbarItem): boolean {
     if ((item as ToolbarDropdown)?.heading) {
       return true;