Why does my Angular 9 sort routine work great when using Google Chrome (Ch131) browser, but...

Component code:

columnSort(colName: string): void {
if (this.sortedAsc) { // sorts in ascending order
this.sortedAsc = false;
this.members =
this.members.sort((m1, m2) => {
return m1[colName].toLowerCase() < m2[colName].toLowerCase() ? -1 :
(m1[colName].toLowerCase() > m2[colName].toLowerCase() ? 1 : 0);
});
} else { // sorts in descending order
this.sortedAsc = true;
this.members =
this.members.sort((m1, m2) => {
return m1[colName].toLowerCase() > m2[colName].toLowerCase() ? -1 :
(m1[colName].toLowerCase() < m2[colName].toLowerCase() ? 1 : 0);
});
}


}

HTML Template Code:

<th class="freezecol3 fixed-header" (click)="columnSort('last_Name')">Last Name &uarr;&darr;</th>
<th class="freezecol4 fixed-header" (click)="columnSort('first_Name')">First Name &uarr;&darr;</th>


HTML Template Code:

<th class="freezecol3 fixed-header" (click)="columnSort('last_Name')">Last Name &uarr;&darr;</th>
<th class="freezecol4 fixed-header" (click)="columnSort('first_Name')">First Name &uarr;&darr;</th>


F12 Developer Tools in Edge and Chrome show Request headers like:

sec-ch-ua: "Microsoft Edge";v="131", "Chromium";v="131", "Not_A Brand";v="24"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0


Edge browser gets "Wait" message when column is clicked for sorting:

Continue reading...