perf: use trackBy with ngFor loops

sibiraj-s · Jan 29, 2022 · c7df506 · c7df506
1 parent 9089c5a
commit c7df506
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;