(layout/common) Added trackBy functions to ngFor loops in common components

src/app/layout/common/language/language.component.html

@@ -9,7 +9,7 @@
 <mat-menu
     [xPosition]="'before'"
     #languages="matMenu">
-    <ng-container *ngFor="let lang of availableLangs">
+    <ng-container *ngFor="let lang of availableLangs; trackBy: trackByFn">
         <button
             mat-menu-item
             (click)="setActiveLang(lang.id)">

src/app/layout/common/language/language.component.ts

@@ -78,6 +78,17 @@ export class LanguageComponent implements OnInit, OnDestroy
         this._translocoService.setActiveLang(lang);
     }
 
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------

src/app/layout/common/messages/messages.component.html

@@ -46,7 +46,7 @@
         <!-- Content -->
         <div class="relative flex flex-col flex-auto sm:max-h-120 divide-y overflow-y-auto bg-card">
             <!-- Messages -->
-            <ng-container *ngFor="let message of messages">
+            <ng-container *ngFor="let message of messages; trackBy: trackByFn">
                 <div
                     class="flex group hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
                     [ngClass]="{'unread': !message.read}">

src/app/layout/common/messages/messages.component.ts

@@ -155,6 +155,17 @@ export class MessagesComponent implements OnInit, OnChanges, OnDestroy
         this._messagesService.delete(message.id).subscribe();
     }
 
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------

src/app/layout/common/notifications/notifications.component.html

@@ -46,7 +46,7 @@
         <!-- Content -->
         <div class="relative flex flex-col flex-auto sm:max-h-120 divide-y overflow-y-auto bg-card">
             <!-- Notifications -->
-            <ng-container *ngFor="let notification of notifications">
+            <ng-container *ngFor="let notification of notifications; trackBy: trackByFn">
                 <div
                     class="flex group hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
                     [ngClass]="{'unread': !notification.read}">

src/app/layout/common/notifications/notifications.component.ts

@@ -155,6 +155,17 @@ export class NotificationsComponent implements OnChanges, OnInit, OnDestroy
         this._notificationsService.delete(notification.id).subscribe();
     }
 
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------

src/app/layout/common/search/search.component.html

@@ -31,7 +31,7 @@
                 *ngIf="results && !results.length">
                 No results found!
             </mat-option>
-            <ng-container *ngFor="let result of results">
+            <ng-container *ngFor="let result of results; trackBy: trackByFn">
                 <mat-option
                     class="group relative h-14 px-6 py-0 sm:px-8 text-md"
                     [routerLink]="result.link">
@@ -73,7 +73,7 @@
                 *ngIf="results && !results.length">
                 No results found!
             </mat-option>
-            <ng-container *ngFor="let result of results">
+            <ng-container *ngFor="let result of results; trackBy: trackByFn">
                 <mat-option
                     class="group relative h-14 px-5 py-0 text-md"
                     [routerLink]="result.link">

src/app/layout/common/search/search.component.ts

@@ -200,4 +200,15 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
         // Close the search
         this.opened = false;
     }
+
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
 }

src/app/layout/common/shortcuts/shortcuts.component.html

@@ -94,7 +94,7 @@
                 <!-- Shortcuts -->
                 <div class="grid grid-cols-2 grid-flow-row">
                     <!-- Shortcut -->
-                    <ng-container *ngFor="let shortcut of shortcuts">
+                    <ng-container *ngFor="let shortcut of shortcuts; trackBy: trackByFn">
                         <div class="relative group flex flex-col overflow-hidden bg-card border-r border-b even:border-r-0 hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5">
                             <ng-container *ngIf="mode === 'modify'">
                                 <div

src/app/layout/common/shortcuts/shortcuts.component.ts

@@ -209,6 +209,17 @@ export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy
         this.mode = 'modify';
     }
 
+    /**
+     * Track by function for ngFor loops
+     *
+     * @param index
+     * @param item
+     */
+    trackByFn(index: number, item: any): any
+    {
+        return item.id || index;
+    }
+
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------