From c1760e4111634f5887cab90fa053ff00c3c984be Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Thu, 18 Jan 2024 16:10:32 +0100
Subject: [PATCH] refactor(results-list): update ngFor, ngIf with control-flow
 syntax

---
 .../results-list-carousel.component.html      | 27 +++++++++----------
 .../results-list-grid.component.html          | 15 +++++------
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.html b/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.html
index ed894bd1..10a551dc 100644
--- a/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.html
+++ b/apps/datahub/src/app/common/results-list/results-list-carousel/results-list-carousel.component.html
@@ -1,19 +1,18 @@
 <div class="relative">
   <div class="flex gap-4 p-4">
-    <div
-      *ngFor="let record of searchFacade.results$ | async"
+    @for (record of searchFacade.results$ | async; track
+    record.uniqueIdentifier) { @if (favoritesOnly) {
+    <mel-datahub-results-card-favorite
       [style]="'height: 12em;'"
-    >
-      <mel-datahub-results-card-last-created
-        *ngIf="!favoritesOnly"
-        [record]="record"
-        (mdSelect)="onMetadataSelection($event)"
-      ></mel-datahub-results-card-last-created>
-      <mel-datahub-results-card-favorite
-        *ngIf="favoritesOnly"
-        [record]="record"
-        (mdSelect)="onMetadataSelection($event)"
-      ></mel-datahub-results-card-favorite>
-    </div>
+      [record]="record"
+      (mdSelect)="onMetadataSelection($event)"
+    ></mel-datahub-results-card-favorite>
+    } @else {
+    <mel-datahub-results-card-last-created
+      [style]="'height: 12em;'"
+      [record]="record"
+      (mdSelect)="onMetadataSelection($event)"
+    ></mel-datahub-results-card-last-created>
+    } }
   </div>
 </div>
diff --git a/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html b/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html
index a167a04e..9b4bb23f 100644
--- a/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html
+++ b/apps/datahub/src/app/common/results-list/results-list-grid/results-list-grid.component.html
@@ -1,13 +1,12 @@
 <div class="relative">
   <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4 p-4">
-    <div
-      *ngFor="let record of searchFacade.results$ | async"
+    @for (record of searchFacade.results$ | async; track
+    record.uniqueIdentifier) {
+    <mel-datahub-results-card-search
       [style]="'height: 24em;'"
-    >
-      <mel-datahub-results-card-search
-        [record]="record"
-        (mdSelect)="onMetadataSelection($event)"
-      ></mel-datahub-results-card-search>
-    </div>
+      [record]="record"
+      (mdSelect)="onMetadataSelection($event)"
+    ></mel-datahub-results-card-search>
+    }
   </div>
 </div>