feat(dh): use ngrxLet to avoid multiple async pipes

geonetwork · May 16, 2024 · 55e7abf · 55e7abf
1 parent fa9ffc3
commit 55e7abf
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 deletions.
diff --git a/apps/datahub/src/app/app.module.ts b/apps/datahub/src/app/app.module.ts
@@ -91,6 +91,7 @@ import { RecordApisComponent } from './record/record-apis/record-apis.component'
 import { MatTabsModule } from '@angular/material/tabs'
 import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
 import { RecordUserFeedbacksComponent } from './record/record-user-feedbacks/record-user-feedbacks.component'
+import { LetDirective } from '@ngrx/component'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 
@@ -162,6 +163,7 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
     CarouselComponent,
     BlockListComponent,
     PreviousNextButtonsComponent,
+    LetDirective,
   ],
   providers: [
     importProvidersFrom(FeatureAuthModule),

diff --git a/apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.html b/apps/datahub/src/app/record/record-otherlinks/record-otherlinks.component.html
@@ -12,29 +12,28 @@
     (directionButtonClicked)="changeStepOrPage($event)"
   ></gn-ui-previous-next-buttons>
 </div>
-<ng-container *ngIf="(otherLinks$ | async).length >= 10; else carouselTemplate">
-  <gn-ui-block-list containerClass="gap-4 py-10">
+<ng-container *ngrxLet="otherLinks$ as otherLinks">
+  <gn-ui-block-list
+    containerClass="gap-4 py-10"
+    *ngIf="otherLinks.length >= 10; else carouselTemplate"
+  >
     <gn-ui-link-card
       #block
-      *ngFor="let otherLink of otherLinks$ | async"
+      *ngFor="let otherLink of otherLinks"
       [link]="otherLink"
       [compact]="true"
     ></gn-ui-link-card>
   </gn-ui-block-list>
+  <ng-template #carouselTemplate>
+    <gn-ui-carousel
+      containerClass="gap-4 pt-[26px] pb-[38px]"
+      (currentStepChange)="updateView()"
+    >
+      <gn-ui-link-card
+        *ngFor="let otherLink of otherLinks; let first = first; let last = last"
+        [link]="otherLink"
+        class="w-80"
+      ></gn-ui-link-card>
+    </gn-ui-carousel>
+  </ng-template>
 </ng-container>
-<ng-template #carouselTemplate>
-  <gn-ui-carousel
-    containerClass="gap-4 pt-[26px] pb-[38px]"
-    (currentStepChange)="updateView()"
-  >
-    <gn-ui-link-card
-      *ngFor="
-        let otherLink of otherLinks$ | async;
-        let first = first;
-        let last = last
-      "
-      [link]="otherLink"
-      class="w-80"
-    ></gn-ui-link-card>
-  </gn-ui-carousel>
-</ng-template>