From c36c5661ecf8dbf95ddd10c85b0e54b4af437bd2 Mon Sep 17 00:00:00 2001
From: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
Date: Mon, 12 Feb 2024 12:39:50 +0100
Subject: [PATCH] chore: angular 17 new syntax

* Shared
* Admin

Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
---
 angular.json                                  |  11 +-
 .../account-brief-view.component.html         | 140 ++--
 .../account-brief-view.component.ts           |  41 +-
 .../account-detail-view.component.html        |  16 +-
 .../account-detail-view.component.ts          |  18 +-
 .../account-list/account-list.component.html  |  32 +-
 .../account-list/account-list.component.ts    |  38 +-
 .../account-transfer.component.html           | 168 ++--
 .../account-transfer.component.ts             |  65 +-
 .../budgets-brief-view.component.ts           |  12 +-
 .../budget-detail-view.component.html         |  10 +-
 .../budget-detail-view.component.ts           |  16 +-
 ...elect-account-editor-widget.component.html |  50 +-
 .../select-account-editor-widget.component.ts |  30 +-
 .../order-brief-view.component.html           |  68 +-
 .../order-brief-view.component.ts             |  10 +-
 .../order-detail-view.component.html          | 165 ++--
 .../order-detail-view.component.ts            |  50 +-
 .../order-line/order-line.component.html      |  98 ++-
 .../order-line/order-line.component.ts        |  40 +-
 .../order-lines/order-lines.component.html    |  52 +-
 .../order-lines/order-lines.component.ts      |  28 +-
 .../order-email-form.component.html           |  41 +-
 .../order-email-form.component.ts             |  40 +-
 .../order-summary.component.html              |  82 +-
 .../order-summary/order-summary.component.ts  |  26 +-
 .../receipt-detail-view.component.html        | 186 +++--
 .../receipt-detail-view.component.ts          |  50 +-
 .../order-receipt-view.component.html         |  88 +-
 .../order-receipt-view.component.ts           |  95 ++-
 .../receipt-list/receipt-list.component.html  |  51 +-
 .../receipt-list/receipt-list.component.ts    |  38 +-
 .../receipt-summary.component.html            | 157 ++--
 .../receipt-summary.component.ts              |  46 +-
 .../formly/type/repeat-section.type.ts        |  81 +-
 .../select-account.component.html             |  50 +-
 .../select-account.component.ts               |  16 +-
 .../formly/wrapper/input-no-label.wrapper.ts  |  10 +-
 .../pipes/note-badge-color.pipe.ts            |   2 +-
 .../app/acquisition/routes/accounts-route.ts  |   2 +-
 .../routes/guards/abstract-can-add.guard.ts   |  16 +-
 .../routes/guards/can-add-account.guard.ts    |  14 +-
 .../routes/guards/can-add-order-line.guard.ts |  14 +-
 .../routes/guards/can-order-receipt.guard.ts  |  32 +-
 .../routes/guards/is-budget-active.guard.ts   |  17 +-
 .../acquisition/routes/order-lines-route.ts   |   2 +-
 .../acquisition/routes/receipt-lines-route.ts |   2 +-
 projects/admin/src/app/app.component.html     |  44 +-
 .../circ-policies-brief-view.component.ts     |  27 +-
 .../collection-brief-view.component.ts        |  33 +-
 .../documents-brief-view.component.html       |  58 +-
 .../ill-requests-brief-view.component.html    |  24 +-
 .../ill-requests-brief-view.component.ts      |  12 +-
 .../issues-brief-view.component.html          | 142 ++--
 .../item-types-brief-view.component.ts        |  15 +-
 .../items-brief-view.component.html           |  42 +-
 .../items-brief-view.component.ts             |  24 +-
 .../libraries-brief-view.component.ts         |  15 +-
 .../loans-brief-view.component.html           |  52 +-
 .../loans-brief-view.component.ts             |  19 +-
 ...n-transaction-event-default.component.html |  10 +-
 ...n-transaction-event-overdue.component.html |  27 +-
 ...ansaction-events-brief-view.component.html |  49 +-
 ...transaction-events-brief-view.component.ts |  14 +-
 .../patron-types-brief-view.component.ts      |  15 +-
 .../patrons-brief-view.component.html         |  45 +-
 .../patrons-brief-view.component.ts           |   8 +-
 .../statistics-cfg-brief-view-component.ts    |  15 +-
 .../templates-brief-view.component.ts         |  43 +-
 .../brief-view/vendor-brief-view.component.ts |  35 +-
 .../circulation-log-loan.component.html       |  60 +-
 ...irculation-log-notification.component.html |  37 +-
 .../circulation-log-notification.component.ts |  12 +-
 .../circulation-log.component.html            |  26 +-
 .../circulation-log.component.ts              |   8 +-
 .../circulation-logs-dialog.component.ts      |   8 +-
 .../circulation-logs.component.html           |  98 ++-
 .../circulation-logs.component.ts             |  14 +-
 .../circulation-stats.component.html          |  34 +-
 .../circulation-stats.component.ts            |   8 +-
 .../document-editor.component.ts              |  48 +-
 .../holding-editor.component.html             |  66 +-
 .../holding-editor.component.ts               |  16 +-
 .../exception-dates-edit.component.html       | 296 +++----
 .../exception-dates-edit.component.ts         |  13 +-
 .../exception-dates-list.component.html       |  97 +--
 .../exception-dates-list.component.ts         |   7 +-
 .../libraries/library.component.html          | 294 ++++---
 .../user-id-editor.component.ts               |  60 +-
 .../address-type/address-type.component.html  |  32 +-
 .../acquisition-account.component.html        |  45 -
 .../circ-policy-detail-view.component.html    | 285 ++++---
 .../circ-policy-detail-view.component.ts      |  14 +-
 .../collection-detail-view.component.html     | 118 ++-
 .../collection-detail-view.component.ts       |  11 +-
 .../collection-items.component.html           |  72 +-
 .../dialog-import.component.html              |  28 +-
 .../dialog-import/dialog-import.component.ts  |   8 +-
 .../document-description.component.html       | 769 ++++++++++--------
 .../other-edition.component.html              |  47 +-
 .../document-detail-view.component.html       | 410 +++++-----
 .../document-detail-view.component.ts         |  56 +-
 .../document-detail.component.html            |  50 +-
 .../entities-related.component.html           |  32 +-
 .../holding-detail.component.html             | 125 +--
 .../holding-organisation.component.html       |  14 +-
 .../holding-organisation.component.ts         |  20 +-
 .../holding-shared-view.component.html        |  57 +-
 .../default-holding-item.component.html       | 249 +++---
 .../default-holding-item.component.ts         |  45 +-
 .../holding-item-note.component.ts            |  12 +-
 ...ding-item-temporary-item-type.component.ts |  14 +-
 .../holding/holding.component.html            | 245 +++---
 .../holding/holding.component.ts              |  60 +-
 .../serial-holding-item.component.html        | 210 ++---
 .../holdings/holdings.component.html          |  91 ++-
 .../holdings/holdings.component.ts            |  48 +-
 .../item-request/item-request.component.html  | 121 +--
 .../item-request/item-request.component.ts    |  88 +-
 .../related-resource.component.html           |  22 +-
 .../entities-local-detail-view.component.html |  85 +-
 .../entities-local-detail-view.component.ts   |  32 +-
 .../local/entities-local-global.component.ts  |  26 +-
 ...al-organisation-detail-view.component.html |  54 +-
 .../local-person-detail-view.component.html   |  50 +-
 .../local-place-detail-view.component.html    |  15 +-
 .../local-topic-detail-view.component.html    |  35 +-
 .../local-work-detail-view.component.html     |  11 +-
 ...entities-remote-detail-view.component.html |  80 +-
 .../entities-remote-detail-view.component.ts  |  36 +-
 ...es-organisation-detail-view.component.html |  52 +-
 ...entities-person-detail-view.component.html |  59 +-
 .../remote-topic-detail-view.component.html   |  75 +-
 .../holding-detail-view.component.html        |  14 +-
 .../holding-detail-view.component.ts          |  16 +-
 .../received-issue.component.html             | 139 ++--
 .../received-issue.component.ts               |  46 +-
 .../serial-holding-detail-view.component.html | 172 ++--
 .../serial-holding-detail-view.component.ts   |  68 +-
 .../ill-request-detail-view.component.html    | 137 ++--
 .../ill-request-detail-view.component.ts      |  14 +-
 .../item-detail-view.component.html           | 429 +++++-----
 .../item-detail-view.component.ts             |  56 +-
 .../item-transaction.component.html           |  62 +-
 .../item-transaction.component.ts             |  52 +-
 .../item-transactions.component.html          |  57 +-
 .../item-transactions.component.ts            |  50 +-
 .../item-type-detail-view.component.html      |  52 +-
 .../item-type-detail-view.component.ts        |   4 +-
 .../day-opening-hours.component.ts            |  15 +-
 .../exception-date.component.html             |  52 +-
 .../library-detail-view.component.html        | 263 +++---
 .../library-detail-view.component.ts          |  20 +-
 .../location/location.component.html          |  48 +-
 .../location/location.component.ts            |  16 +-
 .../local-field/local-field.component.html    |  91 ++-
 .../local-field/local-field.component.ts      |  28 +-
 .../location-detail-view.component.html       | 146 ++--
 .../location-detail-view.component.ts         |   5 +-
 .../organisation-detail-view.component.html   |  38 +-
 .../organisation-detail-view.component.ts     |  10 +-
 .../patron-detail-view.component.html         | 158 ++--
 .../patron-detail-view.component.ts           |  20 +-
 .../patron-permission.component.html          |  29 +-
 .../patron-permissions.component.html         |  16 +-
 .../patron-permissions.component.ts           |  14 +-
 .../patron-types-detail-view.component.html   | 182 +++--
 .../patron-types-detail-view.component.ts     |  22 +-
 .../permission-detail-view.component.html     |  93 ++-
 .../permission-detail-view.component.scss     |   8 +-
 .../permission-detail-view.component.ts       |  10 +-
 .../record-masked/record-masked.component.ts  |  44 +-
 .../report-data/report-data.component.html    |  23 +-
 .../reports-list/reports-list.component.html  |  41 +-
 .../reports-list/reports-list.component.ts    |  16 +-
 .../statistics-cfg-detail-view.component.html |  46 +-
 .../statistics-cfg-detail-view.component.ts   |  20 +-
 .../template-detail-view.component.html       |  30 +-
 .../template-detail-view.component.ts         |  22 +-
 .../vendor-detail-view.component.html         |  77 +-
 .../vendor-detail-view.component.ts           |  14 +-
 .../record/editor/type/field-custom.type.ts   |  23 +-
 .../record/editor/type/repeat-section.type.ts |  26 +-
 .../wrappers/identifiedby-value.component.ts  |  22 +-
 .../wrappers/user-id/user-id.component.html   |  21 +-
 .../cipo-patron-type-item-type.component.html |  34 +-
 .../cipo-patron-type-item-type.component.ts   |  18 +-
 .../class/settings.ts                         |  10 +-
 .../add-entity-local-form.component.html      |  46 +-
 .../add-entity-local-form.component.ts        |   2 +-
 .../add-entity-local.component.ts             |  12 +-
 .../entity-typeahead.component.html           | 141 ++--
 .../entity-typeahead.component.ts             |   2 +-
 .../operation-logs.component.html             |  47 +-
 .../operation-logs.component.ts               |   2 +-
 ...cument-advanced-search-form.component.html |  32 +-
 ...document-advanced-search-form.component.ts |   2 +-
 .../document-advanced-search.component.ts     |  12 +-
 .../document-record-search.component.html     |  23 +-
 .../payments-data.component.html              |  34 +-
 .../pie/payment-data-pie.component.ts         |  14 +-
 .../table/payments-data-table.component.html  |  16 +-
 .../table/payments-data-table.component.ts    |   8 +-
 .../admin/src/app/routes/templates-route.ts   |   2 +-
 projects/admin/src/app/scss/styles.scss       |   8 +-
 .../preview-email.component.html              |  47 +-
 .../custom-shortcut-help.component.html       |  38 +-
 .../custom-shortcut-help.component.ts         |  22 +-
 .../src/app/app.module.ts                     |   6 +-
 .../collection-brief.component.html           |  30 +-
 .../document-brief.component.html             |  86 +-
 .../holdings/holding/holding.component.html   | 121 ++-
 .../holdings/holding/holding.component.ts     |   6 +-
 .../holdings/holdings.component.html          |  25 +-
 .../holdings/holdings.component.ts            |  20 +-
 .../holdings/items/items.component.html       |  27 +-
 .../holdings/items/items.component.ts         |  20 +-
 .../document-detail/item/item.component.html  |  57 +-
 .../document-detail/item/item.component.ts    |  10 +-
 .../pickup-location.component.html            |  42 +-
 .../pickup-location.component.ts              |  34 +-
 .../request/request.component.html            |  65 +-
 .../request/request.component.ts              |  40 +-
 .../document-record-search.component.html     |  10 +-
 .../src/app/error/error-page.component.ts     |  16 +-
 .../patron-profile-document.component.html    |  39 +-
 .../patron-profile-document.component.ts      |  12 +-
 .../patron-profile-fee.component.html         | 175 ++--
 .../patron-profile-fee.component.ts           |  20 +-
 .../patron-profile-fees.component.html        |  39 +-
 .../patron-profile-fees.component.ts          |  53 +-
 .../patron-profile-histories.component.html   |  32 +-
 .../patron-profile-histories.component.ts     |  55 +-
 .../patron-profile-history.component.html     |  38 +-
 .../patron-profile-history.component.ts       |  10 +-
 .../patron-profile-ill-request.component.html |  75 +-
 ...patron-profile-ill-requests.component.html |  39 +-
 .../patron-profile-ill-requests.component.ts  |  39 +-
 .../patron-profile-loan.component.html        |  64 +-
 .../patron-profile-loan.component.ts          |  48 +-
 .../patron-profile-loans.component.html       |  65 +-
 .../patron-profile-loans.component.ts         |  45 +-
 .../patron-profile-menu.component.html        |  20 +-
 .../patron-profile-menu.component.ts          |  14 +-
 .../patron-profile-message.component.ts       |  27 +-
 .../patron-profile-password.component.ts      |  50 +-
 ...ron-profile-personal-editor.component.html |  32 +-
 ...atron-profile-personal-editor.component.ts |  80 +-
 .../patron-profile-personal.component.html    |  89 +-
 .../patron-profile-personal.component.ts      |  10 +-
 .../patron-profile-request.component.html     | 136 ++--
 .../patron-profile-request.component.ts       |  42 +-
 .../patron-profile-requests.component.html    |  44 +-
 .../patron-profile-requests.component.ts      |  57 +-
 .../patron-profile.component.html             |  29 +-
 .../patron-profile.component.ts               |  84 +-
 .../patron-profile/patron-profile.service.ts  |  20 +-
 .../src/app/pipe/array-translate.pipe.ts      |   8 +-
 .../src/app/pipe/journal-volume.pipe.ts       |  10 +-
 .../public-search/src/app/scss/styles.scss    |   6 +
 .../app/search-bar/search-bar.component.ts    |  18 +-
 .../shared/src/lib/api/user-api.service.ts    |  15 +-
 projects/shared/src/lib/class/user.spec.ts    |   2 +-
 .../action-button/action-button.component.ts  |  18 +-
 .../core/brief-view/brief-view.component.html |  67 +-
 .../core/brief-view/brief-view.component.ts   |  20 +-
 .../entity-brief-view.component.scss          |   1 -
 .../entity-brief-view.component.ts            |  10 +-
 .../entity-brief-view.organisation.ts         |  31 +-
 .../entity-brief-view.person.ts               |  33 +-
 .../directive/link-permissions.directive.ts   |  24 +-
 .../lib/directive/permissions.directive.ts    |  16 +-
 .../shared/src/lib/paginator/paginator.ts     |  54 +-
 .../show-more-pager.component.html            |  27 +-
 .../shared/src/lib/pipe/entity-label.pipe.ts  |  12 +-
 .../src/lib/pipe/extract-source-field.pipe.ts |  14 +-
 .../src/lib/pipe/get-translated-label.pipe.ts |  12 +-
 .../pipe/item-holdings-call-number.pipe.ts    |  10 +-
 .../src/lib/pipe/provision-activity.pipe.ts   |   4 +-
 projects/shared/src/lib/pipe/safe-url.pipe.ts |   4 +-
 .../src/lib/service/app-settings.service.ts   |  30 +-
 .../src/lib/service/permissions.service.ts    |  16 +-
 .../lib/service/search-bar-config.service.ts  |  34 +-
 .../shared/src/lib/service/user.service.ts    |  22 +-
 .../availability/availability.component.html  |  60 +-
 .../view/brief/part-of/part-of.component.html |  40 +-
 .../view/brief/part-of/part-of.component.ts   |  22 +-
 .../contribution/contribution.component.html  |  58 +-
 .../src/lib/view/entity-link.component.ts     |  26 +-
 .../inherited-call-number.component.html      |  50 +-
 .../view/thumbnail/thumbnail.component.html   |  25 +-
 .../lib/view/thumbnail/thumbnail.component.ts |  10 +-
 292 files changed, 7878 insertions(+), 7071 deletions(-)
 delete mode 100644 projects/admin/src/app/record/detail-view/budget-detail-view/acquisition-account/acquisition-account.component.html

diff --git a/angular.json b/angular.json
index 6d36290ac..6f2aba0e7 100644
--- a/angular.json
+++ b/angular.json
@@ -157,7 +157,6 @@
             "main": "projects/public-holdings-items/src/main.ts",
             "polyfills": "projects/public-holdings-items/src/polyfills.ts",
             "tsConfig": "projects/public-holdings-items/tsconfig.app.json",
-            "aot": true,
             "assets": [
               {
                 "glob": "**/*.json",
@@ -171,6 +170,11 @@
               }
             ],
             "styles": [
+              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
+              "node_modules/primeng/resources/primeng.min.css",
+              "node_modules/primeicons/primeicons.css",
+              "node_modules/primeflex/primeflex.min.css",
+              "node_modules/ngx-spinner/animations/ball-zig-zag.css",
               "projects/public-search/src/app/scss/styles.scss",
               "projects/shared/src/scss/styles.scss"
             ],
@@ -188,7 +192,6 @@
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -391,7 +394,6 @@
             "main": "projects/search-bar/src/main.ts",
             "polyfills": "projects/search-bar/src/polyfills.ts",
             "tsConfig": "projects/search-bar/tsconfig.app.json",
-            "aot": true,
             "assets": [
               {
                 "glob": "**/*.json",
@@ -419,7 +421,6 @@
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -646,7 +647,6 @@
             "main": "projects/public-user-profile-edit/src/main.ts",
             "polyfills": "projects/public-user-profile-edit/src/polyfills.ts",
             "tsConfig": "projects/public-user-profile-edit/tsconfig.app.json",
-            "aot": true,
             "assets": [
               {
                 "glob": "**/*.json",
@@ -755,7 +755,6 @@
             "main": "projects/public-user-password-change/src/main.ts",
             "polyfills": "projects/public-user-password-change/src/polyfills.ts",
             "tsConfig": "projects/public-user-password-change/tsconfig.app.json",
-            "aot": true,
             "assets": [
               {
                 "glob": "**/*.json",
diff --git a/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.html b/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.html
index 2a31b2f21..40a4a6050 100644
--- a/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.html
+++ b/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,76 +15,78 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="row account" *ngIf="account && permissions else loading">
-  <!-- NAME ================================================================= -->
-  <div class="col-5 account-name depth-padding-{{ account.depth }}">
-    <a [routerLink]="[detailUrl]">{{ account.name }}</a>
-  </div>
-  <div class="col-1 account-number">
-    <ng-container *ngIf="account.number">[{{ account.number }}]</ng-container>
-  </div>
-  <!-- ACCOUNTING INFORMATIONS ============================================== -->
-  <div class="col-1 amount">
-    {{ account.allocated_amount | currency: organisation.default_currency }}
-  </div>
-  <ng-container *ngVar="account | accountAvailableAmount as available_amount">
+@defer (when account && permissions) {
+  <div class="row account">
+    <!-- NAME -->
+    <div class="col-5 account-name depth-padding-{{ account.depth }}">
+      <a [routerLink]="[detailUrl]">{{ account.name }}</a>
+    </div>
+    <div class="col-1 account-number">
+      @if (account.number) {
+        [{{ account.number }}]
+      }
+    </div>
+    <!-- ACCOUNTING INFORMATION'S -->
+    <div class="col-1 amount">
+      {{ account.allocated_amount | currency: organisation.default_currency }}
+    </div>
+    <ng-container *ngVar="account | accountAvailableAmount as available_amount">
+      <div class="col-1 amount" [class]="{
+        'text-success': available_amount > 0,
+        'text-muted': available_amount === 0,
+        'text-warning': available_amount < 0
+      }">
+        {{ available_amount | currency: organisation.default_currency }}
+      </div>
+    </ng-container>
     <div class="col-1 amount" [class]="{
-      'text-success': available_amount > 0,
-      'text-muted': available_amount === 0,
-      'text-warning': available_amount < 0
+      'text-danger': account.encumbrance_amount.self > 0,
+      'text-muted': account.encumbrance_amount.self <= 0
     }">
-      {{ available_amount | currency: organisation.default_currency }}
+      {{ account.encumbrance_amount.self | currency: organisation.default_currency }}
+    </div>
+    <div class="col-1 amount" [class]="{
+      'text-danger': account.expenditure_amount.self > 0,
+      'text-muted': account.expenditure_amount.self <= 0
+    }">
+      {{ account.expenditure_amount.self | currency: organisation.default_currency}}
+    </div>
+    <div class="col-1 amount" [class]="{
+      'text-muted': account.remaining_balance.self === 0,
+      'text-warning': account.remaining_balance.self < 0
+    }">
+      {{ account.remaining_balance.self | currency: organisation.default_currency }}
+    </div>
+    <!-- ACTION BUTTONS -->
+    <div class="col-1 pr-0 text-right">
+      @if (permissions.update.can) {
+        <button type="button" class="btn btn-outline-primary btn-sm"
+                [routerLink]="['/records', 'acq_accounts', 'edit', account.pid]">
+          <i class="fa fa-pencil"></i>
+        </button>
+      }
+      @if (permissions.delete.can) {
+        <button type="button" class="btn btn-outline-danger btn-sm ml-1" (click)="delete()">
+          <i class="fa fa-trash"></i>
+        </button>
+      } @else {
+        <button type="button" class="btn btn-sm btn-outline-danger disabled ml-1"
+                title="{{ 'Delete' | translate}}"
+                [popover]="tolTemplate" triggers="mouseenter:mouseleave">
+          <i class="fa fa-trash"></i>
+        </button>
+        <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
+      }
     </div>
-  </ng-container>
-  <div class="col-1 amount" [class]="{
-    'text-danger': account.encumbrance_amount.self > 0,
-    'text-muted': account.encumbrance_amount.self <= 0
-  }">
-    {{ account.encumbrance_amount.self | currency: organisation.default_currency }}
-  </div>
-  <div class="col-1 amount" [class]="{
-    'text-danger': account.expenditure_amount.self > 0,
-    'text-muted': account.expenditure_amount.self <= 0
-  }">
-    {{ account.expenditure_amount.self | currency: organisation.default_currency}}
-  </div>
-  <div class="col-1 amount" [class]="{
-    'text-muted': account.remaining_balance.self === 0,
-    'text-warning': account.remaining_balance.self < 0
-  }">
-    {{ account.remaining_balance.self | currency: organisation.default_currency }}
-  </div>
-  <!-- ACTION BUTTONS ======================================================= -->
-  <div class="col-1 pr-0 text-right">
-    <button *ngIf="permissions.update.can"
-            type="button" class="btn btn-outline-primary btn-sm"
-            [routerLink]="['/records', 'acq_accounts', 'edit', account.pid]">
-      <i class="fa fa-pencil"></i>
-    </button>
-    <button *ngIf="permissions.delete.can; else notDelete"
-            type="button" class="btn btn-outline-danger btn-sm ml-1"
-            (click)="delete()">
-      <i class="fa fa-trash"></i>
-    </button>
-    <ng-template #notDelete>
-      <button type="button" class="btn btn-sm btn-outline-danger disabled ml-1"
-              title="{{ 'Delete' | translate}}"
-              [popover]="tolTemplate" triggers="mouseenter:mouseleave">
-        <i class="fa fa-trash"></i>
-      </button>
-      <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
-    </ng-template>
   </div>
-</div>
-<admin-account-brief-view
-  *ngFor="let child_account of children"
-  [account]="child_account"
-  [loadChildren]="loadChildren"
-  (deleteAccount)="accountDeleted($event)"
->
-</admin-account-brief-view>
-
-
-<ng-template #loading>
+} @placeholder {
   <i class="fa fa-spinner"></i>
-</ng-template>
+}
+
+@for (childAccount of children; track childAccount) {
+  <admin-account-brief-view
+    [account]="childAccount"
+    [loadChildren]="loadChildren"
+    (deleteAccount)="accountDeleted($event)"
+  ></admin-account-brief-view>
+}
diff --git a/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.ts b/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.ts
index 5fcd063be..1483f293f 100644
--- a/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -50,7 +50,7 @@ export class AccountBriefViewComponent implements OnInit {
   // GETTER & SETTER ============================================================
   /** Get the current budget pid for the organisation */
   get organisation(): any {
-    return this._organisationService.organisation;
+    return this.organisationService.organisation;
   }
 
   /** Get the URL to access detail view for this account */
@@ -63,39 +63,39 @@ export class AccountBriefViewComponent implements OnInit {
    * @return the message to display into the tooltip box
    */
   get deleteInfoMessage(): string {
-    return this._recordPermissionService.generateDeleteMessage(this.permissions.delete.reasons);
+    return this.recordPermissionService.generateDeleteMessage(this.permissions.delete.reasons);
   }
 
   // CONSTRUCTOR & HOOKS ========================================================
   /**
    * Constructor
-   * @param _recordPermissionService - RecordPermissionService
-   * @param _organisationService - OrganisationService
-   * @param _accountApiService - AcqAccountApiService
-   * @param _toastrService - ToastrService
-   * @param _translateService - TranslateService
-   * @param _userService - UserService
+   * @param recordPermissionService - RecordPermissionService
+   * @param organisationService - OrganisationService
+   * @param accountApiService - AcqAccountApiService
+   * @param toastrService - ToastrService
+   * @param translateService - TranslateService
+   * @param userService - UserService
    */
   constructor(
-    private _recordPermissionService: RecordPermissionService,
-    private _organisationService: OrganisationService,
-    private _accountApiService: AcqAccountApiService,
-    private _toastrService: ToastrService,
-    private _translateService: TranslateService,
-    private _userService: UserService
+    private recordPermissionService: RecordPermissionService,
+    private organisationService: OrganisationService,
+    private accountApiService: AcqAccountApiService,
+    private toastrService: ToastrService,
+    private translateService: TranslateService,
+    private userService: UserService
   ) { }
 
   /** OnInit hook */
   ngOnInit(): void {
     if (this.account) {
       // load account permissions
-      this._recordPermissionService
+      this.recordPermissionService
         .getPermission('acq_accounts', this.account.pid)
         .subscribe((data: RecordPermissions) => this.permissions = data);
       // load children accounts
       if (this.loadChildren) {
-        const libraryPid = this._userService.user.currentLibrary;
-        this._accountApiService
+        const libraryPid = this.userService.user.currentLibrary;
+        this.accountApiService
           .getAccounts(libraryPid, this.account.pid)
           .subscribe(accounts => this.children = accounts);
       }
@@ -105,10 +105,10 @@ export class AccountBriefViewComponent implements OnInit {
   // COMPONENT FUNCTIONS ========================================================
   /** Delete the account */
   delete() {
-    this._accountApiService
+    this.accountApiService
       .delete(this.account.pid)
       .subscribe(() => {
-        this._toastrService.success(this._translateService.instant('Account deleted'));
+        this.toastrService.success(this.translateService.instant('Account deleted'));
         this.deleteAccount.emit(this.account);
       });
   }
@@ -117,5 +117,4 @@ export class AccountBriefViewComponent implements OnInit {
   accountDeleted(account: IAcqAccount): void {
     this.children = this.children.filter(item => item.pid !== account.pid);
   }
-
 }
diff --git a/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.html b/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.html
index 7980078e9..b6b34a9df 100644
--- a/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.html
+++ b/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.html
@@ -15,11 +15,13 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="organisation && esRecord$ | async as account">
+@if (organisation && esRecord$ | async; as account) {
   <!-- ROLLOVER INFO -->
-  <div *ngIf="!account.is_active" class="fiscal-year-closed" translate>Fiscal year closed</div>
+  @if (!account.is_active) {
+    <div class="fiscal-year-closed" translate>Fiscal year closed</div>
+  }
   <h1 class="mb-3">{{ account.name }}</h1>
-  <!-- Account general informations -->
+  <!-- Account general information's -->
   <div class="card my-2">
     <h6 class="card-header" translate>Details</h6>
     <div class="card-body">
@@ -30,19 +32,19 @@ <h6 class="card-header" translate>Details</h6>
         <dd class="col-9">{{ account.budget.pid | getRecord: 'budgets': 'field': 'name' | async }}</dd>
         <dt class="col-3 label-title" translate>Library</dt>
         <dd class="col-9">{{ account.library.pid | getRecord: 'libraries': 'field': 'name' | async }}</dd>
-        <ng-container *ngIf="account.parent">
+        @if (account.parent) {
           <dt class="col-3 label-title" translate>Parent account</dt>
           <dd class="col-9">
             <a [routerLink]="['/', 'records', 'acq_accounts', 'detail', account.parent.pid]">
               {{ account.parent.pid | getRecord: 'acq_accounts': 'field': 'name' | async }}
             </a>
           </dd>
-        </ng-container>
+        }
       </dl>
     </div>
   </div>
 
-  <!-- Account accounting informations -->
+  <!-- Account accounting information's -->
   <div class="card my-2 accounting-infos">
     <h6 class="card-header" translate>Accounting informations</h6>
     <div class="card-body">
@@ -115,4 +117,4 @@ <h6 class="card-header" translate>Accounting informations</h6>
       </table>
     </div>
   </div>
-</ng-container>
+}
diff --git a/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.ts b/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.ts
index 2cf3fd188..59dcd5f38 100644
--- a/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -17,13 +17,11 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { Record } from '@rero/ng-core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { OrganisationService } from '../../../../service/organisation.service';
 import { AcqAccountApiService } from '../../../api/acq-account-api.service';
 import { IAcqAccount } from '../../../classes/account';
-import { OrganisationService } from '../../../../service/organisation.service';
 
 @Component({
   selector: 'admin-acquisition-account-detail-view',
@@ -43,24 +41,24 @@ export class AccountDetailViewComponent implements OnInit, DetailRecord {
   // GETTER & SETTER ============================================================
   /** Get the current budget pid for the organisation */
   get organisation(): any {
-    return this._organisationService.organisation;
+    return this.organisationService.organisation;
   }
 
   // CONSTRUCTOR & HOOKS ========================================================
   /**
    * Constructor
-   * @param _acqAccountApiService - AcqAccountApiService
-   * @param _organisationService - OrganisationService
+   * @param acqAccountApiService - AcqAccountApiService
+   * @param organisationService - OrganisationService
    */
   constructor(
-    private _acqAccountApiService: AcqAccountApiService,
-    private _organisationService: OrganisationService
+    private acqAccountApiService: AcqAccountApiService,
+    private organisationService: OrganisationService
   ) { }
 
   /** OnInit hook */
   ngOnInit(): void {
     this.record$.subscribe((data: any) => {
-      this.esRecord$ = this._acqAccountApiService.getAccount(data.metadata.pid);
+      this.esRecord$ = this.acqAccountApiService.getAccount(data.metadata.pid);
     });
   }
 
diff --git a/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.html b/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.html
index 698393be9..7b79144a2 100644
--- a/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.html
+++ b/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2022 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021-2022 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,15 +15,15 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="organisation">
+@if (organisation) {
   <header class="d-flex align-items-baseline">
     <h1 translate>Acquisition accounts</h1>
     <div class="ml-auto">
       <!-- ADD BUTTON -->
       <a [routerLink]="['/', 'records', 'acq_accounts', 'new']"
-         [queryParams]="{ budget: organisation.current_budget_pid }"
-         [permissions]="permissions.ACAC_CREATE"
-         class="btn btn-sm btn-primary"
+          [queryParams]="{ budget: organisation.current_budget_pid }"
+          [permissions]="permissions.ACAC_CREATE"
+          class="btn btn-sm btn-primary"
       >
         <i class="fa fa-plus"></i> {{ 'Add' | translate }}
       </a>
@@ -36,8 +36,8 @@ <h1 translate>Acquisition accounts</h1>
       <!-- END EXPORT BUTTON -->
       <!-- TRANSFER BUTTON -->
       <a [routerLink]="['/', 'acquisition', 'accounts', 'transfer']"
-         [permissions]="permissions.ACAC_TRANSFER"
-         class="btn btn-sm btn-outline-primary"
+          [permissions]="permissions.ACAC_TRANSFER"
+          class="btn btn-sm btn-outline-primary"
       >
         <i class="fa fa-exchange"></i> {{ 'Transfer funds' | translate }} &hellip;
       </a>
@@ -54,15 +54,17 @@ <h1 translate>Acquisition accounts</h1>
       <div class="col-1 text-right" translate>Expenditure</div>
       <div class="col-1 text-right" translate>Balance</div>
     </div>
-    <div *ngIf="rootAccounts.length > 0; else noAccount">
-      <admin-account-brief-view
-        *ngFor="let account of rootAccounts"
+    @if (rootAccounts.length > 0) {
+      @for (account of rootAccounts; track account) {
+        <admin-account-brief-view
         [account]="account"
         [loadChildren]="true"
         (deleteAccount)="accountDeleted($event)"
-      >
-      </admin-account-brief-view>
-    </div>
-    <ng-template #noAccount>{{ 'No account available' | translate }}</ng-template>
+      ></admin-account-brief-view>
+      }
+    } @else {
+      {{ 'No account available' | translate }}
+    }
   </section>
-</ng-container>
+}
+
diff --git a/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.ts b/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.ts
index 69827abc1..404f262ba 100644
--- a/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.ts
+++ b/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  * Copyright (C) 2022 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -53,14 +53,14 @@ export class AccountListComponent implements OnInit {
   // GETTER & SETTER ============================================================
   /** Get the current organisation */
   get organisation(): any {
-    return this._organisationService.organisation;
+    return this.organisationService.organisation;
   }
 
   /** Get a message containing the reasons why record list cannot be exported */
   get exportInfoMessage(): string {
     return (this.rootAccounts.length === 0)
-      ? this._translateService.instant('Result list is empty.')
-      : this._translateService.instant('Too many items. Should be less than {{max}}.',
+      ? this.translateService.instant('Result list is empty.')
+      : this.translateService.instant('Too many items. Should be less than {{max}}.',
         { max: RecordService.MAX_REST_RESULTS_SIZE }
       );
   }
@@ -68,24 +68,24 @@ export class AccountListComponent implements OnInit {
   // CONSTRUCTOR & HOOKS ========================================================
   /**
    * Constructor
-   * @param _userService: UserService
-   * @param _acqAccountApiService: AcqAccountApiService
-   * @param _organisationService: OrganisationService
-   * @param _apiService: ApiService
-   * @param _translateService: TranslateService
+   * @param userService: UserService
+   * @param acqAccountApiService: AcqAccountApiService
+   * @param organisationService: OrganisationService
+   * @param apiService: ApiService
+   * @param translateService: TranslateService
    */
   constructor(
-    private _userService: UserService,
-    private _acqAccountApiService: AcqAccountApiService,
-    private _organisationService: OrganisationService,
-    private _apiService: ApiService,
-    private _translateService: TranslateService,
+    private userService: UserService,
+    private acqAccountApiService: AcqAccountApiService,
+    private organisationService: OrganisationService,
+    private apiService: ApiService,
+    private translateService: TranslateService,
   ) { }
 
   /** OnInit hook */
   ngOnInit(): void {
-    this._libraryPid = this._userService.user.currentLibrary;
-    this._acqAccountApiService.getAccounts(this._libraryPid, null).subscribe(
+    this._libraryPid = this.userService.user.currentLibrary;
+    this.acqAccountApiService.getAccounts(this._libraryPid, null).subscribe(
       accounts => {
         this.rootAccounts = accounts;
         this.exportOptions = this._exportFormats();
@@ -126,9 +126,7 @@ export class AccountListComponent implements OnInit {
       `library.pid:${this._libraryPid}`
     ];
     const query = defaultQueryParams.join(' AND ');
-    const baseUrl = format.endpoint
-      ? format.endpoint
-      : this._apiService.getExportEndpointByType('acq_accounts');
+    const baseUrl = format.endpoint || this.apiService.getExportEndpointByType('acq_accounts');
     const params = new HttpParams()
       .set('q', query)
       .set('format', format.format);
@@ -147,6 +145,6 @@ export class AccountListComponent implements OnInit {
     const totalResults = this.rootAccounts.length;
     return (format.hasOwnProperty('disableMaxRestResultsSize') && format.disableMaxRestResultsSize)
       ? totalResults > 0
-      : 0 < totalResults && totalResults < RecordService.MAX_REST_RESULTS_SIZE;
+      : totalResults > 0 && totalResults < RecordService.MAX_REST_RESULTS_SIZE;
   }
 }
diff --git a/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.html b/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.html
index 419e05d0e..c85c79d6d 100644
--- a/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.html
+++ b/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,83 +15,99 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="container" *ngIf="accountsToDisplay && organisation">
-  <h1 translate>Fund transfer</h1>
-  <form [formGroup]="form" (ngSubmit)="submit()">
-    <select class="form-control" *ngIf="budgets.length > 1" (change)="selectBudget($event)">
-      <option *ngFor="let budgetPid of budgets" [value]="budgetPid">
-        {{ budgetPid | getRecord: 'budgets': 'field': 'name' | async }}
-      </option>
-    </select>
-    <div class="card container mt-3">
-      <div class="card-header row p-1 mb-2 bg-dark text-light">
-        <div class="col-1 text-center" translate>Source</div>
-        <div class="col-6"></div>
-        <div class="col-2 text-right" translate>Amount</div>
-        <div class="col-2 text-right" translate>Available</div>
-        <div class="col-1 text-center" translate>Target</div>
-      </div>
-      <div class="card-text mb-3">
-        <ng-container *ngIf="accountsToDisplay.length > 0; else noAccount">
-          <div class="row account my-2" *ngFor="let account of accountsToDisplay">
-            <div class="col-1 text-center">
-              <input type="radio"
-                     name="source"
-                     value="{{ account.pid }}"
-                     (click)="selectAccount('source', account)"
-                     [disabled]="form.get('target').value && form.get('target').value.pid === account.pid"
-              />
-            </div>
-            <div class="col-6 account-name depth-padding-{{ account.depth }}">
-              <a [routerLink]="getDetailUrl(account)">{{ account.name }}</a>
-            </div>
-            <div class="col-2 amount">
-              {{ account.allocated_amount | currency: organisation.default_currency }}
-            </div>
-            <div class="col-2 amount" [class]="{
-              'text-success': account.remaining_balance.self > 0,
-              'text-muted': account.remaining_balance.self === 0,
-              'text-warning': account.remaining_balance.self < 0
-            }">
-              {{ account.remaining_balance.self | currency: organisation.default_currency }}
-            </div>
-            <div class="col-1 text-center">
-              <input type="radio" name="target"
-                     value="{{ account.pid }}"
-                     (click)="selectAccount('target', account)"
-                     [disabled]="form.get('source').value && form.get('source').value.pid === account.pid"
-              />
+@if (accountsToDisplay && organisation) {
+  <div class="container">
+    <h1 translate>Fund transfer</h1>
+    <form [formGroup]="form" (ngSubmit)="submit()">
+      @if (budgets.length > 1) {
+        <select class="form-control" (change)="selectBudget($event)">
+          @for (budgetPid of budgets; track budgetPid) {
+            <option [value]="budgetPid">
+              {{ budgetPid | getRecord: 'budgets': 'field': 'name' | async }}
+            </option>
+          }
+        </select>
+      }
+      <div class="card container mt-3">
+        <div class="card-header row p-1 mb-2 bg-dark text-light">
+          <div class="col-1 text-center" translate>Source</div>
+          <div class="col-6"></div>
+          <div class="col-2 text-right" translate>Amount</div>
+          <div class="col-2 text-right" translate>Available</div>
+          <div class="col-1 text-center" translate>Target</div>
+        </div>
+        <div class="card-text mb-3">
+          @if (accountsToDisplay.length > 0) {
+            @for (account of accountsToDisplay; track account) {
+              <div class="row account my-2">
+                <div class="col-1 text-center">
+                  <input type="radio"
+                          name="source"
+                          value="{{ account.pid }}"
+                          (click)="selectAccount('source', account)"
+                          [disabled]="form.get('target').value && form.get('target').value.pid === account.pid"
+                  />
+                </div>
+                <div class="col-6 account-name depth-padding-{{ account.depth }}">
+                  <a [routerLink]="getDetailUrl(account)">{{ account.name }}</a>
+                </div>
+                <div class="col-2 amount">
+                  {{ account.allocated_amount | currency: organisation.default_currency }}
+                </div>
+                <div class="col-2 amount" [class]="{
+                  'text-success': account.remaining_balance.self > 0,
+                  'text-muted': account.remaining_balance.self === 0,
+                  'text-warning': account.remaining_balance.self < 0
+                }">
+                  {{ account.remaining_balance.self | currency: organisation.default_currency }}
+                </div>
+                <div class="col-1 text-center">
+                  <input type="radio" name="target"
+                          value="{{ account.pid }}"
+                          (click)="selectAccount('target', account)"
+                          [disabled]="form.get('source').value && form.get('source').value.pid === account.pid"
+                  />
+                </div>
+              </div>
+            }
+          } @else {
+            {{ 'No account available' | translate }}
+          }
+        </div>
+        <div class="card-footer row form-group mb-0">
+          <label for="amount" class="col-1 col-form-label">Amount</label>
+          <div class="input-group col-6">
+            <div class="input-group-prepend">
+              <div class="input-group-text">{{ currencySymbol }}</div>
             </div>
+            <input type="number" class="form-control" id="amount" formControlName="amount"
+                   [class]="{'is-invalid': checkInput('amount')}"/>
+            @if (checkInput('amount')) {
+              <div class="ml-2 block pt-2">
+                @if (form.get('amount').hasError('required')) {
+                  <small class="text-danger" translate>
+                    This field is required.
+                  </small>
+                }
+                @if (form.get('amount').hasError('min')) {
+                  <small class="text-danger">
+                    {{ 'Minimum amount is' | translate }} {{ form.get('amount').errors.min.min }}.
+                  </small>
+                }
+                @if (form.get('amount').hasError('max')) {
+                  <small class="text-danger">
+                    {{ 'Maximum amount is' | translate }} {{ form.get('amount').errors.max.max }}.
+                  </small>
+                }
+              </div>
+            }
           </div>
-        </ng-container>
-        <ng-template #noAccount>{{ 'No account available' | translate }}</ng-template>
-      </div>
-      <div class="card-footer row form-group mb-0">
-        <label for="amount" class="col-1 col-form-label">Amount</label>
-        <div class="input-group col-6">
-          <div class="input-group-prepend">
-            <div class="input-group-text">{{ currencySymbol }}</div>
-          </div>
-          <input type="number" class="form-control" id="amount" formControlName="amount"
-                 [class]="{'is-invalid': checkInput('amount')}"/>
-          <div *ngIf="checkInput('amount')" class="ml-2 block pt-2">
-            <small class="text-danger" *ngIf="form.get('amount').hasError('required')" translate>
-              This field is required.
-            </small>
-            <small class="text-danger" *ngIf="form.get('amount').hasError('min')">
-              {{ 'Minimum amount is' | translate }} {{ form.get('amount').errors.min.min }}.
-            </small>
-            <small class="text-danger" *ngIf="form.get('amount').hasError('max')">
-              {{ 'Maximum amount is' | translate }} {{ form.get('amount').errors.max.max }}.
-            </small>
+          <div class="col text-right">
+            <button type="reset" class="btn btn-outline-danger mr-2">Cancel</button>
+            <button type="submit" class="btn btn-primary" [disabled]="form.invalid">Transfer</button>
           </div>
         </div>
-        <div class="col text-right">
-          <button type="reset" class="btn btn-outline-danger mr-2">Cancel</button>
-          <button type="submit" class="btn btn-primary" [disabled]="form.invalid">Transfer</button>
-        </div>
       </div>
-    </div>
-  </form>
-</div>
-
+    </form>
+  </div>
+}
diff --git a/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.ts b/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.ts
index 635d002f6..8b800f5ab 100644
--- a/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.ts
+++ b/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -20,12 +20,12 @@ import { getCurrencySymbol } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
+import { OrganisationService } from '@app/admin/service/organisation.service';
 import { TranslateService } from '@ngx-translate/core';
 import { UserService } from '@rero/shared';
 import { ToastrService } from 'ngx-toastr';
-import { OrganisationService } from '@app/admin/service/organisation.service';
-import { IAcqAccount } from '../../../classes/account';
 import { AcqAccountApiService } from '../../../api/acq-account-api.service';
+import { IAcqAccount } from '../../../classes/account';
 import { orderAccountsAsTree } from '../../../utils/account';
 
 @Component({
@@ -44,14 +44,14 @@ export class AccountTransferComponent implements OnInit {
   form: UntypedFormGroup;
 
   /** the accounts available for transfer */
-  private _accountsTree: IAcqAccount[] = [];
+  private accountsTree: IAcqAccount[] = [];
   /** store the selected budgets */
-  private _selectedBudgetPid: string = undefined;
+  private selectedBudgetPid: string = undefined;
 
   // GETTER & SETTER ============================================================
   /** Get the current organisation */
   get organisation(): any {
-    return this._organisationService.organisation;
+    return this.organisationService.organisation;
   }
 
   /** Get the currency symbol for the organisation */
@@ -62,24 +62,24 @@ export class AccountTransferComponent implements OnInit {
   // CONSTRUCTOR & HOOKS ========================================================
   /**
    * Constructor
-   * @param _acqAccountApiService - AcqAccountApiService
-   * @param _organisationService - OrganisationService
-   * @param _formBuilder - FormBuilder,
-   * @param _toastrService - ToastrService,
-   * @param _translateService - TranslateService
-   * @param _router - Router
-   * @param _userService - UserService
+   * @param acqAccountApiService - AcqAccountApiService
+   * @param organisationService - OrganisationService
+   * @param formBuilder - FormBuilder,
+   * @param toastrService - ToastrService,
+   * @param translateService - TranslateService
+   * @param router - Router
+   * @param userService - UserService
    */
   constructor(
-    private _acqAccountApiService: AcqAccountApiService,
-    private _organisationService: OrganisationService,
-    private _formBuilder: UntypedFormBuilder,
-    private _toastrService: ToastrService,
-    private _translateService: TranslateService,
-    private _router: Router,
-    private _userService: UserService
+    private acqAccountApiService: AcqAccountApiService,
+    private organisationService: OrganisationService,
+    private formBuilder: UntypedFormBuilder,
+    private toastrService: ToastrService,
+    private translateService: TranslateService,
+    private router: Router,
+    private userService: UserService
   ) {
-    this.form = this._formBuilder.group({
+    this.form = this.formBuilder.group({
       source: [undefined, Validators.required],
       target: [undefined, Validators.required],
       amount: [0, Validators.min(0.01)]
@@ -106,7 +106,7 @@ export class AccountTransferComponent implements OnInit {
 
   /** Handle event when a budget is selected */
   selectBudget(event: any): void {
-    this._selectedBudgetPid = event.target.value;
+    this.selectedBudgetPid = event.target.value;
     this._filterAccountToDisplay();
   }
 
@@ -121,14 +121,14 @@ export class AccountTransferComponent implements OnInit {
 
   /** Submit the form */
   submit(): void {
-    this._acqAccountApiService
+    this.acqAccountApiService
       .transferFunds(this.form.value.source.pid, this.form.value.target.pid, this.form.value.amount)
       .subscribe(
         () => {
-          this._toastrService.success(this._translateService.instant('Fund transfer successful!'));
-          this._router.navigate(['/', 'acquisition', 'accounts']);
+          this.toastrService.success(this.translateService.instant('Fund transfer successful!'));
+          this.router.navigate(['/', 'acquisition', 'accounts']);
         },
-        (err) => { this._toastrService.error(this._translateService.instant(err.error.message)); }
+        (err) => { this.toastrService.error(this.translateService.instant(err.error.message)); }
       );
   }
 
@@ -148,20 +148,19 @@ export class AccountTransferComponent implements OnInit {
   // PRIVATE FUNCTIONS ========================================================
   /** Load accounts and budgets. Order accounts as a hierarchical tree */
   private _loadData(): void {
-    const libraryPid = this._userService.user.currentLibrary;
-    this._acqAccountApiService
+    const libraryPid = this.userService.user.currentLibrary;
+    this.acqAccountApiService
       .getAccounts(libraryPid, undefined, {sort: 'depth'})
       .subscribe((accounts: IAcqAccount[]) => {
-        this._accountsTree = orderAccountsAsTree(accounts);
-        this.budgets = Array.from(new Set(this._accountsTree.map((account: IAcqAccount) => account.budget.pid)));
-        this._selectedBudgetPid = this.budgets.find(Boolean);  // get the first element
+        this.accountsTree = orderAccountsAsTree(accounts);
+        this.budgets = Array.from(new Set(this.accountsTree.map((account: IAcqAccount) => account.budget.pid)));
+        this.selectedBudgetPid = this.budgets.find(Boolean);  // get the first element
         this._filterAccountToDisplay();
       });
   }
 
   /** Allow to filter loaded accounts by the selected budget */
   private _filterAccountToDisplay(): void {
-    this.accountsToDisplay = this._accountsTree.filter((acc: IAcqAccount) => acc.budget.pid === this._selectedBudgetPid);
+    this.accountsToDisplay = this.accountsTree.filter((acc: IAcqAccount) => acc.budget.pid === this.selectedBudgetPid);
   }
-
 }
diff --git a/projects/admin/src/app/acquisition/components/budget/budget-brief-view/budgets-brief-view.component.ts b/projects/admin/src/app/acquisition/components/budget/budget-brief-view/budgets-brief-view.component.ts
index 08ceb9ada..4126e8e3e 100644
--- a/projects/admin/src/app/acquisition/components/budget/budget-brief-view/budgets-brief-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/budget/budget-brief-view/budgets-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -45,17 +45,17 @@ export class BudgetsBriefViewComponent implements ResultItem {
 
   /**
    * Constructor
-   * @param _translateService - TranslateService
+   * @param translateService - TranslateService
    */
-  public constructor(private _translateService: TranslateService) {}
+  public constructor(private translateService: TranslateService) {}
 
   /**
-   * Status of the bugdet on bullet title
+   * Status of the budget on bullet title
    * @returns string - status
    */
   get title() {
     return this.record.metadata.is_active
-      ? this._translateService.instant('Active')
-      : this._translateService.instant('Inactive');
+      ? this.translateService.instant('Active')
+      : this.translateService.instant('Inactive');
   }
 }
diff --git a/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.html b/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.html
index 74b02f8dd..4d40162c9 100644
--- a/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.html
+++ b/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,9 +15,11 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record$ | async as record">
+@if (record$ | async; as record) {
   <!-- ROLLOVER INFO -->
-  <div *ngIf="!record.metadata.is_active" class="fiscal-year-closed" translate>Fiscal year closed</div>
+  @if (!record.metadata.is_active) {
+    <div class="fiscal-year-closed" translate>Fiscal year closed</div>
+  }
   <header>
     <h1>{{ record.metadata.name }}</h1>
   </header>
@@ -27,4 +29,4 @@ <h1>{{ record.metadata.name }}</h1>
       <dd class="col-9">{{ totalAmount | currency:currencyCode:'symbol' }}</dd>
     </dl>
   </section>
-</ng-container>
+}
diff --git a/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.ts b/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.ts
index 2b2b1708e..0f4f11b30 100644
--- a/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,8 +16,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { OrganisationService } from '@app/admin/service/organisation.service';
+import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { Observable, Subscription } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { AcqBudgetApiService } from '../../../api/acq-budget-api.service';
@@ -42,25 +42,25 @@ export class BudgetDetailViewComponent implements DetailRecord, OnInit, OnDestro
   // GETTER & SETTER ==========================================================
   /** Get the currency code used for the current loaded organisation */
   get currencyCode(): string {
-    return this._organisationService.organisation.default_currency;
+    return this.organisationService.organisation.default_currency;
   }
 
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _budgetApiService - AcqBudgetApiService
-   * @param _organisationService - OrganisationService
+   * @param budgetApiService - AcqBudgetApiService
+   * @param organisationService - OrganisationService
    */
   constructor(
-    private _budgetApiService: AcqBudgetApiService,
-    private _organisationService: OrganisationService
+    private budgetApiService: AcqBudgetApiService,
+    private organisationService: OrganisationService
   ) {}
 
   /** OnInit hook */
   ngOnInit() {
     this._subscriptions.add(
       this.record$
-        .pipe(switchMap((record: any) => this._budgetApiService.getBudgetTotalAmount(record.metadata.pid)))
+        .pipe(switchMap((record: any) => this.budgetApiService.getBudgetTotalAmount(record.metadata.pid)))
         .subscribe(total => this.totalAmount = total));
   }
 
diff --git a/projects/admin/src/app/acquisition/components/editor/widget/select-account-editor-widget/select-account-editor-widget.component.html b/projects/admin/src/app/acquisition/components/editor/widget/select-account-editor-widget/select-account-editor-widget.component.html
index be8247e9c..c2a0a763b 100644
--- a/projects/admin/src/app/acquisition/components/editor/widget/select-account-editor-widget/select-account-editor-widget.component.html
+++ b/projects/admin/src/app/acquisition/components/editor/widget/select-account-editor-widget/select-account-editor-widget.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -27,31 +27,33 @@
       <span class="caret ml-auto"></span>
     </button>
     <div id="dropdown-basic" *dropdownMenu class="dropdown-menu w-100" role="menu" aria-labelledby="button-basic">
-      <ng-container *ngIf="accountList.length; else noResult">
-        <a *ngFor="let account of accountList"
-           href="#"
-           class="dropdown-item account d-flex"
-           (click)="$event.preventDefault(); selectAccount(account); dropdown.hide()"
-        >
-          <div class="pr-5">
-            {{ account.depth > 0 ? '&nbsp;&nbsp;&nbsp;&nbsp;'.repeat(account.depth) + ' ' : '' }}
-            {{ account.name }}
-          </div>
-          <div class="ml-auto pl-5 d-flex">
-            <div class="number" *ngIf="account.number">{{ account.number }}</div>
-            <div class="amount" [class]="{
-                'text-success': account.remaining_balance.self > 0,
-                'text-muted': account.remaining_balance.self === 0,
-                'text-warning': account.remaining_balance.self < 0
-            }">
-              {{ account.remaining_balance.self | currency: organisation.default_currency }}
+      @if (accountList.length) {
+        @for (account of accountList; track account) {
+          <a  href="#"
+              class="dropdown-item account d-flex"
+              (click)="$event.preventDefault(); selectAccount(account); dropdown.hide()"
+          >
+            <div class="pr-5">
+              {{ account.depth > 0 ? '&nbsp;&nbsp;&nbsp;&nbsp;'.repeat(account.depth) + ' ' : '' }}
+              {{ account.name }}
             </div>
-          </div>
-        </a>
-      </ng-container>
-      <ng-template #noResult>
+            <div class="ml-auto pl-5 d-flex">
+              @if (account.number) {
+                <div class="number">{{ account.number }}</div>
+              }
+              <div class="amount" [class]="{
+                  'text-success': account.remaining_balance.self > 0,
+                  'text-muted': account.remaining_balance.self === 0,
+                  'text-warning': account.remaining_balance.self < 0
+              }">
+                {{ account.remaining_balance.self | currency: organisation.default_currency }}
+              </div>
+            </div>
+          </a>
+        }
+      } @else {
         <p class="m-0 px-4 py-2 text-muted" translate>No result</p>
-      </ng-template>
+      }
     </div>
   </div>
   <div class="invalid-feedback" [ngClass]="{'d-block': formControl.invalid}" translate>
diff --git a/projects/admin/src/app/acquisition/components/editor/widget/select-account-editor-widget/select-account-editor-widget.component.ts b/projects/admin/src/app/acquisition/components/editor/widget/select-account-editor-widget/select-account-editor-widget.component.ts
index cd1566450..79a8b4f2d 100644
--- a/projects/admin/src/app/acquisition/components/editor/widget/select-account-editor-widget/select-account-editor-widget.component.ts
+++ b/projects/admin/src/app/acquisition/components/editor/widget/select-account-editor-widget/select-account-editor-widget.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -17,11 +17,11 @@
  */
 import { getCurrencySymbol } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
+import { IAcqAccount } from '@app/admin/acquisition/classes/account';
+import { OrganisationService } from '@app/admin/service/organisation.service';
 import { FieldType } from '@ngx-formly/core';
 import { ApiService } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
-import { IAcqAccount } from '@app/admin/acquisition/classes/account';
-import { OrganisationService } from '@app/admin/service/organisation.service';
 import { AcqAccountApiService } from '../../../../api/acq-account-api.service';
 import { orderAccountsAsTree } from '../../../../utils/account';
 
@@ -41,7 +41,7 @@ export class SelectAccountEditorWidgetComponent extends FieldType implements OnI
   // GETTER & SETTER ============================================================
   /** Get the current organisation */
   get organisation(): any {
-    return this._organisationService.organisation;
+    return this.organisationService.organisation;
   }
 
   /** Get the currency symbol for the organisation */
@@ -52,24 +52,24 @@ export class SelectAccountEditorWidgetComponent extends FieldType implements OnI
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _acqAccountApiService - AcqAccountApiService
-   * @param _organisationService - OrganisationService
-   * @param _apiService - ApiService
-   * @param _userService - UserService
+   * @param acqAccountApiService - AcqAccountApiService
+   * @param organisationService - OrganisationService
+   * @param apiService - ApiService
+   * @param userService - UserService
    */
   constructor(
-    private _acqAccountApiService: AcqAccountApiService,
-    private _organisationService: OrganisationService,
-    private _apiService: ApiService,
-    private _userService: UserService
+    private acqAccountApiService: AcqAccountApiService,
+    private organisationService: OrganisationService,
+    private apiService: ApiService,
+    private userService: UserService
   ) {
     super();
   }
 
   /** OnInit hook */
   ngOnInit(): void {
-    const libraryPid = this._userService.user.currentLibrary;
-    this._acqAccountApiService.getAccounts(libraryPid).subscribe((accounts: IAcqAccount[]) => {
+    const libraryPid = this.userService.user.currentLibrary;
+    this.acqAccountApiService.getAccounts(libraryPid).subscribe((accounts: IAcqAccount[]) => {
       accounts = orderAccountsAsTree(accounts);
       this.accountList = accounts;
 
@@ -89,7 +89,7 @@ export class SelectAccountEditorWidgetComponent extends FieldType implements OnI
    * @param account - The selected account.
    */
   selectAccount(account: IAcqAccount): void {
-    const accountRef = this._apiService.getRefEndpoint('acq_accounts', account.pid);
+    const accountRef = this.apiService.getRefEndpoint('acq_accounts', account.pid);
     this.selectedAccount = account;
     this.formControl.patchValue(accountRef);
   }
diff --git a/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.html b/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.html
index 45baa1b54..630369169 100644
--- a/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.html
+++ b/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.html
@@ -1,6 +1,6 @@
  <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,32 +15,46 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<article class="row order-brief-view" *ngIf="order">
-  <div class="col-9 pl-0">
-    <h5 class="m-0"><a [routerLink]="[detailUrl.link]">{{ order.reference }}</a></h5>
-    <ng-container *ngVar="order.notes | notesFilter: [noteType.STAFF_NOTE] as notes">
-      <div class="description" *ngIf="notes.length > 0" [innerHTML]="notes[0].content | nl2br"></div>
-    </ng-container>
-    <div class="metadata">
-      {{ order.status | translate }}
-      <ng-container [ngSwitch]="order.status">
-        <ng-container *ngSwitchCase="orderStatus.ORDERED"> - {{ orderDate | dateTranslate: 'shortDate' }}</ng-container>
-        <ng-container *ngSwitchCase="orderStatus.RECEIVED"> - {{ receptionDate | dateTranslate: 'shortDate' }}</ng-container>
-        <ng-container *ngSwitchCase="orderStatus.PARTIALLY_RECEIVED"> - {{ receptionDate | dateTranslate: 'shortDate' }}</ng-container>
+@if (order) {
+  <article class="row order-brief-view">
+    <div class="col-9 pl-0">
+      <h5 class="m-0"><a [routerLink]="[detailUrl.link]">{{ order.reference }}</a></h5>
+      <ng-container *ngVar="order.notes | notesFilter: [noteType.STAFF_NOTE] as notes">
+        @if (notes.length > 0) {
+          <div class="description" [innerHTML]="notes[0].content | nl2br"></div>
+        }
       </ng-container>
-      <ng-container *ngVar="order.vendor.pid | getRecord: 'vendors': 'field': 'name' | async as vendor">
-        - {{ vendor | truncateText : 10 : '...'}}
-      </ng-container>
-    </div>
-  </div>
-  <div class="col-3 ordinal-infos">
-    <div class="accounting-infos" *ngIf="displayProvisionalAccountingData">
-      <label class="total-amount">{{ order.account_statement.provisional.total_amount | currency : order.currency }}</label>
-      <span class="counter ordered-counter border-left">{{ order.account_statement.provisional.quantity }}</span>
+      <div class="metadata">
+        {{ order.status | translate }}
+        @switch (order.status) {
+          @case (orderStatus.ORDERED) {
+            - {{ orderDate | dateTranslate: 'shortDate' }}
+          }
+          @case (orderStatus.RECEIVED) {
+            - {{ receptionDate | dateTranslate: 'shortDate' }}
+          }
+          @case (orderStatus.PARTIALLY_RECEIVED) {
+            - {{ receptionDate | dateTranslate: 'shortDate' }}
+          }
+        }
+        <ng-container *ngVar="order.vendor.pid | getRecord: 'vendors': 'field': 'name' | async as vendor">
+          - {{ vendor | truncateText : 10 : '…'}}
+        </ng-container>
+      </div>
     </div>
-    <div class="accounting-infos" *ngIf="displayExpenditureAccountingData">
-      <label class="total-amount">{{ order.account_statement.expenditure.total_amount | currency : order.currency }}</label>
-      <span class="counter received-counter border-left">{{ order.account_statement.expenditure.quantity }}</span>
+    <div class="col-3 ordinal-infos">
+      @if (displayProvisionalAccountingData) {
+        <div class="accounting-infos">
+          <label class="total-amount">{{ order.account_statement.provisional.total_amount | currency : order.currency }}</label>
+          <span class="counter ordered-counter border-left">{{ order.account_statement.provisional.quantity }}</span>
+        </div>
+      }
+      @if (displayExpenditureAccountingData) {
+        <div class="accounting-infos">
+          <label class="total-amount">{{ order.account_statement.expenditure.total_amount | currency : order.currency }}</label>
+          <span class="counter received-counter border-left">{{ order.account_statement.expenditure.quantity }}</span>
+        </div>
+      }
     </div>
-  </div>
-</article>
+  </article>
+}
diff --git a/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.ts b/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.ts
index 222d9fbb9..88372b165 100644
--- a/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -82,15 +82,13 @@ export class OrderBriefViewComponent implements ResultItem, OnInit {
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * constructor
-   * @param _acqOrderApiService - AcqOrderApiService
+   * @param acqOrderApiService - AcqOrderApiService
    */
-  constructor(
-    private _acqOrderApiService: AcqOrderApiService
-  ) {}
+  constructor(private acqOrderApiService: AcqOrderApiService) {}
 
   /** OnInit hook */
   ngOnInit(): void {
-    const metadata = {...this._acqOrderApiService.orderDefaultData, ...this.record.metadata};
+    const metadata = {...this.acqOrderApiService.orderDefaultData, ...this.record.metadata};
     // FILTERS NOTES ::
     //   the notes fields from AcqOrder ES index contains all notes from all related resources.
     //   We only need to keep the notes from itself.
diff --git a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.html b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.html
index 6801ae692..1704d414c 100644
--- a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.html
+++ b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -16,78 +16,101 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <!-- Place order button -->
-<section *ngIf="order?.is_current_budget && order?.pid" class="float-right mt-2 mr-n4 btn-additional-action">
-  <a *ngIf="recordPermissions && recordPermissions.update.can && order.status === acqOrderStatus.PENDING"
-     (click)="placeOrderDialog()"
-     class="btn btn-sm btn-primary"
-     [ngClass]="{'disabled': !canPlaceOrder}"
-  >
-    <i class="fa fa-shopping-cart"></i>
-    {{ 'Place order' | translate }}
-  </a>
-</section>
+@if (order?.is_current_budget && order?.pid) {
+  <section class="float-right mt-2 mr-n4 btn-additional-action">
+    @if (recordPermissions?.update?.can && order.status === acqOrderStatus.PENDING) {
+      <a (click)="placeOrderDialog()"
+         class="btn btn-sm btn-primary"
+         [ngClass]="{'disabled': !canPlaceOrder}"
+      >
+        <i class="fa fa-shopping-cart"></i>
+        {{ 'Place order' | translate }}
+      </a>
+    }
+  </section>
+}
 
-<div *ngIf="order && order.pid" class="container-fluid mt-2" [class.rollovered]="!order.is_current_budget">
-  <!-- ROLLOVER INFO -->
-  <div *ngIf="!order.is_current_budget" class="fiscal-year-closed" translate>Fiscal year closed</div>
+@if (order && order.pid) {
+  <div class="container-fluid mt-2" [class.rollovered]="!order.is_current_budget">
+    <!-- ROLLOVER INFO -->
+    @if (!order.is_current_budget) {
+      <div class="fiscal-year-closed" translate>Fiscal year closed</div>
+    }
 
-  <h1 class="mb-3">{{ order.reference }}</h1>
-  <!-- ORDER SUMMARY ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-  <admin-order-summary [order]="order">
-   <ng-container notes *ngIf="order.notes && order.notes.length > 0">
-     <dt class="col-6 label-title" translate>Notes</dt>
-     <dd class="col-6">
-       <a href (click)="scrollTo($event, 'notes'); notesCollapsed = false;" *ngFor="let note of order.notes">
-         <span class="badge badge-{{ note | noteBadgeColor }} mr-2">{{ note.type | translate }}</span>
-       </a>
-     </dd>
-    </ng-container>
-  </admin-order-summary>
+    <h1 class="mb-3">{{ order.reference }}</h1>
+    <!-- ORDER SUMMARY -->
+    <admin-order-summary [order]="order">
+      @if (order.notes && order.notes.length > 0) {
+        <dt class="col-6 label-title" translate>Notes</dt>
+        <dd class="col-6">
+        @for (note of order.notes; track note) {
+          <a href (click)="scrollTo($event, 'notes'); notesCollapsed = false;">
+            <span class="badge badge-{{ note | noteBadgeColor }} mr-2">{{ note.type | translate }}</span>
+          </a>
+        }
+        </dd>
+      }
+    </admin-order-summary>
 
-  <tabset #orderTabs>
-    <!-- ORDER DETAIL VIEW ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-    <tab heading="{{ 'Order' | translate }}">
-      <!-- ORDER LINES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-      <admin-order-lines class="row" [order]="order" [recordPermissions]="recordPermissions" *ngIf="isPermissionsLoaded"></admin-order-lines>
-      <!-- ORDER NOTES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-      <div class="row mt-3" *ngIf="order.notes && order.notes.length > 0">
-        <a id="notes"></a>
-        <div class="card container notes">
-          <div class="card-header row">
-            <h5 class="m-0">
-              <button type="button" class="btn-show-more"
-                      [ngClass]="{'btn-expanded': !notesCollapsed, 'btn-collapsed': notesCollapsed}"
-                      (click)="notesCollapsed = !notesCollapsed"
-                      [attr.aria-expanded]="!notesCollapsed" aria-controls="collapse">
-              </button>
-              {{ order.notes.length | i18nPlural: {'=1': 'Note', 'other': 'Notes'} | translate }}
-              <span *ngIf="notesCollapsed" class="badge badge-secondary ml-2">{{ order.notes.length }}</span>
-            </h5>
-          </div>
-          <div class="card-body py-2" *ngIf="!notesCollapsed">
-            <div class="row note" *ngFor="let note of order.notes">
-              <div class="col-2"><span class="badge badge-{{ note | noteBadgeColor }}">{{ note.type | translate }}</span></div>
-              <blockquote class="col" [innerHTML]="note.content | nl2br"></blockquote>
+    <tabset #orderTabs>
+      <!-- ORDER DETAIL VIEW -->
+      <tab heading="{{ 'Order' | translate }}">
+        <!-- ORDER LINES -->
+        @if (isPermissionsLoaded) {
+          <admin-order-lines class="row" [order]="order" [recordPermissions]="recordPermissions"></admin-order-lines>
+        }
+        <!-- ORDER NOTES -->
+        @if (order.notes && order.notes.length > 0) {
+          <div class="row mt-3">
+            <a id="notes"></a>
+            <div class="card container notes">
+              <div class="card-header row">
+                <h5 class="m-0">
+                  <button type="button" class="btn-show-more"
+                          [ngClass]="{'btn-expanded': !notesCollapsed, 'btn-collapsed': notesCollapsed}"
+                          (click)="notesCollapsed = !notesCollapsed"
+                          [attr.aria-expanded]="!notesCollapsed" aria-controls="collapse">
+                  </button>
+                  {{ order.notes.length | i18nPlural: {'=1': 'Note', 'other': 'Notes'} | translate }}
+                  @if (notesCollapsed) {
+                    <span class="badge badge-secondary ml-2">{{ order.notes.length }}</span>
+                  }
+                </h5>
+              </div>
+              @if (!notesCollapsed) {
+                <div class="card-body py-2">
+                  @for (note of order.notes; track note) {
+                    <div class="row note">
+                      <div class="col-2"><span class="badge badge-{{ note | noteBadgeColor }}">{{ note.type | translate }}</span></div>
+                      <blockquote class="col" [innerHTML]="note.content | nl2br"></blockquote>
+                    </div>
+                  }
+                </div>
+              }
             </div>
           </div>
-        </div>
-      </div>
-    </tab>
-    <!-- RECEIPTS DETAIL VIEW ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-    <tab heading="{{ 'Reception' | translate }}" [disabled]="!canViewReceipts">
-      <admin-receipt-list class="row" [order]="order" [recordPermissions]="recordPermissions" *ngIf="isPermissionsLoaded"></admin-receipt-list>
-    </tab>
-    <!-- HISTORY ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-    <tab heading="{{ 'History' | translate }}" *ngIf="historyVersions && historyVersions.length > 1">
-      <p-timeline [value]="historyVersions">
-        <ng-template pTemplate="marker" let-event>
-          <div [class.p-timeline-event-marker-current]="event.active" class="p-timeline-event-marker"></div>
-        </ng-template>
-        <ng-template pTemplate="content" let-event>
-          <a [routerLink]="['/records', 'acq_orders', 'detail', event.pid]">{{ event.label }}</a>
-          <small>{{ event.description }}</small>
-        </ng-template>
-      </p-timeline>
-    </tab>
-  </tabset>
-</div>
+        }
+      </tab>
+      <!-- RECEIPTS DETAIL VIEW -->
+      <tab heading="{{ 'Reception' | translate }}" [disabled]="!canViewReceipts">
+        @if (isPermissionsLoaded) {
+          <admin-receipt-list class="row" [order]="order" [recordPermissions]="recordPermissions"></admin-receipt-list>
+        }
+      </tab>
+      <!-- HISTORY -->
+      @if (historyVersions && historyVersions.length > 1) {
+        <tab heading="{{ 'History' | translate }}">
+          <p-timeline [value]="historyVersions">
+            <ng-template pTemplate="marker" let-event>
+              <div [class.p-timeline-event-marker-current]="event.active" class="p-timeline-event-marker"></div>
+            </ng-template>
+            <ng-template pTemplate="content" let-event>
+              <a [routerLink]="['/records', 'acq_orders', 'detail', event.pid]">{{ event.label }}</a>
+              <small>{{ event.description }}</small>
+            </ng-template>
+          </p-timeline>
+        </tab>
+      }
+    </tabset>
+  </div>
+}
diff --git a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.ts b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.ts
index d2942b289..6cb5b7ef0 100644
--- a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -17,15 +17,15 @@
  */
 import { ViewportScroller } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { AcqOrderApiService } from '@app/admin/acquisition/api/acq-order-api.service';
 import { RecordPermissions } from '@app/admin/classes/permissions';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { CurrentLibraryPermissionValidator } from '@app/admin/utils/permissions';
+import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
+import { BsModalService } from 'ngx-bootstrap/modal';
 import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { AcqOrderApiService } from '@app/admin/acquisition/api/acq-order-api.service';
-import { AcqOrderHistoryVersion, AcqOrderStatus, IAcqOrder, AcqOrderHistoryVersionResponseInterface } from '../../../classes/order';
+import { AcqOrderHistoryVersion, AcqOrderHistoryVersionResponseInterface, AcqOrderStatus, IAcqOrder } from '../../../classes/order';
 import { OrderEmailFormComponent } from '../order-email-form/order-email-form.component';
 
 @Component({
@@ -53,10 +53,8 @@ export class OrderDetailViewComponent implements DetailRecord, OnInit, OnDestroy
   /** history versions of this order */
   historyVersions: AcqOrderHistoryVersion[] = [];
 
-  /** modal reference */
-  private _modalRef: BsModalRef;
   /** all component subscription */
-  private _subscriptions = new Subscription();
+  private subscriptions = new Subscription();
 
   // GETTER & SETTER ==========================================================
   /** Determine if the order could be "placed/ordered" */
@@ -71,28 +69,28 @@ export class OrderDetailViewComponent implements DetailRecord, OnInit, OnDestroy
 
   // CONSTRUCTOR & HOOKS ======================================================
   /** Constructor
-   * @param _scroller - ViewportScroller
-   * @param _modalService - BsModalService
-   * @param _recordPermissionService - RecordPermissionService
-   * @param _permissionValidator - CurrentLibraryPermissionValidator
-   * @param _acqOrderService - AcqOrderApiService
+   * @param scroller - ViewportScroller
+   * @param modalService - BsModalService
+   * @param recordPermissionService - RecordPermissionService
+   * @param permissionValidator - CurrentLibraryPermissionValidator
+   * @param acqOrderService - AcqOrderApiService
    */
   constructor(
-    private _scroller: ViewportScroller,
-    private _modalService: BsModalService,
-    private _recordPermissionService: RecordPermissionService,
-    private _acqOrderService: AcqOrderApiService,
-    private _permissionValidator: CurrentLibraryPermissionValidator
+    private scroller: ViewportScroller,
+    private modalService: BsModalService,
+    private recordPermissionService: RecordPermissionService,
+    private acqOrderService: AcqOrderApiService,
+    private permissionValidator: CurrentLibraryPermissionValidator
   ) { }
 
   /** OnInit hook */
   ngOnInit() {
-    this._subscriptions.add(this.record$.subscribe(
+    this.subscriptions.add(this.record$.subscribe(
       (record: any) => {
         this.order = record.metadata;
         if (this.order.is_current_budget) {
-          this._subscriptions.add(this._recordPermissionService.getPermission('acq_orders', this.order.pid)
-          .pipe(map((permissions) => this._permissionValidator.validate(permissions, this.order.library.pid)))
+          this.subscriptions.add(this.recordPermissionService.getPermission('acq_orders', this.order.pid)
+          .pipe(map((permissions) => this.permissionValidator.validate(permissions, this.order.library.pid)))
           .subscribe((permissions) => {
             this.recordPermissions = permissions;
             this.isPermissionsLoaded = true;
@@ -115,10 +113,10 @@ export class OrderDetailViewComponent implements DetailRecord, OnInit, OnDestroy
         });
 
         // Ask for order history
-        this._acqOrderService.getOrderHistory(this.order.pid);
+        this.acqOrderService.getOrderHistory(this.order.pid);
       }
     ));
-    this._subscriptions.add(this._acqOrderService.acqOrderHistorySubject.subscribe(
+    this.subscriptions.add(this.acqOrderService.acqOrderHistorySubject.subscribe(
       (versions: AcqOrderHistoryVersionResponseInterface[]) => {
         this.historyVersions = versions.map(version => new AcqOrderHistoryVersion(version));
       }));
@@ -126,7 +124,7 @@ export class OrderDetailViewComponent implements DetailRecord, OnInit, OnDestroy
 
   /** OnDestroy hook */
   ngOnDestroy(): void {
-      this._subscriptions.unsubscribe();
+      this.subscriptions.unsubscribe();
   }
 
   // COMPONENT FUNCTIONS =======================================================
@@ -137,7 +135,7 @@ export class OrderDetailViewComponent implements DetailRecord, OnInit, OnDestroy
    */
   scrollTo(e: Event, anchorId: string): void {
     e.preventDefault();
-    this._scroller.scrollToAnchor(anchorId);
+    this.scroller.scrollToAnchor(anchorId);
   }
 
   /**
@@ -145,7 +143,7 @@ export class OrderDetailViewComponent implements DetailRecord, OnInit, OnDestroy
    * If the user submit the form (and submitting is success), then update the order to get the updated data.
    */
   placeOrderDialog() {
-    const modalRef = this._modalService.show(OrderEmailFormComponent, {
+    const modalRef = this.modalService.show(OrderEmailFormComponent, {
       ignoreBackdropClick: true,
       keyboard: true,
       class: 'modal-xl',
diff --git a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.html b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.html
index 9bfda939f..7231f0308 100644
--- a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.html
+++ b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -16,7 +16,7 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <div class="row order-line">
-  <ng-container *ngIf="orderLine && account else loading">
+  @defer (when orderLine && account) {
     <div class="col-9 d-flex" [ngClass]="{'order-cancelled': orderLine.status === orderLineStatus.CANCELLED}">
       <button type="button" class="btn-show-more"
               [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
@@ -26,29 +26,34 @@
       <div class="d-flex align-items-start flex-column">
         <div class="d-flex">
           <i class="fa status"
-             title="{{ orderLine.status | translate }}"
-             [ngClass]="{
-            'fa-envelope-open-o': orderLine.status === orderLineStatus.APPROVED,
-            'fa-envelope-o': orderLine.status === orderLineStatus.ORDERED,
-            'text-muted': orderLine.status === orderLineStatus.APPROVED || orderLine.status === orderLineStatus.ORDERED,
-            'fa-sign-in': orderLine.status === orderLineStatus.RECEIVED || orderLine.status === orderLineStatus.PARTIALLY_RECEIVED,
-            'text-success': orderLine.status === orderLineStatus.RECEIVED,
-            'text-warning': orderLine.status === orderLineStatus.PARTIALLY_RECEIVED,
-            'fa-window-close-o text-danger': orderLine.status === orderLineStatus.CANCELLED
-          }"></i>
-          <ng-container *ngIf="orderLine.document.pid | getRecord: 'documents' | async as document">
-            <a *ngIf="document.metadata.title | mainTitle as title"
-               [routerLink]="['/records', 'documents', 'detail', document.metadata.pid]">
-              {{ title | truncateText }}
-            </a>
-          </ng-container>
-          <span class="bullet-notes" *ngIf="orderLine.notes.length > 0 && isCollapsed">
-            <ng-container *ngFor="let note of orderLine.notes">
-              <i class="fa fa-circle fa-bullet bullet-{{ note | noteBadgeColor }}" aria-hidden="true" title="{{ note.type | translate }}"></i>
-            </ng-container>
-          </span>
+              title="{{ orderLine.status | translate }}"
+              [ngClass]="{
+                'fa-envelope-open-o': orderLine.status === orderLineStatus.APPROVED,
+                'fa-envelope-o': orderLine.status === orderLineStatus.ORDERED,
+                'text-muted': orderLine.status === orderLineStatus.APPROVED || orderLine.status === orderLineStatus.ORDERED,
+                'fa-sign-in': orderLine.status === orderLineStatus.RECEIVED || orderLine.status === orderLineStatus.PARTIALLY_RECEIVED,
+                'text-success': orderLine.status === orderLineStatus.RECEIVED,
+                'text-warning': orderLine.status === orderLineStatus.PARTIALLY_RECEIVED,
+                'fa-window-close-o text-danger': orderLine.status === orderLineStatus.CANCELLED
+              }"></i>
+          @if (orderLine.document.pid | getRecord: 'documents' | async; as document) {
+            @if ($any(document).metadata.title | mainTitle; as title) {
+              <a [routerLink]="['/records', 'documents', 'detail', $any(document).metadata.pid]">
+                {{ title | truncateText }}
+              </a>
+            }
+          }
+          @if (orderLine.notes.length > 0 && isCollapsed) {
+            <span class="bullet-notes">
+              @for (note of orderLine.notes; track note) {
+                <i class="fa fa-circle fa-bullet bullet-{{ note | noteBadgeColor }}" aria-hidden="true" title="{{ note.type | translate }}"></i>
+              }
+            </span>
+          }
+        </div>
+        <div class="account-number order-line-content" [hidden]="!isCollapsed">
+          {{ account.metadata.number }}
         </div>
-        <div class="account-number order-line-content" [hidden]="!isCollapsed">{{ account.metadata.number }}</div>
         <div class="order-line-content mt-2" [hidden]="isCollapsed">
           <dl class="row ml-0">
             <dt class="col-3 label-title" translate>Account</dt>
@@ -58,41 +63,45 @@
             </dd>
             <dt class="col-3 label-title" translate>Status</dt>
             <dd class="col-9">{{ orderLine.status | translate }}</dd>
-            <ng-container *ngIf="orderLine.exchange_rate">
+            @if (orderLine.exchange_rate) {
               <dt class="col-3 label-title" translate>Exchange rate</dt>
               <dd class="col-9">{{ orderLine.exchange_rate }}</dd>
-            </ng-container>
-            <ng-container *ngIf="orderLine.order_date">
+            }
+            @if (orderLine.order_date) {
               <dt class="col-3 label-title" translate>Order date</dt>
               <dd class="col-9">{{ orderLine.order_date | dateTranslate: 'shortDate' }}</dd>
-            </ng-container>
-            <ng-container *ngIf="orderLine.receipt_date">
+            }
+            @if (orderLine.receipt_date) {
               <dt class="col-3 label-title" translate>Reception date</dt>
               <dd class="col-9">{{ orderLine.receipt_date | dateTranslate: 'shortDate' }}</dd>
-            </ng-container>
-            <ng-container *ngFor="let note of orderLine.notes; first as isFirst">
-              <div *ngIf="isFirst" class="col-12 note-spacer"></div>
+            }
+            @for (note of orderLine.notes; track note; let isFirst = $first) {
+              @if (isFirst) {
+                <div class="col-12 note-spacer"></div>
+              }
               <dt class="col-3">
                 <span class="badge badge-{{ note | noteBadgeColor }}">{{ note.type | translate }}</span>
               </dt>
               <dd class="col-9 note-content" [innerHTML]="note.content | nl2br"></dd>
-            </ng-container>
+            }
           </dl>
         </div>
       </div>
-      <ng-container *ngIf="orderLine.priority > 0">
+      @if (orderLine.priority > 0) {
         <div class="ml-auto priority priority-{{ orderLine.priority }}" title="{{ 'priority' | translate }}"></div>
-      </ng-container>
+      }
     </div>
     <div class="col-2 amount">
       <div class="total-amount">{{ orderLine.total_amount | currency:order.currency:'symbol' }}</div>
       <div class="computation d-inline-block">
-        ({{ orderLine.quantity}} x {{ orderLine.amount | currency:order.currency:'symbol' }}<ng-container *ngIf="orderLine.discount_amount > 0">
-          - {{ orderLine.discount_amount | currency:order.currency:'symbol' }}</ng-container>)
+        ({{ orderLine.quantity}} x {{ orderLine.amount | currency:order.currency:'symbol' }}
+        @if (orderLine.discount_amount > 0) {
+          - {{ orderLine.discount_amount | currency:order.currency:'symbol' }}
+        })
       </div>
     </div>
     <div class="col-1 pl-0 text-right">
-      <ng-container *ngIf="recordPermissions; else space">
+      @if (recordPermissions) {
         <shared-action-button
           [title]="'Edit' | translate"
           [class]="'btn-outline-primary mr-1'"
@@ -111,12 +120,11 @@
         >
           <i class="fa fa-trash"></i>
         </shared-action-button>
-      </ng-container>
-      <ng-template #space>&nbsp;</ng-template>
+      } @else {
+        &nbsp;
+      }
     </div>
-  </ng-container>
+  } @placeholder {
+    <i class="fa fa-spin fa-spinner py-2"></i>
+  }
 </div>
-
-<ng-template class="" #loading>
-  <i class="fa fa-spin fa-spinner py-2"></i>
-</ng-template>
diff --git a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.ts b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.ts
index 6f6815eda..aa2d654e6 100644
--- a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.ts
+++ b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,11 +16,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { RecordService } from '@rero/ng-core';
 import { RecordPermissions } from '@app/admin/classes/permissions';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { CurrentLibraryPermissionValidator } from '@app/admin/utils/permissions';
-import { forkJoin, Subscription } from 'rxjs';
+import { RecordService } from '@rero/ng-core';
+import { Subscription, forkJoin } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AcqOrderApiService } from '../../../../api/acq-order-api.service';
 import { AcqOrderLineStatus, IAcqOrderLine } from '../../../../classes/order';
@@ -49,7 +49,7 @@ export class OrderLineComponent implements OnInit, OnDestroy {
   orderLineStatus = AcqOrderLineStatus;
 
   /** all component subscription */
-  private _subscriptions = new Subscription();
+  private subscriptions = new Subscription();
 
   // GETTER & SETTER ==========================================================
   /**
@@ -58,35 +58,35 @@ export class OrderLineComponent implements OnInit, OnDestroy {
    */
   get deleteInfoMessage(): string {
     return (!this.recordPermissions.delete.can)
-      ? this._recordPermissionService.generateDeleteMessage(this.recordPermissions.delete.reasons)
+      ? this.recordPermissionService.generateDeleteMessage(this.recordPermissions.delete.reasons)
       : null;
   }
   get editInfoMessage(): string {
     return (!this.recordPermissions.update.can)
-      ? this._recordPermissionService.generateTooltipMessage(this.recordPermissions.update.reasons, 'update')
+      ? this.recordPermissionService.generateTooltipMessage(this.recordPermissions.update.reasons, 'update')
       : null;
   }
 
   // CONSTRUCTOR & HOOKS ======================================================
   /** Constructor
-   * @param _recordPermissionService - RecordPermissionService
-   * @param _recordService - RecordService
-   * @param _acqOrderApiService - AcqOrderApiService
-   * @param _permissionValidator - CurrentLibraryPermissionValidator
+   * @param recordPermissionService - RecordPermissionService
+   * @param recordService - RecordService
+   * @param acqOrderApiService - AcqOrderApiService
+   * @param permissionValidator - CurrentLibraryPermissionValidator
    */
   constructor(
-    private _recordPermissionService: RecordPermissionService,
-    private _recordService: RecordService,
-    private _acqOrderApiService: AcqOrderApiService,
-    private _permissionValidator: CurrentLibraryPermissionValidator
+    private recordPermissionService: RecordPermissionService,
+    private recordService: RecordService,
+    private acqOrderApiService: AcqOrderApiService,
+    private permissionValidator: CurrentLibraryPermissionValidator
   ) { }
 
   /** OnInit hook */
   ngOnInit() {
-    const account$ = this._recordService.getRecord('acq_accounts', this.orderLine.acq_account.pid);
+    const account$ = this.recordService.getRecord('acq_accounts', this.orderLine.acq_account.pid);
     if (this.recordPermissions) {
-      const permissions$ = this._recordPermissionService.getPermission('acq_order_lines', this.orderLine.pid).pipe(
-        map((permissions) => this._permissionValidator.validate(permissions, this.order.library.pid))
+      const permissions$ = this.recordPermissionService.getPermission('acq_order_lines', this.orderLine.pid).pipe(
+        map((permissions) => this.permissionValidator.validate(permissions, this.order.library.pid))
       );
       forkJoin([permissions$, account$]).subscribe(
         ([permissions, account]) => {
@@ -95,18 +95,18 @@ export class OrderLineComponent implements OnInit, OnDestroy {
         }
       );
     } else {
-      this._subscriptions.add(account$.subscribe(account => this.account = account));
+      this.subscriptions.add(account$.subscribe(account => this.account = account));
     }
   }
 
   /** onDestroy hook */
   ngOnDestroy(): void {
-    this._subscriptions.unsubscribe();
+    this.subscriptions.unsubscribe();
   }
 
   // COMPONENT FUNCTIONS ======================================================
   /** Delete the order line */
   deleteOrderLine() {
-    this._acqOrderApiService.deleteOrderLine(this.orderLine);
+    this.acqOrderApiService.deleteOrderLine(this.orderLine);
   }
 }
diff --git a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.html b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.html
index c47145f04..e7530e1bc 100644
--- a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.html
+++ b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -19,38 +19,40 @@
   <div class="card-header px-0 row">
     <h5 class="col-8" translate>Order lines</h5>
     <div class="col-4 text-right">
-      <ng-container *ngIf="recordPermissions; else space">
-        <a *ngIf="recordPermissions.update.can; else createInfo"
-        class="btn btn-sm btn-outline-primary"
-        [routerLink]="['/', 'records', 'acq_order_lines', 'new']"
-        [queryParams]="{ order: order.pid }"
-        >
-          <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} &hellip;
-        </a>
-        <ng-template #createInfo>
+      @if (recordPermissions) {
+        @if (recordPermissions.update.can) {
+          <a class="btn btn-sm btn-outline-primary"
+            [routerLink]="['/', 'records', 'acq_order_lines', 'new']"
+            [queryParams]="{ order: order.pid }"
+          >
+            <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} &hellip;
+          </a>
+        } @else {
           <button type="button" class="btn btn-sm btn-outline-primary disabled"
                   [popover]="tolTemplate" triggers="mouseenter:mouseleave">
             <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} &hellip;
           </button>
           <ng-template #tolTemplate><div [innerHtml]="createInfoMessage | nl2br"></div></ng-template>
-        </ng-template>
-      </ng-container>
-      <ng-template #space>&nbsp;</ng-template>
+        }
+      } @else {
+        &nbsp;
+      }
     </div>
   </div>
   <div class="card-body p-0">
-    <ng-container *ngIf="orderLines; else loading">
-      <ng-container *ngIf="orderLines.length > 0; else noOrderLines">
-        <admin-order-line *ngFor="let orderLine of orderLines"
-                          [orderLine]="orderLine"
-                          [order]="order"
-                          [recordPermissions]="recordPermissions"
-        ></admin-order-line>
-      </ng-container>
-      <ng-template #noOrderLines>
+    @defer () {
+      @if (orderLines.length > 0) {
+        @for (orderLine of orderLines; track orderLine) {
+          <admin-order-line [orderLine]="orderLine"
+                            [order]="order"
+                            [recordPermissions]="recordPermissions"
+          ></admin-order-line>
+        }
+      } @else {
         <div class="py-3" translate>No order lines</div>
-      </ng-template>
-    </ng-container>
-    <ng-template #loading><i class="fa fa-spinner fa-spin"></i></ng-template>
+      }
+    } @placeholder {
+      <i class="fa fa-spinner fa-spin"></i>
+    }
   </div>
 </div>
diff --git a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.ts b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.ts
index c3b7c26af..5fbe2d04d 100644
--- a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.ts
+++ b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -37,7 +37,7 @@ export class OrderLinesComponent implements OnInit, OnChanges, OnDestroy {
   orderLines: IAcqOrderLine[] = undefined;
 
   /** all component subscription */
-  private _subscriptions = new Subscription();
+  private subscriptions = new Subscription();
 
   // GETTER & SETTER ==========================================================
   /**
@@ -45,25 +45,25 @@ export class OrderLinesComponent implements OnInit, OnChanges, OnDestroy {
    * @return the message to display into the tooltip box
    */
   get createInfoMessage(): string {
-    return this._recordPermissionService.generateTooltipMessage(this.recordPermissions.update.reasons, 'create');
+    return this.recordPermissionService.generateTooltipMessage(this.recordPermissions.update.reasons, 'create');
   }
 
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _acqOrderApiService - AcqOrderApiService
-   * @param _recordPermissionService - RecordPermissionService
+   * @param acqOrderApiService - AcqOrderApiService
+   * @param recordPermissionService - RecordPermissionService
    */
   constructor(
-    private _acqOrderApiService: AcqOrderApiService,
-    private _recordPermissionService: RecordPermissionService
+    private acqOrderApiService: AcqOrderApiService,
+    private recordPermissionService: RecordPermissionService
   ) { }
 
   /** OnInit hook */
   ngOnInit(): void {
-    this._loadOrderLines();
-    this._subscriptions.add(
-      this._acqOrderApiService
+    this.loadOrderLines();
+    this.subscriptions.add(
+      this.acqOrderApiService
         .deletedOrderLineSubject$
         .subscribe(
           (orderLine: IAcqOrderLine) => this.orderLines = this.orderLines.filter((line: IAcqOrderLine) => line.pid !== orderLine.pid)
@@ -74,19 +74,19 @@ export class OrderLinesComponent implements OnInit, OnChanges, OnDestroy {
   /** OnChanges hook */
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.hasOwnProperty('order')) {
-      this._loadOrderLines();
+      this.loadOrderLines();
     }
   }
 
   /** OnDestroy hook */
   ngOnDestroy() {
-    this._subscriptions.unsubscribe();
+    this.subscriptions.unsubscribe();
   }
 
   // PRIVATE COMPONENT METHODS ================================================
   /** load order lines related to this order */
-  private _loadOrderLines(): void {
-    this._acqOrderApiService
+  private loadOrderLines(): void {
+    this.acqOrderApiService
       .getOrderLines(this.order.pid)
       .subscribe((lines: IAcqOrderLine[]) => this.orderLines = lines);
   }
diff --git a/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.html b/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.html
index 5bb6d0f9f..d345597f4 100644
--- a/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.html
+++ b/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2023 RERO
+  Copyright (C) 2023-2024 RERO
   Copyright (C) 2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,22 +15,23 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<admin-preview-email
-  *ngIf="response"
-  [emails]="suggestions.emails"
-  [emailTypes]="emailTypes"
-  [mandatoryEmailTypes]="mandatoryEmailTypes"
-  [preview]="response.preview"
-  [previewPosition]="'bottom'"
-  [prePopulateRecipients]="suggestions.recipients"
-  (closeDialog)="closeEmailDialog()"
-  (data)="confirmOrder($event)"
->
-  <ng-container title>{{ 'Place order' | translate }}</ng-container>
-  <ng-container headerMessage>
-    <p translate>You're about to send the order.</p>
-  </ng-container>
-  <ng-container previewBottomMessage>
-    <p translate>Below you can find the preview message that will be sent</p>
-  </ng-container>
-</admin-preview-email>
+@if (response) {
+  <admin-preview-email
+    [emails]="suggestions.emails"
+    [emailTypes]="emailTypes"
+    [mandatoryEmailTypes]="mandatoryEmailTypes"
+    [preview]="response.preview"
+    [previewPosition]="'bottom'"
+    [prePopulateRecipients]="suggestions.recipients"
+    (closeDialog)="closeEmailDialog()"
+    (data)="confirmOrder($event)"
+  >
+    <ng-container title>{{ 'Place order' | translate }}</ng-container>
+    <ng-container headerMessage>
+      <p translate>You're about to send the order.</p>
+    </ng-container>
+    <ng-container previewBottomMessage>
+      <p translate>Below you can find the preview message that will be sent</p>
+    </ng-container>
+  </admin-preview-email>
+}
diff --git a/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.ts b/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.ts
index 9a0bf7e62..e45fa253e 100644
--- a/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.ts
+++ b/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2023 RERO
+ * Copyright (C) 2023-2024 RERO
  * Copyright (C) 2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -53,23 +53,23 @@ export class OrderEmailFormComponent implements OnInit, OnDestroy {
   response?: IPreview;
 
   /** all component subscription */
-  private _subscriptions = new Subscription();
+  private subscriptions = new Subscription();
 
   /**
    * Constructor
-   * @param _acqOrderApiService - AcqOrderApiService
-   * @param _toastrService - ToastrService
-   * @param _translateService - TranslateService
+   * @param acqOrderApiService - AcqOrderApiService
+   * @param toastrService - ToastrService
+   * @param translateService - TranslateService
    */
   constructor(
-    private _acqOrderApiService: AcqOrderApiService,
-    private _toastrService: ToastrService,
-    private _translateService: TranslateService
+    private acqOrderApiService: AcqOrderApiService,
+    private toastrService: ToastrService,
+    private translateService: TranslateService
   ) { }
 
   /** onInit hook */
   ngOnInit(): void {
-    this._subscriptions.add(this._acqOrderApiService
+    this.subscriptions.add(this.acqOrderApiService
       .getOrderPreview(this.order.pid)
       .subscribe((response: IPreview) => {
         this.suggestions = Tools.processRecipientSuggestions(response.recipient_suggestions);
@@ -80,7 +80,7 @@ export class OrderEmailFormComponent implements OnInit, OnDestroy {
 
   /** onDestroy hook */
   ngOnDestroy(): void {
-      this._subscriptions.unsubscribe();
+      this.subscriptions.unsubscribe();
   }
 
   /**
@@ -88,31 +88,31 @@ export class OrderEmailFormComponent implements OnInit, OnDestroy {
    * @param recipients Array of email addresses
    */
   confirmOrder(recipients: ITypeEmail[]): void {
-    this._acqOrderApiService
+    this.acqOrderApiService
       .sendOrder(this.order.pid, recipients)
       .subscribe(
         (notification: Notification) => {
           if (notification.notification_sent) {
-            this._toastrService.success(
-              this._translateService.instant('order has been sent'),
-              this._translateService.instant('Order sent')
+            this.toastrService.success(
+              this.translateService.instant('order has been sent'),
+              this.translateService.instant('Order sent')
             );
           } else {
-            this._toastrService.warning(
-              this._translateService.instant('order not yet send'),
-              this._translateService.instant('Order delayed'),
+            this.toastrService.warning(
+              this.translateService.instant('order not yet send'),
+              this.translateService.instant('Order delayed'),
               { disableTimeOut: true, closeButton: true }
             );
           }
           this.closeEmailDialog();
-          this._acqOrderApiService
+          this.acqOrderApiService
             .getOrder(this.order.pid)
             .subscribe((order: IAcqOrder) => this.recordChange.next(order));
         },
         (error: any) => {
-          this._toastrService.error(
+          this.toastrService.error(
             error.error.message,
-            this._translateService.instant('Error when placing an order !'),
+            this.translateService.instant('Error when placing an order !'),
             { disableTimeOut: true, closeButton: true }
           );
        });
diff --git a/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.html b/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.html
index 2b37b9c24..c7f6332d3 100644
--- a/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.html
+++ b/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,44 +15,48 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<section class="my-3 row border rounded bg-white" *ngIf="order">
-  <div class="col-8">
-    <dl class="row my-2">
-      <!-- VENDOR -->
-      <ng-container *ngIf="order.vendor">
-        <dt class="col-6 label-title" translate>Vendor</dt>
-        <dd class="col-6">{{ order.vendor.pid | getRecord: 'vendors' : 'field' : 'name' | async }}</dd>
-      </ng-container>
-      <!-- ORDER TYPE -->
-      <dt class="col-6 label-title" translate>Order type</dt>
-      <dd class="col-6">{{ order.type | translate }}</dd>
-      <!-- ORDER STATUS -->
-      <dt class="col-6 label-title" translate>Order status</dt>
-      <dd class="col-6">{{ order.status | translate }}</dd>
-      <!-- ORDER DATE -->
-      <ng-container *ngIf="order.order_date">
-        <dt class="col-6 label-title" translate>Order date</dt>
-        <dd class="col-6">{{ order.order_date | dateTranslate :'shortDate' }}</dd>
-      </ng-container>
-      <!-- NOTES (optional) -->
-      <ng-content select="[notes]"></ng-content>
-    </dl>
-  </div>
-  <!-- ORDER TOTAL AMOUNT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-  <div class="col-4 py-2 d-flex flex-column">
-    <div class="accounting-infos">
-      <span class="counter ordered-counter">{{ order.account_statement.provisional.quantity }}</span>
-      <div>
-        <span class="amount">{{ order.account_statement.provisional.total_amount | currency:order.currency:'symbol' }}</span>
-        <label translate>Ordered</label>
-      </div>
+@if (order) {
+  <section class="my-3 row border rounded bg-white">
+    <div class="col-8">
+      <dl class="row my-2">
+        <!-- VENDOR -->
+        @if (order.vendor) {
+          <dt class="col-6 label-title" translate>Vendor</dt>
+          <dd class="col-6">{{ order.vendor.pid | getRecord: 'vendors' : 'field' : 'name' | async }}</dd>
+        }
+        <!-- ORDER TYPE -->
+        <dt class="col-6 label-title" translate>Order type</dt>
+        <dd class="col-6">{{ order.type | translate }}</dd>
+        <!-- ORDER STATUS -->
+        <dt class="col-6 label-title" translate>Order status</dt>
+        <dd class="col-6">{{ order.status | translate }}</dd>
+        <!-- ORDER DATE -->
+        @if (order.order_date) {
+          <dt class="col-6 label-title" translate>Order date</dt>
+          <dd class="col-6">{{ order.order_date | dateTranslate :'shortDate' }}</dd>
+        }
+        <!-- NOTES (optional) -->
+        <ng-content select="[notes]"></ng-content>
+      </dl>
     </div>
-    <div class="accounting-infos" *ngIf="order.account_statement.expenditure.quantity > 0">
-      <span class="counter received-counter">{{ order.account_statement.expenditure.quantity }}</span>
-      <div>
-        <span class="amount">{{ order.account_statement.expenditure.total_amount | currency:order.currency:'symbol' }}</span>
-        <label translate>Received</label>
+    <!-- ORDER TOTAL AMOUNT -->
+    <div class="col-4 py-2 d-flex flex-column">
+      <div class="accounting-infos">
+        <span class="counter ordered-counter">{{ order.account_statement.provisional.quantity }}</span>
+        <div>
+          <span class="amount">{{ order.account_statement.provisional.total_amount | currency:order.currency:'symbol' }}</span>
+          <label translate>Ordered</label>
+        </div>
       </div>
+      @if (order.account_statement.expenditure.quantity > 0) {
+        <div class="accounting-infos">
+          <span class="counter received-counter">{{ order.account_statement.expenditure.quantity }}</span>
+          <div>
+            <span class="amount">{{ order.account_statement.expenditure.total_amount | currency:order.currency:'symbol' }}</span>
+            <label translate>Received</label>
+          </div>
+        </div>
+      }
     </div>
-  </div>
-</section>
+  </section>
+}
diff --git a/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.ts b/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.ts
index f9ef062a9..49a52f281 100644
--- a/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.ts
+++ b/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -18,9 +18,9 @@
 
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { AcqReceiptApiService } from '../../../api/acq-receipt-api.service';
-import { IAcqOrder, IAcqOrderLine, AcqOrderLineStatus, AcqOrderStatus } from '../../../classes/order';
 import { AcqOrderApiService } from '../../../api/acq-order-api.service';
+import { AcqReceiptApiService } from '../../../api/acq-receipt-api.service';
+import { AcqOrderLineStatus, AcqOrderStatus, IAcqOrder, IAcqOrderLine } from '../../../classes/order';
 import { IAcqReceipt } from '../../../classes/receipt';
 
 @Component({
@@ -37,25 +37,25 @@ export class OrderSummaryComponent implements OnInit, OnDestroy {
   acqOrderStatus = AcqOrderStatus;
 
   /** all component subscription */
-  private _subscriptions = new Subscription();
+  private subscriptions = new Subscription();
 
   // CONSTRUCTOR & HOOKS ======================================================
 
   /**
    * Constructor
-   * @param _acqOrderApiService - AcqOrderApiService
-   * @param _acqReceiptApiService - AcqReceiptApiService
+   * @param acqOrderApiService - AcqOrderApiService
+   * @param acqReceiptApiService - AcqReceiptApiService
    */
   constructor(
-    private _acqOrderApiService: AcqOrderApiService,
-    private _acqReceiptApiService: AcqReceiptApiService
+    private acqOrderApiService: AcqOrderApiService,
+    private acqReceiptApiService: AcqReceiptApiService
   ) { }
 
   /** OnInit hook */
   ngOnInit(): void {
     // Subscription when an order line is deleted
-    this._subscriptions.add(
-      this._acqOrderApiService
+    this.subscriptions.add(
+      this.acqOrderApiService
         .deletedOrderLineSubject$
         .subscribe(
           (orderLine: IAcqOrderLine) => {
@@ -66,8 +66,8 @@ export class OrderSummaryComponent implements OnInit, OnDestroy {
           }
         )
     );
-    this._subscriptions.add(
-      this._acqReceiptApiService
+    this.subscriptions.add(
+      this.acqReceiptApiService
         .deletedReceiptSubject$
         .subscribe(
           (receipt: IAcqReceipt) => {
@@ -80,6 +80,6 @@ export class OrderSummaryComponent implements OnInit, OnDestroy {
 
   /** OnDestroy hook */
   ngOnDestroy() {
-    this._subscriptions.unsubscribe();
+    this.subscriptions.unsubscribe();
   }
 }
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.html b/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.html
index ad754b94a..c932daf40 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.html
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,94 +15,108 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div *ngIf="receipt && receipt.pid && permissions" class="container">
-  <h1 class="mb-3">{{ receipt.reference }}</h1>
-  <blockquote class="receipt-note row" *ngFor="let note of receipt.notes">
-    <div class="offset-1 col-2">
-      <span class="badge badge-{{ note | noteBadgeColor }}">{{ note.type | translate }}</span>
-    </div>
-    <p class="col" [innerHTML]="note.content"></p>
-  </blockquote>
-  <div class="card receipt container">
-    <!-- RECEIPT LINES ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-    <div class="card-header row" translate>Receipt lines</div>
-    <div class="card-body row">
-      <div class="container row line no-gutters" *ngFor="let line of receiptLines">
-        <ng-container *ngIf="line && permissions; else loading">
-          <div class="col-9">
-            <div class="d-flex">
-              <span class="quantity fixed-width">{{ line.quantity }}</span>
-              <a [routerLink]="['/records', 'documents', 'detail', line.document.pid]" target="acq-detail">
-                {{ line.document.title_text }}
-              </a>
-              <span class="ml-auto mr-2 reception_date">{{ line.receipt_date | dateTranslate: 'shortDate' }}</span>
-            </div>
-            <div class="metadata left-offset" *ngIf="line.document.identifiers">
-              ISBN: {{ line.document.identifiers.join(', ') }}
-            </div>
-            <div class="left-offset row" *ngFor="let note of line.notes">
-              <span class="col-3 p-0"><span class="badge badge-{{ note | noteBadgeColor }}">{{ note.type | translate }}</span></span>
-              <span class="note-content col p-0 pl-2" [innerHTML]="note.content | nl2br"></span>
-            </div>
-          </div>
-          <div class="col-2 amount">
-            <span>{{ line | receiptLineTotalAmount | currency: receipt.currency: 'symbol' }}</span><br/>
-            <span class="detail">{{ line.quantity }} x {{ line.amount | currency: receipt.currency: 'symbol' }}
-              <ng-container *ngIf="line.vat_rate"> + {{ line.vat_rate }} %</ng-container></span>
-          </div>
-          <div class="col-1 actions text-right">
-            <ng-container *ngIf="permissions">
-              <shared-action-button
-                [title]="'Edit' | translate"
-                [class]="'btn-outline-primary mr-1'"
-                [disabled]="!permissions.update.can"
-                [url]="['/records', 'acq_receipt_lines', 'edit', line.pid]"
-                [message]="editInfoMessage"
-              >
-                <i class="fa fa-pencil"></i>
-              </shared-action-button>
-              <shared-action-button
-                [title]="'Delete' | translate"
-                [class]="'btn-outline-danger'"
-                [disabled]="!permissions.delete.can"
-                [message]="deleteInfoMessage"
-                (btnClick)="deleteReceiptLine(line)"
-              >
-                <i class="fa fa-trash"></i>
-              </shared-action-button>
-            </ng-container>
-          </div>
-        </ng-container>
-      </div>
-    </div>
-    <!-- AMOUNT ADJUSTMENTS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-    <ng-container *ngIf="receipt.amount_adjustments.length > 0">
-      <div class="card-header row" translate>Amount adjustments</div>
+@if (receipt && receipt.pid && permissions) {
+  <div class="container">
+    <h1 class="mb-3">{{ receipt.reference }}</h1>
+    @for (note of receipt.notes; track note) {
+      <blockquote class="receipt-note row">
+        <div class="offset-1 col-2">
+          <span class="badge badge-{{ note | noteBadgeColor }}">{{ note.type | translate }}</span>
+        </div>
+        <p class="col" [innerHTML]="note.content"></p>
+      </blockquote>
+    }
+    <div class="card receipt container">
+      <!-- RECEIPT LINES -->
+      <div class="card-header row" translate>Receipt lines</div>
       <div class="card-body row">
-        <div class="container row line no-gutters" *ngFor="let adjustment of receipt.amount_adjustments">
-          <div class="col-9 d-flex">
-            <i class="fa fa-long-arrow-right fixed-width"></i>
-            <label>{{ adjustment.label }}</label>
-            <span class="ml-auto metadata pr-2">
-              {{ adjustment.acq_account.pid | getRecord: 'acq_accounts': 'field': 'number' | async }}
-            </span>
-          </div>
-          <div class="col-2 amount" [class.discount-amount]="adjustment.amount < 0">
-            {{ adjustment.amount | currency: receipt.currency: 'symbol' }}
+        @for (line of receiptLines; track line) {
+          <div class="container row line no-gutters">
+            @if (line && permissions) {
+              <div class="col-9">
+                <div class="d-flex">
+                  <span class="quantity fixed-width">{{ line.quantity }}</span>
+                  <a [routerLink]="['/records', 'documents', 'detail', line.document.pid]" target="acq-detail">
+                    {{ line.document.title_text }}
+                  </a>
+                  <span class="ml-auto mr-2 reception_date">{{ line.receipt_date | dateTranslate: 'shortDate' }}</span>
+                </div>
+                @if (line.document.identifiers) {
+                  <div class="metadata left-offset">
+                    ISBN: {{ line.document.identifiers.join(', ') }}
+                  </div>
+                }
+                @for (note of line.notes; track note) {
+                  <div class="left-offset row">
+                    <span class="col-3 p-0"><span class="badge badge-{{ note | noteBadgeColor }}">{{ note.type | translate }}</span></span>
+                    <span class="note-content col p-0 pl-2" [innerHTML]="note.content | nl2br"></span>
+                  </div>
+                }
+              </div>
+              <div class="col-2 amount">
+                <span>{{ line | receiptLineTotalAmount | currency: receipt.currency: 'symbol' }}</span><br/>
+                <span class="detail">{{ line.quantity }} x {{ line.amount | currency: receipt.currency: 'symbol' }}
+                  @if (line.vat_rate) {
+                    + {{ line.vat_rate }} %
+                  }
+                </span>
+              </div>
+              <div class="col-1 actions text-right">
+                @if (permissions) {
+                  <shared-action-button
+                    [title]="'Edit' | translate"
+                    [class]="'btn-outline-primary mr-1'"
+                    [disabled]="!permissions.update.can"
+                    [url]="['/records', 'acq_receipt_lines', 'edit', line.pid]"
+                    [message]="editInfoMessage"
+                  >
+                    <i class="fa fa-pencil"></i>
+                  </shared-action-button>
+                  <shared-action-button
+                    [title]="'Delete' | translate"
+                    [class]="'btn-outline-danger'"
+                    [disabled]="!permissions.delete.can"
+                    [message]="deleteInfoMessage"
+                    (btnClick)="deleteReceiptLine(line)"
+                  >
+                    <i class="fa fa-trash"></i>
+                  </shared-action-button>
+                }
+              </div>
+            } @else {
+              <i class="fa fa-spin fa-spinner py-2"></i>
+            }
           </div>
-        </div>
+        }
       </div>
-    </ng-container>
-    <!-- TOTAL ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-    <div class="card-header total-amount row">
-      <div class="container row line no-gutters">
-        <div class="col-9" translate>Total amount</div>
-        <div class="col-2 amount">{{ receipt.total_amount | currency: receipt.currency: 'symbol' }}</div>
+      <!-- AMOUNT ADJUSTMENTS -->
+      @if (receipt.amount_adjustments.length > 0) {
+        <div class="card-header row" translate>Amount adjustments</div>
+        <div class="card-body row">
+          @for (adjustment of receipt.amount_adjustments; track adjustment) {
+            <div class="container row line no-gutters">
+              <div class="col-9 d-flex">
+                <i class="fa fa-long-arrow-right fixed-width"></i>
+                <label>{{ adjustment.label }}</label>
+                <span class="ml-auto metadata pr-2">
+                  {{ adjustment.acq_account.pid | getRecord: 'acq_accounts': 'field': 'number' | async }}
+                </span>
+              </div>
+              <div class="col-2 amount" [class.discount-amount]="adjustment.amount < 0">
+                {{ adjustment.amount | currency: receipt.currency: 'symbol' }}
+              </div>
+            </div>
+          }
+        </div>
+      }
+
+      <!-- TOTAL -->
+      <div class="card-header total-amount row">
+        <div class="container row line no-gutters">
+          <div class="col-9" translate>Total amount</div>
+          <div class="col-2 amount">{{ receipt.total_amount | currency: receipt.currency: 'symbol' }}</div>
+        </div>
       </div>
     </div>
   </div>
-</div>
-
-<ng-template #loading>
-  <i class="fa fa-spin fa-spinner py-2"></i>
-</ng-template>
+}
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.ts b/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.ts
index babc00faf..bf821f953 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -17,12 +17,11 @@
  */
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
-import { forkJoin, Observable, Subscription } from 'rxjs';
+import { Observable, Subscription, forkJoin } from 'rxjs';
 import { RecordPermissions } from '../../../../classes/permissions';
 import { RecordPermissionService } from '../../../../service/record-permission.service';
 import { CurrentLibraryPermissionValidator } from '../../../../utils/permissions';
 import { AcqReceiptApiService } from '../../../api/acq-receipt-api.service';
-import { IAcqNote } from '../../../classes/common';
 import { IAcqReceipt, IAcqReceiptLine } from '../../../classes/receipt';
 
 @Component({
@@ -45,7 +44,7 @@ export class ReceiptDetailViewComponent implements OnInit, OnDestroy, DetailReco
   receiptLines: IAcqReceiptLine[] = [];
 
   /** all component subscription */
-  private _subscriptions = new Subscription();
+  private subscriptions = new Subscription();
 
 
   // GETTER & SETTER ==========================================================
@@ -55,49 +54,49 @@ export class ReceiptDetailViewComponent implements OnInit, OnDestroy, DetailReco
    */
   get deleteInfoMessage(): string|null  {
     if (!this.permissions.delete.can) {
-      return this._recordPermissionService.generateDeleteMessage(this.permissions.delete.reasons);
+      return this.recordPermissionService.generateDeleteMessage(this.permissions.delete.reasons);
     }
   }
   get editInfoMessage(): string|null {
     if (!this.permissions.update.can) {
-      return this._recordPermissionService.generateTooltipMessage(this.permissions.update.reasons, 'update');
+      return this.recordPermissionService.generateTooltipMessage(this.permissions.update.reasons, 'update');
     }
   }
 
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _acqReceiptApiService - AcqReceiptApiService
-   * @param _recordPermissionService - RecordPermissionService
-   * @param _currentLibraryPermissionValidator - CurrentLibraryPermissionValidator
+   * @param acqReceiptApiService - AcqReceiptApiService
+   * @param recordPermissionService - RecordPermissionService
+   * @param currentLibraryPermissionValidator - CurrentLibraryPermissionValidator
    */
   constructor(
-    private _acqReceiptApiService: AcqReceiptApiService,
-    private _recordPermissionService: RecordPermissionService,
-    private _currentLibraryPermissionValidator: CurrentLibraryPermissionValidator
+    private acqReceiptApiService: AcqReceiptApiService,
+    private recordPermissionService: RecordPermissionService,
+    private currentLibraryPermissionValidator: CurrentLibraryPermissionValidator
   ) { }
 
   /** OnInit hook */
   ngOnInit() {
     this.record$.subscribe((record: any) => {
-      this.receipt = {...this._acqReceiptApiService.receiptDefaultData, ...record.metadata};
-      const receiptLines$ = this._acqReceiptApiService.getReceiptLines(this.receipt.pid);
-      const permissions$ = this._recordPermissionService.getPermission(this.type, this.receipt.pid);
+      this.receipt = {...this.acqReceiptApiService.receiptDefaultData, ...record.metadata};
+      const receiptLines$ = this.acqReceiptApiService.getReceiptLines(this.receipt.pid);
+      const permissions$ = this.recordPermissionService.getPermission(this.type, this.receipt.pid);
       forkJoin([receiptLines$, permissions$])
         .subscribe(([receiptLines, permissions]) => {
           this.receiptLines = receiptLines;
-          this.permissions = this._currentLibraryPermissionValidator.validate(permissions, this.receipt.library.pid);
+          this.permissions = this.currentLibraryPermissionValidator.validate(permissions, this.receipt.library.pid);
         });
     });
-    this._subscriptions.add(
-      this._acqReceiptApiService.deletedReceiptLineSubject$
+    this.subscriptions.add(
+      this.acqReceiptApiService.deletedReceiptLineSubject$
         .subscribe((receiptLine) => this.receipt.receipt_lines = this.receipt.receipt_lines.filter(line => line.pid !== receiptLine.pid))
     );
   }
 
   /** OnDestroy hook */
   ngOnDestroy() {
-    this._subscriptions.unsubscribe();
+    this.subscriptions.unsubscribe();
   }
 
   // COMPONENTS FUNCTIONS =====================================================
@@ -106,17 +105,6 @@ export class ReceiptDetailViewComponent implements OnInit, OnDestroy, DetailReco
    * @param line - the receipt line to delete.
    */
   deleteReceiptLine(line: IAcqReceiptLine): void {
-    this._acqReceiptApiService.deleteReceiptLine(line);
-  }
-
-  /**
-   * extract receipt line notes from raw data record.
-   * @param receiptLineRawData: the data to analyze.
-   * @return the list of notes about this receiptLine.
-   */
-  getReceiptLinetNotes(receiptLineRawData: any|null): IAcqNote[] {
-    return (receiptLineRawData && receiptLineRawData.metadata && receiptLineRawData.metadata.notes)
-      ? receiptLineRawData.metadata.notes
-      : [];
+    this.acqReceiptApiService.deleteReceiptLine(line);
   }
 }
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-view.component.html b/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-view.component.html
index 502290727..54a60962b 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-view.component.html
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,50 +14,54 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<form [formGroup]="form" (ngSubmit)="onSubmit(model)" class="container" *ngIf="loaded">
+@if (loaded) {
+  <form [formGroup]="form" (ngSubmit)="onSubmit(model)" class="container">
 
-    <!-- FORM HEADER :: title and action buttons ========================== -->
-    <section class="d-flex mb-3" >
-      <h1 translate>Receipt of an order</h1>
-      <div class="ml-auto">
-        <button type="reset" class="btn btn-outline-danger btn-sm" [routerLink]="['/', 'records', 'acq_orders', 'detail', orderRecord.pid]">
-          <i class="fa fa-times"></i>
-          {{ 'Cancel' | translate }}
-        </button>
-        <button type="submit" class="btn btn-primary btn-sm ml-1" [disabled]="!form.valid || orderSend">
-          <i class="fa" [ngClass]="{'fa-save': !orderSend, 'fa-spinner fa-pulse': orderSend}"></i>
-          {{ 'Save' | translate }}
-        </button>
-      </div>
-    </section>
+      <!-- FORM HEADER :: title and action buttons -->
+      <section class="d-flex mb-3" >
+        <h1 translate>Receipt of an order</h1>
+        <div class="ml-auto">
+          <button type="reset" class="btn btn-outline-danger btn-sm" [routerLink]="['/', 'records', 'acq_orders', 'detail', orderRecord.pid]">
+            <i class="fa fa-times"></i>
+            {{ 'Cancel' | translate }}
+          </button>
+          <button type="submit" class="btn btn-primary btn-sm ml-1" [disabled]="!form.valid || orderSend">
+            <i class="fa" [ngClass]="{'fa-save': !orderSend, 'fa-spinner fa-pulse': orderSend}"></i>
+            {{ 'Save' | translate }}
+          </button>
+        </div>
+      </section>
 
-    <!-- KNOWN ORDER/RECEIPT DATA -->
-    <div class="row card known-data">
-      <div class="card-header">
-        <button type="button" class="btn-show-more"
-                [ngClass]="{'btn-expanded': !knownDataCollapsed, 'btn-collapsed': knownDataCollapsed}"
-                (click)="knownDataCollapsed = !knownDataCollapsed"
-                [attr.aria-expanded]="!knownDataCollapsed" aria-controls="collapse">
-        </button>
-        <h5 class="d-inline-block" translate>Order overview</h5>
-      </div>
-      <div class="card-body callout callout-info callout-bg-info pt-0" [hidden]="knownDataCollapsed">
-        <admin-order-summary [order]="orderRecord"></admin-order-summary>
-        <div class="card w-100 pt-0" *ngIf="receiptRecord">
-          <div class="card-header"><h5 translate>Already in this receipt</h5></div>
-          <div class="card-body p-0">
-            <admin-receipt-summary [receiptPid]="receiptRecord.pid" [collapsable]="false" [allowActions]="false" class="container">
-            </admin-receipt-summary>
-          </div>
+      <!-- KNOWN ORDER/RECEIPT DATA -->
+      <div class="row card known-data">
+        <div class="card-header">
+          <button type="button" class="btn-show-more"
+                  [ngClass]="{'btn-expanded': !knownDataCollapsed, 'btn-collapsed': knownDataCollapsed}"
+                  (click)="knownDataCollapsed = !knownDataCollapsed"
+                  [attr.aria-expanded]="!knownDataCollapsed" aria-controls="collapse">
+          </button>
+          <h5 class="d-inline-block" translate>Order overview</h5>
+        </div>
+        <div class="card-body callout callout-info callout-bg-info pt-0" [hidden]="knownDataCollapsed">
+          <admin-order-summary [order]="orderRecord"></admin-order-summary>
+          @if (receiptRecord) {
+            <div class="card w-100 pt-0">
+              <div class="card-header"><h5 translate>Already in this receipt</h5></div>
+              <div class="card-body p-0">
+                <admin-receipt-summary [receiptPid]="receiptRecord.pid" [collapsable]="false" [allowActions]="false" class="container">
+                </admin-receipt-summary>
+              </div>
+            </div>
+          }
         </div>
       </div>
-    </div>
 
-    <!-- FORMLY FORM -->
-    <div class="row card p-0 my-3">
-      <div class="card-header">
-        <h5 translate>Receipt new data</h5>
+      <!-- FORMLY FORM -->
+      <div class="row card p-0 my-3">
+        <div class="card-header">
+          <h5 translate>Receipt new data</h5>
+        </div>
+        <formly-form class="card-body" [form]="form" [fields]="fields" [model]="model"></formly-form>
       </div>
-      <formly-form class="card-body" [form]="form" [fields]="fields" [model]="model"></formly-form>
-    </div>
-</form>
+  </form>
+}
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-view.component.ts b/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-view.component.ts
index a0366439b..4b7afd3fe 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-view.component.ts
@@ -23,7 +23,7 @@ import { ToastrService } from 'ngx-toastr';
 import { finalize, tap } from 'rxjs/operators';
 import { AcqReceiptApiService } from '../../../api/acq-receipt-api.service';
 import { IAcqReceipt } from '../../../classes/receipt';
-import { ICreateLineMessage, IAcqReceiptModel, OrderReceipt } from './order-receipt';
+import { IAcqReceiptModel, ICreateLineMessage, OrderReceipt } from './order-receipt';
 import { OrderReceiptForm } from './order-receipt-form';
 
 @Component({
@@ -71,27 +71,27 @@ export class OrderReceiptViewComponent implements OnInit {
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _route - ActivatedRoute
-   * @param _router - Router
-   * @param _orderReceipt - OrderReceipt
-   * @param _acqReceiptApiService - AcqReceiptApiService
-   * @param _toastrService - ToastrService
-   * @param _translateService - TranslateService
-   * @param _orderReceiptForm - OrderReceiptForm
+   * @param route - ActivatedRoute
+   * @param router - Router
+   * @param orderReceipt - OrderReceipt
+   * @param acqReceiptApiService - AcqReceiptApiService
+   * @param toastrService - ToastrService
+   * @param translateService - TranslateService
+   * @param orderReceiptForm - OrderReceiptForm
    */
   constructor(
-    private _route: ActivatedRoute,
-    private _router: Router,
-    private _orderReceipt: OrderReceipt,
-    private _acqReceiptApiService: AcqReceiptApiService,
-    private _toastrService: ToastrService,
-    private _translateService: TranslateService,
-    private _orderReceiptForm: OrderReceiptForm
+    private route: ActivatedRoute,
+    private router: Router,
+    private orderReceipt: OrderReceipt,
+    private acqReceiptApiService: AcqReceiptApiService,
+    private toastrService: ToastrService,
+    private translateService: TranslateService,
+    private orderReceiptForm: OrderReceiptForm
   ) {}
 
   /** OnInit hook */
   ngOnInit(): void {
-    this.orderPid = this._route.snapshot.paramMap.get('pid');
+    this.orderPid = this.route.snapshot.paramMap.get('pid');
     this._generateForm();
   }
 
@@ -103,21 +103,20 @@ export class OrderReceiptViewComponent implements OnInit {
   onSubmit(model: IAcqReceiptModel): void {
     this.orderSend = true;
     let record: IAcqReceipt = (!this.receiptRecord)
-      ? this._orderReceipt.processBaseRecord(model)
-      : this._orderReceipt.processExistingRecord(this.receiptRecord);
-    record = this._orderReceiptForm.processForm(model, record);
+      ? this.orderReceipt.processBaseRecord(model)
+      : this.orderReceipt.processExistingRecord(this.receiptRecord);
+    record = this.orderReceiptForm.processForm(model, record);
 
     const receiptApi$ = (!this.receiptRecord)
-      ? this._acqReceiptApiService.createReceipt(record).pipe(tap(receipt => model.pid = receipt.pid))
-      : this._acqReceiptApiService.updateReceipt(record.pid, record);
+      ? this.acqReceiptApiService.createReceipt(record).pipe(tap(receipt => model.pid = receipt.pid))
+      : this.acqReceiptApiService.updateReceipt(record.pid, record);
     receiptApi$
       .pipe(finalize(() => this.orderSend = false))
       .subscribe(
-        (receipt: IAcqReceipt) => this._createLinesAndMessage(model, receipt),
+        (receipt: IAcqReceipt) => this.createLinesAndMessage(model, receipt),
         (err) => {
-          console.error(err);
-          this._toastrService.error(
-            err.title, this._translateService.instant('Receipt'),
+          this.toastrService.error(
+            err.title, this.translateService.instant('Receipt'),
             { disableTimeOut: true, closeButton: true }
           );
         }
@@ -129,12 +128,12 @@ export class OrderReceiptViewComponent implements OnInit {
    * Generate Form
    */
   private _generateForm(): void {
-    this.model = this._orderReceipt.model;
+    this.model = this.orderReceipt.model;
 
     // Try to load the receipt depending of the url argument
-    const receiptPid = this._route.snapshot.queryParams.receipt;
+    const receiptPid = this.route.snapshot.queryParams.receipt;
     if (receiptPid) {
-      this._acqReceiptApiService
+      this.acqReceiptApiService
         .getReceipt(receiptPid)
         .subscribe((receipt: IAcqReceipt) => {
           this.receiptRecord = receipt;
@@ -142,13 +141,13 @@ export class OrderReceiptViewComponent implements OnInit {
           this.model.reference = receipt.reference;
         });
     }
-    this._orderReceiptForm
+    this.orderReceiptForm
       .setModel(this.model)
       .createForm(this.orderPid)
       .subscribe((loaded: boolean) => {
-        this.orderRecord = this._orderReceiptForm.getOrderRecord();
-        this.model = this._orderReceiptForm.getModel();
-        this._fields = this._orderReceiptForm.getConfig();
+        this.orderRecord = this.orderReceiptForm.getOrderRecord();
+        this.model = this.orderReceiptForm.getModel();
+        this._fields = this.orderReceiptForm.getConfig();
         this.loaded = loaded;
       });
   }
@@ -158,38 +157,38 @@ export class OrderReceiptViewComponent implements OnInit {
    * @param model: the model to process
    * @param receipt: the parent receipt object
    */
-  private _createLinesAndMessage(model: IAcqReceiptModel, receipt: IAcqReceipt): void {
+  private createLinesAndMessage(model: IAcqReceiptModel, receipt: IAcqReceipt): void {
     // receipt exists, we can create corresponding lines
-    const lines = this._orderReceipt.processLines(model);
+    const lines = this.orderReceipt.processLines(model);
     if (lines.length > 0) {
-      this._acqReceiptApiService
+      this.acqReceiptApiService
         .createReceiptLines(model.pid, lines)
         .subscribe((result: ICreateLineMessage) => {
           if (result.success) {
-            this._toastrService.success(
-              this._translateService.instant('Receipt operations were successful'),
-              this._translateService.instant('Receipt')
+            this.toastrService.success(
+              this.translateService.instant('Receipt operations were successful'),
+              this.translateService.instant('Receipt')
             );
           } else {
-            this._toastrService.error(
-              this._translateService.instant(result.messages),
-              this._translateService.instant('Receipt'),
+            this.toastrService.error(
+              this.translateService.instant(result.messages),
+              this.translateService.instant('Receipt'),
               {disableTimeOut: true, closeButton: true}
             );
           }
-          this._redirectToOrder();
+          this.redirectToOrder();
         });
     } else {
-      this._toastrService.success(
-        this._translateService.instant('Receipt operations were successful'),
-        this._translateService.instant('Receipt')
+      this.toastrService.success(
+        this.translateService.instant('Receipt operations were successful'),
+        this.translateService.instant('Receipt')
       );
-      this._redirectToOrder();
+      this.redirectToOrder();
     }
   }
 
   /** Redirect to order detail view */
-  private _redirectToOrder(): void {
-    this._router.navigate(['/', 'records', 'acq_orders', 'detail', this.orderPid]);
+  private redirectToOrder(): void {
+    this.router.navigate(['/', 'records', 'acq_orders', 'detail', this.orderPid]);
   }
 }
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.html b/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.html
index 7c3fc88f0..fc7fff347 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.html
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2023 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -22,38 +22,39 @@ <h5 class="col-8 m-0">
       <span class="badge badge-secondary ml-2">{{ numberOfReceipt }}</span>
     </h5>
     <div class="col-4 text-right">
-      <ng-container *ngIf="recordPermissions; else space">
-        <a *ngIf="recordPermissions.create.can; else createInfo"
-         class="btn btn-sm btn-outline-primary"
-         [routerLink]="['/', 'acquisition', 'acq_orders', order.pid, 'receive']"
-        >
-          <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} &hellip;
-        </a>
-        <ng-template #createInfo>
+      @if (recordPermissions) {
+        @if (recordPermissions.create.can) {
+          <a class="btn btn-sm btn-outline-primary"
+            [routerLink]="['/', 'acquisition', 'acq_orders', order.pid, 'receive']"
+          >
+            <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} &hellip;
+          </a>
+        } @else {
           <button type="button" class="btn btn-sm btn-outline-primary disabled"
                   [popover]="tolTemplate" triggers="mouseenter:mouseleave">
             <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} &hellip;
           </button>
           <ng-template #tolTemplate><div [innerHtml]="createInfoMessage | nl2br"></div></ng-template>
-        </ng-template>
-      </ng-container>
-      <ng-template #space>&nbsp;</ng-template>
+        }
+      } @else {
+        &nbsp;
+      }
     </div>
   </div>
   <div class="card-body p-0">
-    <ng-container *ngIf="receipts; else loading">
-      <ng-container *ngIf="receipts.length > 0; else noOrderLines">
-        <admin-receipt-summary *ngFor="let receipt of receipts"
-                               [receiptPid]="receipt.pid"
-                               [allowActions]="true"
-                               [recordPermissions]="recordPermissions"
-                               >
-        </admin-receipt-summary>
-      </ng-container>
-      <ng-template #noOrderLines>
+    @if (receipts) {
+      @if (receipts.length > 0) {
+        @for (receipt of receipts; track receipt) {
+          <admin-receipt-summary [receiptPid]="receipt.pid"
+            [allowActions]="true"
+            [recordPermissions]="recordPermissions"
+          ></admin-receipt-summary>
+        }
+      } @else {
         <div class="py-3" translate>No receipt</div>
-      </ng-template>
-    </ng-container>
-    <ng-template #loading><i class="fa fa-spinner fa-spin"></i></ng-template>
+      }
+    } @else {
+      <i class="fa fa-spinner fa-spin"></i>
+    }
   </div>
 </div>
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.ts b/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.ts
index 2660f3f8e..e04877868 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.ts
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.ts
@@ -19,7 +19,7 @@ import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@
 import { RecordPermissions } from '@app/admin/classes/permissions';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { CurrentLibraryPermissionValidator } from '@app/admin/utils/permissions';
-import { of, Subscription } from 'rxjs';
+import { Subscription, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AcqReceiptApiService } from '../../../api/acq-receipt-api.service';
 import { IAcqOrder } from '../../../classes/order';
@@ -41,7 +41,7 @@ export class ReceiptListComponent implements OnInit, OnChanges, OnDestroy {
   receipts: IAcqReceipt[] = undefined;
 
   /** all component subscription */
-  private _subscriptions = new Subscription();
+  private subscriptions = new Subscription();
 
   // GETTER & SETTER ==========================================================
   /**
@@ -49,7 +49,7 @@ export class ReceiptListComponent implements OnInit, OnChanges, OnDestroy {
    * @return the message to display into the tooltip box
    */
   get createInfoMessage(): string {
-    return this._recordPermissionService.generateTooltipMessage(this.recordPermissions.create.reasons, 'create');
+    return this.recordPermissionService.generateTooltipMessage(this.recordPermissions.create.reasons, 'create');
   }
 
   /**
@@ -63,24 +63,24 @@ export class ReceiptListComponent implements OnInit, OnChanges, OnDestroy {
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _acqReceiptApiService - AcqReceiptApiService
-   * @param _recordPermissionService - RecordPermissionService
-   * @param _currentLibraryPermissionValidator - CurrentLibraryPermissionValidator
-   * @param _receivedOrderPermissionValidator - ReceivedOrderPermissionValidator
+   * @param acqReceiptApiService - AcqReceiptApiService
+   * @param recordPermissionService - RecordPermissionService
+   * @param currentLibraryPermissionValidator - CurrentLibraryPermissionValidator
+   * @param receivedOrderPermissionValidator - ReceivedOrderPermissionValidator
    */
   constructor(
-    private _acqReceiptApiService: AcqReceiptApiService,
-    private _recordPermissionService: RecordPermissionService,
-    private _currentLibraryPermissionValidator: CurrentLibraryPermissionValidator,
-    private _receivedOrderPermissionValidator: ReceivedOrderPermissionValidator
+    private acqReceiptApiService: AcqReceiptApiService,
+    private recordPermissionService: RecordPermissionService,
+    private currentLibraryPermissionValidator: CurrentLibraryPermissionValidator,
+    private receivedOrderPermissionValidator: ReceivedOrderPermissionValidator
   ) { }
 
   /** OnInit hook */
   ngOnInit(): void {
     this._loadPermissions();
     this._loadReceipts();
-    this._subscriptions.add(
-      this._acqReceiptApiService.deletedReceiptSubject$.subscribe((deletedReceipt: IAcqReceipt) => {
+    this.subscriptions.add(
+      this.acqReceiptApiService.deletedReceiptSubject$.subscribe((deletedReceipt: IAcqReceipt) => {
         this.receipts = this.receipts.filter((receipt: IAcqReceipt) => receipt.pid !== deletedReceipt.pid);
       })
     );
@@ -95,13 +95,13 @@ export class ReceiptListComponent implements OnInit, OnChanges, OnDestroy {
 
   /** OnDestroy hook */
   ngOnDestroy() {
-    this._subscriptions.unsubscribe();
+    this.subscriptions.unsubscribe();
   }
 
   // PRIVATE COMPONENT METHODS ================================================
   /** load receipts related to an order */
   private _loadReceipts(): void {
-    this._acqReceiptApiService
+    this.acqReceiptApiService
       .getReceiptsForOrder(this.order.pid)
       .subscribe((receipts: IAcqReceipt[]) => this.receipts = receipts);
   }
@@ -114,14 +114,14 @@ export class ReceiptListComponent implements OnInit, OnChanges, OnDestroy {
     if (this.recordPermissions) {
       const permissions$ = this.recordPermissions
         ? of(this.recordPermissions)
-        : this._recordPermissionService.getPermission('acq_orders', this.order.pid);
+        : this.recordPermissionService.getPermission('acq_orders', this.order.pid);
       const obsPermissions = permissions$
         .pipe(
-          map(permissions => this._currentLibraryPermissionValidator.validate(permissions, this.order.library.pid)),
-          map(permissions => this._receivedOrderPermissionValidator.validate(permissions, this.order))
+          map(permissions => this.currentLibraryPermissionValidator.validate(permissions, this.order.library.pid)),
+          map(permissions => this.receivedOrderPermissionValidator.validate(permissions, this.order))
         )
         .subscribe((permissions) => this.recordPermissions = permissions);
-      this._subscriptions.add(obsPermissions);
+      this.subscriptions.add(obsPermissions);
       }
     }
 }
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.html b/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.html
index 8d62b9d2d..1b655e7f7 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.html
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2023 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -16,62 +16,72 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <div class="row receipt">
-  <ng-container *ngIf="receipt else loading">
-    <!-- RECEIPT INFORMATION COLUMN ======================================= -->
+  @defer (when receipt) {
+    <!-- RECEIPT INFORMATION COLUMN -->
     <div class="col container">
       <div class="row">
         <!-- FIRST ROW :: receipt detail (always visible) -->
         <div class="col-9 d-flex">
-          <button type="button" class="btn-show-more"
-                  *ngIf="collapsable"
-                  [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
-                  (click)="isCollapsed = !isCollapsed"
-                  [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
-          </button>
+          @if (collapsable) {
+            <button type="button" class="btn-show-more"
+                    [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
+                    (click)="isCollapsed = !isCollapsed"
+                    [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
+            </button>
+          }
           <label>
-            <ng-container *ngIf="recordPermissions; else noLink">
+            @if (recordPermissions) {
               <a [routerLink]="['/records', 'acq_receipts', 'detail', receipt.pid]">{{ receipt.reference }}</a>
-            </ng-container>
-            <ng-template #noLink>{{ receipt.reference }}</ng-template>
-            <span class="reception-dates" *ngIf="receipt | receptionDates as reception_dates">
-              ({{ reception_dates.join(', ') }})
-            </span>
+            } @else {
+              {{ receipt.reference }}
+            }
+            @if (receipt | receptionDates; as reception_dates) {
+              <span class="reception-dates">
+                ({{ reception_dates.join(', ') }})
+              </span>
+            }
           </label>
-          <span class="bullet-notes" *ngIf="receipt.notes.length > 0 && isCollapsed">
-          <ng-container *ngFor="let note of receipt.notes">
-            <i class="fa fa-circle fa-bullet bullet-{{ note | noteBadgeColor }}" aria-hidden="true" title="{{ note.type | translate }}"></i>
-          </ng-container>
-        </span>
-          <div class="ml-auto" *ngIf="receipt.quantity">
-            <div class="badge badge-info small">
-              <i class="fa fa-sign-in mr-1"></i>
-              {{ receipt.quantity }}
-              {{ receipt.quantity | i18nPlural: {'=1': 'item', 'other': 'items'} | translate }}
+          @if (receipt.notes.length > 0 && isCollapsed) {
+            <span class="bullet-notes">
+              @for (note of receipt.notes; track note) {
+                <i class="fa fa-circle fa-bullet bullet-{{ note | noteBadgeColor }}" aria-hidden="true" title="{{ note.type | translate }}"></i>
+              }
+            </span>
+          }
+          @if (receipt.quantity) {
+            <div class="ml-auto">
+              <div class="badge badge-info small">
+                <i class="fa fa-sign-in mr-1"></i>
+                {{ receipt.quantity }}
+                {{ receipt.quantity | i18nPlural: {'=1': 'item', 'other': 'items'} | translate }}
+              </div>
             </div>
-          </div>
+          }
         </div>
         <div class="col-3 amount">
           <div class="total-amount">{{ receipt.total_amount | currency:receipt.currency:'symbol' }}</div>
         </div>
-        <ng-container *ngIf="!isCollapsed">
+        @if (!isCollapsed) {
           <!-- RECEPTION LINES ROWS :: One line for each reception line -->
-          <ng-container *ngFor="let line of receipt.receipt_lines; let first = first;">
+          @for (line of receipt.receipt_lines; track line; let first = $first) {
             <div class="col-9 detail label d-inline-block" [class.separator]="first">
               <strong>{{ line.quantity }}</strong><span class="mx-2">x</span>
               <a [routerLink]="['/records', 'documents', 'detail', line.document.pid]" target="acq-detail">
-                {{ line.document.title | truncateText }}
+                {{ $any(line).document.title | truncateText }}
               </a>
             </div>
             <div class="col-3 detail amount d-flex" [class.separator]="first">
               <div class="computation">
-                ({{ line.quantity }} x {{ line.amount | currency:receipt.currency:'symbol' }}<ng-container *ngIf="line.vat_rate">
-                + {{ line.vat_rate }}%</ng-container>)
+                ({{ line.quantity }} x {{ line.amount | currency:receipt.currency:'symbol' }}
+                @if (line.vat_rate) {
+                  + {{ line.vat_rate }}%
+                })
               </div>
               <div class="total-amount ml-auto">{{ line | receiptLineTotalAmount | currency:receipt.currency:'symbol' }}</div>
             </div>
-          </ng-container>
+          }
           <!-- RECEIPT ADJUSTMENTS :: One line for each adjustment -->
-          <ng-container *ngFor="let adjustment of receipt.amount_adjustments">
+          @for (adjustment of receipt.amount_adjustments; track adjustment) {
             <div class="col-9 detail label">
               <i class="fa fa-long-arrow-right mr-3"></i>
               {{ adjustment.label }}
@@ -79,52 +89,53 @@
             <div class="col-3 detail amount">
               <div class="total-amount">{{ adjustment.amount | currency:receipt.currency:'symbol' }}</div>
             </div>
-          </ng-container>
+          }
           <!-- RECEIPT NOTES -->
-          <ng-container *ngFor="let note of receipt.notes">
+          @for (note of receipt.notes; track note) {
             <div class="col-9 detail label">
               <span class="mr-3 badge badge-{{ note | noteBadgeColor }}">{{ note.type | translate }}</span>
               <span [innerHTML]="note.content | nl2br"></span>
             </div>
             <div class="col-3 detail amount">&nbsp;</div>
-          </ng-container>
-        </ng-container>
+          }
+        }
       </div>
     </div>
-    <!-- ACTION BUTTON COLUMN ============================================= -->
-    <div class="col-2 actions-column pl-0 text-right" *ngIf="recordPermissions && allowActions">
-      <!-- CONTINUE BUTTON ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-      <shared-action-button
-        [title]="'Resume' | translate"
-        [class]="'btn-outline-primary mr-1'"
-        [disabled]="!recordPermissions.create.can"
-        [url]="['/', 'acquisition', 'acq_orders', receipt.acq_order.pid, 'receive']"
-        [queryParams]="{ receipt: receipt.pid }"
-        [message]="resumeInfoMessage"
-      >
-        <i class="fa fa-forward"></i> {{ 'Resume' | translate }}
-      </shared-action-button>
-      <shared-action-button
-        [title]="'Edit' | translate"
-        [class]="'btn-outline-primary mr-1'"
-        [disabled]="!recordPermissions.update.can"
-        [url]="['/records', 'acq_receipts', 'edit', receipt.pid]"
-        [message]="editInfoMessage"
-      >
-        <i class="fa fa-pencil"></i>
-      </shared-action-button>
-      <shared-action-button
-        [title]="'Delete' | translate"
-        [class]="'btn-outline-danger'"
-        [disabled]="!recordPermissions.delete.can"
-        [message]="deleteInfoMessage"
-        (btnClick)="deleteReceipt()"
-      >
-        <i class="fa fa-trash"></i>
-      </shared-action-button>
-    </div>
-  </ng-container>
+    <!-- ACTION BUTTON COLUMN -->
+    @if (recordPermissions && allowActions) {
+      <div class="col-2 actions-column pl-0 text-right">
+        <!-- CONTINUE BUTTON ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
+        <shared-action-button
+          [title]="'Resume' | translate"
+          [class]="'btn-outline-primary mr-1'"
+          [disabled]="!recordPermissions.create.can"
+          [url]="['/', 'acquisition', 'acq_orders', receipt.acq_order.pid, 'receive']"
+          [queryParams]="{ receipt: receipt.pid }"
+          [message]="resumeInfoMessage"
+        >
+          <i class="fa fa-forward"></i> {{ 'Resume' | translate }}
+        </shared-action-button>
+        <shared-action-button
+          [title]="'Edit' | translate"
+          [class]="'btn-outline-primary mr-1'"
+          [disabled]="!recordPermissions.update.can"
+          [url]="['/records', 'acq_receipts', 'edit', receipt.pid]"
+          [message]="editInfoMessage"
+        >
+          <i class="fa fa-pencil"></i>
+        </shared-action-button>
+        <shared-action-button
+          [title]="'Delete' | translate"
+          [class]="'btn-outline-danger'"
+          [disabled]="!recordPermissions.delete.can"
+          [message]="deleteInfoMessage"
+          (btnClick)="deleteReceipt()"
+        >
+          <i class="fa fa-trash"></i>
+        </shared-action-button>
+      </div>
+    }
+  } @placeholder {
+    <i class="fa fa-spinner fa-pulse py-2"></i>
+  }
 </div>
-<ng-template #loading>
-  <i class="fa fa-spinner fa-pulse py-2"></i>
-</ng-template>
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.ts b/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.ts
index 8c923be9c..5398c509d 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.ts
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,13 +16,13 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Component, Input, OnInit } from '@angular/core';
-import { forkJoin } from 'rxjs';
-import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { RecordPermissions } from '@app/admin/classes/permissions';
+import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { CurrentLibraryPermissionValidator } from '@app/admin/utils/permissions';
-import { IAcqReceipt } from '../../../classes/receipt';
+import { forkJoin } from 'rxjs';
 import { AcqOrderApiService } from '../../../api/acq-order-api.service';
 import { AcqReceiptApiService } from '../../../api/acq-receipt-api.service';
+import { IAcqReceipt } from '../../../classes/receipt';
 import { ReceivedOrderPermissionValidator } from '../../../utils/permissions';
 
 @Component({
@@ -52,35 +52,35 @@ export class ReceiptSummaryComponent implements OnInit {
    */
   get deleteInfoMessage(): string {
     return (!this.recordPermissions.delete.can)
-      ? this._recordPermissionService.generateDeleteMessage(this.recordPermissions.delete.reasons)
+      ? this.recordPermissionService.generateDeleteMessage(this.recordPermissions.delete.reasons)
       : '';
   }
   get editInfoMessage(): string {
     return (!this.recordPermissions.update.can)
-      ? this._recordPermissionService.generateTooltipMessage(this.recordPermissions.update.reasons, 'update')
+      ? this.recordPermissionService.generateTooltipMessage(this.recordPermissions.update.reasons, 'update')
       : '';
   }
   get resumeInfoMessage(): string {
     return (!this.recordPermissions.create.can)
-      ? this._recordPermissionService.generateTooltipMessage(this.recordPermissions.create.reasons, 'resume')
+      ? this.recordPermissionService.generateTooltipMessage(this.recordPermissions.create.reasons, 'resume')
       : '';
   }
 
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _recordPermissionService - RecordPermissionService
-   * @param _acqReceiptApiService - AcqReceiptApiService
-   * @param _acqOrderApiService - AcqOrderApiService
-   * @param _currentLibraryPermissionValidator - CurrentLibraryPermissionValidator
-   * @param _receivedOrderPermissionValidator - ReceivedOrderPermissionValidator
+   * @param recordPermissionService - RecordPermissionService
+   * @param acqReceiptApiService - AcqReceiptApiService
+   * @param acqOrderApiService - AcqOrderApiService
+   * @param currentLibraryPermissionValidator - CurrentLibraryPermissionValidator
+   * @param receivedOrderPermissionValidator - ReceivedOrderPermissionValidator
    */
   constructor(
-    private _recordPermissionService: RecordPermissionService,
-    private _acqReceiptApiService: AcqReceiptApiService,
-    private _acqOrderApiService: AcqOrderApiService,
-    private _currentLibraryPermissionValidator: CurrentLibraryPermissionValidator,
-    private _receivedOrderPermissionValidator: ReceivedOrderPermissionValidator
+    private recordPermissionService: RecordPermissionService,
+    private acqReceiptApiService: AcqReceiptApiService,
+    private acqOrderApiService: AcqOrderApiService,
+    private currentLibraryPermissionValidator: CurrentLibraryPermissionValidator,
+    private receivedOrderPermissionValidator: ReceivedOrderPermissionValidator
   ) { }
 
   /** OnInit hook */
@@ -92,18 +92,18 @@ export class ReceiptSummaryComponent implements OnInit {
     if (!this.recordPermissions) {
       this.allowActions = false;
     }
-    this._acqReceiptApiService
+    this.acqReceiptApiService
       .getReceipt(this.receiptPid)
       .subscribe((receipt: IAcqReceipt) => {
         this.receipt = receipt;
         // Load permissions only if we need to display the action buttons
         if (this.allowActions) {
-          const order$ = this._acqOrderApiService.getOrder(this.receipt.acq_order.pid);
-          const permissions$ = this._recordPermissionService.getPermission('acq_receipts', this.receipt.pid);
+          const order$ = this.acqOrderApiService.getOrder(this.receipt.acq_order.pid);
+          const permissions$ = this.recordPermissionService.getPermission('acq_receipts', this.receipt.pid);
           forkJoin([order$, permissions$]).subscribe(
             ([order, permissions]) => {
-              this.recordPermissions = this._currentLibraryPermissionValidator.validate(permissions, this.receipt.library.pid);
-              this.recordPermissions = this._receivedOrderPermissionValidator.validate(permissions, order);
+              this.recordPermissions = this.currentLibraryPermissionValidator.validate(permissions, this.receipt.library.pid);
+              this.recordPermissions = this.receivedOrderPermissionValidator.validate(permissions, order);
             }
           );
         }
@@ -113,6 +113,6 @@ export class ReceiptSummaryComponent implements OnInit {
   // COMPONENT FUNCTIONS ======================================================
   /** Delete a receipt */
   deleteReceipt(): void {
-    this._acqReceiptApiService.delete(this.receipt);
+    this.acqReceiptApiService.delete(this.receipt);
   }
 }
diff --git a/projects/admin/src/app/acquisition/formly/type/repeat-section.type.ts b/projects/admin/src/app/acquisition/formly/type/repeat-section.type.ts
index 8c7c0cdf9..059da3da9 100644
--- a/projects/admin/src/app/acquisition/formly/type/repeat-section.type.ts
+++ b/projects/admin/src/app/acquisition/formly/type/repeat-section.type.ts
@@ -22,44 +22,59 @@ import { FieldArrayType } from '@ngx-formly/core';
   template: `
     <div class="card my-2">
       <div class="card-header">
-        <label
-          *ngIf="field.props.label || field.props.addButton" class="col" [ngClass]="field.props.className">
-          <span *ngIf="field.props.label" >{{ field.props.label }}</span>
-          <button *ngIf="field.props.addButton"
-                  type="button"
-                  class="btn btn-link text-secondary btn-sm ng-star-inserted"
-                  (click)="add()">
-            <i class="fa fa-clone"></i>
-          </button>
-        </label>
+        @if (field.props.label || field.props.addButton) {
+          <label class="col" [ngClass]="field.props.className">
+            @if (field.props.label) {
+              <span>{{ field.props.label }}</span>
+            }
+            @if (field.props.addButton) {
+              <button type="button"
+                      class="btn btn-link text-secondary btn-sm ng-star-inserted"
+                      (click)="add()">
+                <i class="fa fa-clone"></i>
+              </button>
+            }
+          </label>
+        }
       </div>
-      <div class="card-body" *ngIf="field.fieldGroup.length > 0">
-        <div class="row">
-          <div [ngClass]="field.props.trashButton ? 'col-11': 'col-12'">
-            <div class="row">
-              <ng-container *ngFor="let field of field.fieldGroup[0].fieldGroup">
-                <ng-container *ngIf="field.className">
-                  <div class="{{ field.props.headerClassName }}">
-                    {{ field.props.label }}
-                    <ng-container *ngIf="field.props.required">&nbsp;*</ng-container>
-                  </div>
-                </ng-container>
-              </ng-container>
+      @if (field.fieldGroup.length > 0) {
+        <div class="card-body">
+          <div class="row">
+            <div [ngClass]="field.props.trashButton ? 'col-11': 'col-12'">
+              <div class="row">
+                @for (field of field.fieldGroup[0].fieldGroup; track field) {
+                  @if (field.className) {
+                    <div class="{{ field.props.headerClassName }}">
+                      {{ field.props.label }}
+                      @if (field.props.required) {
+                        &nbsp;*
+                      }
+                    </div>
+                  }
+                }
+              </div>
             </div>
           </div>
-        </div>
-        <div *ngFor="let f of field.fieldGroup; let i = index;" class="row" [ngClass]="{ 'bg-light': i % 2 }">
-          <ng-container *ngIf="f.fieldGroup.length > 0">
-            <formly-field class="col" [field]="f"></formly-field>
-            <div *ngIf="field.props.trashButton" class="col-1 d-flex align-items-center">
-              <button class="btn btn-link text-secondary btn-sm" type="button" (click)="remove(i)" *ngIf="showTrash">
-                <i class="fa fa-trash"></i>
-              </button>
-              <ng-container *ngIf="!showTrash">&nbsp;</ng-container>
+          @for (f of field.fieldGroup; track f; let i = $index) {
+            <div class="row" [ngClass]="{ 'bg-light': i % 2 }">
+              @if (f.fieldGroup.length > 0) {
+                <formly-field class="col" [field]="f"></formly-field>
+                @if (field.props.trashButton) {
+                  <div class="col-1 d-flex align-items-center">
+                    @if (showTrash) {
+                      <button class="btn btn-link text-secondary btn-sm" type="button" (click)="remove(i)">
+                        <i class="fa fa-trash"></i>
+                      </button>
+                    } @else {
+                      &nbsp;
+                    }
+                  </div>
+                }
+              }
             </div>
-          </ng-container>
+          }
         </div>
-      </div>
+      }
     </div>
   `
 })
diff --git a/projects/admin/src/app/acquisition/formly/type/select-account/select-account.component.html b/projects/admin/src/app/acquisition/formly/type/select-account/select-account.component.html
index d2e7bae18..f25e1bfb7 100644
--- a/projects/admin/src/app/acquisition/formly/type/select-account/select-account.component.html
+++ b/projects/admin/src/app/acquisition/formly/type/select-account/select-account.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -27,31 +27,33 @@
       <span class="caret ml-auto"></span>
     </button>
     <div id="dropdown-basic" *dropdownMenu class="dropdown-menu w-100" role="menu" aria-labelledby="button-basic">
-      <ng-container *ngIf="accountList.length; else noResult">
-        <a *ngFor="let account of accountList"
-           href="#"
-           class="dropdown-item account d-flex"
-           (click)="$event.preventDefault(); selectAccount(account); dropdown.hide()"
-        >
-          <div class="pr-5">
-            {{ account.depth > 0 ? '&nbsp;&nbsp;&nbsp;&nbsp;'.repeat(account.depth) + ' ' : '' }}
-            {{ account.name }}
-          </div>
-          <div class="ml-auto pl-5 d-flex">
-            <div class="number" *ngIf="account.number">{{ account.number }}</div>
-            <div class="amount" [class]="{
-                'text-success': account.remaining_balance.self > 0,
-                'text-muted': account.remaining_balance.self === 0,
-                'text-warning': account.remaining_balance.self < 0
-            }">
-              {{ account.remaining_balance.self | currency: currency }}
+      @if (accountList.length) {
+        @for (account of accountList; track account) {
+          <a href="#"
+             class="dropdown-item account d-flex"
+             (click)="$event.preventDefault(); selectAccount(account); dropdown.hide()"
+          >
+            <div class="pr-5">
+              {{ account.depth > 0 ? '&nbsp;&nbsp;&nbsp;&nbsp;'.repeat(account.depth) + ' ' : '' }}
+              {{ account.name }}
             </div>
-          </div>
-        </a>
-      </ng-container>
-      <ng-template #noResult>
+            <div class="ml-auto pl-5 d-flex">
+              @if (account.number) {
+                <div class="number">{{ account.number }}</div>
+              }
+              <div class="amount" [class]="{
+                  'text-success': account.remaining_balance.self > 0,
+                  'text-muted': account.remaining_balance.self === 0,
+                  'text-warning': account.remaining_balance.self < 0
+              }">
+                {{ account.remaining_balance.self | currency: currency }}
+              </div>
+            </div>
+          </a>
+        }
+      } @else {
         <p class="m-0 px-4 py-2 text-muted" translate>No result</p>
-      </ng-template>
+      }
     </div>
   </div>
   <div class="invalid-feedback" [ngClass]="{'d-block': formControl.invalid}" translate>
diff --git a/projects/admin/src/app/acquisition/formly/type/select-account/select-account.component.ts b/projects/admin/src/app/acquisition/formly/type/select-account/select-account.component.ts
index ea2e6a80e..f18c9d44c 100644
--- a/projects/admin/src/app/acquisition/formly/type/select-account/select-account.component.ts
+++ b/projects/admin/src/app/acquisition/formly/type/select-account/select-account.component.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
  * Copyright (C) 2021-2024 RERO
- * Copyright (C) 2021-2024 UCLouvain
+ * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -16,9 +16,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { IAcqAccount } from '@app/admin/acquisition/classes/account';
 import { FieldType } from '@ngx-formly/core';
 import { ApiService } from '@rero/ng-core';
-import { IAcqAccount } from '@app/admin/acquisition/classes/account';
 
 @Component({
   selector: 'admin-select-account',
@@ -36,12 +36,12 @@ export class SelectAccountComponent extends FieldType implements OnInit {
 
   /**
    * Constructor
-   * @param _changeDetectorRef - ChangeDetectorRef
-   * @param _apiService - ApiService
+   * @param changeDetectorRef - ChangeDetectorRef
+   * @param apiService - ApiService
    */
   constructor(
-    private _changeDetectorRef: ChangeDetectorRef,
-    private _apiService: ApiService) {
+    private changeDetectorRef: ChangeDetectorRef,
+    private apiService: ApiService) {
     super();
   }
 
@@ -64,9 +64,9 @@ export class SelectAccountComponent extends FieldType implements OnInit {
    * @param account - The selected account.
    */
   selectAccount(account: IAcqAccount): void {
-    const accountRef = this._apiService.getRefEndpoint('acq_accounts', account.pid);
+    const accountRef = this.apiService.getRefEndpoint('acq_accounts', account.pid);
     this.selectedAccount = account;
     this.formControl.patchValue(accountRef);
-    this._changeDetectorRef.markForCheck();
+    this.changeDetectorRef.markForCheck();
   }
 }
diff --git a/projects/admin/src/app/acquisition/formly/wrapper/input-no-label.wrapper.ts b/projects/admin/src/app/acquisition/formly/wrapper/input-no-label.wrapper.ts
index f25583e31..89d27689b 100644
--- a/projects/admin/src/app/acquisition/formly/wrapper/input-no-label.wrapper.ts
+++ b/projects/admin/src/app/acquisition/formly/wrapper/input-no-label.wrapper.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -22,9 +22,11 @@ selector: 'admin-formly-input-no-label-wrapper',
 template: `
   <div class="my-2">
     <ng-container #fieldComponent></ng-container>
-    <div *ngIf="showError" class="invalid-feedback d-block">
-      <formly-validation-message [field]="field"></formly-validation-message>
-    </div>
+    @if (showError) {
+      <div class="invalid-feedback d-block">
+        <formly-validation-message [field]="field"></formly-validation-message>
+      </div>
+    }
   </div>
   `
 })
diff --git a/projects/admin/src/app/acquisition/pipes/note-badge-color.pipe.ts b/projects/admin/src/app/acquisition/pipes/note-badge-color.pipe.ts
index 6d9be62ea..6f60b1af7 100644
--- a/projects/admin/src/app/acquisition/pipes/note-badge-color.pipe.ts
+++ b/projects/admin/src/app/acquisition/pipes/note-badge-color.pipe.ts
@@ -26,7 +26,7 @@ export class NoteBadgeColorPipe implements PipeTransform {
   /**
    * Get the color (class) to use to highlight a note.
    * @param note: the note to analyze
-   * @return: the color/class (boostrap) to use for the note.
+   * @return: the color/class (bootstrap) to use for the note.
    */
   transform(note: IAcqNote): string {
     switch (note.type) {
diff --git a/projects/admin/src/app/acquisition/routes/accounts-route.ts b/projects/admin/src/app/acquisition/routes/accounts-route.ts
index e152fdc76..8af7a7508 100644
--- a/projects/admin/src/app/acquisition/routes/accounts-route.ts
+++ b/projects/admin/src/app/acquisition/routes/accounts-route.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
  * Copyright (C) 2022-2024 RERO
- * Copyright (C) 2022-2024 UCLouvain
+ * Copyright (C) 2022-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
diff --git a/projects/admin/src/app/acquisition/routes/guards/abstract-can-add.guard.ts b/projects/admin/src/app/acquisition/routes/guards/abstract-can-add.guard.ts
index 9efafb6c7..94e402d70 100644
--- a/projects/admin/src/app/acquisition/routes/guards/abstract-can-add.guard.ts
+++ b/projects/admin/src/app/acquisition/routes/guards/abstract-can-add.guard.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -24,12 +24,12 @@ export abstract class AbstractCanAddGuard {
 
   /**
    * Constructor
-   * @param _recordService - RecordService
-   * @param _router - Router
+   * @param recordService - RecordService
+   * @param router - Router
    */
    protected constructor(
-    protected _recordService: RecordService,
-    protected _router: Router
+    protected recordService: RecordService,
+    protected router: Router
   ) {}
 
   /**
@@ -48,17 +48,17 @@ export abstract class AbstractCanAddGuard {
    * @returns Observable boolean
    */
   protected canAdd(resource: string, pid: string): Observable<boolean> {
-    return this._recordService.getRecord(resource, pid, 0, BaseApi.reroJsonheaders).pipe(
+    return this.recordService.getRecord(resource, pid, 0, BaseApi.reroJsonheaders).pipe(
       map((record: any) => record.metadata),
       map((record: any) => {
         if (!('is_current_budget' in record) || !record.is_current_budget) {
-          this._router.navigate(['/errors/403'], { skipLocationChange: true });
+          this.router.navigate(['/errors/403'], { skipLocationChange: true });
           return false;
         }
         return true;
       }),
       catchError(() => {
-        this._router.navigate(['/errors/404'], { skipLocationChange: true });
+        this.router.navigate(['/errors/404'], { skipLocationChange: true });
         return of(false);
       })
     );
diff --git a/projects/admin/src/app/acquisition/routes/guards/can-add-account.guard.ts b/projects/admin/src/app/acquisition/routes/guards/can-add-account.guard.ts
index 99461dd74..09aed693d 100644
--- a/projects/admin/src/app/acquisition/routes/guards/can-add-account.guard.ts
+++ b/projects/admin/src/app/acquisition/routes/guards/can-add-account.guard.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -27,14 +27,14 @@ export class CanAddAccountGuard extends AbstractCanAddGuard  {
 
   /**
    * Constructor
-   * @param _recordService - RecordService
-   * @param _router - Router
+   * @param recordService - RecordService
+   * @param router - Router
    */
    constructor(
-    _recordService: RecordService,
-    _router: Router
+    recordService: RecordService,
+    router: Router
   ) {
-    super(_recordService, _router);
+    super(recordService, router);
   }
 
   /**
@@ -46,7 +46,7 @@ export class CanAddAccountGuard extends AbstractCanAddGuard  {
   canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
     const budgetPid = route.queryParams.budget;
     if (!budgetPid) {
-      this._router.navigate(['/errors/400'], { skipLocationChange: true });
+      this.router.navigate(['/errors/400'], { skipLocationChange: true });
       return of(false);
     }
     return this.canAdd('budgets', budgetPid);
diff --git a/projects/admin/src/app/acquisition/routes/guards/can-add-order-line.guard.ts b/projects/admin/src/app/acquisition/routes/guards/can-add-order-line.guard.ts
index 3e2b03a25..fc419e6db 100644
--- a/projects/admin/src/app/acquisition/routes/guards/can-add-order-line.guard.ts
+++ b/projects/admin/src/app/acquisition/routes/guards/can-add-order-line.guard.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -27,14 +27,14 @@ export class CanAddOrderLineGuard extends AbstractCanAddGuard  {
 
   /**
    * Constructor
-   * @param _recordService - RecordService
-   * @param _router - Router
+   * @param recordService - RecordService
+   * @param router - Router
    */
    constructor(
-    _recordService: RecordService,
-    _router: Router
+    recordService: RecordService,
+    router: Router
   ) {
-    super(_recordService, _router);
+    super(recordService, router);
   }
 
   /**
@@ -46,7 +46,7 @@ export class CanAddOrderLineGuard extends AbstractCanAddGuard  {
   canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
     const orderPid = route.queryParams.order;
     if (!orderPid) {
-      this._router.navigate(['/errors/400'], { skipLocationChange: true });
+      this.router.navigate(['/errors/400'], { skipLocationChange: true });
       return of(false);
     }
     return this.canAdd('acq_orders', orderPid);
diff --git a/projects/admin/src/app/acquisition/routes/guards/can-order-receipt.guard.ts b/projects/admin/src/app/acquisition/routes/guards/can-order-receipt.guard.ts
index 662dfd12f..acaaecd60 100644
--- a/projects/admin/src/app/acquisition/routes/guards/can-order-receipt.guard.ts
+++ b/projects/admin/src/app/acquisition/routes/guards/can-order-receipt.guard.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -18,7 +18,7 @@ import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { extractIdOnRef } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
-import { combineLatest, Observable, of } from 'rxjs';
+import { Observable, combineLatest, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { AcqOrderApiService } from '../../api/acq-order-api.service';
 import { AcqReceiptApiService } from '../../api/acq-receipt-api.service';
@@ -32,16 +32,16 @@ export class CanOrderReceiptGuard  {
 
   /**
    * Constructor
-   * @param _acqOrderApiService - AcqOrderApiService
-   * @param _acqReceiptApiService - AcqReceiptApiService
-   * @param _router - Router
-   * @param _userService - UserService
+   * @param acqOrderApiService - AcqOrderApiService
+   * @param acqReceiptApiService - AcqReceiptApiService
+   * @param router - Router
+   * @param userService - UserService
    */
   constructor(
-    private _acqOrderApiService: AcqOrderApiService,
-    private _acqReceiptApiService: AcqReceiptApiService,
-    private _router: Router,
-    private _userService: UserService
+    private acqOrderApiService: AcqOrderApiService,
+    private acqReceiptApiService: AcqReceiptApiService,
+    private router: Router,
+    private userService: UserService
   ) {}
 
   /**
@@ -58,7 +58,7 @@ export class CanOrderReceiptGuard  {
           return this._orderQuery(orderPid).pipe(
             map((validate: boolean) => {
               if (!validate) {
-                this._router.navigate(['/errors/403'], { skipLocationChange: true });
+                this.router.navigate(['/errors/403'], { skipLocationChange: true });
                 return false;
               }
               return true;
@@ -71,7 +71,7 @@ export class CanOrderReceiptGuard  {
           ]).pipe(
             map(([order, receipt]) => {
               if (!order || !receipt) {
-                this._router.navigate(['/errors/403'], { skipLocationChange: true });
+                this.router.navigate(['/errors/403'], { skipLocationChange: true });
                 return false;
               }
               return true;
@@ -79,7 +79,7 @@ export class CanOrderReceiptGuard  {
           );
         }
       } else {
-        this._router.navigate(['/errors/400'], { skipLocationChange: true });
+        this.router.navigate(['/errors/400'], { skipLocationChange: true });
         return of(false);
       }
   }
@@ -92,9 +92,9 @@ export class CanOrderReceiptGuard  {
    * @returns Observable<boolean>: True if a receipt could be managed, False otherwise
    */
   private _orderQuery(orderPid: string): Observable<boolean> {
-    return this._acqOrderApiService.getOrder(orderPid).pipe(
+    return this.acqOrderApiService.getOrder(orderPid).pipe(
         map((order: IAcqOrder) => {
-          if (this._userService.user.currentLibrary !== extractIdOnRef(order.library.$ref)) {
+          if (this.userService.user.currentLibrary !== extractIdOnRef(order.library.$ref)) {
             return false;
           }
           if (!order.is_current_budget) {
@@ -114,7 +114,7 @@ export class CanOrderReceiptGuard  {
    * @returns Observable<boolean>: True if the receipt is well related to this order
    */
   private _receiptQuery(receiptPid: string, orderPid: string): Observable<boolean> {
-    return this._acqReceiptApiService.getReceipt(receiptPid).pipe(
+    return this.acqReceiptApiService.getReceipt(receiptPid).pipe(
         map((receipt: IAcqReceipt) => orderPid === receipt.acq_order.pid),
         catchError(() => of(false))
       );
diff --git a/projects/admin/src/app/acquisition/routes/guards/is-budget-active.guard.ts b/projects/admin/src/app/acquisition/routes/guards/is-budget-active.guard.ts
index 776488c20..565003807 100644
--- a/projects/admin/src/app/acquisition/routes/guards/is-budget-active.guard.ts
+++ b/projects/admin/src/app/acquisition/routes/guards/is-budget-active.guard.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -28,12 +28,12 @@ export class IsBudgetActiveGuard  {
 
   /**
    * Constructor
-   * @param _recordService - RecordService
-   * @param _router - Router
+   * @param recordService - RecordService
+   * @param router - Router
    */
   constructor(
-    private _recordService: RecordService,
-    private _router: Router
+    private recordService: RecordService,
+    private router: Router
   ) {}
 
   /**
@@ -42,16 +42,15 @@ export class IsBudgetActiveGuard  {
    * @returns Observable boolean
    */
   canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
-    const type = route.params.type;
-    const pid = route.params.pid;
+    const {type, pid} = route.params;
     if (!type || !pid) {
       return of(false);
     }
-    return this._recordService.getRecord(type, pid, 0, BaseApi.reroJsonheaders).pipe(
+    return this.recordService.getRecord(type, pid, 0, BaseApi.reroJsonheaders).pipe(
       map(record => ('metadata' in record) ? record.metadata : record),
       map(record => {
         if (!('is_current_budget' in record) || !record.is_current_budget) {
-          this._router.navigate(['/errors/403'], { skipLocationChange: true });
+          this.router.navigate(['/errors/403'], { skipLocationChange: true });
           return false;
         }
         return true;
diff --git a/projects/admin/src/app/acquisition/routes/order-lines-route.ts b/projects/admin/src/app/acquisition/routes/order-lines-route.ts
index 6844eec6e..7b514ea66 100644
--- a/projects/admin/src/app/acquisition/routes/order-lines-route.ts
+++ b/projects/admin/src/app/acquisition/routes/order-lines-route.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
  * Copyright (C) 2021-2024 RERO
- * Copyright (C) 2021-2024 UCLouvain
+ * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
diff --git a/projects/admin/src/app/acquisition/routes/receipt-lines-route.ts b/projects/admin/src/app/acquisition/routes/receipt-lines-route.ts
index 7cc778f36..3f022de87 100644
--- a/projects/admin/src/app/acquisition/routes/receipt-lines-route.ts
+++ b/projects/admin/src/app/acquisition/routes/receipt-lines-route.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
  * Copyright (C) 2021-2024 RERO
- * Copyright (C) 2021-2024 UCLouvain
+ * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
diff --git a/projects/admin/src/app/app.component.html b/projects/admin/src/app/app.component.html
index 71d89fd35..e33e3310a 100644
--- a/projects/admin/src/app/app.component.html
+++ b/projects/admin/src/app/app.component.html
@@ -18,31 +18,37 @@
 <ngx-spinner color="#fff" size="medium" type="ball-zig-zag" [fullScreen]="true">
   <p class="text-white" translate>Loading…</p>
 </ngx-spinner>
-<ng-container *ngIf="user">
+@if (user) {
   <header>
-    <admin-menu *ngIf="user.hasAdminUiAccess"></admin-menu>
+    @if (user.hasAdminUiAccess) {
+      <admin-menu></admin-menu>
+    }
   </header>
-  <div class="container-fluid px-5" *ngIf="user.hasAdminUiAccess; else noaccess">
-    <router-outlet></router-outlet>
-  </div>
+  @if (user.hasAdminUiAccess) {
+    <div class="container-fluid px-5">
+      <router-outlet></router-outlet>
+    </div>
+  } @else {
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark d-flex">
+      <div class="container-fluid px-5">
+        <span class="navbar-brand">
+          <img id="homepage-logo" class="logo" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAjMAAAEwCAYAAABCLvDxAAACAWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6YXV4PSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wL2F1eC8iCiAgICB4bWxuczpleGlmRVg9Imh0dHA6Ly9jaXBhLmpwL2V4aWYvMS4wLyIKICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICBhdXg6TGVucz0iIgogICBleGlmRVg6TGVuc01vZGVsPSIiCiAgIHRpZmY6SW1hZ2VMZW5ndGg9IjMwNCIKICAgdGlmZjpJbWFnZVdpZHRoPSI1NjMiLz4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz7a1B+XAAABgmlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kctLQkEUhz/NMEwxqEWLFhLZSqMHSG2ClLAgQswgq43efARql3uNkLZB26AgatNrUX9BbYPWQVAUQQTtWhe1Kbmdq4IReYYz55vfzDnMnAFrLKfkdVs/5AtFLRoOeubi8x77Cw6cuPBiSyi6OhaJTNHQPu+xmPHWb9ZqfO5fa11K6QpYWoRHFVUrCk8IT60VVZN3hDuUbGJJ+EzYp8kFhe9MPVnlV5MzVf42WYtFQ2BtE/ZkfnHyFytZLS8sL6cnn1tVavcxX+JMFWZnJHaLd6ETJUwQD5OMEyLAACMyB/AzSJ+saJDfX8mfZkVyFZlVSmgskyFLEZ+oq1I9JTEtekpGjpLZ/7991dNDg9XqziA0PxvGuxfs21DeMoyvI8MoH0PTE1wW6vkrhzD8IfpWXes5APcGnF/VteQuXGxC56Oa0BIVqUncmk7D2ym44tB+A46Fas9q+5w8QGxdvuoa9vahV867F38AFCFnwJeX+MYAAAAJcEhZcwAALiMAAC4jAXilP3YAACAASURBVHic7d13mB1V4cbx79lsGiSBEGJo0olDCXWA0Beli4AIIgLCABYULCjiTxEpihVEsYHoINIFEbAgIoQW2iSUQDIQAkgooaQXSNvz+2MmkCy72d17595z5t738zz3SUJ2Z15ImPveM2fOMYg0gSBOLgdOquBbbS9/77I0Ck+p4DwiIlKhVtcBRDxnevF7E4Gv1zCLiIh0osV1AJEG8Q5wVBqFC1wHERFpNiozIsX4chqFT7kOISLSjFRmRKp3PXC56xAiIs1KZUakOs8Dn0ujcGUThUVEpIZUZkQqt5hsnswc10FERJqZyoxI5U5PozBxHUJEpNmpzIhU5rw0Cn/lOoSIiKjMiFTiYuAc1yFERCSjMiPSO5eT3V7ShF8REU+ozIj03PXAF1RkRET8ojIj0jN/B45Lo3Cp6yAiIrIilRmR7t0FHJlG4WLXQURE5P1UZkRW7lbg0DQK33EdREREOqcyI9K1HwIfT6NwnusgIiLStVbXAUQ8tBA4KY3Cq10HERGR7qnMiKxoGnBYGoUPuw4iIiI9ozIj8p7xZPNjXnYdREREek5zZkQyfwH2UJERESkflRlpdrOAE8l2v17gOoyIiPSebjNJM/sL8OU0Cqe5DiIiIpVTmZFm9CrwxTQKb3EdREREqqfbTNJsLgW2UJEREWkcGpmRZvEssFcahfe6DiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiFTOuA5RJECcGGAIM7eS1GjAfeH35VxqF89ykbV5BnPQFRgCD8teqHV6DgIHAQrI/s3n5j8v/fAbZn5+td36R7uR/xzu7Dg0FBgBvsuK16I00Cpe6Sdu8gjgZAgxjxetQx5/3ARbQ+XVoPjAHXYu6pTLThSBO+gCbA2H+2hHYBujfy0MtAF4FHgHuB+4DJqZR2F5c2uYTxMkawCbAxsu9lv16PbILRLUWAM8DzwFT8h+fAyanUfi/Ao4v0q0gTlbjvWvQsuvRBr08jAWmA5OBB8iuQ/enUTijwKhNJ3+fWJ/3X4OWvYYWdKqFwP/IrkPPd3zpQ7PKzLvyUZetgU8BuwPbA6vU6HQzeO+C8gddUFYuiJNWYFtgN2DX/LWe01AwjezP7978NUGfnKQIQZwMBA7JXzsCm1Kba7UFJpH9Pf5HGoW31eAcDSWIkzV57xq0K1mxHOg0VPbn+CwwdrnXpGa7HjV9mQniZAPg08AxwJYOIoxOo/BhB+f1VhAnqwB781552ZHaFcuizCAbeRsD/FUjN9Ib+Sf8j5Bdhz4ODK5zhHFpFIZ1Pqf3gjjZBPgw2XVoN2Azt4l6bAbwEFmxuQ8Ym0bhEreRassEceJjG78njcKf1erg+ZvlccCxZKMwLqnMAEGcDAYOBj4BHIj/5WVlLNnI29XADRp5614QJx8FvuA6Rye+mkbhlFodPIiTrYCTyUaER9TqPD2gMpML4mRz4Ij8tbXjOEWZDtwC3Aj8N43CRY7zFK6V7A3EN3NqcdAgTvqRXTi+C6xVi3NIzwVxsjrZUPoRwH70fj6SrwxZSd4d+EUQJ7eTFZtb0yh8x2kyf22En9eic2px0CBONgXOIysxTT9C7loQJ9uQfZA6gmyuZKMZBpyYv2blgxg3Af9ulGtSq+sA9ZAP4X4aOJfsoikOBXHyEeA04CCgr+M4tdaP9+Y/vBXEyc+BX6VRWJPCLn4L4mRd4GyyN5WmuP76Kv8wdRLwecpz+6gIq5PdmTgOmBfEyQ3AL9MofMJtrOo09P9M+aTeQ4Af4GY+jOTySY3HAl8GtnIcx5U1yf4unhHEySXAxboF1RyCOBkKfBs4lezRaXEkiJMPkV2Hjid7PLqZDSIfsQniZAzwC7IR5NI9bduwZSZ/nPF3ZMO44kgQJ+sBXwI+SzbUKdkno+8CXwvi5LfAhWkUvu44k9RIECd7A1cB67jO0syCONkf+ApwALq115m2/PVCECe/InvSdrbTRL3QkGUmiJPRwLXAho6jNK0gTjYCzgeOokH/nhVgEHAGcEoQJ2cBl5TxE5F0Ll9S4FzgW0CL4zhNK4iTT5LNfWrEuTC1sBFwIXBuECeXAj9Io3Cm40zdaqg3mSBOWoAzyd5Ei1g0TXopH04/i2w4vZ/jOGUxCLgYOCaIk8+lUfi460BSnSBONgSuAXZxHKVpBXGyG/AzYLTrLCU1CPg62S2o75PN9fP2KaiG+bQQxMnawB3ABajI1F0QJ/2COPka2Qq5p6MiU4kdgUeDOPlJvnyAlFAQJ0cCj6Mi40QQJ5sGcXIT2bpPKjLVG0o2UjMpiJOjXIfpSkOUmXzhu/vJFp2SOsuHcScBFwFrOI5Tdq1kt56eCuLkw67DSO8EcXIqcD3ZXm1SR0GcDAvi5JfAROBw13ka0MbAdUGcPJiPenml9GUmn5txD9l/aKmjIE4+GMTJnWQXb/33L9ZGwB1BnJzhOoj0TD4yeQmaXFp3QZx8imxJ/9No/OUeXBsN3B/EyR/yxU69UOoyE8TJZmT74vR20zWpUhAnxwET0GhYLfUBfhLEybW67eS3IE6+RTYyKXUUxMkaQZxcR/bAh0aF6+tE4MkgTvZ0HQRKXGaCOAnIRmRcbzjYVII4WTOIkxuBK9FQer18ChibTyoVzwRxcjbwQ9c5mk0QJweQfaDydh5HE9gQuDuIk58FceJ0BfdSlpl8ROYeYG3XWZpJECcfA54iW/Zb6msbIMlXTxZPBHHyXbLHr6VOgjhZNV+f6V9o7R4ftJA99TQuiJNtXYYolXy4/SbgA66zNIsgTvrmF49bcbsZXrMbBvwriJNDXQeRd8u9ikwd5RtzPoafm5I2uy2BR/K5Y3VXqjKTb0/wG2CU6yzNIl835t/o4uGLvsBfgjg5xHWQZpY/ePAnNNm3boI4ORAYS3Pto1Q2fYGLgjj5fRAndZ2IXaoyQ7Yp2PGuQzSLfGffh4C9XWeRFSwrND7uMt3w8rkBfyFbf0PqIIiT04DbAG+enpGVOhm4Pd/Msy5KU2aCONkO+JXrHM0iiJO9gIeBka6zSKf6ATcFcfJR10Ga0MXADq5DNIMgTvrkm7L+Ei2GWjYfBh4K4mSTepysFGUmb3c3Ak5nSzeLIE5OIFtNWY86+m1ZoTnQdZBmEcTJMeiWa13ka5jcRrY1ipTTh4CHgzjZo9YnKkWZIXvsUYuy1UEQJ98BYrQdQVn0J7vltJXrII0uiJM1gV+7ztEM8v/W9wMq6uU3DLgziJOP1/Ik3peZIE62BD7nOkczCOLkG8D3XeeQXlsVuLme96eb1LlobaWay/8e3wFs7TqLFKYf2VYIB9XqBN6XGbJdT8uQs9SCOPkS8FPXOaRimwJX5U/8ScGCONkcfaiqufzW0u3Adq6zSOGW3RavyVpZXpeEfIXHA1znaHRBnJxItqeMlNtHgXNch2hQPyXbBFRqJF9D7B/Azq6zSM0MAG4N4mT3og/sbZkJ4qSVbFRGaiiIk6OB36P1MhrFd7UGTbGCONmHrChKjeSPu98C1HyiqDi3CvDPIE52KvKg3pYZsjVltnQdopEFcXIY2R5LPv89kN4xwJ+DONHmq8VoAS50HaKR5R9cbwT2cZ1F6mYw2To02xR1QF/fxA4Bfu46RCML4mQUcDWNPXQ+F3gJeBZ4DXjbbZy6GQL81nWIBnELmohaaz8FtABk8xkK3BLEybAiDubrG9kg1wEaWRAnqwF/JRvuK7PZwKRjF85fuMFaq/Vde/jgAfvstkmPFzO784Ep415/a947L785Z3HcZ2BfYCMaZ/PSA4M4OSqNwutdBym5Rvn74KUgTo4Cvuo6hzizAXBNECcHplHYXs2BfC0zUiP50y5/Jnv6pWwWARMPnzNr1gVf2efdLRbOqvBgXRWf317zyL2/WNjSh/KXm18EcfLvNApnuQ4i0lEQJ1sAf3CdQ5zbDziPyi/lgMpMM/oO8DHXIXpp3M83GmIPbBu5I8AFNT7ZKZ/eac/lf332r+4ec8OqgwPKt2P4CLIh/M+6DiKyvCBOhpCNDq/qOot44dtBnDycRuFtlR7A1zkzUgNBnOxHtvBXWTyaRqFJozBcVmRcOO/UvdvSKFzr1H5L7gNedJWjQifVYylxkV66gmypexF478GFiu8YqMw0iSBO1geuwf8/cws8lJeYQh/dq9apx4zeM43Cjc77QP+HgEmu8/SQAS4N4kSb9IkXgjg5A6jp0vZSSqsBfw3iZGAl36zbTM3jMrI9Mnz2VBqFo1yH6M4nPzpqF4B/3/Pso195fs56wFqOI3Vnc+AYssfwRZzJV1Juxi1TFgxrbZm6bv/W2UNa+ywZ3K9l6eDWPu2r9e9Da4thzqKlzFm01MxdvLRl7uL21pmLl64yddHStRdbO9x18DobRbbw55m9/UaVmSaQL4y3v+sc3bg3jcK9XIfojf33ym59BXGSAD1+isqRs4I4uTqNwqWug0hzyh8+uJTG38R28RYD+z75sQ2HzotGr99WxAFvfXLa/Xf9b2b7f6cvCJqg4JwexMlVaRRO6M03qcx07XVgYv7jnPw1d7mf9yGbYLlW/uPyPx/iIG+ngjgZit9r9sz/7hp9nzjm0G1KVWSWl0ZheObP/zPmltWH7oG/t/E2A44GrnIdRHplCdk6SZOBWax4DZoLzCcbnu/sOjQC6Fv/yF06kcZd4XfBjoP7TzjqQ8OXHjxqrd1SstnNRTlk67VWWP7/rNufHfPP1+duvKDdfrDA0/iiFbgsiJPdevO4tspMZjJwF/BU/no6jcI3Kz1Yfs9vBNkEt52B0fmPa1Qftdd+jL9P4TyfRuEmx7hOUYAff23ftrsffH78KemM9QBfPzmdFcTJtRqd8dYiYAyQ8N616Jk0ChdVesAgTtYA1gG2J7sOjSYbyq/rtT+Ikw/QYBvZthgza4/VBjx96ce33B0gJVvzoh6+f8DItmU///FdU+7+2yuz15u5pL2My210ZTTwBeA3Pf0GE8SJrV0eb7UDY4FbgVvTKHym1ifMh1g35b0LymhgG2C3NAofrtE5dwPuw899lx71bYJvUYI4eQYY6TpHF45No/Bq1yE6CuLkVJpzs9PpZJsr3grckUbh3FqfMP+wFfLeh6zRwLQ0CsManvMqsnlbpTeoT8tLyWe293K7kBNumjD2oTkLd3GdoyCzgc3TKHytJ1/cbGXmNeCXwB+qGXkpSr5LrE2jsPBl9oM46Qs8hp/7W5Viom81gjiZhp8jYimwZbWrbRatCcvMf8j2fLrTh5GyIE6GplE4s0bH3ofs37fUWoyZ++VNh43/wu4btrnO0p09rxo/6Y3F7YHrHAX4SxqFn+zJFzZLmXmabAfua9MoXOg6TD0EcXI6fm6QNzWNwvVdh6iHIE7m4+eWEYenUXiz6xDLa5Iysxi4DvhZGoVPug5TD/mSABPxd6SyJ9r3HbbK2EsO2aJU831ufOzV+8594rUPNcCE4X3SKPxvd1/U6HNmppHt+3FDGoXNUNqAd4eRv+k6RydmNkuRAbhgnYETvv3q2zvh322+kwCvykwTuBX4chqF/3MdpM6OpsRFZuP+rU/+89PbbpO6DlKBI7ZbZw+A8+6YPOaaV2aPBvo7jlSp7wHdlhlfn7yoliWbOLR5GoXXN1ORyX0O/25xLEqj0MUEaGcO33/L0Z96e+69rnN04oAgTsq851SZvEw2EnZosxWZIE5ayLZPKZ0WY2alUWj++eltt3GdpVpn77dZWxqFAzYb0PqY6ywV2iOIk26fdm3EMvM82aTaLzXjBntBnPTHw1GZM4e0POo6gwvnfHHvNuAB1zk66AMc5zpEE7gM2MK3W3p1dCRQunkb/VvMaxNP2GGo6xxFu+3obbfffbWBvl2Leurs7r6g0crM3cBOaRQ+6DqIQyeRPYrpk0ejT2y/e/df1pjSKNydbD0Qn0SuAzSwxcDn0yj8fD2eTvJR/vRmVbsguzC0teW5J47fwbfrZ2EuP3zL3Y9aZ8g9rnNU4MNBnOy6si9opDLza2D/NAqnuw7iSv4EU6+Xga6xRY36CHZv7P/mW4nrDB0EQZw0yiOcPnmLbMLiZa6DOHYYsJXrEL2xcf/WJx88bvvNXOeotXP3H9n2jQ8Nv4dsOkaZfHdlv9koZeZ7aRSemkbhYtdBHDsB8GqC7Z6vTGvmUbJ3/eKbB7QBNXn0tQoanSnWm8AuaRT6OE+q3lb6xuObHQb1f6gR5sf01Mm7btCWRmEL2UKNZXFAECc7dvWbjVBm/gyc7zqEJ85wHaCDNy876+A21yF8cfTb83x7HPeoIE4GuA7RIBYCh6VR+JzrIK4FcbIvsJ3rHD110PBV7736yFFNOUqZRmH/FmPKdCu0y/mgZS8zDwCfbcKnld4nX+3XqyHSrwxor/nKymXyvS+2tZEtF+CLITTuXjn1dmIahWNdh/DE8a4D9NRBw1e996KDNy/tvnBFmHjCDkMozwjNIfl+g+9T5jLzPPDxZlkErwc+4zpAB+kpR++kN8oOTumz+FnXGTo4wHWABnB+GoXXuA7hgyBOBgEfd52jJ4a1tqTNXmSW+UYw/CHXGXqoH3BUZ79R1jIzGzjYhy0JfJA/jt2jJZ/r5f9W6zPDdQYffeUzu+wFOF++fjn7uw5QcteTLeolmSPwc9XrFbQYM++B47bf3HUOX5y8ywZ7bTuo3yOuc/RQpx/cy1hmlgJHplE4yXUQjxwCrO46xHLmH3/4dru5DuGxp10HWM6WQZys5zpEST0EnKDb3CvwbYS4UxNP2GGw6wy+ue7IrXdepcW86jpHD+wSxMn7dggvY5n5XhqFpd+0rGC+XUDKutJkXRwxb7ZvTzVpdKb35pLd5n7HdRBfBHGyPtDmOkd39hu2yn2uM/hq/PE7rAsscZ2jB973nle2MvMKcJHrED4J4mQ4ns17uHTzNQa5zuCz75/2kTbXGTrw6u9PSfw0jUKfJnP74Fj824dsBUNbWyb/8pAt9nSdw2enbbpmGVYJPjZfmPFdZSsz56RR+LbrEJ75FH5tGPrqXqM3Ls1jmQ759Ea4T767sfTMNPShqjPHug7QjfkPHrd9aTe9rJcv7bFh2+ar9PVtkc+ONgJWWFW+TGUmBa5wHcJDB7kOsLx933hzsusMJeHTeiSrA6HrECVyXhqFvm1P4VQQJxsCXk+o/eyGQ5tyf7hK3HzUNjuSbcvhswOX/0WZysz/pVFYhnt5dRPESSsd2qlrl5x5YJvrDGXw/bUG+jSaBiozPTUZ+L3rEB7a23WAlWkxZt7X997E64y+2XvowIddZ+jGCn+eZSkzDwK3uA7hoR0Bn+anvOY6QFkcceCWvq04uq3rACXxHX2o6pTXReFT6wwZ5zpD2fz2sC33ANpd51iJMF/XCChPmfmWHn/slG8XkJdcB5CKqcx0L0mj8C+uQ3jKt2vR8t4+e7/N2lyHKKPRQ/r7PDrTynIrmJehzDwD6FG6znl1ATl8ziw9pto7Pv332iq/bSld0+2lTuRrfni7VtHHRwwqy2Jw3rniE6N2dZ2hG+++B5ahzFyvUZn3C+KkH+DVwnRt223g0y2vMnjLdYDlDAAC1yE8tgS4yXUIT3n1oaqDRT88KGhzHaLMtl61n88Tp8tVZlwH8NTOwEDXIZa3356baRJp78xyHaADPVLftf+mUTjddQhPtbkO0JV9h63i822SUrjhk1vv5DrDSmwXxMkQ8L/MPJVG4UTXITzl2wZpr7gOUELzXAfoQPNmunaD6wAea3MdoAv2Ei2QV4hN+rc+7jpDF/qQz5vxvczoAtK1Ua4DdDDVdYASWuQ6QAcqM51bDNzsOoSPgjhZA1jHdY7ODGtt0ZpXBTlyk2FzXGdYiVHg18qxndEtpq55t5Ll1bc8PtZ1hjI5f8YS35Z+9+7vlCfuSKPQt/20fLGZ6wBd2XfEoNfKsC5/GZyw8wf3CuLE17mrI8HvMjM1jcJnXYfwmG8XkdHnz9DyGyW3VhAnfdIoXOo6iGfudB3AY94W4HP2G9nmOkMjWaXFvLqg3fo4CjcS/L7NpEWOuhDEybrAqq5zSMNpBUa4DuGh8a4DeMzXMqM9/Aq26+oDp7jO0AXvy8xjrgN4zNcLiJSft+uFOGLRtWhlvLwWBQP76sGRgv3qUG8nUw8P4mR1n8uMPg11zcsLiDQElZkVPZdG4VzXITzm5bXooPVX8+1JwUbh6/YGI1VmysnLC4g0BJWZFek6tHK+zd0D4HO7btjmOkMjWrtvyzOuM3TB2zIzE21auDJeXkCkIazrOoBnJrgO4KsgTtbBw7l7fY15w3WGRrXvWoNfd52hC96WmTe1hcFK+TijXBqDRmZW5NOWE77x8jq0yYDWl11naFTf3mczX7euWNvXMjPDdQDPaQ8kqRWVmRVpC4OueXkdGt6/VU8yNZ9BKjPl5OVFRBrCGq4DeEbXoq55eR0aMbCvFrxqPt6WGZ+XTvaBlxcRaQgDXAfwjK5FXfPyOrTuoH6uI0j9eVtmfH38yxdeXkSkIXi1E7sHNHeva4NdB+jMiEH9fF7ZvhH4OPI12NcyI10I4mQg2U6hIrWgMiM95eWHqsO3XWd31xkaWV9jfLz16u3IjHTNywuINAyVGekpXYua0JA+ZpbrDJ1QmSkhL4d2pWFozoz0lK5FTWh43z4+roit20wltIrrANLQTBAnKjTSE7oWNaE1+7W+4zpDJ1ZVmSmfxa4DSMPTrSbpiQWuA0j9zVu61McJ1otUZspHG6hJranMSE/MdB1A6m/GonYf50rNVZkpH5UZqTXdZpKe8PGpFqmxGUvbh7jO0Il5KjPlozIjtabrgvSERmaa0Lyl7T6uEq4yUzZpFC4FfJyAJSLNxcuRmSsennqP6wwNzrud0tFtptLS6IyIuOblyMy0eQu1gnzz0chMSanMiIhrXo7MvDp/kVZIbz4qMyWlMiMirnk5MvPGwiXaabL5qMyU1JuuA4hI05uNh5sCT31nyWquMzSqP/k7H2mmykw5Pec6gIg0tzQKLeDdPj3Tl7SPdJ2hUd3x0qz+rjN0YYrKTDlNdh1ARAQ/583ofa1GHpu/aHPXGbrwrP7Qy0llRkR84GOZ4bRbJ97rOkMjarfWxwXzAJ71cY8F6Z6PZWYR2jeqUXg3D0K89TSwk+sQHT0w8+2NXWdoNBfePeXu37/o5Zzvd4CXVGbKaQpgAeM6yHIuSaPwG65DiEhdPQJErkN0tKDdrus6Q6P5z2tzh7nO0IUpaRS26zZTCaVR+A7wsuscHYSuA4hI3T3sOkBXPH7yppReXLjE2/kyoIlSZebbrabtgjjxaaRIRGpvAvC26xCd+ddLM7X7e7F8vZOjMlNyT7kO0MEQQI9EijSRNAqXAONd5+jMk/MX+zqSUDqn/32Sz6Ncz4DKTJnd5zpAJ3ZwHUBE6u4R1wE6027toOvHvaKnmgpw+1sLtnOdYSXGgspMmfn4P6nmzYg0H2/nzfz06dc3cJ2h7C4aM+XudmsHu87RhdfSKNTITJmlUfgGMMl1jg40MiPSfLwcmQGYt7R9/dsmTLvfdY4yu/zFWVu7zrASdy/7icpMuY1xHaCD7YI40d8pkSaSRuELeLxf3AWPvzrCdYayumzsi2ParV3DdY6VGLPsJ3rjKTffJmUNBvZ1HUJE6s7b0ZmZS9o3dZ2hrC55dnrgOkM3NDLTIHwrMwCfcx1AROrO23kzAHteNX6i6wxlc/WjU+9ZbK3Po1ovp1H47qbLKjMllkbhNPJn7D1ySBAna7kOISJ19W/XAVbmjcXteky7ly6c+IbvW0LcvfwvVGbK7++uA3TQCpzoOoSI1E8ahY+Qr/fhq72vGu/b2lzeuurRqfcsaLfruc7RjbuW/4XKTPld7TpAJ07WasAiTedK1wFW5rXF7Vv+4M7JY1znKIPvP/X6jq4zdGMh8Lfl/4HKTMmlUTgeSF3n6GAjYD/XIUSkrv6M5zuu/3nq7D1dZ/DdzleOfw7wfSuI29IonLX8P1CZaQw+js5oIrBIE0mjcCr+LRfRkRl1xThvHyN37Yu3PH3f7KXtm7jO0QPvGwVUmWkM17gO0InDgjjZ2XUIEamrP7kO0J3F1q75sWsf93I/KZdufXLa/XfNeHt31zl64E3gXx3/ocpMA0ij8HngQdc5OmgBLg/ipK/rICJSNzcB812H6M7kd5Zsd9GYKWNc5/DJt8a/sq3rDD10Xb7B6QpUZhqHj7eatgL+z3UIEamPNArnkxUa7132wswyjELUxW5/Hp+2W7uq6xw91OlEc5WZxnEdsMB1iE58J4gTrfEg0jy8fqppOX1GXTHuDdchXDvuxgkPTl/S/iHXOXpoUhqFSWe/oTLTINIonA78wXWOTvQju92kR7VFmsPdwFTXIXpisbXDt7hi3BzXOVz56DWPP/bo3IWjXefohd909RsqM43lp8Bi1yE6sSvwRdchRKT20ihsB/7oOkdPtVs7OIiTha5z1Nsufx7/zJSFS8oyTwZgGnB5V7+pMtNA8kcjfZw7A/CTIE52cx1CROri58B01yF6oV8QJ+3xQy+NcR2kHrb/07iXZy5pH+k6Ry/9NI3Cd7r6TZWZxvMj/Fy4ahXgn0GchK6DiEhtpVE4G/iB6xy9ZH486Y29zr2jsVcJ3uKKcdMXtNt1XefopTeB363sC1RmGkwahc8Af3WdowtDgH8HcTLKdRARqblfAy+4DtFb174ye6/P3/z0/a5z1EIQJ/PbrV3DdY4KXJhG4UofcFGZaUw/dB1gJdYA/hPESVlmz4tIBdIoXASc5TpHJe6Z9fZuO185vnRFrCsn//XpB4I4sWQj5GUzg6wYr5TKTAPK92vydXQGYARwZxAnG7oOIiI1dS1QytV2Zy9t3zCIE3v4dU90+ihwGVx495QxqPOCnQAAEN9JREFUQZzMv3/227u6zlKFi9MonNfdF6nMNK6v4ee6M8usB9wTxEmZ/ycTkZVIo9AC33SdoxoT3168QxAni//vn+kY11l6Y/s/jXvl9y/O3ItyjsYs8yrwi558ocpMg0qj8CXgfNc5urE+cG8QJ+cGcdLqOoyIFC+Nwv8C/3ado0qtN78+b68trhg3/cpHpt7jOszKHHDN408EcWIXtNt1XGcpwJfTKOzROkAqM43tQiB1HaIbfYCzgfuDOCnDbq0i0nvfxM+nLHul3do1Lnj69T13vnL8lIvveX6M6zzL3DZh2gNH/+XJh4I4WfriwiVbu85TkNvSKOzx1hgqMw0sjcLFwJdc5+ihnYHHgzg50XUQESlWGoVPAle5zlGU2UvbN/7d8zP2CuLE7nzl+Ck/uHPy3fXOcG3y8r2HXfdEEsTJojOSl3d9bN6inWmc9/T5wKm9+QaTz3D2zTVpFB7jOkSjCOLkWuBTrnP0wj+A89IofMR1EKmPIE4Gkj2675vpne3QK70XxEk/YFCdTjcBqPttllVazKv7D1918g8PCtpqcfzfj/3fmJtenLnGiwuXbEnjFJfOfCONwgt78w0qM00giJN1gKeB1V1n6aV7ybZo+Ec+kVBEpFtBnLwMOF0YrsWY+Wu2mpdGrtJ/5hZrDFh8etsmbb35/j8+9NKYp96abybPXTj4pUVL117YbteqUVTfPA6EaRQu7c03qcw0iSBODgNudp2jQhOBnwFX52tXiIh0yYcyIxVZAuyaRuGjvf3GRh6mkuWkUfg34GLXOSq0BdnGdS8EcXJRECcfC+LEx1sSIiJSuTMrKTIAehy2uXwT2IVssm0ZrUO2fs7XgKVBnIwD7spfD3S33LWIiHjrhjQKL6r0m1VmmkgahYuDODkKeAwY6jpPlfoAO+WvbwGLgjiZBLxBtinZ+15pFDbkfisiIiU3ETipmgOozDSZNAr/F8TJ8cAtgHGdp0D9gG26+ZpG+vcVEWkEc4HDe7JlwcpozkwTSqPwNuBHrnOIiEjTOyGNwmeqPYjKTPP6DnCF6xAiItK0fpRGYSGbIqvMNKl83ZaTyW43iYiI1NPvgW8XdTCVmSaWL0r0KWCM4ygiItI8rgK+UORiqCozTS6NwneAQ4HxrrOIiEjDu5FsnkyhG4+qzAj5FusHAM+6ziIiIg3r78Cne7tVQU+ozAgAaRS+CexFtgaNiIhIke4EjkijcHEtDq4yI+9Ko3AaWaG5w3UWERFpGDcDh6ZRuLBWJ1CZkRWkUTgXOBi40nUWEREpvZ8An6j1djNaAVjeJx8GPD7febawR+dERKRpLAZOSaPwD/U4mUZmpEtpFH4HOAUofLKWiIg0rJnA/vUqMqAyI91Io/B3QBvwkuMoIiLiv+eA0WkU3l3Pk6rMSLfy3aa3BW5ynUVERLx1LbBTGoV1X+ZDc2akR9IonAkcEcTJ54GfAwMdRxIRET/MIJsfc4OrABqZkV5Jo/BSIAQmuM4iIiLO3Q6McllkQGVGKpBG4URgJ+AHQM3WDRAREW/NB76YRuGBaRS+6jqMyoxUJI3Cd9IoPAvYErjNdR4REamb24Ht0ij8resgy2jOjFQljcIpwCFBnBwIXAyMdBxJRKSw3ZhlBU8AZ6RR+B/XQTrSyIwUIo3CfwGjgDOBeY7jiEhz+wgQky3cJtV7BTgR2N7HIgMqM1KgNAoXpVH4E2AT4AJgluNIItKE0ih8No3CE4FNgV8D7ziOVFbzgLOBkWkUxmkUtrsO1BWVGSlcGoVv5KsHb0A2UvOa40gi0oTSKHwpjcJTgY2An6FR4556HTgH2CSNwvNrva9SEUwQJz7eW7wmjcJjXIeQYgRx0h84HjiD7JOSE2kUGlfnFqkla+2XgQ9UeZinjTHXFpHHV0GcrAF8FTgNWN1xHB+NB34BXJdG4SLXYXpDZUbqJoiTFuAQ4DPAR4F+9Ty/yow0KmvtJCCo8jB/NcZ8oog8vgviZAjwReAkHH7A8sRS4G/Axflq76Wkp5mkbvL7rX8D/hbEyVDgk8CxwG6AioaI1EUahXOAHwE/CuJkG+BI4AjgQ06D1dc4si1qrk6jsPR776nMiBP59giXApcGcbIRcAxwNLCF02Ai0lTSKHyC7JHjs4I42Yqs1BxJ412LLPAwcCNwUxqFL7qNUywTxMkOrkN0YkYahS+4DiH1F8TJemSPVS57rVPUsXWbSRqVbjMVL4iTzXmv2IxyHKdSC4CHgFuAv6ZR+LLjPDWji7t4Lb+gLCs2uwAjKj2Wyow0KpWZ2griZANgB2C75V6FfdAq0FRgbP56AHgijcIlbiPVhy7uUipBnKxJtoXCstdW+Y/DuvtelRlpVCoz9RfEyQfISs22vFdwNqM+76tzgCnA8/mP44CxjTzy0h1d3KUhBHEyAlgfGA6s2eHH4cCwNAp3d5dQpHZUZvwQxMkgsg9Xw8ke/e7uNZTsqc75y73mdfj1HLIRl2Xl5fk0CqfX7V9KRESkHqy1k2z1bnL97yFSKT3NJCJSA9ZaA4wGdspfOwJDgAR4FHgEuNcYM99ZSBEREZHOWGs/aK29swejIS9Ya9sKOJ9GZqSpaW8mEZECWWuPByaQPYHXnQ2Bu6y1P7fWDqhpMJEGpjIjIlIQa+0ZwBXAar34NkO2X9Df81tTItJLKjMiIgWw1m4BnF/FIT4CnFJQHJGmojIjIlIla20fshGZ/lUe6ifW2o2qTyTSXFRmRESqdxLZ00rVWhX4WQHHEWkqKjMiItVrK/BYexV4LJGmoDIjIlK9IjfsHaZbTSK9ozIjIlIFa+0Qsj15ihQWfDyRhqYyIyJSnU0ofp+7TQs+nkhDU5kREanOs0B7wcecVPDxRBqayoyISBXyvZXSgg87ruDjiTQ0lRkRkeoVWT7eMMZMLfB4Ig1PZUZEpHp3FXisuws8lkhTUJkREanelcD9BRxnNvD1Ao4j0lRUZkREqmSMaQciYEGVh/qaMeaVAiKJNBWVGRGRAhhjngPOqOIQtxlj4qLyiDQTlRkRkYIYY34DHApM68W3LQa+Bxxek1AiIiIivWWtHWatvdZ27wlr7XYFnG9SD87VnZuK+HcXcaHVdQARkUZjjJkOHG2t/Q7Z1gQh2f5NQ8ge4x4HJMAEY8wSZ0FFGoTKjIhIjRhjngeeB25wnUWkkWnOjIiIiJSayoyIiIiUmsqMiIiIlJrKjIiIiJSayoyIiIiUmsqMiIiIlJrKjIiIiJSayoyIiIiUmsqMiIiIlJrKjIiIiJSayoyIiIiUmsqMiIiIlJo2mhQRkbqy1q4L7AKsDayVvwYDs4Dp+est4DVgnDHmLUdRpSRUZkREpOastdsBhwMHA9v28nufAx4CHgTGGmMeLz6hlJnKjIhIAay1XwI+UuVhZhhjTi4ijy+staOAC8hKTKU2zV/H5sdMgcuBP2nURkREpCDW2j/a6r1a4bknFXDumwr+7zHUWvsna+3SArJ1ZaG19jpr7d5FZpfy0QRgEREplLV2JNltoc9Q2/eZfsBRwF3W2pustSNqeC7xmMqMiIgUxlr7YbIiM7LOpz4ceNpae3SdzyseUJkREZFCWGt3AP4BDHUUYRhwTT5Ko/e3JqI/bBERqZq1dk3gr8AA11mAScaYdtchpH5UZkREpCr5KMi1wPquswD3A99zHULqS2VGRESqdTSwj+sQwAzg08aYpa6DSH2pzIiISMWstX2As13nyJ1ojJnqOoTUn8qMiIhU49PU/8mlzvzSGHOL6xDihlYAFhGRapxe4LHmAxOAl4D1gI3I9m/qznjgjAJzSMmozIiISEWstWvTy32WujAXOBf4hTFmSYdzbAUcn7+Gd/G9RxljFhWQQ0pKt5lERKRS+xdwjNlAaIy5sGORATDGPGWMOQPYHOjsNtIXjDHPFZBDSkxlRkREKlVEmTnBGPNsd19kjJlujDkM+AKwIP/HfzTGXFNABik5lRkREalUWOX3TzPG/K0332CMuRTYnmxdm9OqPL80CM2ZERGRSlW7seP9lXyTMeYZsqeoRACNzIiISAWstQOAwVUepm8RWURUZkREpBLVjsoA7JyXIpGqqMyIiEglVi3gGGuRPZItUhWVGRERqcT0go7zTWvtNdba1Qo6njQhlRkREanEdMAWdKyjgcettXsWdDxpMiozIiLSa/kCd0WNzgBsCNxjrX3QWnuctbZ/gceWBqcyIyIilXq4BsccDVwJTLXW/tBau0ENziENRmVGREQqdWcNjz0c+BbwvLX2Vmvt/tZaU8PzSYmpzIiISKX+VYdztAAfA24HnrHWnmKt1fo0sgKVGRERqUi+Eu8/6njKzYDfkJWa4621fep4bvGYyoyIiFTjPAfn3Ai4Aphgrf2Eg/OLZ1RmRESkYsaYR4DLHJ1+c+BGa+2l1lrtNdjEVGZERKRaXwbGOTz/54B/auG95qUyIyIiVTHGLAQOBsY6jLEvMNZau6HDDOKIyoyIiFTNGDMNaAN+6zDGFsBD1toPOswgDqjMiIhIIYwxi40xXwROAhY6ijECuMpaq/e3JqI/bBERKZQx5o/ATsDfHUXYEzjd0bnFAZUZEREpnDHmSWPMx4AQN6XmTGvtQAfnFQdUZkREpGaMMeOWKzV/AZbU6dRrAifW6VzimMqMiIjUXF5qPkm24N0FwFt1OO0X6nAO8YDKjIiI1I0x5mVjzHeADwIR8FgNT7eVtXZ4DY8vnlCZERGRujPGvGOMucIYsz2wB7W7BdVWg2OKZ1RmRETEKWPM/fktqFHAcwUffpeCjyceUpkREREvGGNSYGfg7gIPu1aBxxJPqcyIiIg3jDEzgP2B2ws65LCCjiMeU5kRERGvGGMWA2cAtoDDrVnAMcRzKjMiIuIdY8xTwJQCDqX3uSagP2QREamatXagtfa0gg87uYBjvFbAMcRzKjMiIlKE3wK/tNZeWOAx1y7gGK8UcAzxnMqMiIhUxVp7MnB8/svTrbU/L+CYA4Atqz0O8GoBxxDPqcyIiEjFrLXbAZd0+MdftdbebK0dWsWh9wD6VvH9y6jMNAGVGRERqYi1dnXgRmBAJ799GPC4tXa3Co47GPhdlfGWeaSg44jHVGZERKTXrLUG+BOw8Uq+bH3gHmvtr6y1G/XwuAOBP3Rz3J6aYoyp5d5P4gmVGRERqcQ3gUN68HV9gC8Bk62111trd7HW9uvsC621hwKTgCMLynhjQccRz7W6DiAiIuVirW0DftDLb+sDfDJ/LbXWvgCkwBtAAGwFDCkwJqjMNA2VGRER6TFr7drAdWTlpFJ9gE3zV608YYxJanh88YhuM4mISI9Ya1vJiswI11m6YYFTXYeQ+lGZERGRnvoasKfrED3wZ2PM/a5DSP2ozIiISE/9ARjnOkQ3ZpNNTpYmojIjIiI9YoyZAXwEeMh1li4sAT5jjHnddRCpL5UZERHpMWPMbGA/4D7XWTpoB443xtzqOojUn8qMiIj0ijFmLnAAcJfrLMs5xRhzjesQ4obKjIiI9JoxZgFwEHAOsNBhlDnAccaYyxxmEMdUZkREpCLGmIXGmHOBUcB/HES4D9jGGHOVg3OLR1RmRESkKsaYycaY/YCjgdfqcMo5wLeANmPMi3U4n3hOZUZEpBjtZIu1VfNqL+G532WMuY5sa4IzgPHVHq8T/wNOB9YzxvzYGFN1ZhEREZEuWWtHWmvPttZOspV73Vp7g7X2KGttNVsoSAMzrgOIiEjjs9ZuA2wPfLCTVwvwJvBW/uMbwCPAGGPMRCeBpVT+H8FnJPsOxe1OAAAAAElFTkSuQmCC" alt="RERO ILS" />
+        </span>
+      </div>
+    </nav>
+    <div class="text-center">
+      <h3 class="mt-4 mb-4" translate>Permission required</h3>
+      {{ 'You do not have sufficient permissions to view this page' | translate }}
+    </div>
+  }
+
   <footer class="rero-ils-footer container-fluid px-5 d-flex justify-content-center align-items-center border-top mt-4 py-4">
     <p class="text-secondary mb-0">
       {{ 'Powered by' | translate }} <a href="https://github.com/rero/rero-ils" target="_blank">RERO ILS</a> & <a href="https://inveniosoftware.org/" target="_blank">Invenio</a> |
       <a href="https://www.rero.ch/" target="_blank">RERO+</a>
     </p>
   </footer>
-</ng-container>
+}
+
+
 
-<ng-template #noaccess>
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark d-flex">
-    <div class="container-fluid px-5">
-      <span class="navbar-brand">
-        <img id="homepage-logo" class="logo" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAjMAAAEwCAYAAABCLvDxAAACAWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6YXV4PSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wL2F1eC8iCiAgICB4bWxuczpleGlmRVg9Imh0dHA6Ly9jaXBhLmpwL2V4aWYvMS4wLyIKICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICBhdXg6TGVucz0iIgogICBleGlmRVg6TGVuc01vZGVsPSIiCiAgIHRpZmY6SW1hZ2VMZW5ndGg9IjMwNCIKICAgdGlmZjpJbWFnZVdpZHRoPSI1NjMiLz4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz7a1B+XAAABgmlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kctLQkEUhz/NMEwxqEWLFhLZSqMHSG2ClLAgQswgq43efARql3uNkLZB26AgatNrUX9BbYPWQVAUQQTtWhe1Kbmdq4IReYYz55vfzDnMnAFrLKfkdVs/5AtFLRoOeubi8x77Cw6cuPBiSyi6OhaJTNHQPu+xmPHWb9ZqfO5fa11K6QpYWoRHFVUrCk8IT60VVZN3hDuUbGJJ+EzYp8kFhe9MPVnlV5MzVf42WYtFQ2BtE/ZkfnHyFytZLS8sL6cnn1tVavcxX+JMFWZnJHaLd6ETJUwQD5OMEyLAACMyB/AzSJ+saJDfX8mfZkVyFZlVSmgskyFLEZ+oq1I9JTEtekpGjpLZ/7991dNDg9XqziA0PxvGuxfs21DeMoyvI8MoH0PTE1wW6vkrhzD8IfpWXes5APcGnF/VteQuXGxC56Oa0BIVqUncmk7D2ym44tB+A46Fas9q+5w8QGxdvuoa9vahV867F38AFCFnwJeX+MYAAAAJcEhZcwAALiMAAC4jAXilP3YAACAASURBVHic7d13mB1V4cbx79lsGiSBEGJo0olDCXWA0Beli4AIIgLCABYULCjiTxEpihVEsYHoINIFEbAgIoQW2iSUQDIQAkgooaQXSNvz+2MmkCy72d17595z5t738zz3SUJ2Z15ImPveM2fOMYg0gSBOLgdOquBbbS9/77I0Ck+p4DwiIlKhVtcBRDxnevF7E4Gv1zCLiIh0osV1AJEG8Q5wVBqFC1wHERFpNiozIsX4chqFT7kOISLSjFRmRKp3PXC56xAiIs1KZUakOs8Dn0ujcGUThUVEpIZUZkQqt5hsnswc10FERJqZyoxI5U5PozBxHUJEpNmpzIhU5rw0Cn/lOoSIiKjMiFTiYuAc1yFERCSjMiPSO5eT3V7ShF8REU+ozIj03PXAF1RkRET8ojIj0jN/B45Lo3Cp6yAiIrIilRmR7t0FHJlG4WLXQURE5P1UZkRW7lbg0DQK33EdREREOqcyI9K1HwIfT6NwnusgIiLStVbXAUQ8tBA4KY3Cq10HERGR7qnMiKxoGnBYGoUPuw4iIiI9ozIj8p7xZPNjXnYdREREek5zZkQyfwH2UJERESkflRlpdrOAE8l2v17gOoyIiPSebjNJM/sL8OU0Cqe5DiIiIpVTmZFm9CrwxTQKb3EdREREqqfbTNJsLgW2UJEREWkcGpmRZvEssFcahfe6DiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiFTOuA5RJECcGGAIM7eS1GjAfeH35VxqF89ykbV5BnPQFRgCD8teqHV6DgIHAQrI/s3n5j8v/fAbZn5+td36R7uR/xzu7Dg0FBgBvsuK16I00Cpe6Sdu8gjgZAgxjxetQx5/3ARbQ+XVoPjAHXYu6pTLThSBO+gCbA2H+2hHYBujfy0MtAF4FHgHuB+4DJqZR2F5c2uYTxMkawCbAxsu9lv16PbILRLUWAM8DzwFT8h+fAyanUfi/Ao4v0q0gTlbjvWvQsuvRBr08jAWmA5OBB8iuQ/enUTijwKhNJ3+fWJ/3X4OWvYYWdKqFwP/IrkPPd3zpQ7PKzLvyUZetgU8BuwPbA6vU6HQzeO+C8gddUFYuiJNWYFtgN2DX/LWe01AwjezP7978NUGfnKQIQZwMBA7JXzsCm1Kba7UFJpH9Pf5HGoW31eAcDSWIkzV57xq0K1mxHOg0VPbn+CwwdrnXpGa7HjV9mQniZAPg08AxwJYOIoxOo/BhB+f1VhAnqwB781552ZHaFcuizCAbeRsD/FUjN9Ib+Sf8j5Bdhz4ODK5zhHFpFIZ1Pqf3gjjZBPgw2XVoN2Azt4l6bAbwEFmxuQ8Ym0bhEreRassEceJjG78njcKf1erg+ZvlccCxZKMwLqnMAEGcDAYOBj4BHIj/5WVlLNnI29XADRp5614QJx8FvuA6Rye+mkbhlFodPIiTrYCTyUaER9TqPD2gMpML4mRz4Ij8tbXjOEWZDtwC3Aj8N43CRY7zFK6V7A3EN3NqcdAgTvqRXTi+C6xVi3NIzwVxsjrZUPoRwH70fj6SrwxZSd4d+EUQJ7eTFZtb0yh8x2kyf22En9eic2px0CBONgXOIysxTT9C7loQJ9uQfZA6gmyuZKMZBpyYv2blgxg3Af9ulGtSq+sA9ZAP4X4aOJfsoikOBXHyEeA04CCgr+M4tdaP9+Y/vBXEyc+BX6VRWJPCLn4L4mRd4GyyN5WmuP76Kv8wdRLwecpz+6gIq5PdmTgOmBfEyQ3AL9MofMJtrOo09P9M+aTeQ4Af4GY+jOTySY3HAl8GtnIcx5U1yf4unhHEySXAxboF1RyCOBkKfBs4lezRaXEkiJMPkV2Hjid7PLqZDSIfsQniZAzwC7IR5NI9bduwZSZ/nPF3ZMO44kgQJ+sBXwI+SzbUKdkno+8CXwvi5LfAhWkUvu44k9RIECd7A1cB67jO0syCONkf+ApwALq115m2/PVCECe/InvSdrbTRL3QkGUmiJPRwLXAho6jNK0gTjYCzgeOokH/nhVgEHAGcEoQJ2cBl5TxE5F0Ll9S4FzgW0CL4zhNK4iTT5LNfWrEuTC1sBFwIXBuECeXAj9Io3Cm40zdaqg3mSBOWoAzyd5Ei1g0TXopH04/i2w4vZ/jOGUxCLgYOCaIk8+lUfi460BSnSBONgSuAXZxHKVpBXGyG/AzYLTrLCU1CPg62S2o75PN9fP2KaiG+bQQxMnawB3ABajI1F0QJ/2COPka2Qq5p6MiU4kdgUeDOPlJvnyAlFAQJ0cCj6Mi40QQJ5sGcXIT2bpPKjLVG0o2UjMpiJOjXIfpSkOUmXzhu/vJFp2SOsuHcScBFwFrOI5Tdq1kt56eCuLkw67DSO8EcXIqcD3ZXm1SR0GcDAvi5JfAROBw13ka0MbAdUGcPJiPenml9GUmn5txD9l/aKmjIE4+GMTJnWQXb/33L9ZGwB1BnJzhOoj0TD4yeQmaXFp3QZx8imxJ/9No/OUeXBsN3B/EyR/yxU69UOoyE8TJZmT74vR20zWpUhAnxwET0GhYLfUBfhLEybW67eS3IE6+RTYyKXUUxMkaQZxcR/bAh0aF6+tE4MkgTvZ0HQRKXGaCOAnIRmRcbzjYVII4WTOIkxuBK9FQer18ChibTyoVzwRxcjbwQ9c5mk0QJweQfaDydh5HE9gQuDuIk58FceJ0BfdSlpl8ROYeYG3XWZpJECcfA54iW/Zb6msbIMlXTxZPBHHyXbLHr6VOgjhZNV+f6V9o7R4ftJA99TQuiJNtXYYolXy4/SbgA66zNIsgTvrmF49bcbsZXrMbBvwriJNDXQeRd8u9ikwd5RtzPoafm5I2uy2BR/K5Y3VXqjKTb0/wG2CU6yzNIl835t/o4uGLvsBfgjg5xHWQZpY/ePAnNNm3boI4ORAYS3Pto1Q2fYGLgjj5fRAndZ2IXaoyQ7Yp2PGuQzSLfGffh4C9XWeRFSwrND7uMt3w8rkBfyFbf0PqIIiT04DbAG+enpGVOhm4Pd/Msy5KU2aCONkO+JXrHM0iiJO9gIeBka6zSKf6ATcFcfJR10Ga0MXADq5DNIMgTvrkm7L+Ei2GWjYfBh4K4mSTepysFGUmb3c3Ak5nSzeLIE5OIFtNWY86+m1ZoTnQdZBmEcTJMeiWa13ka5jcRrY1ipTTh4CHgzjZo9YnKkWZIXvsUYuy1UEQJ98BYrQdQVn0J7vltJXrII0uiJM1gV+7ztEM8v/W9wMq6uU3DLgziJOP1/Ik3peZIE62BD7nOkczCOLkG8D3XeeQXlsVuLme96eb1LlobaWay/8e3wFs7TqLFKYf2VYIB9XqBN6XGbJdT8uQs9SCOPkS8FPXOaRimwJX5U/8ScGCONkcfaiqufzW0u3Adq6zSOGW3RavyVpZXpeEfIXHA1znaHRBnJxItqeMlNtHgXNch2hQPyXbBFRqJF9D7B/Azq6zSM0MAG4N4mT3og/sbZkJ4qSVbFRGaiiIk6OB36P1MhrFd7UGTbGCONmHrChKjeSPu98C1HyiqDi3CvDPIE52KvKg3pYZsjVltnQdopEFcXIY2R5LPv89kN4xwJ+DONHmq8VoAS50HaKR5R9cbwT2cZ1F6mYw2To02xR1QF/fxA4Bfu46RCML4mQUcDWNPXQ+F3gJeBZ4DXjbbZy6GQL81nWIBnELmohaaz8FtABk8xkK3BLEybAiDubrG9kg1wEaWRAnqwF/JRvuK7PZwKRjF85fuMFaq/Vde/jgAfvstkmPFzO784Ep415/a947L785Z3HcZ2BfYCMaZ/PSA4M4OSqNwutdBym5Rvn74KUgTo4Cvuo6hzizAXBNECcHplHYXs2BfC0zUiP50y5/Jnv6pWwWARMPnzNr1gVf2efdLRbOqvBgXRWf317zyL2/WNjSh/KXm18EcfLvNApnuQ4i0lEQJ1sAf3CdQ5zbDziPyi/lgMpMM/oO8DHXIXpp3M83GmIPbBu5I8AFNT7ZKZ/eac/lf332r+4ec8OqgwPKt2P4CLIh/M+6DiKyvCBOhpCNDq/qOot44dtBnDycRuFtlR7A1zkzUgNBnOxHtvBXWTyaRqFJozBcVmRcOO/UvdvSKFzr1H5L7gNedJWjQifVYylxkV66gmypexF478GFiu8YqMw0iSBO1geuwf8/cws8lJeYQh/dq9apx4zeM43Cjc77QP+HgEmu8/SQAS4N4kSb9IkXgjg5A6jp0vZSSqsBfw3iZGAl36zbTM3jMrI9Mnz2VBqFo1yH6M4nPzpqF4B/3/Pso195fs56wFqOI3Vnc+AYssfwRZzJV1Juxi1TFgxrbZm6bv/W2UNa+ywZ3K9l6eDWPu2r9e9Da4thzqKlzFm01MxdvLRl7uL21pmLl64yddHStRdbO9x18DobRbbw55m9/UaVmSaQL4y3v+sc3bg3jcK9XIfojf33ym59BXGSAD1+isqRs4I4uTqNwqWug0hzyh8+uJTG38R28RYD+z75sQ2HzotGr99WxAFvfXLa/Xf9b2b7f6cvCJqg4JwexMlVaRRO6M03qcx07XVgYv7jnPw1d7mf9yGbYLlW/uPyPx/iIG+ngjgZit9r9sz/7hp9nzjm0G1KVWSWl0ZheObP/zPmltWH7oG/t/E2A44GrnIdRHplCdk6SZOBWax4DZoLzCcbnu/sOjQC6Fv/yF06kcZd4XfBjoP7TzjqQ8OXHjxqrd1SstnNRTlk67VWWP7/rNufHfPP1+duvKDdfrDA0/iiFbgsiJPdevO4tspMZjJwF/BU/no6jcI3Kz1Yfs9vBNkEt52B0fmPa1Qftdd+jL9P4TyfRuEmx7hOUYAff23ftrsffH78KemM9QBfPzmdFcTJtRqd8dYiYAyQ8N616Jk0ChdVesAgTtYA1gG2J7sOjSYbyq/rtT+Ikw/QYBvZthgza4/VBjx96ce33B0gJVvzoh6+f8DItmU///FdU+7+2yuz15u5pL2My210ZTTwBeA3Pf0GE8SJrV0eb7UDY4FbgVvTKHym1ifMh1g35b0LymhgG2C3NAofrtE5dwPuw899lx71bYJvUYI4eQYY6TpHF45No/Bq1yE6CuLkVJpzs9PpZJsr3grckUbh3FqfMP+wFfLeh6zRwLQ0CsManvMqsnlbpTeoT8tLyWe293K7kBNumjD2oTkLd3GdoyCzgc3TKHytJ1/cbGXmNeCXwB+qGXkpSr5LrE2jsPBl9oM46Qs8hp/7W5Viom81gjiZhp8jYimwZbWrbRatCcvMf8j2fLrTh5GyIE6GplE4s0bH3ofs37fUWoyZ++VNh43/wu4btrnO0p09rxo/6Y3F7YHrHAX4SxqFn+zJFzZLmXmabAfua9MoXOg6TD0EcXI6fm6QNzWNwvVdh6iHIE7m4+eWEYenUXiz6xDLa5Iysxi4DvhZGoVPug5TD/mSABPxd6SyJ9r3HbbK2EsO2aJU831ufOzV+8594rUPNcCE4X3SKPxvd1/U6HNmppHt+3FDGoXNUNqAd4eRv+k6RydmNkuRAbhgnYETvv3q2zvh322+kwCvykwTuBX4chqF/3MdpM6OpsRFZuP+rU/+89PbbpO6DlKBI7ZbZw+A8+6YPOaaV2aPBvo7jlSp7wHdlhlfn7yoliWbOLR5GoXXN1ORyX0O/25xLEqj0MUEaGcO33/L0Z96e+69rnN04oAgTsq851SZvEw2EnZosxWZIE5ayLZPKZ0WY2alUWj++eltt3GdpVpn77dZWxqFAzYb0PqY6ywV2iOIk26fdm3EMvM82aTaLzXjBntBnPTHw1GZM4e0POo6gwvnfHHvNuAB1zk66AMc5zpEE7gM2MK3W3p1dCRQunkb/VvMaxNP2GGo6xxFu+3obbfffbWBvl2Leurs7r6g0crM3cBOaRQ+6DqIQyeRPYrpk0ejT2y/e/df1pjSKNydbD0Qn0SuAzSwxcDn0yj8fD2eTvJR/vRmVbsguzC0teW5J47fwbfrZ2EuP3zL3Y9aZ8g9rnNU4MNBnOy6si9opDLza2D/NAqnuw7iSv4EU6+Xga6xRY36CHZv7P/mW4nrDB0EQZw0yiOcPnmLbMLiZa6DOHYYsJXrEL2xcf/WJx88bvvNXOeotXP3H9n2jQ8Nv4dsOkaZfHdlv9koZeZ7aRSemkbhYtdBHDsB8GqC7Z6vTGvmUbJ3/eKbB7QBNXn0tQoanSnWm8AuaRT6OE+q3lb6xuObHQb1f6gR5sf01Mm7btCWRmEL2UKNZXFAECc7dvWbjVBm/gyc7zqEJ85wHaCDNy876+A21yF8cfTb83x7HPeoIE4GuA7RIBYCh6VR+JzrIK4FcbIvsJ3rHD110PBV7736yFFNOUqZRmH/FmPKdCu0y/mgZS8zDwCfbcKnld4nX+3XqyHSrwxor/nKymXyvS+2tZEtF+CLITTuXjn1dmIahWNdh/DE8a4D9NRBw1e996KDNy/tvnBFmHjCDkMozwjNIfl+g+9T5jLzPPDxZlkErwc+4zpAB+kpR++kN8oOTumz+FnXGTo4wHWABnB+GoXXuA7hgyBOBgEfd52jJ4a1tqTNXmSW+UYw/CHXGXqoH3BUZ79R1jIzGzjYhy0JfJA/jt2jJZ/r5f9W6zPDdQYffeUzu+wFOF++fjn7uw5QcteTLeolmSPwc9XrFbQYM++B47bf3HUOX5y8ywZ7bTuo3yOuc/RQpx/cy1hmlgJHplE4yXUQjxwCrO46xHLmH3/4dru5DuGxp10HWM6WQZys5zpEST0EnKDb3CvwbYS4UxNP2GGw6wy+ue7IrXdepcW86jpHD+wSxMn7dggvY5n5XhqFpd+0rGC+XUDKutJkXRwxb7ZvTzVpdKb35pLd5n7HdRBfBHGyPtDmOkd39hu2yn2uM/hq/PE7rAsscZ2jB973nle2MvMKcJHrED4J4mQ4ns17uHTzNQa5zuCz75/2kTbXGTrw6u9PSfw0jUKfJnP74Fj824dsBUNbWyb/8pAt9nSdw2enbbpmGVYJPjZfmPFdZSsz56RR+LbrEJ75FH5tGPrqXqM3Ls1jmQ759Ea4T767sfTMNPShqjPHug7QjfkPHrd9aTe9rJcv7bFh2+ar9PVtkc+ONgJWWFW+TGUmBa5wHcJDB7kOsLx933hzsusMJeHTeiSrA6HrECVyXhqFvm1P4VQQJxsCXk+o/eyGQ5tyf7hK3HzUNjuSbcvhswOX/0WZysz/pVFYhnt5dRPESSsd2qlrl5x5YJvrDGXw/bUG+jSaBiozPTUZ+L3rEB7a23WAlWkxZt7X997E64y+2XvowIddZ+jGCn+eZSkzDwK3uA7hoR0Bn+anvOY6QFkcceCWvq04uq3rACXxHX2o6pTXReFT6wwZ5zpD2fz2sC33ANpd51iJMF/XCChPmfmWHn/slG8XkJdcB5CKqcx0L0mj8C+uQ3jKt2vR8t4+e7/N2lyHKKPRQ/r7PDrTynIrmJehzDwD6FG6znl1ATl8ziw9pto7Pv332iq/bSld0+2lTuRrfni7VtHHRwwqy2Jw3rniE6N2dZ2hG+++B5ahzFyvUZn3C+KkH+DVwnRt223g0y2vMnjLdYDlDAAC1yE8tgS4yXUIT3n1oaqDRT88KGhzHaLMtl61n88Tp8tVZlwH8NTOwEDXIZa3356baRJp78xyHaADPVLftf+mUTjddQhPtbkO0JV9h63i822SUrjhk1vv5DrDSmwXxMkQ8L/MPJVG4UTXITzl2wZpr7gOUELzXAfoQPNmunaD6wAea3MdoAv2Ei2QV4hN+rc+7jpDF/qQz5vxvczoAtK1Ua4DdDDVdYASWuQ6QAcqM51bDNzsOoSPgjhZA1jHdY7ODGtt0ZpXBTlyk2FzXGdYiVHg18qxndEtpq55t5Ll1bc8PtZ1hjI5f8YS35Z+9+7vlCfuSKPQt/20fLGZ6wBd2XfEoNfKsC5/GZyw8wf3CuLE17mrI8HvMjM1jcJnXYfwmG8XkdHnz9DyGyW3VhAnfdIoXOo6iGfudB3AY94W4HP2G9nmOkMjWaXFvLqg3fo4CjcS/L7NpEWOuhDEybrAqq5zSMNpBUa4DuGh8a4DeMzXMqM9/Aq26+oDp7jO0AXvy8xjrgN4zNcLiJSft+uFOGLRtWhlvLwWBQP76sGRgv3qUG8nUw8P4mR1n8uMPg11zcsLiDQElZkVPZdG4VzXITzm5bXooPVX8+1JwUbh6/YGI1VmysnLC4g0BJWZFek6tHK+zd0D4HO7btjmOkMjWrtvyzOuM3TB2zIzE21auDJeXkCkIazrOoBnJrgO4KsgTtbBw7l7fY15w3WGRrXvWoNfd52hC96WmTe1hcFK+TijXBqDRmZW5NOWE77x8jq0yYDWl11naFTf3mczX7euWNvXMjPDdQDPaQ8kqRWVmRVpC4OueXkdGt6/VU8yNZ9BKjPl5OVFRBrCGq4DeEbXoq55eR0aMbCvFrxqPt6WGZ+XTvaBlxcRaQgDXAfwjK5FXfPyOrTuoH6uI0j9eVtmfH38yxdeXkSkIXi1E7sHNHeva4NdB+jMiEH9fF7ZvhH4OPI12NcyI10I4mQg2U6hIrWgMiM95eWHqsO3XWd31xkaWV9jfLz16u3IjHTNywuINAyVGekpXYua0JA+ZpbrDJ1QmSkhL4d2pWFozoz0lK5FTWh43z4+roit20wltIrrANLQTBAnKjTSE7oWNaE1+7W+4zpDJ1ZVmSmfxa4DSMPTrSbpiQWuA0j9zVu61McJ1otUZspHG6hJranMSE/MdB1A6m/GonYf50rNVZkpH5UZqTXdZpKe8PGpFqmxGUvbh7jO0Il5KjPlozIjtabrgvSERmaa0Lyl7T6uEq4yUzZpFC4FfJyAJSLNxcuRmSsennqP6wwNzrud0tFtptLS6IyIuOblyMy0eQu1gnzz0chMSanMiIhrXo7MvDp/kVZIbz4qMyWlMiMirnk5MvPGwiXaabL5qMyU1JuuA4hI05uNh5sCT31nyWquMzSqP/k7H2mmykw5Pec6gIg0tzQKLeDdPj3Tl7SPdJ2hUd3x0qz+rjN0YYrKTDlNdh1ARAQ/583ofa1GHpu/aHPXGbrwrP7Qy0llRkR84GOZ4bRbJ97rOkMjarfWxwXzAJ71cY8F6Z6PZWYR2jeqUXg3D0K89TSwk+sQHT0w8+2NXWdoNBfePeXu37/o5Zzvd4CXVGbKaQpgAeM6yHIuSaPwG65DiEhdPQJErkN0tKDdrus6Q6P5z2tzh7nO0IUpaRS26zZTCaVR+A7wsuscHYSuA4hI3T3sOkBXPH7yppReXLjE2/kyoIlSZebbrabtgjjxaaRIRGpvAvC26xCd+ddLM7X7e7F8vZOjMlNyT7kO0MEQQI9EijSRNAqXAONd5+jMk/MX+zqSUDqn/32Sz6Ncz4DKTJnd5zpAJ3ZwHUBE6u4R1wE6027toOvHvaKnmgpw+1sLtnOdYSXGgspMmfn4P6nmzYg0H2/nzfz06dc3cJ2h7C4aM+XudmsHu87RhdfSKNTITJmlUfgGMMl1jg40MiPSfLwcmQGYt7R9/dsmTLvfdY4yu/zFWVu7zrASdy/7icpMuY1xHaCD7YI40d8pkSaSRuELeLxf3AWPvzrCdYayumzsi2ParV3DdY6VGLPsJ3rjKTffJmUNBvZ1HUJE6s7b0ZmZS9o3dZ2hrC55dnrgOkM3NDLTIHwrMwCfcx1AROrO23kzAHteNX6i6wxlc/WjU+9ZbK3Po1ovp1H47qbLKjMllkbhNPJn7D1ySBAna7kOISJ19W/XAVbmjcXteky7ly6c+IbvW0LcvfwvVGbK7++uA3TQCpzoOoSI1E8ahY+Qr/fhq72vGu/b2lzeuurRqfcsaLfruc7RjbuW/4XKTPld7TpAJ07WasAiTedK1wFW5rXF7Vv+4M7JY1znKIPvP/X6jq4zdGMh8Lfl/4HKTMmlUTgeSF3n6GAjYD/XIUSkrv6M5zuu/3nq7D1dZ/DdzleOfw7wfSuI29IonLX8P1CZaQw+js5oIrBIE0mjcCr+LRfRkRl1xThvHyN37Yu3PH3f7KXtm7jO0QPvGwVUmWkM17gO0InDgjjZ2XUIEamrP7kO0J3F1q75sWsf93I/KZdufXLa/XfNeHt31zl64E3gXx3/ocpMA0ij8HngQdc5OmgBLg/ipK/rICJSNzcB812H6M7kd5Zsd9GYKWNc5/DJt8a/sq3rDD10Xb7B6QpUZhqHj7eatgL+z3UIEamPNArnkxUa7132wswyjELUxW5/Hp+2W7uq6xw91OlEc5WZxnEdsMB1iE58J4gTrfEg0jy8fqppOX1GXTHuDdchXDvuxgkPTl/S/iHXOXpoUhqFSWe/oTLTINIonA78wXWOTvQju92kR7VFmsPdwFTXIXpisbXDt7hi3BzXOVz56DWPP/bo3IWjXefohd909RsqM43lp8Bi1yE6sSvwRdchRKT20ihsB/7oOkdPtVs7OIiTha5z1Nsufx7/zJSFS8oyTwZgGnB5V7+pMtNA8kcjfZw7A/CTIE52cx1CROri58B01yF6oV8QJ+3xQy+NcR2kHrb/07iXZy5pH+k6Ry/9NI3Cd7r6TZWZxvMj/Fy4ahXgn0GchK6DiEhtpVE4G/iB6xy9ZH486Y29zr2jsVcJ3uKKcdMXtNt1XefopTeB363sC1RmGkwahc8Af3WdowtDgH8HcTLKdRARqblfAy+4DtFb174ye6/P3/z0/a5z1EIQJ/PbrV3DdY4KXJhG4UofcFGZaUw/dB1gJdYA/hPESVlmz4tIBdIoXASc5TpHJe6Z9fZuO185vnRFrCsn//XpB4I4sWQj5GUzg6wYr5TKTAPK92vydXQGYARwZxAnG7oOIiI1dS1QytV2Zy9t3zCIE3v4dU90+ihwGVx495QxqPOCnQAAEN9JREFUQZzMv3/227u6zlKFi9MonNfdF6nMNK6v4ee6M8usB9wTxEmZ/ycTkZVIo9AC33SdoxoT3168QxAni//vn+kY11l6Y/s/jXvl9y/O3ItyjsYs8yrwi558ocpMg0qj8CXgfNc5urE+cG8QJ+cGcdLqOoyIFC+Nwv8C/3ado0qtN78+b68trhg3/cpHpt7jOszKHHDN408EcWIXtNt1XGcpwJfTKOzROkAqM43tQiB1HaIbfYCzgfuDOCnDbq0i0nvfxM+nLHul3do1Lnj69T13vnL8lIvveX6M6zzL3DZh2gNH/+XJh4I4WfriwiVbu85TkNvSKOzx1hgqMw0sjcLFwJdc5+ihnYHHgzg50XUQESlWGoVPAle5zlGU2UvbN/7d8zP2CuLE7nzl+Ck/uHPy3fXOcG3y8r2HXfdEEsTJojOSl3d9bN6inWmc9/T5wKm9+QaTz3D2zTVpFB7jOkSjCOLkWuBTrnP0wj+A89IofMR1EKmPIE4Gkj2675vpne3QK70XxEk/YFCdTjcBqPttllVazKv7D1918g8PCtpqcfzfj/3fmJtenLnGiwuXbEnjFJfOfCONwgt78w0qM00giJN1gKeB1V1n6aV7ybZo+Ec+kVBEpFtBnLwMOF0YrsWY+Wu2mpdGrtJ/5hZrDFh8etsmbb35/j8+9NKYp96abybPXTj4pUVL117YbteqUVTfPA6EaRQu7c03qcw0iSBODgNudp2jQhOBnwFX52tXiIh0yYcyIxVZAuyaRuGjvf3GRh6mkuWkUfg34GLXOSq0BdnGdS8EcXJRECcfC+LEx1sSIiJSuTMrKTIAehy2uXwT2IVssm0ZrUO2fs7XgKVBnIwD7spfD3S33LWIiHjrhjQKL6r0m1VmmkgahYuDODkKeAwY6jpPlfoAO+WvbwGLgjiZBLxBtinZ+15pFDbkfisiIiU3ETipmgOozDSZNAr/F8TJ8cAtgHGdp0D9gG26+ZpG+vcVEWkEc4HDe7JlwcpozkwTSqPwNuBHrnOIiEjTOyGNwmeqPYjKTPP6DnCF6xAiItK0fpRGYSGbIqvMNKl83ZaTyW43iYiI1NPvgW8XdTCVmSaWL0r0KWCM4ygiItI8rgK+UORiqCozTS6NwneAQ4HxrrOIiEjDu5FsnkyhG4+qzAj5FusHAM+6ziIiIg3r78Cne7tVQU+ozAgAaRS+CexFtgaNiIhIke4EjkijcHEtDq4yI+9Ko3AaWaG5w3UWERFpGDcDh6ZRuLBWJ1CZkRWkUTgXOBi40nUWEREpvZ8An6j1djNaAVjeJx8GPD7febawR+dERKRpLAZOSaPwD/U4mUZmpEtpFH4HOAUofLKWiIg0rJnA/vUqMqAyI91Io/B3QBvwkuMoIiLiv+eA0WkU3l3Pk6rMSLfy3aa3BW5ynUVERLx1LbBTGoV1X+ZDc2akR9IonAkcEcTJ54GfAwMdRxIRET/MIJsfc4OrABqZkV5Jo/BSIAQmuM4iIiLO3Q6McllkQGVGKpBG4URgJ+AHQM3WDRAREW/NB76YRuGBaRS+6jqMyoxUJI3Cd9IoPAvYErjNdR4REamb24Ht0ij8resgy2jOjFQljcIpwCFBnBwIXAyMdBxJRKSw3ZhlBU8AZ6RR+B/XQTrSyIwUIo3CfwGjgDOBeY7jiEhz+wgQky3cJtV7BTgR2N7HIgMqM1KgNAoXpVH4E2AT4AJgluNIItKE0ih8No3CE4FNgV8D7ziOVFbzgLOBkWkUxmkUtrsO1BWVGSlcGoVv5KsHb0A2UvOa40gi0oTSKHwpjcJTgY2An6FR4556HTgH2CSNwvNrva9SEUwQJz7eW7wmjcJjXIeQYgRx0h84HjiD7JOSE2kUGlfnFqkla+2XgQ9UeZinjTHXFpHHV0GcrAF8FTgNWN1xHB+NB34BXJdG4SLXYXpDZUbqJoiTFuAQ4DPAR4F+9Ty/yow0KmvtJCCo8jB/NcZ8oog8vgviZAjwReAkHH7A8sRS4G/Axflq76Wkp5mkbvL7rX8D/hbEyVDgk8CxwG6AioaI1EUahXOAHwE/CuJkG+BI4AjgQ06D1dc4si1qrk6jsPR776nMiBP59giXApcGcbIRcAxwNLCF02Ai0lTSKHyC7JHjs4I42Yqs1BxJ412LLPAwcCNwUxqFL7qNUywTxMkOrkN0YkYahS+4DiH1F8TJemSPVS57rVPUsXWbSRqVbjMVL4iTzXmv2IxyHKdSC4CHgFuAv6ZR+LLjPDWji7t4Lb+gLCs2uwAjKj2Wyow0KpWZ2griZANgB2C75V6FfdAq0FRgbP56AHgijcIlbiPVhy7uUipBnKxJtoXCstdW+Y/DuvtelRlpVCoz9RfEyQfISs22vFdwNqM+76tzgCnA8/mP44CxjTzy0h1d3KUhBHEyAlgfGA6s2eHH4cCwNAp3d5dQpHZUZvwQxMkgsg9Xw8ke/e7uNZTsqc75y73mdfj1HLIRl2Xl5fk0CqfX7V9KRESkHqy1k2z1bnL97yFSKT3NJCJSA9ZaA4wGdspfOwJDgAR4FHgEuNcYM99ZSBEREZHOWGs/aK29swejIS9Ya9sKOJ9GZqSpaW8mEZECWWuPByaQPYHXnQ2Bu6y1P7fWDqhpMJEGpjIjIlIQa+0ZwBXAar34NkO2X9Df81tTItJLKjMiIgWw1m4BnF/FIT4CnFJQHJGmojIjIlIla20fshGZ/lUe6ifW2o2qTyTSXFRmRESqdxLZ00rVWhX4WQHHEWkqKjMiItVrK/BYexV4LJGmoDIjIlK9IjfsHaZbTSK9ozIjIlIFa+0Qsj15ihQWfDyRhqYyIyJSnU0ofp+7TQs+nkhDU5kREanOs0B7wcecVPDxRBqayoyISBXyvZXSgg87ruDjiTQ0lRkRkeoVWT7eMMZMLfB4Ig1PZUZEpHp3FXisuws8lkhTUJkREanelcD9BRxnNvD1Ao4j0lRUZkREqmSMaQciYEGVh/qaMeaVAiKJNBWVGRGRAhhjngPOqOIQtxlj4qLyiDQTlRkRkYIYY34DHApM68W3LQa+Bxxek1AiIiIivWWtHWatvdZ27wlr7XYFnG9SD87VnZuK+HcXcaHVdQARkUZjjJkOHG2t/Q7Z1gQh2f5NQ8ge4x4HJMAEY8wSZ0FFGoTKjIhIjRhjngeeB25wnUWkkWnOjIiIiJSayoyIiIiUmsqMiIiIlJrKjIiIiJSayoyIiIiUmsqMiIiIlJrKjIiIiJSayoyIiIiUmsqMiIiIlJrKjIiIiJSayoyIiIiUmsqMiIiIlJo2mhQRkbqy1q4L7AKsDayVvwYDs4Dp+est4DVgnDHmLUdRpSRUZkREpOastdsBhwMHA9v28nufAx4CHgTGGmMeLz6hlJnKjIhIAay1XwI+UuVhZhhjTi4ijy+staOAC8hKTKU2zV/H5sdMgcuBP2nURkREpCDW2j/a6r1a4bknFXDumwr+7zHUWvsna+3SArJ1ZaG19jpr7d5FZpfy0QRgEREplLV2JNltoc9Q2/eZfsBRwF3W2pustSNqeC7xmMqMiIgUxlr7YbIiM7LOpz4ceNpae3SdzyseUJkREZFCWGt3AP4BDHUUYRhwTT5Ko/e3JqI/bBERqZq1dk3gr8AA11mAScaYdtchpH5UZkREpCr5KMi1wPquswD3A99zHULqS2VGRESqdTSwj+sQwAzg08aYpa6DSH2pzIiISMWstX2As13nyJ1ojJnqOoTUn8qMiIhU49PU/8mlzvzSGHOL6xDihlYAFhGRapxe4LHmAxOAl4D1gI3I9m/qznjgjAJzSMmozIiISEWstWvTy32WujAXOBf4hTFmSYdzbAUcn7+Gd/G9RxljFhWQQ0pKt5lERKRS+xdwjNlAaIy5sGORATDGPGWMOQPYHOjsNtIXjDHPFZBDSkxlRkREKlVEmTnBGPNsd19kjJlujDkM+AKwIP/HfzTGXFNABik5lRkREalUWOX3TzPG/K0332CMuRTYnmxdm9OqPL80CM2ZERGRSlW7seP9lXyTMeYZsqeoRACNzIiISAWstQOAwVUepm8RWURUZkREpBLVjsoA7JyXIpGqqMyIiEglVi3gGGuRPZItUhWVGRERqcT0go7zTWvtNdba1Qo6njQhlRkREanEdMAWdKyjgcettXsWdDxpMiozIiLSa/kCd0WNzgBsCNxjrX3QWnuctbZ/gceWBqcyIyIilXq4BsccDVwJTLXW/tBau0ENziENRmVGREQqdWcNjz0c+BbwvLX2Vmvt/tZaU8PzSYmpzIiISKX+VYdztAAfA24HnrHWnmKt1fo0sgKVGRERqUi+Eu8/6njKzYDfkJWa4621fep4bvGYyoyIiFTjPAfn3Ai4Aphgrf2Eg/OLZ1RmRESkYsaYR4DLHJ1+c+BGa+2l1lrtNdjEVGZERKRaXwbGOTz/54B/auG95qUyIyIiVTHGLAQOBsY6jLEvMNZau6HDDOKIyoyIiFTNGDMNaAN+6zDGFsBD1toPOswgDqjMiIhIIYwxi40xXwROAhY6ijECuMpaq/e3JqI/bBERKZQx5o/ATsDfHUXYEzjd0bnFAZUZEREpnDHmSWPMx4AQN6XmTGvtQAfnFQdUZkREpGaMMeOWKzV/AZbU6dRrAifW6VzimMqMiIjUXF5qPkm24N0FwFt1OO0X6nAO8YDKjIiI1I0x5mVjzHeADwIR8FgNT7eVtXZ4DY8vnlCZERGRujPGvGOMucIYsz2wB7W7BdVWg2OKZ1RmRETEKWPM/fktqFHAcwUffpeCjyceUpkREREvGGNSYGfg7gIPu1aBxxJPqcyIiIg3jDEzgP2B2ws65LCCjiMeU5kRERGvGGMWA2cAtoDDrVnAMcRzKjMiIuIdY8xTwJQCDqX3uSagP2QREamatXagtfa0gg87uYBjvFbAMcRzKjMiIlKE3wK/tNZeWOAx1y7gGK8UcAzxnMqMiIhUxVp7MnB8/svTrbU/L+CYA4Atqz0O8GoBxxDPqcyIiEjFrLXbAZd0+MdftdbebK0dWsWh9wD6VvH9y6jMNAGVGRERqYi1dnXgRmBAJ799GPC4tXa3Co47GPhdlfGWeaSg44jHVGZERKTXrLUG+BOw8Uq+bH3gHmvtr6y1G/XwuAOBP3Rz3J6aYoyp5d5P4gmVGRERqcQ3gUN68HV9gC8Bk62111trd7HW9uvsC621hwKTgCMLynhjQccRz7W6DiAiIuVirW0DftDLb+sDfDJ/LbXWvgCkwBtAAGwFDCkwJqjMNA2VGRER6TFr7drAdWTlpFJ9gE3zV608YYxJanh88YhuM4mISI9Ya1vJiswI11m6YYFTXYeQ+lGZERGRnvoasKfrED3wZ2PM/a5DSP2ozIiISE/9ARjnOkQ3ZpNNTpYmojIjIiI9YoyZAXwEeMh1li4sAT5jjHnddRCpL5UZERHpMWPMbGA/4D7XWTpoB443xtzqOojUn8qMiIj0ijFmLnAAcJfrLMs5xRhzjesQ4obKjIiI9JoxZgFwEHAOsNBhlDnAccaYyxxmEMdUZkREpCLGmIXGmHOBUcB/HES4D9jGGHOVg3OLR1RmRESkKsaYycaY/YCjgdfqcMo5wLeANmPMi3U4n3hOZUZEpBjtZIu1VfNqL+G532WMuY5sa4IzgPHVHq8T/wNOB9YzxvzYGFN1ZhEREZEuWWtHWmvPttZOspV73Vp7g7X2KGttNVsoSAMzrgOIiEjjs9ZuA2wPfLCTVwvwJvBW/uMbwCPAGGPMRCeBpVT+H8FnJPsOxe1OAAAAAElFTkSuQmCC" alt="RERO ILS" />
-      </span>
-    </div>
-  </nav>
-  <div class="text-center">
-    <h3 class="mt-4 mb-4" translate>Permission required</h3>
-    {{ 'You do not have sufficient permissions to view this page' | translate }}
-  </div>
-</ng-template>
diff --git a/projects/admin/src/app/record/brief-view/circ-policies-brief-view.component.ts b/projects/admin/src/app/record/brief-view/circ-policies-brief-view.component.ts
index 6c3a34331..017b697db 100644
--- a/projects/admin/src/app/record/brief-view/circ-policies-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/circ-policies-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,26 +15,37 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ResultItem } from '@rero/ng-core';
 
 @Component({
   selector: 'admin-circ-policies-brief-view',
   template: `
-  <h5 class="mb-0 card-title"><a [routerLink]="[detailUrl.link]">{{ record.metadata.name }}</a></h5>
+  <h5 class="mb-0 card-title">
+    <a [routerLink]="[detailUrl.link]">{{ record.metadata.name }}</a>
+    <span class="badge badge-light ml-2 align-top">
+      <small>
+      @if (record.metadata.policy_library_level) {
+        {{ 'Library' | translate }}
+      } @else {
+        {{ 'Organisation' | translate }}
+      }
+    </small>
+    </span>
+  </h5>
   <div class="card-text">
-    <span *ngIf="record.metadata.description">
+    @if (record.metadata.description) {
       {{ record.metadata.description }}
-    </span>
+    }
   </div>
   `,
   styles: []
 })
 export class CircPoliciesBriefViewComponent implements ResultItem {
 
-  record: any;
+  @Input() record: any;
 
-  type: string;
+  @Input() type: string;
 
-  detailUrl: { link: string, external: boolean };
+  @Input() detailUrl: { link: string, external: boolean };
 }
diff --git a/projects/admin/src/app/record/brief-view/collection-brief-view.component.ts b/projects/admin/src/app/record/brief-view/collection-brief-view.component.ts
index d20cee002..83542003e 100644
--- a/projects/admin/src/app/record/brief-view/collection-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/collection-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -27,18 +27,19 @@ import { ResultItem } from '@rero/ng-core';
     ({{ record.metadata.collection_id }})
   </h5>
   <div class="card-text">
-    <div *ngIf="record.metadata.teachers" id="collection-teacher">
-      <ng-container *ngFor="let teacher of record.metadata.teachers; let last = last">
-      {{ teacher.name }}
-      {{ last ? '' : ', ' }}
-      </ng-container>
-    </div>
-    <div
-      *ngIf="record.metadata.description"
-      id="collection-start-end-date"
-      [innerHtml]="record.metadata.description | nl2br"
-    >
-    </div>
+    @if (record.metadata.teachers) {
+      <div id="collection-teacher">
+        @for (teacher of record.metadata.teachers; track teacher; let last = $last) {
+          {{ teacher.name }} {{ last ? '' : ', ' }}
+        }
+      </div>
+    }
+    @if (record.metadata.description) {
+      <div
+        id="collection-start-end-date"
+        [innerHtml]="record.metadata.description | nl2br"
+      ></div>
+    }
     {{ record.metadata.start_date | dateTranslate: 'mediumDate' }}
     - {{ record.metadata.end_date | dateTranslate: 'mediumDate' }}
   </div>
@@ -46,11 +47,9 @@ import { ResultItem } from '@rero/ng-core';
 })
 export class CollectionBriefViewComponent implements ResultItem {
 
-  @Input()
-  record: any;
+  @Input() record: any;
 
-  @Input()
-  type: string;
+  @Input() type: string;
 
   @Input()
   detailUrl: { link: string, external: boolean };
diff --git a/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html b/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html
index c2367bce5..a08d89247 100644
--- a/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html
+++ b/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,19 +15,19 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<article *ngIf="record" class="card flex-row border-0">
-  <shared-thumbnail
-    class="col-sm-2"
-    [record]="record"
-    isSmall=true>
-  </shared-thumbnail>
-  <div class="card-body w-100 py-0">
-    <h5 class="mb-0 card-title">
-      <a [routerLink]="['/records', type.startsWith('import_') ? type: 'documents', 'detail', record.metadata.pid]">
-        {{ record.metadata.title | mainTitle }}
-      </a>
-    </h5>
-    <ng-container class="card-text">
+@if (record) {
+  <article class="card flex-row border-0">
+    <shared-thumbnail
+      class="col-sm-2"
+      [record]="record"
+      isSmall=true>
+    </shared-thumbnail>
+    <div class="card-body w-100 py-0">
+      <h5 class="mb-0 card-title">
+        <a [routerLink]="['/records', type.startsWith('import_') ? type: 'documents', 'detail', record.metadata.pid]">
+          {{ record.metadata.title | mainTitle }}
+        </a>
+      </h5>
       <!-- contribution -->
       <shared-contribution
         [contributions]="record.metadata?.contribution"
@@ -35,23 +35,31 @@ <h5 class="mb-0 card-title">
         [activateLink]="!type.startsWith('import_')"
       ></shared-contribution>
       <!-- provision activity publications -->
-      <ul class="list-unstyled" *ngIf="provisionActivityPublications.length > 0">
-        <li *ngFor="let publication of provisionActivityPublications">{{ publication.value }}</li>
-      </ul>
+      @if (provisionActivityPublications.length > 0) {
+        <ul class="list-unstyled">
+          @for (publication of provisionActivityPublications; track publication) {
+            <li>{{ publication.value }}</li>
+          }
+        </ul>
+      }
       <!-- shared part -->
       <shared-part-of [record]="record"></shared-part-of>
       <!-- edition statement -->
-      <ul class="list-unstyled mb-0" *ngIf="record.metadata.editionStatement">
-        <li *ngFor="let edition of record.metadata.editionStatement">{{ edition._text[0].value }}</li>
-      </ul>
+      @if (record.metadata.editionStatement) {
+        <ul class="list-unstyled mb-0">
+          @for (edition of record.metadata.editionStatement; track edition) {
+            <li>{{ edition._text[0].value }}</li>
+          }
+        </ul>
+      }
       <!-- availability -->
-      <ng-container *ngIf="!type.startsWith('import_') && record.metadata.type !== 'ebook'">
+      @if (!type.startsWith('import_') && record.metadata.type !== 'ebook') {
         <shared-availability
           recordType="document"
           [record]="record"
           [apiService]="documentApiService"
         ></shared-availability>
-      </ng-container>
-    </ng-container>
-  </div>
-</article>
+      }
+    </div>
+  </article>
+}
diff --git a/projects/admin/src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.html b/projects/admin/src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.html
index a816624ac..0ea1c72ed 100644
--- a/projects/admin/src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.html
+++ b/projects/admin/src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.html
@@ -1,7 +1,7 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020 RERO
-  Copyright (C) 2020 UCLouvain
+  Copyright (C) 2020-2024 RERO
+  Copyright (C) 2020-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,23 +15,29 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record && requester">
+@if (record && requester) {
   <span class="badge badge-{{ badgeColor }} float-right px-2 py-1" translate>{{ record.metadata.status }}</span>
   <h5 class="mb-0">
     <a [routerLink]="[detailUrl.link]">
       {{ record.metadata.document.title }}
     </a>
   </h5>
-  <div class="small" *ngIf="record.metadata.document.authors as authors">{{ authors }}</div>
+  @if (record.metadata.document.authors) {
+    <div class="small">{{ record.metadata.document.authors }}</div>
+  }
   <dl class="mt-2 row">
     <dt class="col-sm-6 col-md-3 label-title" translate>Requested by</dt>
     <dd class="col-sm-6 col-md-9 mb-0">
-      <a *ngIf="requester && requester.patron && requester.patron.barcode[0]" [routerLink]="['/circulation', 'patron', requester.patron.barcode[0]]">
-        <span id="patron-last-name">{{ requester.last_name }}</span>
-        <span id="patron-first-name" *ngIf="requester.first_name as firstName">, {{ firstName }}</span>
-      </a>
+      @if (requester && requester.patron && requester.patron.barcode[0]) {
+        <a [routerLink]="['/circulation', 'patron', requester.patron.barcode[0]]">
+          <span id="patron-last-name">{{ requester.last_name }}</span>
+          @if (requester.first_name) {
+            <span id="patron-first-name">, {{ requester.first_name }}</span>
+          }
+        </a>
+      }
     </dd>
     <dt class="col-sm-6 col-md-3 label-title" translate>Request date</dt>
     <dd class="col-sm-6 col-md-9 mb-0">{{ record.created | dateTranslate:'medium' }}</dd>
   </dl>
-</ng-container>
+}
diff --git a/projects/admin/src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.ts b/projects/admin/src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.ts
index 11a58b014..fd291aa46 100644
--- a/projects/admin/src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
- * Copyright (C) 2020 UCLouvain
+ * Copyright (C) 2020-2024 RERO
+ * Copyright (C) 2020-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -38,7 +38,7 @@ export class IllRequestsBriefViewComponent  implements ResultItem, OnInit {
 
 
   // GETTER FUNCTIONS ==========================================================
-  /** get the bootsrap color to apply on the request status badge */
+  /** get the bootstrap color to apply on the request status badge */
   get badgeColor(): string {
     if (this.record) {
       switch (this.record.metadata.status) {
@@ -54,14 +54,14 @@ export class IllRequestsBriefViewComponent  implements ResultItem, OnInit {
   // CONSTRUCTOR & HOOKS =======================================================
   /**
    * Constructor
-   * @param _recordService - RecordService
+   * @param recordService - RecordService
    */
-  constructor(private _recordService: RecordService) {}
+  constructor(private recordService: RecordService) {}
 
   /** Init hook */
   ngOnInit() {
     if (this.record) {
-      this._recordService.getRecord('patrons', this.record.metadata.patron.pid).subscribe(
+      this.recordService.getRecord('patrons', this.record.metadata.patron.pid).subscribe(
         (patron) => this.requester = patron.metadata
       );
     }
diff --git a/projects/admin/src/app/record/brief-view/issues-brief-view/issues-brief-view.component.html b/projects/admin/src/app/record/brief-view/issues-brief-view/issues-brief-view.component.html
index 8a5a5cd07..2292bb177 100644
--- a/projects/admin/src/app/record/brief-view/issues-brief-view/issues-brief-view.component.html
+++ b/projects/admin/src/app/record/brief-view/issues-brief-view/issues-brief-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2020-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -16,71 +16,75 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<h5 class="card-title mb-0">
-  <a [routerLink]="[parentUrl.link]">{{ record.metadata.ui_title_text }}</a>
-</h5>
-<dl class="row ml-1 card-text brief-view">
-  <!-- INHERITED CALL NUMBER -->
-  <ng-container *ngIf="record | itemHoldingsCallNumber | async as callNumber">
-    <dt class="col-3 label-title" translate>Call number </dt>
-    <dd class="col-9">
-      <shared-inherited-call-number [item]="record" context="first"></shared-inherited-call-number>
-    </dd>
-  </ng-container>
-  <!-- BARCODE -->
-  <ng-container *ngIf="record.metadata.barcode">
-    <dt class="col-3 label-title" translate>Barcode</dt>
-    <dd class="col-9">
-      <a [routerLink]="[detailUrl.link]">{{ record.metadata.barcode }}</a>
-    </dd>
-  </ng-container>
-  <!-- ENUMERATION AND CHRONOLOGY -->
-  <ng-container *ngIf="record.metadata.enumerationAndChronology">
-    <dt class="col-3 label-title" translate>Numbering</dt>
-    <dd class="col-9">
-      {{ record.metadata.enumerationAndChronology }}
-    </dd>
-  </ng-container>
-  <!-- VENDOR -->
-  <ng-container *ngIf="record.metadata.vendor">
-    <dt class="col-3 label-title" translate>Vendor</dt>
-    <dd class="col-9">
-      {{ record.metadata.vendor.pid | getRecord: 'vendors': 'field': 'name' | async }}
-    </dd>
-  </ng-container>
-  <!-- EXPECTED DATE -->
-  <ng-container *ngIf="record.metadata.issue.expected_date">
-    <dt class="col-3 label-title" translate>Expected date</dt>
-    <dd class="col-9">
-      {{ record.metadata.issue.expected_date | dateTranslate }}
-    </dd>
-  </ng-container>
-  <!-- CLAIMS -->
-  <ng-container *ngIf="record.metadata?.issue?.claims?.counter > 0">
-    <dt class="col-3 label-title" translate>
-      <span [ngPlural]="record.metadata.issue.claims.counter">
-        <ng-template ngPluralCase="=1">{{ 'Claim' | translate }}</ng-template>
-        <ng-template ngPluralCase="other">{{ 'Claims' | translate }}</ng-template>
-      </span>
-    </dt>
-    <dd class="col-9">
-      {{ record.metadata.issue.claims.counter }}
-      <span class="small pl-2 text-secondary">
-        ({{ 'last claim' | translate }}: {{ claimLastDate | dateTranslate: 'short' }})
-      </span>
-      {{ record.metadata.issue.claims_count }}
-    </dd>
-  </ng-container>
-  <!-- ISSUE STATUS AND DATE-->
-  <ng-container *ngIf="record.metadata.issue.status as status">
-    <dt class="col-3 label-title" translate>Issue status</dt>
-    <dd class="col-9">
-      <i class="fa text-warning" [ngClass]="{
-        'fa-envelope': status === issueItemStatus.EXPECTED,
-        'fa-envelope-open-o': status === issueItemStatus.LATE
-      }"
-      ></i>
-    {{ status | translate }} [{{ record.metadata.issue.status_date | dateTranslate }}]
-    </dd>
-  </ng-container>
-</dl>
+@if (record) {
+  <h5 class="card-title mb-0">
+    <a [routerLink]="[parentUrl.link]">{{ record.metadata.ui_title_text }}</a>
+  </h5>
+  <dl class="row ml-1 card-text brief-view">
+    <!-- INHERITED CALL NUMBER -->
+    @if (record | itemHoldingsCallNumber | async; as callNumber) {
+      @if ((callNumber.first | json) !== '{}' || (callNumber.second | json) !== '{}') {
+        <dt class="col-3 label-title" translate>Call number</dt>
+      <dd class="col-9">
+        <shared-inherited-call-number [item]="record" context="first"></shared-inherited-call-number>
+      </dd>
+      }
+    }
+    <!-- BARCODE -->
+    @if (record.metadata.barcode) {
+      <dt class="col-3 label-title" translate>Barcode</dt>
+      <dd class="col-9">
+        <a [routerLink]="[detailUrl.link]">{{ record.metadata.barcode }}</a>
+      </dd>
+    }
+    <!-- ENUMERATION AND CHRONOLOGY -->
+    @if (record.metadata.enumerationAndChronology) {
+      <dt class="col-3 label-title" translate>Numbering</dt>
+      <dd class="col-9">
+        {{ record.metadata.enumerationAndChronology }}
+      </dd>
+    }
+    <!-- VENDOR -->
+    @if (record.metadata.vendor) {
+      <dt class="col-3 label-title" translate>Vendor</dt>
+      <dd class="col-9">
+        {{ record.metadata.vendor.pid | getRecord: 'vendors': 'field': 'name' | async }}
+      </dd>
+    }
+    <!-- EXPECTED DATE -->
+    @if (record.metadata.issue.expected_date) {
+      <dt class="col-3 label-title" translate>Expected date</dt>
+      <dd class="col-9">
+        {{ record.metadata.issue.expected_date | dateTranslate }}
+      </dd>
+    }
+    <!-- CLAIMS -->
+    @if (record.metadata?.issue?.claims?.counter > 0) {
+      <dt class="col-3 label-title" translate>
+        <span [ngPlural]="record.metadata.issue.claims.counter">
+          <ng-template ngPluralCase="=1">{{ 'Claim' | translate }}</ng-template>
+          <ng-template ngPluralCase="other">{{ 'Claims' | translate }}</ng-template>
+        </span>
+      </dt>
+      <dd class="col-9">
+        {{ record.metadata.issue.claims.counter }}
+        <span class="small pl-2 text-secondary">
+          ({{ 'last claim' | translate }}: {{ claimLastDate | dateTranslate: 'short' }})
+        </span>
+        {{ record.metadata.issue.claims_count }}
+      </dd>
+    }
+    <!-- ISSUE STATUS AND DATE-->
+    @if (record.metadata.issue.status; as status) {
+      <dt class="col-3 label-title" translate>Issue status</dt>
+      <dd class="col-9">
+        <i class="fa text-warning" [ngClass]="{
+          'fa-envelope': status === issueItemStatus.EXPECTED,
+          'fa-envelope-open-o': status === issueItemStatus.LATE
+        }"
+        ></i>
+      {{ status | translate }} [{{ record.metadata.issue.status_date | dateTranslate }}]
+      </dd>
+    }
+  </dl>
+}
diff --git a/projects/admin/src/app/record/brief-view/item-types-brief-view.component.ts b/projects/admin/src/app/record/brief-view/item-types-brief-view.component.ts
index 2b839b365..6f396effb 100644
--- a/projects/admin/src/app/record/brief-view/item-types-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/item-types-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -26,21 +26,18 @@ import { ResultItem } from '@rero/ng-core';
     <a [routerLink]="[detailUrl.link]">{{ record.metadata.name }}</a>
   </h5>
   <div class="card-text">
-    <span *ngIf="record.metadata.description">
+    @if (record.metadata.description) {
       {{ record.metadata.description }}
-    </span>
+    }
   </div>
   `,
   styles: []
 })
 export class ItemTypesBriefViewComponent implements ResultItem {
 
-  @Input()
-  record: any;
+  @Input() record: any;
 
-  @Input()
-  type: string;
+  @Input() type: string;
 
-  @Input()
-  detailUrl: { link: string, external: boolean };
+  @Input() detailUrl: { link: string, external: boolean };
 }
diff --git a/projects/admin/src/app/record/brief-view/items-brief-view/items-brief-view.component.html b/projects/admin/src/app/record/brief-view/items-brief-view/items-brief-view.component.html
index 4a363b463..f5560769a 100644
--- a/projects/admin/src/app/record/brief-view/items-brief-view/items-brief-view.component.html
+++ b/projects/admin/src/app/record/brief-view/items-brief-view/items-brief-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2020-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -16,32 +16,30 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<h5 class="mb-0 card-title">
+<h5 class="mb-0">
   <a [routerLink]="['/records', 'items', 'detail', record.metadata.pid]">
       {{ record.metadata.ui_title_text }}
   </a>
 </h5>
-<ng-container class="card-text">
-  <dl class="row mb-0 ml-1">
-    <!-- INHERITED CALL NUMBER -->
-    <ng-container *ngIf="record | itemHoldingsCallNumber | async as callNumber">
+<dl class="row mb-0 ml-1">
+  <!-- INHERITED CALL NUMBER -->
+  @if (record | itemHoldingsCallNumber | async; as callNumber) {
+    @if ((callNumber.first | json) !== '{}' || (callNumber.second | json) !== '{}') {
       <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Call number</dt>
       <dd class="col-sm-7 col-md-8 mb-0">
         <shared-inherited-call-number [item]="record" context="first"></shared-inherited-call-number>
-        <ng-container *ngIf="record.metadata.second_call_number">| {{ record.metadata.second_call_number }}</ng-container>
+        @if (record.metadata.second_call_number) {
+          | {{ record.metadata.second_call_number }}
+        }
       </dd>
-    </ng-container>
-    <ng-container *ngIf="record.metadata.barcode">
-      <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Barcode</dt>
-      <dd class="col-sm-7 col-md-8 mb-0">
-        {{ record.metadata.barcode }}
-      </dd>
-    </ng-container>
-    <ng-container *ngIf="record.metadata.current_pending_requests > 0">
-      <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Current requests</dt>
-      <dd  class="col-sm-7 col-md-8 mb-0">
-        {{ record.metadata.current_pending_requests }}
-      </dd>
-    </ng-container>
-  </dl>
-</ng-container>
+    }
+  }
+  @if (record.metadata.barcode) {
+    <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Barcode</dt>
+    <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.barcode }}</dd>
+  }
+  @if (record.metadata.current_pending_requests > 0) {
+    <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Current requests</dt>
+    <dd  class="col-sm-7 col-md-8 mb-0">{{ record.metadata.current_pending_requests }}</dd>
+  }
+</dl>
diff --git a/projects/admin/src/app/record/brief-view/items-brief-view/items-brief-view.component.ts b/projects/admin/src/app/record/brief-view/items-brief-view/items-brief-view.component.ts
index 5ee44d6d3..fccd9f829 100644
--- a/projects/admin/src/app/record/brief-view/items-brief-view/items-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/items-brief-view/items-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -25,22 +25,12 @@ import { ResultItem } from '@rero/ng-core';
 })
 export class ItemsBriefViewComponent implements ResultItem {
 
-  /**
-   * Record
-   */
-  @Input()
-  record: any;
+  /** Record */
+  @Input() record: any;
 
-  /**
-   * Type of record
-   */
-  @Input()
-  type: string;
-
-  /**
-   * Detail Url
-   */
-  @Input()
-  detailUrl: { link: string, external: boolean };
+  /** Type of record */
+  @Input() type: string;
 
+  /** Detail Url */
+  @Input() detailUrl: { link: string, external: boolean };
 }
diff --git a/projects/admin/src/app/record/brief-view/libraries-brief-view.component.ts b/projects/admin/src/app/record/brief-view/libraries-brief-view.component.ts
index efe7e87bb..764408568 100644
--- a/projects/admin/src/app/record/brief-view/libraries-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/libraries-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -26,23 +26,20 @@ import { ResultItem  } from '@rero/ng-core';
   </h5>
   <div class="card-text">
     <small> {{ record.metadata.code }}</small>
-    <span *ngIf="record.metadata.description">
+    @if (record.metadata.description) {
       {{ record.metadata.description }}
-    </span>
+    }
   </div>
   `,
 })
 export class LibrariesBriefViewComponent implements ResultItem {
 
   /** Record data */
-  @Input()
-  record: any;
+  @Input() record: any;
 
   /** Resource type */
-  @Input()
-  type: string;
+  @Input() type: string;
 
   /** Detail URL to navigate to detail view */
-  @Input()
-  detailUrl: { link: string, external: boolean };
+  @Input() detailUrl: { link: string, external: boolean };
 }
diff --git a/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.html b/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.html
index 540d818ed..c1330f482 100644
--- a/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.html
+++ b/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.html
@@ -1,7 +1,7 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2022 RERO
-  Copyright (C) 2022 UCLouvain
+  Copyright (C) 2022-2024 RERO
+  Copyright (C) 2022-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -36,40 +36,44 @@ <h5 class="mb-0">{{ record.metadata.document.title | mainTitle }}</h5>
           <dt class="label-title col-3" translate>Status</dt>
           <dd class="col-9">
             <span class="badge" [class]="stateClass">{{ record.metadata.state | translate }}</span>
-            <ng-container [ngSwitch]="record.metadata.state">
+            @switch(record.metadata.state) {
               <!-- ITEM_ON_LOAN additional information -->
-              <span *ngSwitchCase="loanState.ITEM_ON_LOAN">
-                <span *ngIf="record.metadata?.is_late" class="badge badge-danger ml-1" translate>overdue</span>
-                ({{ 'due date' | translate }}
-                <span [ngClass]="{'text-danger font-weight-bold': record.metadata?.is_late}">
-                  {{record.metadata.end_date | date: 'shortDate' }}</span>)
-              </span>
+              @case (loanState.ITEM_ON_LOAN) {
+                @if (record.metadata?.is_late) {
+                  <span class="badge badge-danger ml-1" translate>overdue</span>
+                  ({{ 'due date' | translate }}
+                  <span [ngClass]="{'text-danger font-weight-bold': record.metadata?.is_late}">
+                    {{record.metadata.end_date | date: 'shortDate' }}</span>)
+                }
+              }
               <!-- REQUEST additional information -->
-              <span *ngSwitchCase="loanState.ITEM_AT_DESK">
+              @case (loanState.ITEM_AT_DESK) {
                 ({{ 'request expire at' | translate }}
-                 <span [ngClass]="{'text-danger': isRequestExpired}">{{ record.metadata.request_expire_date | date: 'shortDate' }}</span>)
-              </span>
-            </ng-container>
+                <span [ngClass]="{'text-danger': isRequestExpired}">{{ record.metadata.request_expire_date | date: 'shortDate' }}</span>)
+              }
+            }
           </dd>
         </dl>
       </div>
     </div>
     <!-- ACTIONS BUTTON -->
     <div class="col-2 text-right">
-      <button class="btn btn-sm btn-outline-secondary"
-              (click)="openTransactionHistoryDialog(record.metadata.pid)"
-      >
+      <button class="btn btn-sm btn-outline-secondary" (click)="openTransactionHistoryDialog(record.metadata.pid)">
         <i class="fa fa-history"></i>
       </button>
-      <button class="debug-button btn btn-sm btn-outline-warning ml-1"
-              *ngIf="canUseDebugMode"
-              [class.btn-hover]="debugMode"
-              (click)="debugMode=!debugMode">
-        <i class="fa fa-bug pr-1"></i>
-        <i class="fa" [ngClass]="debugMode ? 'fa-toggle-on' : 'fa-toggle-off'"></i>
-      </button>
+      @if (canUseDebugMode) {
+        <button class="debug-button btn btn-sm btn-outline-warning ml-1"
+          [class.btn-hover]="debugMode"
+          (click)="debugMode=!debugMode"
+        >
+          <i class="fa fa-bug pr-1"></i>
+          <i class="fa" [ngClass]="debugMode ? 'fa-toggle-on' : 'fa-toggle-off'"></i>
+        </button>
+      }
     </div>
     <!-- DEBUG PANEL -->
-    <pre class="col-12 mt-2" *ngIf="debugMode">{{ record.metadata | json }}</pre>
+    @if (debugMode) {
+      <pre class="col-12 mt-2">{{ record.metadata | json }}</pre>
+    }
   </div>
 </section>
diff --git a/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.ts b/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.ts
index 77e3bddc9..5142208a2 100644
--- a/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
- * Copyright (C) 2022 UCLouvain
+ * Copyright (C) 2022-2024 RERO
+ * Copyright (C) 2022-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -55,18 +55,18 @@ export class LoansBriefViewComponent implements ResultItem, OnInit {
    * @returns True if the debug mode can be enabled and switched
    */
   get canUseDebugMode(): boolean {
-    return this._permissionsService.canAccessDebugMode();
+    return this.permissionsService.canAccessDebugMode();
   }
 
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _modalService - BsModalService
-   * @param _permissionsService - PermissionsService
+   * @param modalService - BsModalService
+   * @param permissionsService - PermissionsService
    */
   constructor(
-    private _modalService: BsModalService,
-    private _permissionsService: PermissionsService
+    private modalService: BsModalService,
+    private permissionsService: PermissionsService
   ){ }
 
   /** OnInit hook */
@@ -91,7 +91,7 @@ export class LoansBriefViewComponent implements ResultItem, OnInit {
         resourceType: 'loan'
       }
     };
-    this.bsModalRef = this._modalService.show(CirculationLogsComponent, config);
+    this.bsModalRef = this.modalService.show(CirculationLogsComponent, config);
     this.bsModalRef.content.dialogClose$.subscribe((value: boolean) => {
       if (value) {
         this.bsModalRef.hide();
@@ -99,7 +99,6 @@ export class LoansBriefViewComponent implements ResultItem, OnInit {
     });
   }
 
-
   // PRIVATE COMPONENT FUNCTIONS ==============================================
 
   /** Define the bullet color. */
@@ -118,6 +117,4 @@ export class LoansBriefViewComponent implements ResultItem, OnInit {
         this.stateClass = 'badge-warning';
     }
   }
-
-
 }
diff --git a/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-event-default.component.html b/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-event-default.component.html
index a3c73086e..e3b2a139b 100644
--- a/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-event-default.component.html
+++ b/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-event-default.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -16,9 +16,11 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <div class="description container pl-0">
-  <h5 *ngIf="parent.note" class="mb-0">
-    [{{ 'Note' | translate }}: {{ parent.note }}]
-  </h5>
+  @if (parent.note) {
+    <h5 class="mb-0">
+      [{{ 'Note' | translate }}: {{ parent.note }}]
+    </h5>
+  }
   <dl class="row ml-3 mb-0">
     <dt class="label-title col-3" translate>Patron</dt>
     <dd class="col-9">
diff --git a/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-event-overdue.component.html b/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-event-overdue.component.html
index 942744672..26fdc67cc 100644
--- a/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-event-overdue.component.html
+++ b/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-event-overdue.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -17,32 +17,27 @@
 -->
 <div class="description container pl-0">
   <h5 class="mb-0">
-    <ng-container *ngIf="parent.document; else noDocument">
+    @if (parent.document) {
       {{ parent.document.title | mainTitle }}
-    </ng-container>
-    <ng-template #noDocument>
-      <ng-container *ngIf="parent.note">
-        [{{ 'Note' | translate }}: {{ parent.note }}]
-      </ng-container>
-    </ng-template>
+    } @else if (parent.note) {
+      [{{ 'Note' | translate }}: {{ parent.note }}]
+    }
   </h5>
   <dl class="row ml-3 mb-0">
-    <ng-container *ngIf="parent.loan">
+    @if (parent.loan) {
       <dt class="label-title col-3" translate>Call number</dt>
       <dd class="col-9">
-        <ng-container *ngIf="parent.loan.item else no_item">
+        @if (parent.loan.item) {
           <shared-inherited-call-number [item]="parent.loan?.item"></shared-inherited-call-number>
           (<a [routerLink]="['/records', 'items', 'detail', parent.loan.item.pid]">{{ parent.loan.item.barcode }}</a>)
-        </ng-container>
+        } @else {
+          <span class="no-data raw-data">item_pid:{{ parent.loan.item_pid.value }}</span>
+        }
       </dd>
-    </ng-container>
+    }
     <dt class="label-title col-3" translate>Patron</dt>
     <dd class="col-9">
       <a [routerLink]="['/records', 'patrons', 'detail', parent.patron.pid]">{{ parent.patron.pid | patronName | async }}</a>
     </dd>
   </dl>
 </div>
-
-<ng-template #no_item>
-  <span class="no-data raw-data">item_pid:{{ parent.loan.item_pid.value }}</span>
-</ng-template>
diff --git a/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-events-brief-view.component.html b/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-events-brief-view.component.html
index 801ba9137..2f41744e7 100644
--- a/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-events-brief-view.component.html
+++ b/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-events-brief-view.component.html
@@ -1,7 +1,7 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2022 RERO
-  Copyright (C) 2019-2022 UCLouvain
+  Copyright (C) 2019-2024 RERO
+  Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,35 +15,38 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<section *ngIf="loaded else skeleton">
+
+@defer(when loaded) {
   <div class="content">
-    <ng-container [ngSwitch]="parent.type">
-      <admin-patron-transaction-event-overdue
-        *ngSwitchCase="'overdue'"
-        [parent]="parent" [event]="event">
-      </admin-patron-transaction-event-overdue>
-      <admin-patron-transaction-event-default
-        *ngSwitchDefault
-        [parent]="parent" [event]="event">
-      </admin-patron-transaction-event-default>
-    </ng-container>
+    @switch (parent.type) {
+      @case ('overdue') {
+        <admin-patron-transaction-event-overdue [parent]="parent" [event]="event">
+        </admin-patron-transaction-event-overdue>
+      }
+      @default {
+        <admin-patron-transaction-event-default [parent]="parent" [event]="event">
+        </admin-patron-transaction-event-default>
+      }
+    }
     <span class="badge badge-{{ event.type }}">
-      <ng-container *ngIf="event.type !== eventTypes.DISPUTE else dispute">
+      @if (event.type !== eventTypes.DISPUTE) {
         {{ event.amount | currency : organisation.default_currency }}
-      </ng-container>
-      <ng-template #dispute>{{ 'dispute' | translate }}</ng-template>
+      } @else {
+        {{ 'dispute' | translate }}
+      }
     </span>
   </div>
   <div class="meta">
-    <span class="operator" *ngIf="event.operator">{{ event.operator.name }}</span>
-    <span class="library ml-2" *ngIf="event.library">{{ event.library.name }}</span>
+    @if (event.operator) {
+      <span class="operator">{{ event.operator.name }}</span>
+    }
+    @if (event.library) {
+      <span class="library ml-2">{{ event.library.name }}</span>
+    }
     <span class="transaction-type ml-2">{{ parent.type | translate }}</span>
     <span class="creation-date">{{ event.creation_date | date : 'short' }}</span>
   </div>
-</section>
-
-
-<ng-template #skeleton>
+} @loading {
   <div class="d-flex">
     <div class="w-100 container p-0">
       <p-skeleton styleClass="mb-1"></p-skeleton>
@@ -61,4 +64,4 @@
     <p-skeleton width="200px" height="1.5rem" styleClass="ml-1"></p-skeleton>
     <p-skeleton width="100px" height="1.5rem" class="ml-auto"></p-skeleton>
   </div>
-</ng-template>
+}
diff --git a/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-events-brief-view.component.ts b/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-events-brief-view.component.ts
index ccd2c5318..4b0cc1441 100644
--- a/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-events-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-events-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2022 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -51,19 +51,19 @@ export class PatronTransactionEventsBriefViewComponent implements ResultItem, On
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _organisationService - OrganisationService
-   * @param _patronTransactionService - PatronTransactionsService
+   * @param organisationService - OrganisationService
+   * @param patronTransactionService - PatronTransactionsService
    */
   constructor(
-    private _organisationService: OrganisationService,
-    private _patronTransactionService: PatronTransactionsService
+    private organisationService: OrganisationService,
+    private patronTransactionService: PatronTransactionsService
   ) { }
 
   /** OnInit hook */
   ngOnInit(): void {
-    this.organisation = this._organisationService.organisation;
+    this.organisation = this.organisationService.organisation;
     this.event = new PatronTransactionEvent(this.record.metadata);
-    this._patronTransactionService
+    this.patronTransactionService
       .getPatronTransaction(this.event.parent.pid)
       .subscribe((parent: PatronTransaction) => {
         this.parent = parent;
diff --git a/projects/admin/src/app/record/brief-view/patron-types-brief-view.component.ts b/projects/admin/src/app/record/brief-view/patron-types-brief-view.component.ts
index cb2ce6e10..628e61e81 100644
--- a/projects/admin/src/app/record/brief-view/patron-types-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/patron-types-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -25,21 +25,18 @@ import { ResultItem } from '@rero/ng-core';
     <a [routerLink]="[detailUrl.link]">{{ record.metadata.name }}</a>
   </h5>
   <div class="card-text">
-    <span *ngIf="record.metadata.description">
+    @if (record.metadata.description) {
       {{ record.metadata.description }}
-    </span>
+    }
   </div>
   `,
   styles: []
 })
 export class PatronTypesBriefViewComponent implements ResultItem {
 
-  @Input()
-  record: any;
+  @Input() record: any;
 
-  @Input()
-  type: string;
+  @Input() type: string;
 
-  @Input()
-  detailUrl: { link: string, external: boolean };
+  @Input() detailUrl: { link: string, external: boolean };
 }
diff --git a/projects/admin/src/app/record/brief-view/patrons-brief-view/patrons-brief-view.component.html b/projects/admin/src/app/record/brief-view/patrons-brief-view/patrons-brief-view.component.html
index 5465d5eac..2eda9cb91 100644
--- a/projects/admin/src/app/record/brief-view/patrons-brief-view/patrons-brief-view.component.html
+++ b/projects/admin/src/app/record/brief-view/patrons-brief-view/patrons-brief-view.component.html
@@ -1,7 +1,7 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2022 RERO
-  Copyright (C) 2021-2022 UCLouvain
+  Copyright (C) 2021-2024 RERO
+  Copyright (C) 2021-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,26 +15,37 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div *ngIf="record"
-     [attr.id]="record.metadata.pid | idAttribute : {'prefix': 'patron', 'suffix': 'brief-view'}"
-     class="patron-brief brief-view">
-  <h5 class="card-title">
-    <a [routerLink]="[detailUrl.link]">
-      {{ record.metadata.last_name }}<ng-container *ngIf="record.metadata.first_name">, {{ record.metadata.first_name }}</ng-container>
-    </a>
-    <div *ngIf="circulationAccess && record.metadata.patron" class="action-buttons">
-      <a [routerLink]="['/circulation', 'patron', record.metadata.patron.barcode[0]]" class="btn-link btn btn-sm btn-outline-primary">
-        <i class="fa fa-exchange mr-2"></i>
-        {{ 'Circulation' | translate }}
+@if (record) {
+  <div
+    [attr.id]="record.metadata.pid | idAttribute : {'prefix': 'patron', 'suffix': 'brief-view'}"
+    class="patron-brief brief-view"
+  >
+    <h5 class="card-title">
+      <a [routerLink]="[detailUrl.link]">
+        {{ record.metadata.last_name }}
+        @if (record.metadata.first_name) {
+          {{ record.metadata.first_name }}
+        }
       </a>
-    </div>
-  </h5>
-  <div class="card-text">
+      @if (circulationAccess && record.metadata.patron) {
+        <div class="action-buttons">
+          <a
+            [routerLink]="['/circulation', 'patron', record.metadata.patron.barcode[0]]"
+            class="btn-link btn btn-sm btn-outline-primary"
+          >
+            <i class="fa fa-exchange mr-2"></i>
+            {{ 'Circulation' | translate }}
+          </a>
+        </div>
+      }
+    </h5>
+    <div class="card-text">
     <p>
       <small class="badge badge-pill mr-1" [class]="getRoleBadgeColor(role)" *ngFor="let role of record.metadata.roles">
         {{ role | translate }}
       </small>
     </p>
     <p>{{ record.metadata.birth_date | dateTranslate:'mediumDate' }} &mdash; {{ record.metadata.city }}</p>
+    </div>
   </div>
-</div>
+}
diff --git a/projects/admin/src/app/record/brief-view/patrons-brief-view/patrons-brief-view.component.ts b/projects/admin/src/app/record/brief-view/patrons-brief-view/patrons-brief-view.component.ts
index 6490713c0..dbef1747f 100644
--- a/projects/admin/src/app/record/brief-view/patrons-brief-view/patrons-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/patrons-brief-view/patrons-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -39,14 +39,14 @@ export class PatronsBriefViewComponent implements ResultItem {
    * @return true if the circulation permission is allowed
    */
    get circulationAccess(): boolean {
-    return this._permissionsService.canAccess(PERMISSIONS.CIRC_ADMIN);
+    return this.permissionsService.canAccess(PERMISSIONS.CIRC_ADMIN);
   }
 
   /**
    * Constructor
-   * @param _permissionsService - PermissionsService
+   * @param permissionsService - PermissionsService
    */
-  constructor(private _permissionsService: PermissionsService) {}
+  constructor(private permissionsService: PermissionsService) {}
 
   /**
    * Get the color badge to apply for a specific role
diff --git a/projects/admin/src/app/record/brief-view/statistics-cfg-brief-view-component.ts b/projects/admin/src/app/record/brief-view/statistics-cfg-brief-view-component.ts
index 98b5c3087..ce6b6b761 100644
--- a/projects/admin/src/app/record/brief-view/statistics-cfg-brief-view-component.ts
+++ b/projects/admin/src/app/record/brief-view/statistics-cfg-brief-view-component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2023 RERO
+ * Copyright (C) 2023-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -29,8 +29,9 @@ import { ResultItem } from '@rero/ng-core';
     ></i>
   <a [routerLink]="[detailUrl.link]">{{ record.metadata.name }}</a></h5>
   <div class="card-text">
-    <div *ngIf="record.metadata.description" [innerHTML]="record.metadata.description | truncateText: 30">
-    </div>
+    @if (record.metadata.description) {
+      <div [innerHTML]="record.metadata.description | truncateText: 30"></div>
+    }
     <div>
       <b translate>Category</b>: {{ record.metadata.category.type | translate }}
     </div>
@@ -53,9 +54,9 @@ export class StatisticsCfgBriefViewComponent implements ResultItem {
 
   /**
    * Constructor
-   * @param _translateService - TranslateService
+   * @param translateService - TranslateService
    */
-  public constructor(private _translateService: TranslateService) {}
+  public constructor(private translateService: TranslateService) {}
 
   /**
    * Status of the configuration on bullet title
@@ -63,7 +64,7 @@ export class StatisticsCfgBriefViewComponent implements ResultItem {
    */
     get activeLabel() {
       return this.record.metadata.is_active
-        ? this._translateService.instant('Active')
-        : this._translateService.instant('Inactive');
+        ? this.translateService.instant('Active')
+        : this.translateService.instant('Inactive');
     }
 }
diff --git a/projects/admin/src/app/record/brief-view/templates-brief-view.component.ts b/projects/admin/src/app/record/brief-view/templates-brief-view.component.ts
index d1c991c88..cfa818d41 100644
--- a/projects/admin/src/app/record/brief-view/templates-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/templates-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -21,21 +21,29 @@ import { Component, Input } from '@angular/core';
   template: `
   <h5 class="mb-0 card-title">
     <a [routerLink]="[detailUrl.link]">{{ record.metadata.name }} </a>
-    <small *ngIf="record.metadata.visibility && record.metadata.visibility === 'private'">
-      <i class="fa fa-lock text-secondary" aria-hidden="true"></i>
-    </small>
+    @if (record.metadata.visibility === 'private') {
+      <small>
+        <i class="fa fa-lock text-secondary" aria-hidden="true"></i>
+      </small>
+    }
   </h5>
   <div class="card-text">
     <ul class="list-inline mb-0">
-      <li *ngIf="record.metadata.description">
-        {{ record.metadata.description | truncateText: 8 }}
-      </li>
-      <li *ngIf="record.metadata.creator.pid | getRecord: 'patrons' | async as creator">
-        {{ creator.metadata.first_name }} {{ creator.metadata.last_name }}
-      </li>
-      <li *ngIf="record.metadata.template_type" translate>
-        {{ record.metadata.template_type }}
-      </li>
+      @if (record.metadata.description) {
+        <li>
+          {{ record.metadata.description | truncateText: 8 }}
+        </li>
+      }
+      @if ($any(record.metadata.creator.pid | getRecord: 'patrons' | async); as creator) {
+        <li>
+          {{ creator.metadata.first_name }} {{ creator.metadata.last_name }}
+        </li>
+      }
+      @if (record.metadata.template_type) {
+        <li translate>
+          {{ record.metadata.template_type }}
+        </li>
+      }
     </ul>
   </div>
   `
@@ -43,10 +51,11 @@ import { Component, Input } from '@angular/core';
 export class TemplatesBriefViewComponent {
 
   /** Record data */
-  @Input()
-  record: any;
+  @Input() record: any;
+
+  /** Resource type */
+  @Input() type: string;
 
   /** Detail URL to navigate to detail view */
-  @Input()
-  detailUrl: { link: string, external: boolean };
+  @Input() detailUrl: { link: string, external: boolean };
 }
diff --git a/projects/admin/src/app/record/brief-view/vendor-brief-view.component.ts b/projects/admin/src/app/record/brief-view/vendor-brief-view.component.ts
index 1f64e0d95..598dd4f4d 100644
--- a/projects/admin/src/app/record/brief-view/vendor-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/vendor-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { ResultItem } from '@rero/ng-core';
 
 @Component({
@@ -24,17 +24,40 @@ import { ResultItem } from '@rero/ng-core';
     <h5 class="mb-0 card-title">
       <a [routerLink]="[detailUrl.link]">{{ record.metadata.name }}</a>
     </h5>
+    @if (address) {
+      @if (address.street) {
+        {{ address.street }},
+      }
+      @if (address.postal_code || address.city) {
+        {{ address.postal_code }} {{ address.city }}
+      }
+      @if (address.country) {
+        @if (address.postal_code || address.city) {
+          /
+        }
+        {{ address.country }}
+      }
+    }
   `,
   styleUrls: []
 })
-export class VendorBriefViewComponent implements ResultItem {
+export class VendorBriefViewComponent implements ResultItem, OnInit {
 
   /** Record  data */
-  record: any;
+  @Input() record: any;
 
   /** Resource type */
-  type: string;
+  @Input() type: string;
 
   /** Detail URL to navigate to detail view */
-  detailUrl: { link: string, external: boolean };
+  @Input() detailUrl: { link: string, external: boolean };
+
+  // Default address
+  address: any;
+
+  /** OnInit hook */
+  ngOnInit(): void {
+    const contact: any[] = this.record.metadata.contacts.filter((contact: any) => contact.type === 'default');
+    this.address = (contact.length > 0) ? contact[0] : undefined;
+  }
 }
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-loan/circulation-log-loan.component.html b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-loan/circulation-log-loan.component.html
index 8004bb022..ca25fde16 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-loan/circulation-log-loan.component.html
+++ b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-loan/circulation-log-loan.component.html
@@ -24,41 +24,38 @@
   <div collapsedContent class="row">
     <!-- Location -->
     <div class="col-8 fa-icon-library">
-      <ng-container *ngIf="record.metadata.loan.transaction_location; else noLibrary">
-        <ng-container *ngIf="record.metadata.loan.transaction_location.pid | getRecord : 'locations' | async as location">
-          {{ location.metadata.library.pid | getRecord : 'libraries' : 'field' : 'name' | async }}
-        </ng-container>
-      </ng-container>
-      <ng-template #noLibrary>
-        <span class="no-data">---</span>
-      </ng-template>
+      @if (record.metadata.loan.transaction_location) {
+        @if (record.metadata.loan.transaction_location.pid | getRecord : 'locations' | async; as location) {
+          {{ $any(location).metadata.library.pid | getRecord : 'libraries' : 'field' : 'name' | async }}
+        }
+      } @else {
+        ---
+      }
     </div>
     <!-- Patron -->
     <div class="col-4 fa-icon-patron">
-      <ng-container *ngIf="record.metadata.loan.patron.pid; else anonymous">
-        <ng-container *ngIf="record.metadata.loan.patron.pid | getRecord : 'patrons' | async as patron">
-          <a [routerLink]="['/circulation', 'patron', patron.metadata.patron.barcode[0]]"  (click)="closeDialog()">
-            {{ patron.metadata.last_name }}, {{ patron.metadata.first_name }}
+      @if (record.metadata.loan.patron.pid) {
+        @if (record.metadata.loan.patron.pid | getRecord : 'patrons' | async; as patron) {
+          <a [routerLink]="['/circulation', 'patron', $any(patron).metadata.patron.barcode[0]]"  (click)="closeDialog()">
+            {{ $any(patron).metadata.last_name }}, {{ $any(patron).metadata.first_name }}
           </a>
-        </ng-container>
-      </ng-container>
-      <ng-template #anonymous>
+        }
+      } @else {
         {{ 'Patron type' | translate }}: {{ record.metadata.loan.patron.type }}
-      </ng-template>
+      }
     </div>
   </div>
   <dl class="row" expandedContent>
     <!-- Library -->
     <dt class="col-4 label-title font-weight-bold fa-icon-library" translate>Library</dt>
     <dd class="col-8">
-      <ng-container *ngIf="record.metadata.loan.transaction_location; else noLibrary">
-        <ng-container *ngIf="record.metadata.loan.transaction_location.pid | getRecord : 'locations' | async as location">
-          {{ location.metadata.library.pid | getRecord : 'libraries' : 'field' : 'name' | async }}
-        </ng-container>
-      </ng-container>
-      <ng-template #noLibrary>
-        <span class="no-data">---</span>
-      </ng-template>
+      @if (record.metadata.loan.transaction_location) {
+        @if (record.metadata.loan.transaction_location.pid | getRecord : 'locations' | async; as location) {
+          {{ $any(location).metadata.library.pid | getRecord : 'libraries' : 'field' : 'name' | async }}
+        }
+      } @else {
+        ---
+      }
     </dd>
 
     <!-- Location -->
@@ -68,16 +65,15 @@
     <!-- Patron -->
     <dt class="col-4 label-title font-weight-bold fa-icon-patron" translate>Patron</dt>
     <dd class="col-8">
-      <ng-container *ngIf="record.metadata.loan.patron.pid; else anonymous">
-        <ng-container *ngIf="record.metadata.loan.patron.pid | getRecord : 'patrons' | async as patron">
-          <a [routerLink]="['/circulation', 'patron', patron.metadata.patron.barcode[0]]" (click)="closeDialog()">
-            {{ patron.metadata.last_name }}, {{ patron.metadata.first_name }}
+      @if (record.metadata.loan.patron.pid) {
+        @if (record.metadata.loan.patron.pid | getRecord : 'patrons' | async; as patron) {
+          <a [routerLink]="['/circulation', 'patron', $any(patron).metadata.patron.barcode[0]]" (click)="closeDialog()">
+            {{ $any(patron).metadata.last_name }}, {{ $any(patron).metadata.first_name }}
           </a>
-        </ng-container>
-      </ng-container>
-      <ng-template #anonymous>
+        }
+      } @else {
         {{ 'Patron type' | translate }}: {{ record.metadata.loan.patron.type }}
-      </ng-template>
+      }
     </dd>
 
     <!-- Operator -->
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-notification/circulation-log-notification.component.html b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-notification/circulation-log-notification.component.html
index 7577a154c..fbe85adc8 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-notification/circulation-log-notification.component.html
+++ b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-notification/circulation-log-notification.component.html
@@ -1,7 +1,7 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2023 RERO
-  Copyright (C) 2023 UCLouvain
+  Copyright (C) 2021-2024 RERO
+  Copyright (C) 2021-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -25,12 +25,11 @@
   <div collapsedContent class="row">
     <!-- Library -->
     <div class="col-8 transaction-library">
-      <ng-container *ngIf="record.metadata.notification.sender_library_pid; else noLibrary">
+      @if (record.metadata.notification.sender_library_pid) {
         {{ record.metadata.notification.sender_library_pid | getRecord : 'libraries'  : 'field' : 'name' | async }}
-      </ng-container>
-      <ng-template #noLibrary>
-        <span class="no-data">---</span>
-      </ng-template>
+      } @else {
+        ---
+      }
     </div>
     <!-- Type of notification -->
     <div class="col-4">
@@ -41,12 +40,11 @@
     <!-- Library -->
     <dt class="col-3 label-title font-weight-bold transaction-library" translate>Library</dt>
     <dd class="col-9">
-      <ng-container *ngIf="record.metadata.notification.sender_library_pid; else noLibrary">
+      @if (record.metadata.notification.sender_library_pid) {
         {{ record.metadata.notification.sender_library_pid | getRecord : 'libraries'  : 'field' : 'name' | async }}
-      </ng-container>
-      <ng-template #noLibrary>
-        <span class="no-data">---</span>
-      </ng-template>
+      } @else {
+        ---
+      }
     </dd>
 
     <!-- Type of notification -->
@@ -57,11 +55,13 @@
     <dt class="col-3 label-title font-weight-bold transaction-email" translate>Recipients</dt>
     <dd class="col-9">
       <ul class="list-unstyled mb-0">
-        <li *ngFor="let recipient of record.metadata.notification.recipients">{{ recipient }}</li>
+        @for (recipient of record.metadata.notification.recipients; track recipient) {
+          <li>{{ recipient }}</li>
+        }
       </ul>
     </dd>
 
-    <ng-container *ngIf="notificationRecord">
+    @if (notificationRecord) {
       <!-- Process date -->
       <dt class="col-3 label-title font-weight-bold transaction-date" translate>Process date</dt>
       <dd class="col-9">{{ notificationRecord.process_date  | dateTranslate :'medium' }}</dd>
@@ -69,13 +69,12 @@
       <!-- Status -->
       <dt class="col-3 label-title font-weight-bold transaction-status" translate>Status</dt>
       <dd class="col-9">
-        <ng-container *ngIf="notificationRecord.notification_sent; else notSend">
+        @if (notificationRecord.notification_sent) {
           <i class="fa fa-circle text-success"></i> {{ 'message sent' | translate }}
-        </ng-container>
-        <ng-template #notSend>
+        } @else {
           <i class="fa fa-circle text-danger"></i> {{ 'message not sent' | translate }}
-        </ng-template>
+        }
       </dd>
-    </ng-container>
+    }
   </dl>
 </admin-circulation-log>
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-notification/circulation-log-notification.component.ts b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-notification/circulation-log-notification.component.ts
index 0dffe9b07..f972903b8 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-notification/circulation-log-notification.component.ts
+++ b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-notification/circulation-log-notification.component.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2023 RERO
- * Copyright (C) 2023 UCLouvain
+ * Copyright (C) 2023-2024 RERO
+ * Copyright (C) 2023-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { NotificationApiService } from '@app/admin/api/notification-api.service';
 
 @Component({
@@ -38,9 +38,9 @@ export class CirculationLogNotificationComponent {
 
   /**
    * Constructor
-   * @param _NotificationApiService - NotificationApiService
+   * @param NotificationApiService - NotificationApiService
    */
-  constructor(private _NotificationApiService: NotificationApiService) {}
+  constructor(private NotificationApiService: NotificationApiService) {}
 
   /**
    * Load notification record
@@ -48,7 +48,7 @@ export class CirculationLogNotificationComponent {
    */
   loadData(isCollapsed: boolean): void {
     if (!isCollapsed && this.notificationRecord === undefined) {
-      this._NotificationApiService.getNotificationByPid(this.record.metadata.notification.pid)
+      this.NotificationApiService.getNotificationByPid(this.record.metadata.notification.pid)
       .subscribe((record: any) => {
         this.notificationRecord = record;
       })
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.html b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.html
index e18095c87..40883e9b6 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.html
+++ b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2023 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -34,20 +34,26 @@
       </dd>
       <!-- content -->
       <dd class="col-8">
-        <ng-content select="[collapsedContent]" *ngIf="isCollapsed"></ng-content>
-        <ng-content select="[expandedContent]" *ngIf="!isCollapsed"></ng-content>
+        @if (isCollapsed) {
+          <ng-content select="[collapsedContent]"></ng-content>
+        } @else {
+          <ng-content select="[expandedContent]"></ng-content>
+        }
       </dd>
       <!-- debug information -->
       <pre class="offset-4 col-8" [hidden]="!debugMode">{{ record | json }}</pre>
     </dl>
   </div>
   <!-- debug mode button -->
-  <button class="btn btn-sm btn-outline-warning d-flex p-2 debug-button"
-          *ngIf="canUseDebugMode && !isCollapsed"
-          [class.btn-hover]="debugMode"
-          (click)="debugMode=!debugMode">
-    <i class="fa fa-bug pr-1"></i>
-    <i class="fa" [ngClass]="debugMode ? 'fa-toggle-on' : 'fa-toggle-off'"></i>
-  </button>
+  @if (canUseDebugMode && !isCollapsed) {
+    <button class="btn btn-sm btn-outline-warning d-flex p-2 debug-button"
+      [class.btn-hover]="debugMode"
+      (click)="debugMode=!debugMode"
+    >
+      <i class="fa fa-bug pr-1"></i>
+      <i class="fa" [ngClass]="debugMode ? 'fa-toggle-on' : 'fa-toggle-off'"></i>
+    </button>
+  }
+
 </div>
 
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.ts b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.ts
index 4dc89c2d3..9c155f47a 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.ts
+++ b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -51,16 +51,16 @@ export class CirculationLogComponent {
    * @returns True if the debug mode can be enabled and switched
    */
   get canUseDebugMode(): boolean {
-    return this._permissionsService.canAccessDebugMode();
+    return this.permissionsService.canAccessDebugMode();
   }
 
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _userService - UserService
+   * @param permissionsService - PermissionsService
    */
   constructor(
-    private _permissionsService: PermissionsService
+    private permissionsService: PermissionsService
   ) {  }
 
   // COMPONENT FUNCTIONS ======================================================
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-logs-dialog.component.ts b/projects/admin/src/app/record/circulation-logs/circulation-logs-dialog.component.ts
index 65b030649..516403203 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-logs-dialog.component.ts
+++ b/projects/admin/src/app/record/circulation-logs/circulation-logs-dialog.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2022 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -52,9 +52,9 @@ export class CirculationLogsDialogComponent {
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _modalService - BsModalService
+   * @param modalService - BsModalService
    */
-  constructor(private _modalService: BsModalService) {}
+  constructor(private modalService: BsModalService) {}
 
   // COMPONENT FUNCTIONS ======================================================
   /** Open operation logs dialog */
@@ -67,7 +67,7 @@ export class CirculationLogsDialogComponent {
         resourceType: this.resourceType
       }
     };
-    this.bsModalRef = this._modalService.show(CirculationLogsComponent, config);
+    this.bsModalRef = this.modalService.show(CirculationLogsComponent, config);
     this.bsModalRef.content.dialogClose$.subscribe((value: boolean) => {
       if (value) {
         this.bsModalRef.hide();
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-logs.component.html b/projects/admin/src/app/record/circulation-logs/circulation-logs.component.html
index bf6fc94cd..de3acc774 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-logs.component.html
+++ b/projects/admin/src/app/record/circulation-logs/circulation-logs.component.html
@@ -1,7 +1,7 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2023 RERO
-  Copyright (C) 2023 UCLouvain
+  Copyright (C) 2021-2024 RERO
+  Copyright (C) 2021-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -25,59 +25,69 @@ <h5 class="modal-title" translate>Circulation history</h5>
         </button>
       </div>
       <div class="modal-body overflow-auto overflow-max-size">
-        <admin-circulation-stats *ngIf="resourceType === 'item'" [itemPid]="this.resourcePid"></admin-circulation-stats>
+        @if (resourceType === 'item') {
+          <admin-circulation-stats [itemPid]="this.resourcePid"></admin-circulation-stats>
+        }
         <div class="mb-3">
           <span class="float-left label-title mr-2 font-weight-bold" translate>Filter</span>
           <ul class="list-inline mb-0">
-            <li class="list-inline-item mr-2" *ngFor="let filter of filterTypes | keyvalue">
-              <div class="custom-control custom-switch mb-0">
-                <input type="checkbox" class="custom-control-input mt-1" [id]="filter.key" [checked]="filter.value" (click)="filterCheck(filter.key)">
-                <label class="custom-control-label" [for]="filter.key">{{ ('op_filter_' + filter.key) | translate }}</label>
-              </div>
-            </li>
+            @for (filter of filterTypes | keyvalue; track filter) {
+              <li class="list-inline-item mr-2">
+                <div class="custom-control custom-switch mb-0">
+                  <input type="checkbox" class="custom-control-input mt-1" [id]="filter.key" [checked]="filter.value" (click)="filterCheck(filter.key)">
+                  <label class="custom-control-label" [for]="filter.key">{{ ('op_filter_' + filter.key) | translate }}</label>
+                </div>
+              </li>
+            }
           </ul>
         </div>
-        <ng-container *ngIf="loadedRecord; else loaded">
-          <ng-container *ngIf="recordTotals > 0; else noRecord">
-            <ng-container *ngFor="let record of records; first as isFirst; let idx = index">
-              <div class="transactionDate" *ngIf="isFirst || !isSamePeriod(record, records[idx-1])">
-                {{ record.metadata.date | dateTranslate :'MMMM Y' | titlecase }}
-              </div>
-              <ng-container [ngSwitch]="getRecordType(record)">
-                <admin-circulation-log-notification *ngSwitchCase="'notification'"
-                  [record]="record"
-                  [isHighlight]="record.metadata.loan.pid === highlightedLoanPid"
-                  [separator]="!isSamePeriod(record, records[idx-1], 'day')"
-                  (mouseenter)="mouseEventTransaction(record, $event)"
-                  (mouseleave)="highlightedLoanPid=null"
-                ></admin-circulation-log-notification>
-                <admin-circulation-log-loan *ngSwitchCase="'circulation'"
-                  [record]="record"
-                  [isHighlight]="record.metadata.loan.pid === highlightedLoanPid"
-                  [separator]="!isSamePeriod(record, records[idx-1], 'day')"
-                  (closeDialogEvent)="closeDialog()"
-                  (mouseenter)="mouseEventTransaction(record, $event)"
-                  (mouseleave)="highlightedLoanPid=null"
-                ></admin-circulation-log-loan>
-              </ng-container>
-            </ng-container>
-          </ng-container>
-        </ng-container>
+        @defer {
+          @if (recordTotals > 0) {
+            @for (record of records; track record; let isFirst = $first; let idx = $index) {
+              @if (isFirst || !isSamePeriod(record, records[idx-1])) {
+                <div class="transactionDate">
+                  {{ record.metadata.date | dateTranslate :'MMMM Y' | titlecase }}
+                </div>
+              }
+              @switch (getRecordType(record)) {
+                @case('notification') {
+                  <admin-circulation-log-notification
+                    [record]="record"
+                    [isHighlight]="record.metadata.loan.pid === highlightedLoanPid"
+                    [separator]="!isSamePeriod(record, records[idx-1], 'day')"
+                    (mouseenter)="mouseEventTransaction(record, $event)"
+                    (mouseleave)="highlightedLoanPid=null"
+                  ></admin-circulation-log-notification>
+                }
+                @case('circulation') {
+                  <admin-circulation-log-loan
+                    [record]="record"
+                    [isHighlight]="record.metadata.loan.pid === highlightedLoanPid"
+                    [separator]="!isSamePeriod(record, records[idx-1], 'day')"
+                    (closeDialogEvent)="closeDialog()"
+                    (mouseenter)="mouseEventTransaction(record, $event)"
+                    (mouseleave)="highlightedLoanPid=null"
+                  ></admin-circulation-log-loan>
+                }
+              }
+            }
+          } @else {
+            {{ 'No transaction found' | translate }}
+          }
+        } @loading {
+          {{ 'loading in progress' | translate }}
+        }
       </div>
       <div class="modal-footer py-1 justify-content-start">
-        <ng-container *ngIf="loadedRecord && isLinkShowMore">
+        @if (loadedRecord && isLinkShowMore) {
           <button type="button" id="show-more-items-{{ resourcePid }}" class="btn btn-link pl-1" (click)="showMore()">
             <i class="fa fa-arrow-circle-o-down"></i> {{ 'Show more' | translate }}
           </button>
-          <small *ngIf="isLinkShowMore">({{ hiddenTransactionLabel }})</small>
-        </ng-container>
+          @if (isLinkShowMore) {
+            <small>({{ hiddenTransactionLabel }})</small>
+          }
+        }
       </div>
     </div>
   </div>
 </div>
-<ng-template #noRecord>
-  {{ 'No transaction found' | translate }}
-</ng-template>
-<ng-template #loaded>
-  {{ 'loading in progress' | translate }}
-</ng-template>
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-logs.component.ts b/projects/admin/src/app/record/circulation-logs/circulation-logs.component.ts
index 81e6d56f4..fa65a304c 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-logs.component.ts
+++ b/projects/admin/src/app/record/circulation-logs/circulation-logs.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -77,18 +77,18 @@ export class CirculationLogsComponent implements OnInit {
     const linkText = (count > 1)
       ? _('{{ counter }} hidden circulations logs')
       : _('{{ counter }} hidden circulations log');
-    return this._translateService.instant(linkText, { counter: count });
+    return this.translateService.instant(linkText, { counter: count });
   }
 
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _operationLogsApiService - OperationLogsApiService
-   * @param _translateService - TranslateService
+   * @param operationLogsApiService - OperationLogsApiService
+   * @param translateService - TranslateService
    */
   constructor(
-    private _operationLogsApiService: OperationLogsApiService,
-    private _translateService: TranslateService
+    private operationLogsApiService: OperationLogsApiService,
+    private translateService: TranslateService
   ) {}
 
   /** OnInit hook */
@@ -180,7 +180,7 @@ export class CirculationLogsComponent implements OnInit {
    * @return Observable
    */
   private _circulationLogsQuery(page: number): Observable<any> {
-    return this._operationLogsApiService
+    return this.operationLogsApiService
       .getCirculationLogs(this.resourceType, this.resourcePid, page, this.itemsPerPage, this.filterTypes)
       .pipe(map((response: Record) =>  response.hits));
   }
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-stats/circulation-stats.component.html b/projects/admin/src/app/record/circulation-logs/circulation-stats/circulation-stats.component.html
index 707d606e6..a23c02bd4 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-stats/circulation-stats.component.html
+++ b/projects/admin/src/app/record/circulation-logs/circulation-stats/circulation-stats.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2023 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,19 +15,21 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="row mb-3" *ngIf="stats">
-  <div class="col-6">
-    <span class="font-weight-bold" translate>Past year (last 365 days)</span>
-    <ul class="list-unstyled mb-0">
-      <li>{{ 'checkout' | translate | ucfirst }}: {{ stats.total_year.checkout | default: 0 }}</li>
-      <li>{{ 'renewal' | translate | ucfirst }}: {{ stats.total_year.extend | default: 0 }}</li>
-    </ul>
+@if (stats) {
+  <div class="row mb-3">
+    <div class="col-6">
+      <span class="font-weight-bold" translate>Past year (last 365 days)</span>
+      <ul class="list-unstyled mb-0">
+        <li>{{ 'checkout' | translate | ucfirst }}: {{ stats.total_year.checkout | default: 0 }}</li>
+        <li>{{ 'renewal' | translate | ucfirst }}: {{ stats.total_year.extend | default: 0 }}</li>
+      </ul>
+    </div>
+    <div class="col-6">
+      <span class="font-weight-bold" translate>Total</span>
+      <ul class="list-unstyled mb-0">
+        <li>{{ 'checkout' | translate | ucfirst }}: {{ stats.total.checkout | default: 0 }}</li>
+        <li>{{ 'renewal' | translate| ucfirst }}: {{ stats.total.extend | default: 0 }}</li>
+      </ul>
+    </div>
   </div>
-  <div class="col-6">
-    <span class="font-weight-bold" translate>Total</span>
-    <ul class="list-unstyled mb-0">
-      <li>{{ 'checkout' | translate | ucfirst }}: {{ stats.total.checkout | default: 0 }}</li>
-      <li>{{ 'renewal' | translate| ucfirst }}: {{ stats.total.extend | default: 0 }}</li>
-    </ul>
-  </div>
-</div>
+}
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-stats/circulation-stats.component.ts b/projects/admin/src/app/record/circulation-logs/circulation-stats/circulation-stats.component.ts
index b5e6fca8d..44e16e909 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-stats/circulation-stats.component.ts
+++ b/projects/admin/src/app/record/circulation-logs/circulation-stats/circulation-stats.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -32,13 +32,13 @@ export class CirculationStatsComponent implements OnInit {
 
   /**
    * Constructor
-   * @param _itemApiService - ItemApiService
+   * @param itemApiService - ItemApiService
    */
-  constructor(private _itemApiService: ItemApiService) { }
+  constructor(private itemApiService: ItemApiService) { }
 
   /** OnInit hook */
   ngOnInit(): void {
-    this._itemApiService.getStatsByItemPid(this.itemPid)
+    this.itemApiService.getStatsByItemPid(this.itemPid)
       .subscribe((stats: any) => this.stats = stats)
   }
 }
diff --git a/projects/admin/src/app/record/custom-editor/document-editor/document-editor.component.ts b/projects/admin/src/app/record/custom-editor/document-editor/document-editor.component.ts
index 281cd3680..d91db86f7 100644
--- a/projects/admin/src/app/record/custom-editor/document-editor/document-editor.component.ts
+++ b/projects/admin/src/app/record/custom-editor/document-editor/document-editor.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -41,18 +41,18 @@ export class DocumentEditorComponent extends AbstractCanDeactivateComponent {
 
   /**
    * Constructor
-   * @param _editorService - EditorService
-   * @param _toastrService - ToastrService
-   * @param _translateService - TranslateService
-   * @param _route - ActivatedRoute
-   * @param _recordService - RecordService
+   * @param editorService - EditorService
+   * @param toastrService - ToastrService
+   * @param translateService - TranslateService
+   * @param route - ActivatedRoute
+   * @param recordService - RecordService
    */
   constructor(
-    private _editorService: EditorService,
-    private _toastrService: ToastrService,
-    private _translateService: TranslateService,
-    private _route: ActivatedRoute,
-    private _recordService: RecordService
+    private editorService: EditorService,
+    private toastrService: ToastrService,
+    private translateService: TranslateService,
+    private route: ActivatedRoute,
+    private recordService: RecordService
   ) { super() }
 
   /**
@@ -60,15 +60,15 @@ export class DocumentEditorComponent extends AbstractCanDeactivateComponent {
    * @param source string - the external source
    * @param pid string - identifier of the external record
    */
-  importFromExternalSource(source: string, pid: string) {
-    this._editorService.getRecordFromExternal(source, pid).subscribe(
+  importFromExternalSource(source: string, pid: string): void {
+    this.editorService.getRecordFromExternal(source, pid).subscribe(
       record => {
         if (record) {
           this.model = record.metadata;
         } else {
-          this._toastrService.warning(
-            this._translateService.instant('Does not exists on the remote server!'),
-            this._translateService.instant('Import')
+          this.toastrService.warning(
+            this.translateService.instant('Does not exists on the remote server!'),
+            this.translateService.instant('Import')
           );
         }
       }
@@ -80,18 +80,18 @@ export class DocumentEditorComponent extends AbstractCanDeactivateComponent {
    * @param type string - resource type
    * @param pid - resource pid
    */
-  duplicateRecord(type: string, pid: string) {
-    this._recordService.getRecord(type, pid).subscribe(
+  duplicateRecord(type: string, pid: string): void {
+    this.recordService.getRecord(type, pid).subscribe(
       record => {
         if (record) {
           delete (record.metadata.pid);
           delete (record.metadata.harvested);
           this.model = record.metadata;
-          this._toastrService.success('Document duplicated');
+          this.toastrService.success('Document duplicated');
         } else {
-          this._toastrService.warning(
-            this._translateService.instant('This document does not exists!'),
-            this._translateService.instant('Duplicate')
+          this.toastrService.warning(
+            this.translateService.instant('This document does not exists!'),
+            this.translateService.instant('Duplicate')
           );
         }
       }
@@ -106,9 +106,9 @@ export class DocumentEditorComponent extends AbstractCanDeactivateComponent {
    *
    * @param value - true if the child editor component is currently loading data
    */
-  loadingChanged(value: boolean) {
+  loadingChanged(value: boolean): void {
     if (value === false) {
-      combineLatest([this._route.params, this._route.queryParams])
+      combineLatest([this.route.params, this.route.queryParams])
       .subscribe(([params, queryParams]) => {
         if (queryParams.pid) {
           if (queryParams.source && queryParams.source !== 'templates') {
diff --git a/projects/admin/src/app/record/custom-editor/holding-editor/holding-editor.component.html b/projects/admin/src/app/record/custom-editor/holding-editor/holding-editor.component.html
index 09ba76c81..2cc05dc29 100644
--- a/projects/admin/src/app/record/custom-editor/holding-editor/holding-editor.component.html
+++ b/projects/admin/src/app/record/custom-editor/holding-editor/holding-editor.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020-2023 RERO
+  Copyright (C) 2020-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -19,36 +19,40 @@
   <div [ngClass]="{'col-md-9 col-xl-8': serialPatternsTemplate != null, 'col-12': serialPatternsTemplate == null}" role="main">
     <ng-core-editor [model]="model" (modelChange)="modelChanged($event)" (canDeactivateChange)="canDeactivateChanged($event)"></ng-core-editor>
   </div>
-  <div *ngIf="serialPatternsTemplate != null" class="col-md-3 col-xl-4 bd-sidebar">
-    <div class="card">
-      <div class="card-header">
-        <h5 translate>Examples (preview)</h5>
-      </div>
-      <div class="card-body">
-        <ng-container *ngIf="!serialPreviewError; else previewError">
-          <ng-container *ngIf="serialPreviewExamples && serialPreviewExamples.length > 0; else noPreview">
-            <ul class="list-unstyled">
-              <li *ngFor="let issue of serialPreviewExamples | slice:0:10">{{ issue.issue }}</li>
-            </ul>
-            ...
-            <ul class="list-unstyled">
-              <li *ngFor="let issue of serialPreviewExamples | slice:97:100">{{ issue.issue }}</li>
-            </ul>
-          </ng-container>
-        </ng-container>
+  @if (serialPatternsTemplate != null) {
+    <div class="col-md-3 col-xl-4 bd-sidebar">
+      <div class="card">
+        <div class="card-header">
+          <h5 translate>Examples (preview)</h5>
+        </div>
+        <div class="card-body">
+          @if (!serialPreviewError) {
+            @if (serialPreviewExamples && serialPreviewExamples.length > 0) {
+              <ul class="list-unstyled">
+                @for (issue of serialPreviewExamples | slice:0:10; track issue) {
+                  <li>{{ issue.issue }}</li>
+                }
+              </ul>
+              ...
+              <ul class="list-unstyled">
+                @for (issue of serialPreviewExamples | slice:97:100; track issue) {
+                  <li>{{ issue.issue }}</li>
+                }
+
+              </ul>
+            } @else {
+              <div class="alert alert-danger" role="alert">
+                <strong translate>Template</strong> {{ serialPreviewError.status }}
+              </div>
+            }
+
+          } @else {
+            <div class="alert alert-light" role="alert">
+              No preview available
+            </div>
+          }
+        </div>
       </div>
     </div>
-  </div>
+  }
 </div>
-
-<ng-template #noPreview>
-  <div class="alert alert-light" role="alert">
-    No preview available
-  </div>
-</ng-template>
-
-<ng-template #previewError>
-  <div class="alert alert-danger" role="alert">
-    <strong translate>Template</strong> {{ serialPreviewError.status }}
-  </div>
-</ng-template>
diff --git a/projects/admin/src/app/record/custom-editor/holding-editor/holding-editor.component.ts b/projects/admin/src/app/record/custom-editor/holding-editor/holding-editor.component.ts
index 7169d5c0d..9b7003508 100644
--- a/projects/admin/src/app/record/custom-editor/holding-editor/holding-editor.component.ts
+++ b/projects/admin/src/app/record/custom-editor/holding-editor/holding-editor.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -17,7 +17,7 @@
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AbstractCanDeactivateComponent, removeEmptyValues } from '@rero/ng-core';
-import { BehaviorSubject, of, Subscription } from 'rxjs';
+import { BehaviorSubject, Subscription, of } from 'rxjs';
 import { catchError, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 import { EditorService } from '../../../service/editor.service';
 import { PredictionIssue } from '../../../service/holdings.service';
@@ -56,25 +56,25 @@ export class HoldingEditorComponent extends AbstractCanDeactivateComponent imple
 
 
   /** Observable subscription */
-  private _subscription = new Subscription();
+  private subscription = new Subscription();
 
   /**
    * Constructor.
-   * @param _editorService - the local editor service
+   * @param editorService - the local editor service
    */
-  constructor(private _editorService: EditorService) {
+  constructor(private editorService: EditorService) {
     super();
   }
 
   /** Component initialization. */
   ngOnInit() {
-    this._subscription = this.predictionModel$.pipe(
+    this.subscription = this.predictionModel$.pipe(
       // wait .5s before the last change
       debounceTime(500),
       // only if the patterns changed
       distinctUntilChanged((a, b) => JSON.stringify(a.patterns) === JSON.stringify(b.patterns)),
       // cancel previous pending requests
-      switchMap(modelValue => this._editorService.getHoldingPatternPreview(
+      switchMap(modelValue => this.editorService.getHoldingPatternPreview(
         modelValue, this.numberOfSerialPreviewExamples).pipe(
           catchError((error) => {
             // if the syntax is not valid the server returns an 400 error
@@ -95,7 +95,7 @@ export class HoldingEditorComponent extends AbstractCanDeactivateComponent imple
 
   /** Component destruction. */
   ngOnDestroy() {
-    this._subscription.unsubscribe();
+    this.subscription.unsubscribe();
   }
 
   /**
diff --git a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.html b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.html
index 9ce5500d8..290920604 100644
--- a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.html
+++ b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -31,11 +31,13 @@ <h3 class="modal-title" translate>Exception</h3>
           formControlName="title"
           placeholder="{{ 'Please insert a title' | translate }}"
           required>
-          <div *ngIf="title.invalid && (title.dirty || title.touched)" class="text-danger pt-1">
-            <div *ngIf="title.errors.required" translate>
-              Title is required.
+          @if (title.invalid && (title.dirty || title.touched)) {
+            <div class="text-danger pt-1">
+              @if (title.errors.required) {
+                <div translate>Title is required.</div>
+              }
             </div>
-          </div>
+          }
       </div>
     </div>
     <!-- Date -->
@@ -54,63 +56,71 @@ <h3 class="modal-title" translate>Exception</h3>
       </div>
     </div>
     <!-- one Date -->
-    <div class="form-group row" *ngIf="!is_period.value">
-      <label for="date" class="col-sm-2 col-form-label required">
-        {{ 'Date' | translate }} <strong class="text-danger">*</strong>
-      </label>
-      <div class="col-sm-10">
-        <div class="input-group">
-          <input type="text"
-            class="form-control"
-            formControlName="date"
-            #dp="bsDatepicker"
-            bsDatepicker
-            [bsConfig]="{ containerClass: 'theme-default' }">
-            <div class="input-group-append">
-              <span class="input-group-text" (click)="dp.toggle()">
-                <i class="fa fa-calendar"></i>
-              </span>
-            </div>
-        </div>
-        <div *ngIf="date.invalid && (date.dirty || date.touched)" class="text-danger pt-1">
-          <div *ngIf="date.errors.required" translate>
-            Date is required.
-          </div>
-          <div *ngIf="date.errors.bsDate && date.errors.bsDate.invalid" translate>
-            Date is invalid.
+    @if (!is_period.value) {
+      <div class="form-group row">
+        <label for="date" class="col-sm-2 col-form-label required">
+          {{ 'Date' | translate }} <strong class="text-danger">*</strong>
+        </label>
+        <div class="col-sm-10">
+          <div class="input-group">
+            <input type="text"
+              class="form-control"
+              formControlName="date"
+              #dp="bsDatepicker"
+              bsDatepicker
+              [bsConfig]="{ containerClass: 'theme-default' }">
+              <div class="input-group-append">
+                <span class="input-group-text" (click)="dp.toggle()">
+                  <i class="fa fa-calendar"></i>
+                </span>
+              </div>
           </div>
+          @if (date.invalid && (date.dirty || date.touched)) {
+            <div class="text-danger pt-1">
+              @if (date.errors.required) {
+                <div translate>Date is required.</div>
+              }
+              @if (date.errors.bsDate && date.errors.bsDate.invalid) {
+                <div translate>Date is invalid.</div>
+              }
+            </div>
+          }
         </div>
       </div>
-    </div>
+    }
     <!-- Period -->
-    <div class="form-group row" *ngIf="is_period.value">
-      <label for="date" class="col-sm-2 col-form-label required">
-        {{ 'Dates' | translate }} <strong class="text-danger">*</strong>
-      </label>
-      <div class="col-sm-10">
-        <div class="input-group">
-          <input type="text"
-            class="form-control"
-            formControlName="dates"
-            #dp="bsDaterangepicker"
-            bsDaterangepicker
-            [bsConfig]="{ containerClass: 'theme-default' }">
-            <div class="input-group-append">
-              <span class="input-group-text" (click)="dp.toggle()">
-                <i class="fa fa-calendar"></i>
-              </span>
-            </div>
-        </div>
-        <div *ngIf="dates.invalid && (dates.dirty || dates.touched)" class="text-danger pt-1">
-          <div *ngIf="dates.errors.required" translate>
-            Date range is required.
-          </div>
-          <div *ngIf="dates.errors.bsDate && dates.errors.bsDate.invalid" translate>
-            Date range is invalid.
+    @if (is_period.value) {
+      <div class="form-group row">
+        <label for="date" class="col-sm-2 col-form-label required">
+          {{ 'Dates' | translate }} <strong class="text-danger">*</strong>
+        </label>
+        <div class="col-sm-10">
+          <div class="input-group">
+            <input type="text"
+              class="form-control"
+              formControlName="dates"
+              #dp="bsDaterangepicker"
+              bsDaterangepicker
+              [bsConfig]="{ containerClass: 'theme-default' }">
+              <div class="input-group-append">
+                <span class="input-group-text" (click)="dp.toggle()">
+                  <i class="fa fa-calendar"></i>
+                </span>
+              </div>
           </div>
+          @if (dates.invalid && (dates.dirty || dates.touched)) {
+            <div class="text-danger pt-1">
+              @if (dates.errors.required) {
+                <div translate>Date range is required.</div>
+              }
+              @if (dates.errors.bsDate && dates.errors.bsDate.invalid) {
+                <div translate>Date range is invalid.</div>
+              }
+            </div>
+          }
         </div>
       </div>
-    </div>
+    }
     <!-- open/close + times -->
     <div class="offset-2 col-sm-10 mt-2">
         <div class="form-check-inline">
@@ -124,76 +134,84 @@ <h3 class="modal-title" translate>Exception</h3>
           </label>
         </div>
         <div class="mb-2">
-          <em *ngIf="exceptionForm.value && exceptionForm.value.is_open" translate>
-            Change the default opening hours for this day
-          </em>
-          <em *ngIf="exceptionForm.value && !exceptionForm.value.is_open" translate>
-            Change the default closing hours for this day
-          </em>
+          @if (exceptionForm.value && exceptionForm.value.is_open) {
+            <em translate>Change the default opening hours for this day</em>
+          }
+          @if (exceptionForm.value && !exceptionForm.value.is_open) {
+            <em translate>Change the default closing hours for this day</em>
+          }
         </div>
         <div class="col-sm-12 pl-0">
-          <button *ngIf="times.length === 0" (click)="addTime()"
-                  type="button" class="btn btn-outline-secondary btn-sm">
-            <i class="fa fa-plus-square-o" aria-hidden="true"></i> {{ 'period' | translate }}
-          </button>
+          @if (times.length === 0) {
+            <button
+              (click)="addTime()"
+              type="button" class="btn btn-outline-secondary btn-sm"
+            >
+              <i class="fa fa-plus-square-o" aria-hidden="true"></i> {{ 'period' | translate }}
+            </button>
+          }
           <ul class="list-unstyled mb-0">
-            <li formArrayName="times" *ngFor="let time of times.controls; let t=index">
-              <div [formGroupName]="t">
-                <div class="form-row">
-                  <div class="col-4">
-                    <input type="text" class="form-control mr-2 mb-1" formControlName="start_time">
-                  </div>
-                  <div class="col-4">
-                    <input type="text" class="form-control mr-2 mb-1" formControlName="end_time">
-                  </div>
-                  <div class="col-4">
-                    <button
-                      type="button"
-                      class="btn btn-outline-secondary btn-sm mr-2"
-                      (click)="deleteTime(t)"
-                    ><i class="fa fa-trash" aria-hidden="true"></i></button>
-                    <button
-                      type="button"
-                      *ngIf="times.length === 1"
-                      class="btn btn-outline-secondary btn-sm"(click)="addTime()"
-                    ><i class="fa fa-plus-square-o" aria-hidden="true"></i> {{ 'period' | translate }}</button>
-                  </div>
-                </div>
-                <div
-                  *ngIf="time.controls.start_time.invalid && (time.controls.start_time.dirty || time.controls.start_time.touched)"
-                  class="text-danger pt-1"
-                >
-                  <div *ngIf="time.controls.start_time.errors.required" translate>
-                    Start time is required.
-                  </div>
-                  <div *ngIf="time.controls.start_time.errors.pattern" translate>
-                    Start time format is not correct.
+            @for (time of times.controls; track time; let t=$index) {
+              <li formArrayName="times">
+                <div [formGroupName]="t">
+                  <div class="form-row">
+                    <div class="col-4">
+                      <input type="text" class="form-control mr-2 mb-1" formControlName="start_time">
+                    </div>
+                    <div class="col-4">
+                      <input type="text" class="form-control mr-2 mb-1" formControlName="end_time">
+                    </div>
+                    <div class="col-4">
+                      <button
+                        type="button"
+                        class="btn btn-outline-secondary btn-sm mr-2"
+                        (click)="deleteTime(t)"
+                      ><i class="fa fa-trash" aria-hidden="true"></i></button>
+                      @if (times.length === 1) {
+                        <button type="button" class="btn btn-outline-secondary btn-sm"(click)="addTime()">
+                          <i class="fa fa-plus-square-o" aria-hidden="true"></i> {{ 'period' | translate }}
+                        </button>
+                      }
+                    </div>
                   </div>
+                  @if ($any(time).controls.start_time.invalid && ($any(time).controls.start_time.dirty || $any(time).controls.start_time.touched)) {
+                    <div class="text-danger pt-1">
+                      @if ($any(time).controls.start_time.errors.required) {
+                        <div translate>Start time is required.</div>
+                      }
+                      @if ($any(time).controls.start_time.errors.pattern) {
+                        <div translate>Start time format is not correct.</div>
+                      }
+                    </div>
+                  }
+                  @if ($any(time).controls.end_time.invalid && ($any(time).controls.end_time.dirty || $any(time).controls.end_time.touched)) {
+                    <div class="text-danger pt-1">
+                      @if ($any(time).controls.end_time.errors.required) {
+                        <div translate>End time is required.</div>
+                      }
+                      @if ($any(time).controls.end_time.errors.pattern) {
+                        <div translate>End time format is not correct.</div>
+                      }
+                    </div>
+                  }
+                  @if ($any(time).invalid && ($any(time).dirty || $any(time).touched)) {
+                    <div class="text-danger pt-1">
+                      @if ($any(time).errors && $any(time).errors.lessThan) {
+                        <div translate>End time is less than start time.</div>
+                      }
+                    </div>
+                  }
                 </div>
-                <div
-                  *ngIf="time.controls.end_time.invalid && (time.controls.end_time.dirty || time.controls.end_time.touched)"
-                  class="text-danger pt-1"
-                >
-                  <div *ngIf="time.controls.end_time.errors.required" translate>
-                    End time is required.
-                  </div>
-                  <div *ngIf="time.controls.end_time.errors.pattern" translate>
-                    End time format is not correct.
-                  </div>
-                </div>
-                <div *ngIf="time.invalid && (time.dirty || time.touched)" class="text-danger pt-1">
-                  <div *ngIf="time.errors && time.errors.lessThan" translate>
-                    End time is less than start time.
-                  </div>
-                </div>
-              </div>
-            </li>
+              </li>
+            }
           </ul>
-          <div *ngIf="exceptionForm.invalid  && (exceptionForm.dirty || exceptionForm.touched)" class="text-danger pt-1">
-            <div *ngIf="exceptionForm.errors && exceptionForm.errors.rangeLessThan" translate>
-              The two periods are overlapping.
+          @if (exceptionForm.invalid  && (exceptionForm.dirty || exceptionForm.touched)) {
+            <div class="text-danger pt-1">
+              @if (exceptionForm.errors && exceptionForm.errors.rangeLessThan) {
+                <div translate>The two periods are overlapping.</div>
+              }
             </div>
-          </div>
+          }
         </div>
       </div>
     <!-- Repeat -->
@@ -216,26 +234,30 @@ <h3 class="modal-title" translate>Exception</h3>
             </label>
         </div>
       </div>
-      <div class="col-sm-10 d-inline" *ngIf="repeat.value">
-        <label for="interval" class="col-form-label required" translate>Repeat each</label>
-        <input type="number" min="1" step="1" class="ml-2 col-2" formControlName="interval">
-        <select class="col-3 ml-1 form-control d-inline-block" formControlName="period">
-          <option value="weekly" translate>week</option>
-          <option value="monthly" translate>month</option>
-          <option value="yearly" translate>year</option>
-        </select>
-        <div *ngIf="interval.invalid && (interval.dirty || interval.touched)" class="text-danger pt-1">
-          <div *ngIf="interval.errors.required" translate>
-            Interval is required.
-          </div>
-          <div *ngIf="interval.errors.min" translate>
-            Interval must greater than 0.
-          </div>
-          <div *ngIf="interval.errors.pattern && !interval.errors.min" translate>
-            Integer only.
-          </div>
+      @if (repeat.value) {
+        <div class="col-sm-10 d-inline">
+          <label for="interval" class="col-form-label required" translate>Repeat each</label>
+          <input type="number" min="1" step="1" class="ml-2 col-2" formControlName="interval">
+          <select class="col-3 ml-1 form-control d-inline-block" formControlName="period">
+            <option value="weekly" translate>week</option>
+            <option value="monthly" translate>month</option>
+            <option value="yearly" translate>year</option>
+          </select>
+          @if (interval.invalid && (interval.dirty || interval.touched)) {
+            <div class="text-danger pt-1">
+              @if (interval.errors.required) {
+                <div translate>Interval is required.</div>
+              }
+              @if (interval.errors.min) {
+                <div translate>Interval must greater than 0.</div>
+              }
+              @if (interval.errors.pattern && !interval.errors.min) {
+                <div translate>Integer only.</div>
+              }
+            </div>
+          }
         </div>
-      </div>
+      }
     </div>
     <div class="float-right mb-4" role="group" aria-label="Buttons">
       <button type="button" class="btn btn-outline-danger mr-1" (click)="onCancel()" translate>Cancel</button>
diff --git a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.ts b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.ts
index 43840cf9b..a7d19a3c3 100644
--- a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.ts
+++ b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -16,13 +16,12 @@
  */
 
 import { Component, Input, OnInit } from '@angular/core';
-import { BsModalRef } from 'ngx-bootstrap/modal';
-import { BsLocaleService } from 'ngx-bootstrap/datepicker';
 import { UntypedFormArray, UntypedFormGroup, Validators } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
+import { BsLocaleService } from 'ngx-bootstrap/datepicker';
+import { BsModalRef } from 'ngx-bootstrap/modal';
 import { Subject } from 'rxjs';
-
 import { LibraryExceptionFormService } from '../library-exception-form.service';
-import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'admin-libraries-exception-dates-edit',
@@ -62,7 +61,7 @@ export class ExceptionDatesEditComponent implements OnInit {
   }
 
   onPeriodChange(event) {
-    const target = event.target;
+    const { target } = event;
     const value = target.value === 'true';
     this.form.is_period.setValue(value);
     if (value) {
@@ -74,7 +73,7 @@ export class ExceptionDatesEditComponent implements OnInit {
   }
 
   onDateStatusChange(event) {
-    const target = event.target;
+    const { target } = event;
     const value = target.value === 'true';
     this.form.is_open.setValue(value);
   }
diff --git a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.html b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.html
index 98b43c0b6..60ec4da12 100644
--- a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.html
+++ b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -23,50 +23,55 @@
   </div>
 </div>
 
-<div *ngIf="exceptionDates" class="mb-3">
-  <div *ngFor="let exception of exceptionDates; let i=index"
-       [ngClass]="{'over-exception': isOver(exception)}"
-       class="row exception-date pt-1 pb-1 border-bottom"
-  >
-    <!-- date -->
-    <div class="col-md-4 col-lg-4 col-sm-8">
-      {{ exception.start_date | dateTranslate:'longDate' }}
-      <ng-container *ngIf="exception.end_date">
-        <i class="fa fa-arrow-right ml-1 mr-1"></i>
-        {{ exception.end_date | dateTranslate:'longDate' }}
-      </ng-container>
-    </div>
-    <!-- hours -->
-    <div class="col-md-2 col-lg-2 col-sm-4">
-      <div *ngFor="let time of exception.times">
-        {{ time.start_time }}-{{ time.end_time }}
+@if (exceptionDates) {
+  <div class="mb-3">
+    @for(exception of exceptionDates; track exception; let i=$index) {
+      <div
+         [ngClass]="{'over-exception': isOver(exception)}"
+         class="row exception-date pt-1 pb-1 border-bottom"
+      >
+        <!-- date -->
+        <div class="col-md-4 col-lg-4 col-sm-8">
+          {{ exception.start_date | dateTranslate:'longDate' }}
+          @if (exception.end_date) {
+            <i class="fa fa-arrow-right ml-1 mr-1"></i>
+            {{ exception.end_date | dateTranslate:'longDate' }}
+          }
+        </div>
+        <!-- hours -->
+        <div class="col-md-2 col-lg-2 col-sm-4">
+          @for (time of exception.times; track time) {
+            {{ time.start_time }}-{{ time.end_time }}
+          }
+          @if (exception.repeat) {
+            <div>
+              <i class="fa fa-repeat" aria-hidden="true" title="repeated"></i>
+              {{ exception.repeat.period | translate }}={{ exception.repeat.interval }}
+            </div>
+          }
+        </div>
+        <!-- open/close icon -->
+        <div class="col-md-1 col-lg-1 col-sm-2 status text-center">
+          @if (exception.is_open) {
+            <i class="fa fa-check text-success" title="{{ 'Open' | translate }}"></i>
+          } @else {
+            <i class="fa fa-ban text-danger" title="{{ 'Closed' | translate }}"></i>
+          }
+        </div>
+        <!-- title -->
+        <div class="col-md-3 col-lg-3 col-sm-6">
+          {{ exception.title }}
+        </div>
+        <!-- Actions -->
+        <div class="col-md-2 col-lg-2 col-sm-4 actions text-right">
+          <button type="button" class="btn btn-outline-primary btn-sm ml-1" (click)="editException(i)" title="{{ 'Edit' | translate }}">
+            <i class="fa fa-pencil"></i>
+          </button>
+          <button type="button" class="btn btn-outline-danger btn-sm ml-1" (click)="deleteException(i)" title="{{ 'Delete' | translate }}">
+            <i class="fa fa-trash"></i>
+          </button>
+        </div>
       </div>
-      <div *ngIf="exception.repeat">
-        <i class="fa fa-repeat" aria-hidden="true" title="repeated"></i>
-        {{ exception.repeat.period | translate }}={{ exception.repeat.interval }}
-      </div>
-    </div>
-    <!-- open/close icon -->
-    <div class="col-md-1 col-lg-1 col-sm-2 status text-center">
-      <ng-container *ngIf="exception.is_open; else elseOpen">
-        <i class="fa fa-check text-success" title="{{ 'Open' | translate }}"></i>
-      </ng-container>
-      <ng-template #elseOpen>
-        <i class="fa fa-ban text-danger" title="{{ 'Closed' | translate }}"></i>
-      </ng-template>
-    </div>
-    <!-- title -->
-    <div class="col-md-3 col-lg-3 col-sm-6">
-      {{ exception.title }}
-    </div>
-    <!-- Actions -->
-    <div class="col-md-2 col-lg-2 col-sm-4 actions text-right">
-      <button type="button" class="btn btn-outline-primary btn-sm ml-1" (click)="editException(i)" title="{{ 'Edit' | translate }}">
-        <i class="fa fa-pencil"></i>
-      </button>
-      <button type="button" class="btn btn-outline-danger btn-sm ml-1" (click)="deleteException(i)" title="{{ 'Delete' | translate }}">
-        <i class="fa fa-trash"></i>
-      </button>
-    </div>
+    }
   </div>
-</div>
+  }
diff --git a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.ts b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.ts
index 5c162f2a9..66cba3e6f 100644
--- a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.ts
+++ b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -16,11 +16,10 @@
  */
 
 
-import { Component, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, Input } from '@angular/core';
 import { ExceptionDates, Library } from '@app/admin/classes/library';
-import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { ExceptionDatesEditComponent } from '../exception-dates-edit/exception-dates-edit.component';
-import { ChangeDetectorRef } from '@angular/core';
 
 @Component({
   selector: 'admin-libraries-exception-dates-list',
diff --git a/projects/admin/src/app/record/custom-editor/libraries/library.component.html b/projects/admin/src/app/record/custom-editor/libraries/library.component.html
index 7adff32ca..bde6894e0 100644
--- a/projects/admin/src/app/record/custom-editor/libraries/library.component.html
+++ b/projects/admin/src/app/record/custom-editor/libraries/library.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,8 +14,8 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="container">
-  <ng-container *ngIf="libForm">
+@if (libForm) {
+  <div class="container">
     <h1 translate>Library</h1>
     <form [formGroup]="libForm" (ngSubmit)="onSubmit()">
 
@@ -30,29 +30,43 @@ <h1 translate>Library</h1>
               <label for="code" class="col-3 col-form-label required" translate>Code</label>
               <div class="col">
                 <input pInputText id="code" formControlName="code"
-                       class="w-100" [class.ng-invalid]="code.invalid"
-                       placeholder="{{ 'Please insert a code' | translate }}"
-                       required
+                        class="w-100" [class.ng-invalid]="code.invalid"
+                        placeholder="{{ 'Please insert a code' | translate }}"
+                        required
                 >
-                <div *ngIf="code.invalid && (code.dirty || code.touched)" class="error-messages">
-                  <span *ngIf="code.errors.alreadyTaken" translate>Code is already taken.</span>
-                  <span *ngIf="code.errors.required" translate>Code is required.</span>
-                  <span *ngIf="code.pending" translate>Validating…</span>
-                </div>
+                @if (code.invalid && (code.dirty || code.touched)) {
+                  <div class="error-messages">
+                    @if (code.errors.alreadyTaken) {
+                      <span translate>Code is already taken.</span>
+                    }
+                    @if (code.errors.required) {
+                      <span translate>Code is required.</span>
+                    }
+                    @if (code.pending) {
+                      <span translate>Validating…</span>
+                    }
+                  </div>
+                }
               </div>
             </div>
             <div class="form-group row">
               <label for="name" class="col-3 col-form-label required" translate>Name</label>
               <div class="col">
                 <input pInputText id="name" formControlName="name"
-                       class="w-100" [class.ng-invalid]="name.invalid"
-                       placeholder="{{ 'Please insert a name' | translate }}"
-                       required
+                        class="w-100" [class.ng-invalid]="name.invalid"
+                        placeholder="{{ 'Please insert a name' | translate }}"
+                        required
                 >
-                <div *ngIf="name.invalid && (name.dirty || name.touched)" class="error-messages">
-                  <span *ngIf="name.errors.required" translate>Name is required.</span>
-                  <span *ngIf="name.errors.minlength" translate>Name must be at least 4 characters long.</span>
-                </div>
+                @if (name.invalid && (name.dirty || name.touched)) {
+                  <div class="error-messages">
+                    @if (name.errors.required) {
+                      <span translate>Name is required.</span>
+                    }
+                    @if (name.errors.minlength) {
+                      <span translate>Name must be at least 4 characters long.</span>
+                    }
+                  </div>
+                }
               </div>
             </div>
             <div class="form-group row">
@@ -60,10 +74,14 @@ <h1 translate>Library</h1>
               <div class="col p-inputgroup">
                 <span class="p-inputgroup-addon"><i class="fa fa-home"></i></span>
                 <input pInputText id="address" formControlName="address"
-                       class="w-100" [class.ng-invalid]="address.invalid"/>
-                <div *ngIf="address.invalid && (address.dirty || address.touched)" class="error-messages">
-                  <span *ngIf="address.errors.minlength" translate>Address must be at least 4 characters long.</span>
-                </div>
+                        class="w-100" [class.ng-invalid]="address.invalid"/>
+                @if (address.invalid && (address.dirty || address.touched)) {
+                  <div class="error-messages">
+                    @if (address.errors.minlength) {
+                      <span translate>Address must be at least 4 characters long.</span>
+                    }
+                  </div>
+                }
               </div>
             </div>
             <div class="form-group row">
@@ -71,10 +89,14 @@ <h1 translate>Library</h1>
               <div class="col p-inputgroup">
                 <span class="p-inputgroup-addon"><i class="fa fa-at"></i></span>
                 <input pInputText id="email" formControlName="email"
-                       class="w-100" [class.ng-invalid]="email.invalid"/>
-                <div *ngIf="email.invalid && (email.dirty || email.touched)" class="error-messages">
-                  <span *ngIf="email.errors.email" translate>Email format is not correct.</span>
-                </div>
+                        class="w-100" [class.ng-invalid]="email.invalid"/>
+                @if (email.invalid && (email.dirty || email.touched)) {
+                  <div class="error-messages">
+                    @if (email.errors.email) {
+                      <span translate>Email format is not correct.</span>
+                    }
+                  </div>
+                }
               </div>
             </div>
             <div class="form-group row">
@@ -86,9 +108,13 @@ <h1 translate>Library</h1>
                             styleClass="w-100" scrollHeight="250px"
                 >
                 </p-dropdown>
-                <div *ngIf="communicationLanguage.invalid && (communicationLanguage.dirty || communicationLanguage.touched)" class="error-messages">
-                  <span *ngIf="communicationLanguage.errors.required" translate>Communication language is required.</span>
-                </div>
+                @if (communicationLanguage.invalid && (communicationLanguage.dirty || communicationLanguage.touched)) {
+                  <div class="error-messages">
+                    @if (communicationLanguage.errors.required) {
+                      <span translate>Communication language is required.</span>
+                    }
+                  </div>
+                }
               </div>
             </div>
           </ng-template>
@@ -100,80 +126,106 @@ <h1 translate>Library</h1>
               <i class="fa fa-clock-o"></i>{{ 'Opening Hours' | translate }}
               <div class="ml-auto opening-days-summary">
                 <i class="fa" *ngFor="let day of openingHours.controls"
-                   [ngClass]="{
+                    [ngClass]="{
                       'fa-times-circle-o text-danger': !day.value.is_open,
                       'fa-circle text-success': day.value.is_open
-                   }"
+                    }"
                 ></i>
               </div>
             </div>
           </ng-template>
           <ng-template pTemplate="content">
-            <div class="mt-3" formArrayName="opening_hours" *ngFor="let day of openingHours.controls; let i=index">
-              <div [formGroupName]="i">
-                <div class="form-group row">
-                  <div class="col-2">
-                    <div class="d-flex align-items-center">
-                      <p-inputSwitch formControlName="is_open"
-                                     class="mr-2"
-                                     [id]="day.value.day"
-                                     [(ngModel)]="day.value.is_open"
-                      >
-                      </p-inputSwitch>
-                      <label [for]="day.value.day">{{ day.value.day | translate | titlecase }}</label>
+            @for (day of openingHours.controls; track day; let i=$index) {
+              <div class="mt-3" formArrayName="opening_hours">
+                <div [formGroupName]="i">
+                  <div class="form-group row">
+                    <div class="col-2">
+                      <div class="d-flex align-items-center">
+                        <p-inputSwitch formControlName="is_open"
+                                        class="mr-2"
+                                        [id]="day.value.day"
+                                        [(ngModel)]="day.value.is_open"
+                        >
+                        </p-inputSwitch>
+                        <label [for]="day.value.day">{{ day.value.day | translate | titlecase }}</label>
+                      </div>
                     </div>
-                  </div>
-                  <div class="col-10">
-                    <ul class="list-unstyled mb-0" *ngIf="day.value.is_open">
-                      <li formArrayName="times" *ngFor="let time of day.controls.times.controls; let t=index; let last=last; let count=count">
-                        <div [formGroupName]="t" class="mb-1">
-                          <!-- inputs row. One row for each period -->
-                          <div class="form-row">
-                            <div class="col p-inputgroup">
-                              <span class="p-inputgroup-addon"><i class="fa fa-clock-o"></i></span>
-                              <input pInputText formControlName="start_time"
-                                     [(ngModel)]="time.value.start_time"/>
-                              <span class="p-inputgroup-addon"><i class="fa fa-long-arrow-right"></i></span>
-                              <input pInputText formControlName="end_time"
-                                     [(ngModel)]="time.value.end_time"/>
-                            </div>
-                            <div class="col-1 text-right">
-                              <button *ngIf="count > 1" (click)="deleteTime(i, t)" class="btn btn-sm btn-outline-danger">
-                                <i class="fa fa-trash-o" aria-hidden="true"></i>
-                              </button>
-                            </div>
-                            <div class="col-2">
-                              <button *ngIf="last" (click)="addTime(i)" class="btn btn-sm btn-outline-primary">
-                                <i class="fa fa-plus-square-o" aria-hidden="true"></i>
-                                {{ 'period' | translate }}
-                              </button>
+                    <div class="col-10">
+                      @if (day.value.is_open) {
+                        <ul class="list-unstyled mb-0">
+                          @for (time of $any(day).controls.times.controls; track time; let t=$index; let last=$last; let count=$count) {
+                            <li formArrayName="times">
+                              <div [formGroupName]="t" class="mb-1">
+                                <!-- inputs row. One row for each period -->
+                                <div class="form-row">
+                                  <div class="col p-inputgroup">
+                                    <span class="p-inputgroup-addon"><i class="fa fa-clock-o"></i></span>
+                                    <input pInputText formControlName="start_time"
+                                            [(ngModel)]="time.value.start_time"/>
+                                    <span class="p-inputgroup-addon"><i class="fa fa-long-arrow-right"></i></span>
+                                    <input pInputText formControlName="end_time"
+                                            [(ngModel)]="time.value.end_time"/>
+                                  </div>
+                                  <div class="col-1 text-right">
+                                    @if (count > 1) {
+                                      <button (click)="deleteTime(i, t)" class="btn btn-sm btn-outline-danger">
+                                        <i class="fa fa-trash-o" aria-hidden="true"></i>
+                                      </button>
+                                    }
+                                  </div>
+                                  <div class="col-2">
+                                    @if (last) {
+                                      <button (click)="addTime(i)" class="btn btn-sm btn-outline-primary">
+                                        <i class="fa fa-plus-square-o" aria-hidden="true"></i>
+                                        {{ 'period' | translate }}
+                                      </button>
+                                    }
+                                  </div>
+                                </div>
+                                <div class="error-messages">
+                                  @if (time.controls.start_time.invalid && (time.controls.start_time.dirty || time.controls.start_time.touched)) {
+                                    @if (time.controls.start_time.errors.required) {
+                                      <div translate>Start time is required.</div>
+                                    }
+                                    @if (time.controls.start_time.errors.pattern) {
+                                      <div translate>Start time format is not correct.</div>
+                                    }
+                                  }
+                                  @if (time.controls.end_time.invalid && (time.controls.end_time.dirty || time.controls.end_time.touched)) {
+                                    @if (time.controls.end_time.errors.required) {
+                                      <div translate>End time is required.</div>
+                                    }
+                                    @if (time.controls.end_time.errors.pattern) {
+                                      <div translate>End time format is not correct.</div>
+                                    }
+                                  }
+                                  @if (time.invalid && (time.dirty || time.touched)) {
+                                    @if (time.errors && time.errors.lessThan) {
+                                      <div translate>End time is less than start time.</div>
+                                    }
+                                  }
+                                </div>
+                              </div>
+                            </li>
+
+                          }
+                        </ul>
+
+                      }
+                      @if (day.invalid  && (day.dirty || day.touched)) {
+                        <div class="text-danger pt-1">
+                          @if (day.errors && day.errors.rangeLessThan) {
+                            <div translate>
+                              The two periods are overlapping.
                             </div>
-                          </div>
-                          <div class="error-messages">
-                            <ng-container *ngIf="time.controls.start_time.invalid && (time.controls.start_time.dirty || time.controls.start_time.touched)">
-                              <div *ngIf="time.controls.start_time.errors.required" translate>Start time is required.</div>
-                              <div *ngIf="time.controls.start_time.errors.pattern" translate>Start time format is not correct.</div>
-                            </ng-container>
-                            <ng-container *ngIf="time.controls.end_time.invalid && (time.controls.end_time.dirty || time.controls.end_time.touched)">
-                              <div *ngIf="time.controls.end_time.errors.required" translate>End time is required.</div>
-                              <div *ngIf="time.controls.end_time.errors.pattern" translate>End time format is not correct.</div>
-                            </ng-container>
-                            <ng-container *ngIf="time.invalid && (time.dirty || time.touched)">
-                              <div *ngIf="time.errors && time.errors.lessThan" translate>End time is less than start time.</div>
-                            </ng-container>
-                          </div>
+                          }
                         </div>
-                      </li>
-                    </ul>
-                    <div *ngIf="day.invalid  && (day.dirty || day.touched)" class="text-danger pt-1">
-                      <div *ngIf="day.errors && day.errors.rangeLessThan" translate>
-                        The two periods are overlapping.
-                      </div>
+                      }
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
+            }
           </ng-template>
         </p-accordionTab>
         <!-- EXCEPTIONS DATES TAB ========================================= -->
@@ -186,8 +238,10 @@ <h1 translate>Library</h1>
             </div>
           </ng-template>
           <ng-template pTemplate="content">
-            <admin-libraries-exception-dates-list *ngIf="library" [exceptionDates]="library.exception_dates">
-            </admin-libraries-exception-dates-list>
+            @if (library) {
+              <admin-libraries-exception-dates-list [exceptionDates]="library.exception_dates">
+              </admin-libraries-exception-dates-list>
+            }
           </ng-template>
         </p-accordionTab>
         <!-- NOTIFICATIONS SETTING TAB ==================================== -->
@@ -199,27 +253,33 @@ <h1 translate>Library</h1>
           </ng-template>
           <ng-template pTemplate="content">
             <div class="container" formArrayName="notification_settings">
-              <div class="row mb-1" *ngFor="let setting of notificationSettings.controls; let i=index" [formGroupName]="i">
-                <div class="col-3">
-                  <span style="min-width: 25px" class="d-inline-block">&nbsp;
-                    <i *ngIf="setting.controls.type.value | notificationType:'patron'" class="text-info fa fa-info"></i>
-                  </span>
-                  <label class="font-weight-bold ml-2">{{ setting.controls.type.value | translate | ucfirst }}</label>
-                </div>
-                <div class="col p-inputgroup">
-                  <span class="p-inputgroup-addon"><i class="fa fa-at"></i></span>
-                  <input pInputText formControlName="email" [id]="setting.controls.type.value + '-email'">
-                </div>
-                <div class="col-3 p-inputgroup" *ngIf="delayedNotificationTypes.includes(setting.controls.type.value)">
-                  <span class="p-inputgroup-addon"><i class="fa fa-clock-o"></i></span>
-                  <p-inputNumber
-                    formControlName="delay"
-                    [inputId]="setting.controls.type.value + '-delay'"
-                    [min]="0"
-                    pTooltip="{{ 'Sending how many minutes after the item is available' | translate }}" showDelay="1000"
-                  ></p-inputNumber>
+              @for(setting of notificationSettings.controls; track setting; let i=$index) {
+                <div class="row mb-1" [formGroupName]="i">
+                  <div class="col-3">
+                    <span style="min-width: 25px" class="d-inline-block">&nbsp;
+                      @if ($any(setting).controls.type.value | notificationType:'patron') {
+                        <i class="text-info fa fa-info"></i>
+                      }
+                    </span>
+                    <label class="font-weight-bold ml-2">{{ $any(setting).controls.type.value | translate | ucfirst }}</label>
+                  </div>
+                  <div class="col p-inputgroup">
+                    <span class="p-inputgroup-addon"><i class="fa fa-at"></i></span>
+                    <input pInputText formControlName="email" [id]="$any(setting).controls.type.value + '-email'">
+                  </div>
+                  @if (delayedNotificationTypes.includes($any(setting).controls.type.value)) {
+                    <div class="col-3 p-inputgroup">
+                      <span class="p-inputgroup-addon"><i class="fa fa-clock-o"></i></span>
+                      <p-inputNumber
+                        formControlName="delay"
+                        [inputId]="$any(setting).controls.type.value + '-delay'"
+                        [min]="0"
+                        pTooltip="{{ 'Sending how many minutes after the item is available' | translate }}" showDelay="1000"
+                      ></p-inputNumber>
+                    </div>
+                  }
                 </div>
-              </div>
+              }
               <p-divider align="left">
                 <small translate>Legend</small>
               </p-divider>
@@ -288,10 +348,10 @@ <h1 translate>Library</h1>
               {{ 'Rollover settings' | translate }}
               <div class="ml-auto rollover-settings">
                 <i class="fa"
-                   [ngClass]="{
+                    [ngClass]="{
                         'fa-times text-danger': rolloverSettings.value.account_transfer === 'rollover_no_transfer',
                         'fa-check text-success': rolloverSettings.value.account_transfer === 'rollover_allocated_amount'
-                   }"
+                    }"
                 ></i>
               </div>
             </div>
@@ -323,8 +383,8 @@ <h1 translate>Library</h1>
         </div>
       </div>
     </form>
-  </ng-container>
-</div>
+  </div>
+}
 
 <ng-template #contact_block
              let-formGroup="formGroup"
@@ -336,7 +396,9 @@ <h1 translate>Library</h1>
 
     <!-- header -->
     <ng-template pTemplate="header">
-      <ng-container *ngIf="icon"><i class="fa {{ icon }} mr-2"></i></ng-container>
+      @if (icon) {
+        <i class="fa {{ icon }} mr-2"></i>
+      }
       <span>{{ name }}</span>
     </ng-template>
 
diff --git a/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.ts b/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.ts
index eb8a561b9..89335d40c 100644
--- a/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.ts
+++ b/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.ts
@@ -60,20 +60,20 @@ export class UserIdEditorComponent implements OnInit {
   /**
    * Constructor
    *
-   * @param _recordService - ng-core RecordService
+   * @param recordService - ng-core RecordService
    * @param bsModalRef - ngx-bootstrap BsModalRef
-   * @param _formlyJsonschema - ngx-formly FormlyJsonschema
-   * @param _toastService - ngx-toastr ToastrService
-   * @param _translateService - ngx-translate TranslateService
-   * @param _userService - rero/shared UserService
+   * @param formlyJsonschema - ngx-formly FormlyJsonschema
+   * @param toastService - ngx-toastr ToastrService
+   * @param translateService - ngx-translate TranslateService
+   * @param userService - rero/shared UserService
    */
   constructor(
-    private _recordService: RecordService,
+    private recordService: RecordService,
     public bsModalRef: BsModalRef,
-    private _formlyJsonschema: FormlyJsonschema,
-    private _toastService: ToastrService,
-    private _translateService: TranslateService,
-    private _userService: UserService
+    private formlyJsonschema: FormlyJsonschema,
+    private toastService: ToastrService,
+    private translateService: TranslateService,
+    private userService: UserService
   ) {
     this.form = new UntypedFormGroup({});
   }
@@ -82,13 +82,13 @@ export class UserIdEditorComponent implements OnInit {
    * Get the JSONSchema and add validators.
    */
   ngOnInit(): void {
-    this._recordService.getSchemaForm('users').pipe(
+    this.recordService.getSchemaForm('users').pipe(
       tap(
         schema => {
           if (schema != null) {
             schema = processJsonSchema(schema.schema);
             this.fields = [
-              this._formlyJsonschema.toFieldConfig(orderedJsonSchema(schema), {
+              this.formlyJsonschema.toFieldConfig(orderedJsonSchema(schema), {
 
                 // post process JSONSchema7 to FormlyFieldConfig conversion
                 map: (field: FormlyFieldConfig, jsonSchema: JSONSchema7) => {
@@ -135,7 +135,7 @@ export class UserIdEditorComponent implements OnInit {
       switchMap(() => {
         return (this.userID == null)
           ? of({})
-          : this._recordService.getRecord('users', this.userID);
+          : this.recordService.getRecord('users', this.userID);
       }),
       map((user: any) => user.metadata)
     ).subscribe(model => this.model = model);
@@ -154,11 +154,11 @@ export class UserIdEditorComponent implements OnInit {
       this.model = {};
       return;
     }
-    this._recordService.getRecords('users', query).pipe(
+    this.recordService.getRecords('users', query).pipe(
       map((res: any) => {
         if (res.hits.hits.length === 0) {
-          this._toastService.warning(
-            this._translateService.instant('User not found.')
+          this.toastService.warning(
+            this.translateService.instant('User not found.')
           );
           return null;
         }
@@ -170,26 +170,26 @@ export class UserIdEditorComponent implements OnInit {
           return null;
         }
         // current logged user organisation
-        const currentOrgPid = this._userService.user.currentOrganisation;
+        const currentOrgPid = this.userService.user.currentOrganisation;
         const patronAccounts = model.metadata.patrons;
         // user has patron account
         if (patronAccounts && patronAccounts.length > 0) {
-          const patronAccount = patronAccounts.filter(ptrn => ptrn.organisation.pid === currentOrgPid).pop();
+          const patronAccount = patronAccounts.filter((ptrn: any) => ptrn.organisation.pid === currentOrgPid).pop();
           // user has already an account in the logged librarian organisation
           if (patronAccount != null) {
-            this._toastService.info(
-              this._translateService.instant('This person is already registered in your organisation.')
+            this.toastService.info(
+              this.translateService.instant('This person is already registered in your organisation.')
             );
             return of(null);
           }
         }
-        this._toastService.info(
-          this._translateService.instant('The personal data has been successfully linked to this patron.')
+        this.toastService.info(
+          this.translateService.instant('The personal data has been successfully linked to this patron.')
         );
         this.loadedUserID = model.id;
         this.passwordField.props.required = false;
         this.form.reset();
-        return this.model = model.metadata ? model.metadata : null;
+        return this.model = model.metadata || null;
       }),
     ).subscribe();
   }
@@ -202,8 +202,8 @@ export class UserIdEditorComponent implements OnInit {
   submit(): void {
     this.form.updateValueAndValidity();
     if (this.form.valid === false) {
-      this._toastService.error(
-        this._translateService.instant('The form contains errors.')
+      this.toastService.error(
+        this.translateService.instant('The form contains errors.')
       );
       return;
     }
@@ -214,11 +214,11 @@ export class UserIdEditorComponent implements OnInit {
     }
     if (this.userID != null) {
       data.pid = this.userID;
-      this._recordService.update('users', data.pid, data).subscribe(() => {
+      this.recordService.update('users', data.pid, data).subscribe(() => {
         this.bsModalRef.hide();
       });
     } else {
-      this._recordService.create('users', data).subscribe((res) => {
+      this.recordService.create('users', data).subscribe((res) => {
         this.userID = res.id;
         this.bsModalRef.hide();
       });
@@ -234,14 +234,14 @@ export class UserIdEditorComponent implements OnInit {
   getUniqueValidator(fieldName: string) {
     return {
       expression: (control: UntypedFormControl) => {
-        const value = control.value;
+        const { value } = control;
         if (value == null || value.length === 0) {
           return of(true);
         }
-        return this._recordService.getRecords('users', `${fieldName}:${value}`).pipe(
+        return this.recordService.getRecords('users', `${fieldName}:${value}`).pipe(
           debounceTime(1000),
           map((res: any) => {
-            const id = this.loadedUserID ? this.loadedUserID : this.userID;
+            const id = this.loadedUserID || this.userID;
             return (res.hits.hits.length === 0) ||
               (res.hits.hits.length === 1 && res.hits.hits[0].id === id);
           })
diff --git a/projects/admin/src/app/record/detail-view/address-type/address-type.component.html b/projects/admin/src/app/record/detail-view/address-type/address-type.component.html
index 8a86ae618..8cef3431e 100644
--- a/projects/admin/src/app/record/detail-view/address-type/address-type.component.html
+++ b/projects/admin/src/app/record/detail-view/address-type/address-type.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -19,72 +19,72 @@
     <div class="p-2">
       <dl class="row mb-0">
         <!-- CONTACT_PERSON -->
-        <ng-container *ngIf="addressType.contact_person">
+        @if (addressType.contact_person) {
           <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
             Contact person
           </dt>
           <dd class="col-sm-7 col-md-8 mb-0">
             {{ addressType.contact_person }}
           </dd>
-        </ng-container>
+        }
         <!-- STREET -->
-        <ng-container *ngIf="addressType.street">
+        @if (addressType.street) {
           <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
             Street
           </dt>
           <dd class="col-sm-7 col-md-8 mb-0">
             {{ addressType.street }}
           </dd>
-        </ng-container>
+        }
         <!-- POSTAL_CODE -->
-        <ng-container *ngIf="addressType.postal_code">
+        @if (addressType.postal_code) {
           <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
             Postal code
           </dt>
           <dd class="col-sm-7 col-md-8 mb-0">
             {{ addressType.postal_code }}
           </dd>
-        </ng-container>
+        }
         <!-- CITY -->
-        <ng-container *ngIf="addressType.city">
+        @if (addressType.city) {
           <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
             City
           </dt>
           <dd class="col-sm-7 col-md-8 mb-0">
             {{ addressType.city }}
           </dd>
-        </ng-container>
+        }
         <!-- COUNTRY -->
-        <ng-container *ngIf="addressType.country">
+        @if (addressType.country) {
           <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
             Country
           </dt>
           <dd class="col-sm-7 col-md-8 mb-0">
             {{ addressType.country }}
           </dd>
-        </ng-container>
+        }
       </dl>
     </div>
     <div class="p-2">
       <dl class="row mb-0">
-        <!-- COUNTRY -->
-        <ng-container *ngIf="addressType.phone">
+        <!-- PHONE -->
+        @if (addressType.phone) {
           <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
             Phone
           </dt>
           <dd class="col-sm-7 col-md-8 mb-0">
             {{ addressType.phone }}
           </dd>
-        </ng-container>
+        }
         <!-- EMAIL -->
-        <ng-container *ngIf="addressType.email">
+        @if (addressType.email) {
           <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
             Email
           </dt>
           <dd class="col-sm-7 col-md-8 mb-0">
             {{ addressType.email }}
           </dd>
-        </ng-container>
+        }
       </dl>
     </div>
   </section>
diff --git a/projects/admin/src/app/record/detail-view/budget-detail-view/acquisition-account/acquisition-account.component.html b/projects/admin/src/app/record/detail-view/budget-detail-view/acquisition-account/acquisition-account.component.html
deleted file mode 100644
index 1f2fc1d86..000000000
--- a/projects/admin/src/app/record/detail-view/budget-detail-view/acquisition-account/acquisition-account.component.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!--
-  RERO ILS UI
-  Copyright (C) 2019 RERO
-
-  This program is free software: you can redistribute it and/or modify
-  it under the terms of the GNU Affero General Public License as published by
-  the Free Software Foundation, version 3 of the License.
-
-  This program is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  GNU Affero General Public License for more details.
-
-  You should have received a copy of the GNU Affero General Public License
-  along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-<div class="row mt-3" *ngIf="account && permissions">
-  <div class="col-6 offset-1">
-    <h5 class="mb-0">{{ account.metadata.name }}</h5>
-    {{ account.metadata.description }}
-  </div>
-  <div class="col-sm-2 text-right">
-    {{ account.metadata.amount_allocated | currency:currencyCode:'symbol' }}
-  </div>
-  <div class="col-sm-3 text-right">
-    <button *ngIf="permissions.update.can"
-            type="button" class="btn btn-outline-primary btn-sm"
-            [routerLink]="['/records', 'acq_accounts', 'edit', account.metadata.pid]">
-      <i class="fa fa-pencil"></i>
-    </button>
-    <button *ngIf="permissions.delete.can; else notDelete"
-            type="button" class="btn btn-outline-danger btn-sm ml-1"
-            (click)="delete(account)">
-      <i class="fa fa-trash"></i>
-    </button>
-    <ng-template #notDelete>
-      <button type="button" class="btn btn-sm btn-outline-danger disabled ml-1"
-              title="{{ 'Delete' | translate}}"
-              [popover]="tolTemplate" triggers="mouseenter:mouseleave">
-        <i class="fa fa-trash"></i>
-      </button>
-      <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
-    </ng-template>
-  </div>
-</div>
diff --git a/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.html b/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.html
index 5e1c95f2d..f8d915655 100644
--- a/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,30 +15,33 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<ng-container *ngIf="record && record.metadata as data">
-  <h1 class="mb-3">{{ data.name | translate }}</h1>
+@if (record) {
+  <h1 class="mb-3">{{ record.metadata.name | translate }}</h1>
   <article>
     <!-- DETAILS -->
     <section class="m-2 p-2">
       <dl class="row">
         <dt class="col-3 label-title" translate>Name</dt>
-        <dd id="cipo-name" class="col-9">{{ data.name }}</dd>
-        <ng-container *ngIf="data.description">
+        <dd id="cipo-name" class="col-9">{{ record.metadata.name }}</dd>
+        @if (record.metadata.description) {
           <dt class="col-3 label-title" translate>Description</dt>
-          <dd id="cipo-description" class="col-9">{{ data.description }}</dd>
-        </ng-container>
+          <dd id="cipo-description" class="col-9">{{ record.metadata.description }}</dd>
+        }
         <dt class="col-3 label-title" translate>Level</dt>
         <dd id="cipo-level" class="col-9">
-          <ng-container *ngIf="data.policy_library_level; else organisationLevel">
+          @if (record.metadata.policy_library_level) {
             {{ 'Library' | translate }}
-            <ul *ngFor="let lib of data.libraries" class="pl-4">
-              <li>
-                <i class="fa fa-university pr-2"></i>
-                {{ lib.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
-              </li>
+            <ul>
+              @for (library of record.metadata.libraries; track library) {
+                <li>
+                  <i class="fa fa-university pr-2"></i>
+                  {{ library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
+                </li>
+              }
             </ul>
-          </ng-container>
-          <ng-template #organisationLevel>{{ 'Organisation' | translate }}</ng-template>
+          } @else {
+            {{ 'Organisation' | translate }}
+          }
         </dd>
       </dl>
     </section>
@@ -51,155 +54,175 @@ <h1 class="mb-3">{{ data.name | translate }}</h1>
           <!-- IS DEFAULT -->
           <dt class="col-3 label-title" translate>Is default</dt>
           <dd class="col-9">
-            <ng-container *ngIf="data.is_default; then thenDefaultBlock else elseDefaultBlock"></ng-container>
-            <ng-template #thenDefaultBlock>
+            @if (record.metadata.is_default) {
               <i id="cipo-is-default" class="fa fa-check  text-success" aria-hidden="true"></i>
-            </ng-template>
-            <ng-template #elseDefaultBlock>
+            } @else {
               <i id="cipo-is-default" class="fa fa-times text-danger" aria-hidden="true"></i>
-            </ng-template>
+            }
           </dd>
           <!-- CHECKOUT SETTINGS-->
           <dt class="col-3 mb-0 label-title" translate>Allow checkout</dt>
-          <ng-container *ngIf="checkoutIsAllowed; else elseCheckoutBlock">
+          @if (checkoutIsAllowed) {
             <dd class="col-1 mb-0">
               <i id="cipo-allow-checkout" class="fa fa-check text-success" aria-hidden="true"></i>
             </dd>
             <dt class="col-3 label-title" translate>Checkout duration</dt>
             <dd id="cipo-checkout-duration" class="col-3 mb-0">
-              {{ data.checkout_duration }}
-              {{ data.checkout_duration | i18nPlural: {'=1': 'day', 'other': 'days'} | translate }}
+              {{ record.metadata.checkout_duration }}
+              {{ record.metadata.checkout_duration | i18nPlural: {'=1': 'day', 'other': 'days'} | translate }}
             </dd>
             <dt class="col-3 offset-4 label-title" translate>Number of renewals</dt>
             <dd id="cipo-cnumber-renewals" class="col-5 mb-0">
-              {{ data.number_renewals }}
+              {{ record.metadata.number_renewals }}
             </dd>
             <dt class="col-3 offset-4 label-title" translate>Renewal duration</dt>
             <dd id="cipo-renewal-duration" class="col-5 mb-0">
-              {{ data.renewal_duration }}
-              {{ data.renewal_duration | i18nPlural: {'=1': 'day', 'other': 'days'} | translate }}
+              {{ record.metadata.renewal_duration }}
+              {{ record.metadata.renewal_duration | i18nPlural: {'=1': 'day', 'other': 'days'} | translate }}
             </dd>
-          </ng-container>
-          <ng-template #elseCheckoutBlock>
+          } @else {
             <dd class="col-9">
               <i id="cipo-allow-checkout" class="fa fa-times text-danger" aria-hidden="true"></i>
             </dd>
-          </ng-template>
+          }
           <dt class="col-3 label-title" translate>Allow requests</dt>
           <dd class="col-9">
-            <ng-container *ngIf="data.allow_requests; then thenRequestBlock else elseRequestBlock"></ng-container>
-            <ng-template #thenRequestBlock>
+            @if (record.metadata.allow_requests) {
               <i id="cipo-allow-request" class="fa fa-check  text-success" aria-hidden="true"></i>
-            </ng-template>
-            <ng-template #elseRequestBlock>
+            } @else {
               <i id="cipo-allow-request" class="fa fa-times text-danger" aria-hidden="true"></i>
-            </ng-template>
+            }
           </dd>
         </dl>
       </div>
     </section>
 
     <!-- REMINDERS -->
-    <section class="card mt-2" *ngIf="reminders.length > 0">
-      <div class="card-header"><h5 class="mb-0" translate>Reminders</h5></div>
-      <div class="card-body">
-        <table class="table table-hover table-sm">
-          <thead class="thead-light">
-            <th scope="col">#</th>
-            <th scope="col" translate>Type</th>
-            <th scope="col" translate>Days Delay</th>
-            <th scope="col" translate>Communication channel</th>
-            <th scope="col" translate>Amount</th>
-          </thead>
-          <tbody>
-            <tr *ngFor="let reminder of data.reminders; let idx = index">
-              <th scope="row">{{ idx + 1 }}</th>
-              <td>{{ reminder.type | translate }}</td>
-              <td>
-                <i class="fa" [ngClass]="{
-                  'fa-calendar-minus-o': reminder.type === 'due_soon',
-                  'fa-calendar-plus-o': reminder.type === 'overdue'
-                }"></i>
-                {{ reminder.days_delay }}
-              </td>
-              <td>{{ reminder.communication_channel | translate }}</td>
-              <td>
-                <ng-container *ngIf="reminder.fee_amount; else noAmount">
-                  {{ reminder.fee_amount | currency: org_currency:true }}
-                </ng-container>
-                <ng-template #noAmount>&mdash;</ng-template>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </section>
+    @if (reminders.length > 0) {
+      <section class="card mt-2">
+        <div class="card-header">
+          <h5 class="mb-0" translate>Reminders</h5>
+        </div>
+        <div class="card-body">
+          <table class="table table-hover table-sm">
+            <thead class="thead-light">
+              <th scope="col">#</th>
+              <th scope="col" translate>Type</th>
+              <th scope="col" translate>Days Delay</th>
+              <th scope="col" translate>Communication channel</th>
+              <th scope="col" translate>Amount</th>
+            </thead>
+            <tbody>
+              @for (reminder of record.metadata.reminders; track reminder; let idx = $index) {
+                <tr>
+                  <th scope="row">{{ idx + 1 }}</th>
+                  <td>{{ reminder.type | translate }}</td>
+                  <td>
+                    <i class="fa" [ngClass]="{
+                      'fa-calendar-minus-o': reminder.type === 'due_soon',
+                      'fa-calendar-plus-o': reminder.type === 'overdue'
+                    }"></i>
+                    {{ reminder.days_delay }}
+                  </td>
+                  <td>{{ reminder.communication_channel | translate }}</td>
+                  <td>
+                    @if (reminder.fee_amount) {
+                      {{ reminder.fee_amount | currency: org_currency:true }}
+                    } @else {
+                      &mdash;
+                    }
+                  </td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      </section>
+    }
 
     <!-- OVERDUE FEES -->
-    <section class="card mt-2" *ngIf="overdues && overdues.length > 0">
-      <div class="card-header"><h5 class="mb-0" translate>Overdue fees</h5></div>
-      <div class="card-body">
-        <table class="table table-hover table-sm">
-          <thead class="thead-light">
-            <th scope="col" translate>Interval of days</th>
-            <th scope="col" translate>Amount/day</th>
-          </thead>
-          <tbody>
-            <tr *ngFor="let interval of overdues">
-              <td scope="row">
-                {{ interval.from }}
-                <i class="fa fa-long-arrow-right px-4"></i>
-                <ng-container *ngIf="interval.to; else noLimit">{{ interval.to }}</ng-container>
-                <ng-template #noLimit><span class="text-muted">&infin;</span></ng-template>
-              </td>
-              <td>
-                {{ interval.fee_amount | currency: org_currency:true }} / {{ 'day' | translate }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <div class="row col mt-3" *ngIf="data.overdue_fees.maximum_total_amount">
-          <div class="col-lg-3 font-weight-bold pl-0" translate>Maximun total amount</div>
-          <div class="col-lg-9">
-            {{ data.overdue_fees.maximum_total_amount | currency: org_currency:true }}
-          </div>
+    @if (overdues && overdues.length > 0) {
+      <section class="card mt-2">
+        <div class="card-header"><h5 class="mb-0" translate>Overdue fees</h5></div>
+        <div class="card-body">
+          <table class="table table-hover table-sm">
+            <thead class="thead-light">
+              <th scope="col" translate>Interval of days</th>
+              <th scope="col" translate>Amount/day</th>
+            </thead>
+            <tbody>
+              @for (interval of overdues; track interval) {
+                <tr>
+                  <td scope="row">
+                    {{ interval.from }}
+                    <i class="fa fa-long-arrow-right px-4"></i>
+                    @if (interval.to) {
+                      {{ interval.to }}
+                    } @else {
+                      <span class="text-muted">&infin;</span>
+                    }
+                  </td>
+                  <td>
+                    {{ interval.fee_amount | currency: org_currency:true }} / {{ 'day' | translate }}
+                  </td>
+                </tr>
+              }
+            </tbody>
+          </table>
+          @if (record.metadata.overdue_fees.maximum_total_amount) {
+            <div class="row col mt-3">
+              <div class="col-lg-3 font-weight-bold pl-0" translate>Maximun total amount</div>
+              <div class="col-lg-9">
+                {{ record.metadata.overdue_fees.maximum_total_amount | currency: org_currency:true }}
+              </div>
+            </div>
+          }
         </div>
-      </div>
-    </section>
+      </section>
+    }
 
     <!-- APPLICATION -->
-
-    <section class="card mt-2 " *ngIf="record.metadata.settings">
-      <div class="card-header"><h6 class="mb-0" translate>Application</h6></div>
-      <div class="card-body table-responsive">
-        <table class="table table-striped table-sm">
-          <thead>
-            <tr>
-              <th scope="col" rowspan="2" translate>Patron types</th>
-              <th scope="col" [attr.colspan]="itemTypes.size" class="text-center" translate>Item types</th>
-            </tr>
-            <tr>
-              <th scope="col" *ngFor="let itemType of itemTypes" class="text-center">
-                <span id="itty-{{itemType}}">{{ itemType | getRecord: 'item_types' : 'field' : 'name' | async }}</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr *ngFor="let setting of settings | keyvalue; let i = index">
-              <th id="ptty-{{setting.key}}" scope="row" class="table-light">
-                {{ setting.key | getRecord: 'patron_types' : 'field' : 'name' | async }}
-              </th>
-              <td *ngFor="let itemType of itemTypes" class="text-center">
-                <span *ngFor="let currentItemType of setting.value">
-                  <span *ngIf="itemType === currentItemType">
-                    <i id="ptty-{{setting.key}}-itty-{{currentItemType}}" class="fa fa-check  text-success" aria-hidden="true"></i>
-                  </span>
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </section>
+    @if (record.metadata.settings) {
+      <section class="card mt-2">
+        <div class="card-header">
+          <h6 class="mb-0" translate>Application</h6>
+        </div>
+        <div class="card-body table-responsive">
+          <table class="table table-striped table-sm">
+            <thead>
+              <tr>
+                <th scope="col" rowspan="2" translate>Patron types</th>
+                <th scope="col" [attr.colspan]="itemTypes.size" class="text-center" translate>Item types</th>
+              </tr>
+              <tr>
+                @for (itemType of itemTypes; track itemType) {
+                  <th scope="col" class="text-center">
+                    <span id="itty-{{itemType}}">{{ itemType | getRecord: 'item_types' : 'field' : 'name' | async }}</span>
+                  </th>
+                }
+              </tr>
+            </thead>
+            <tbody>
+              @for (setting of settings | keyvalue; track setting; let i = $index) {
+                <tr>
+                  <th id="ptty-{{setting.key}}" scope="row" class="table-light">
+                    {{ setting.key | getRecord: 'patron_types' : 'field' : 'name' | async }}
+                  </th>
+                  @for (itemType of itemTypes; track itemType) {
+                    <td class="text-center">
+                      @for (currentItemType of setting.value; track currentItemType) {
+                        @if (itemType === currentItemType) {
+                          <i id="ptty-{{setting.key}}-itty-{{currentItemType}}" class="fa fa-check  text-success" aria-hidden="true"></i>
+                        }
+                      }
+                    </td>
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      </section>
+    }
   </article>
-</ng-container>
+}
diff --git a/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.ts b/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.ts
index f2d3aaa21..b259c9358 100644
--- a/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { OrganisationService } from '../../../service/organisation.service';
 
@@ -26,7 +26,7 @@ import { OrganisationService } from '../../../service/organisation.service';
 
 export class CircPolicyDetailViewComponent implements OnInit, OnDestroy {
 
-  // COMPONENT ATTIBUTES ======================================================
+  // COMPONENT ATTRIBUTES ======================================================
   /** The observable resolving record data */
   record$: Observable<any>;
   /** The resource type */
@@ -48,7 +48,7 @@ export class CircPolicyDetailViewComponent implements OnInit, OnDestroy {
   // GETTER & SETTER ==========================================================
   /** Organisation currency */
   get org_currency() {
-    return this._organisationService.organisation.default_currency;
+    return this.organisationService.organisation.default_currency;
   }
 
   /** checkout is allowed ? */
@@ -61,11 +61,9 @@ export class CircPolicyDetailViewComponent implements OnInit, OnDestroy {
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _organisationService - OrganisationService
+   * @param organisationService - OrganisationService
    */
-  constructor(
-    private _organisationService: OrganisationService
-  ) {}
+  constructor(private organisationService: OrganisationService) {}
 
   /** On init hook */
   ngOnInit() {
diff --git a/projects/admin/src/app/record/detail-view/collection-detail-view/collection-detail-view.component.html b/projects/admin/src/app/record/detail-view/collection-detail-view/collection-detail-view.component.html
index 09fd9946f..d9ec9cd48 100644
--- a/projects/admin/src/app/record/detail-view/collection-detail-view/collection-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/collection-detail-view/collection-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020 RERO
+  Copyright (C) 2020-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,70 +14,68 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-
-<ng-container *ngIf="record$ | async as record">
-  <h1 id="collection-title" class="d-inline mr-2">{{ record.metadata.title }}</h1>
-  <section class="mt-2" id="subject" *ngIf="record.metadata.subjects">
-  <ng-container *ngFor="let subject of record.metadata.subjects">
-    <span class="badge badge-secondary mr-1 ng-star-inserted">
-      <i class="fa fa-tag"></i> {{ subject.name }}
-    </span>
-  </ng-container>
-  </section>
-  <section class="mt-2" id="collection">
-    <div *ngIf="record.metadata.description">
-      <span class="font-weight-bold" translate>Description</span>:
-      <span id="type" [innerHtml]="record.metadata.description | nl2br"></span>
-    </div>
-    <div *ngIf="record.metadata.teachers">
-      <span class="font-weight-bold" translate>Teachers</span>:
-      <span id="teacher" *ngIf="record.metadata.teachers">
-        <ng-container *ngFor="let teacher of record.metadata.teachers; let last = last">
-        {{ teacher.name }}
-        {{ last ? '' : ', ' }}
-        </ng-container>
-      </span>
-    </div>
-    <div *ngIf="record.metadata.collection_id">
-      <span class="font-weight-bold" translate>Collection ID</span>:
-      <span id="collection-id">{{ record.metadata.collection_id }}</span>
-    </div>
-    <div *ngIf="record.metadata.collection_type">
-      <span class="font-weight-bold" translate>Type</span>:
-      <span id="collection-type">{{ record.metadata.collection_type }}</span>
-    </div>
-    <div *ngIf="record.metadata.libraries">
-      <span class="font-weight-bold" translate>Libraries</span>:
-      <ng-container *ngIf="record.metadata.libraries">
-        <span
-          *ngFor="let library of record.metadata.libraries; let last=last"
-          id="library-{{ library.pid }}"
-        >
-          {{ library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
-          {{ last ? '' : '; ' }}
+@if (record) {
+  <h1 id="collection-title" class="mb-3 mr-2">{{ record.metadata.title }}</h1>
+  @if (record.metadata.subjects) {
+    <section class="mt-2" id="subject">
+      @for(subject of record.metadata.subjects; track subject) {
+        <span class="badge badge-secondary mr-1 ng-star-inserted">
+          <i class="fa fa-tag"></i> {{ subject.name }}
         </span>
-      </ng-container>
-    </div>
-    <div>
-      <span class="font-weight-bold" translate>Date</span>:
-      <span id="start-end-date">
+      }
+    </section>
+  }
+  <section class="mt-2" id="collection">
+    <dl class="row">
+      @if (record.metadata.description) {
+        <dt class="col-3 py-0 label-title" translate>Description</dt>
+        <dd class="col-9 py-0 mb-0" [innerHtml]="record.metadata.description | nl2br"></dd>
+      }
+      @if (record.metadata.teachers) {
+        <dt class="col-3 py-0 label-title" translate>Teachers</dt>
+        <dd class="col-9 py-0 mb-0">
+          @for (teacher of record.metadata.teachers; track teacher; let last = $last) {
+            {{ teacher.name }} {{ last ? '' : ', ' }}
+          }
+        </dd>
+      }
+      @if (record.metadata.collection_id) {
+        <dt class="col-3 py-0 label-title" translate>Collection ID</dt>
+        <dd class="col-9 py-0 mb-0">{{ record.metadata.collection_id }}</dd>
+      }
+      @if (record.metadata.collection_type) {
+        <dt class="col-3 py-0 label-title" translate>Type</dt>
+        <dd class="col-9 py-0 mb-0">{{ record.metadata.collection_type }}</dd>
+      }
+      @if (record.metadata.libraries) {
+        <dt class="col-3 py-0 label-title" translate>Libraries</dt>
+        <dd class="col-9 py-0 mb-0">
+          <ul class="list-unstyled mb-0">
+            @for (library of record.metadata.libraries; track library; let last=$last) {
+              <li>{{ library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}</li>
+            }
+          </ul>
+        </dd>
+      }
+      <dt class="col-3 py-0 label-title" translate>Date</dt>
+      <dd class="col-9 py-0 mb-0">
         {{ record.metadata.start_date | dateTranslate: 'mediumDate' }}
         - {{ record.metadata.end_date | dateTranslate: 'mediumDate' }}
-      </span>
-    </div>
-    <div>
-      <span class="font-weight-bold" translate>Status</span>:
-      <i class="fa fa-circle mr-1 text-{{ record.metadata.published ? 'success' : 'danger' }}" aria-hidden="true"></i>
-      <ng-container *ngIf="record.metadata.published; else unpublished">
-        <span translate>published</span>
-      </ng-container>
-      <ng-template #unpublished>
-        <span translate>unpublished</span>
-      </ng-template>
-    </div>
+      </dd>
+      <dt class="col-3 py-0 label-title" translate>Status</dt>
+      <dd class="col-9 py-0 mb-0">
+        <i class="fa fa-circle mr-1 text-{{ record.metadata.published ? 'success' : 'danger' }}" aria-hidden="true"></i>
+        @if (record.metadata.published) {
+          {{ 'published' | translate }}
+        } @else {
+          {{ 'unpublished' | translate }}
+        }
+      </dd>
+    </dl>
   </section>
 
   <section id="items">
     <admin-collection-items [items]="record.metadata.items"></admin-collection-items>
   </section>
-</ng-container>
+}
+
diff --git a/projects/admin/src/app/record/detail-view/collection-detail-view/collection-detail-view.component.ts b/projects/admin/src/app/record/detail-view/collection-detail-view/collection-detail-view.component.ts
index b92766316..817050b82 100644
--- a/projects/admin/src/app/record/detail-view/collection-detail-view/collection-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/collection-detail-view/collection-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,15 +15,16 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { Observable } from 'rxjs';
 
+
 @Component({
   selector: 'admin-collection-detail-view',
   templateUrl: './collection-detail-view.component.html'
 })
-export class CollectionDetailViewComponent implements DetailRecord {
+export class CollectionDetailViewComponent implements DetailRecord, OnInit {
 
   /** The observable resolving record data */
   record$: Observable<any>;
@@ -33,4 +34,8 @@ export class CollectionDetailViewComponent implements DetailRecord {
 
   /** The record */
   record: any;
+
+  ngOnInit(): void {
+    this.record$.subscribe((record: any) => this.record = record);
+  }
 }
diff --git a/projects/admin/src/app/record/detail-view/collection-detail-view/collection-items/collection-items.component.html b/projects/admin/src/app/record/detail-view/collection-detail-view/collection-items/collection-items.component.html
index a3563ea08..6006550ba 100644
--- a/projects/admin/src/app/record/detail-view/collection-detail-view/collection-items/collection-items.component.html
+++ b/projects/admin/src/app/record/detail-view/collection-detail-view/collection-items/collection-items.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020-2023 RERO
+  Copyright (C) 2020-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,44 +14,50 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="items">
-  <h3 class="mt-4 mb-0" translate>Items</h3>
+<h3 class="mt-4 mb-2" translate>Items</h3>
+@if (items) {
   <ul class="list-unstyled">
-    <ng-container *ngFor="let item of items; let isOdd=odd">
-      <li class="py-1" [ngClass]="{ 'bg-light': isOdd }" *ngIf="item.pid | getRecord: 'items' | async as itemData">
-        <ng-container
-          *ngIf="itemData.metadata.document.pid | getRecord:'documents':'object':null:{Accept: 'application/rero+json'} | async as document"
-        >
+    @for (item of items; track item; let isOdd=$odd) {
+      <li class="py-1" [ngClass]="{ 'bg-light': isOdd }" *ngVar="item.pid | getRecord: 'items' | async as itemData">
+        @if ($any(itemData).metadata.document.pid | getRecord:'documents':'object':null:{Accept: 'application/rero+json'} | async; as document) {
           <h5>
             <a [routerLink]="['/records','documents', 'detail', itemData.metadata.document.pid]">
-              {{ document.metadata.title[0]._text }}
+              {{ $any(document).metadata.title[0]._text }}
             </a>
           </h5>
           <div class="my-2">
-            <shared-contribution [contributions]="document.metadata?.contribution"></shared-contribution>
-            <div>
-              <span class="font-weight-bold" translate>Publication</span>:
-              {{ document.metadata.provisionActivity[0]._text[0].value }}
-            </div>
-            <div>
-              <span class="font-weight-bold" translate>Barcode</span>:
-              {{ itemData.metadata.barcode }}
-            </div>
-            <!-- INHERITED CALL NUMBER -->
-            <div *ngIf="itemData | itemHoldingsCallNumber | async as callNumber">
-              <span class="font-weight-bold" translate>Call number</span>:
-              <shared-inherited-call-number [item]="itemData"></shared-inherited-call-number>
-            </div>
-
-            <div *ngIf="itemData.metadata.location.pid | getRecord:'locations' | async as location">
-              <span class="font-weight-bold" translate>Library</span>:
-              <ng-container *ngIf="location.metadata.library.pid | getRecord: 'libraries' | async as library">
-                {{ library.metadata.name }} - {{ location.metadata.name }}
-              </ng-container>
-            </div>
+            @if ($any(document).metadata.contribution) {
+              <shared-contribution [contributions]="$any(document).metadata.contribution"></shared-contribution>
+            }
           </div>
-        </ng-container>
+          <dl class="row">
+            <dt class="col-2 py-0 label-title" translate>Publication</dt>
+            <dd class="col-10 py-0 mb-0">
+              {{ $any(document).metadata.provisionActivity[0]._text[0].value }}
+            </dd>
+            <dt class="col-2 py-0 label-title" translate>Barcode</dt>
+            <dd class="col-10 py-0 mb-0">
+              {{ itemData.metadata.barcode }}
+            </dd>
+            @if (itemData | itemHoldingsCallNumber | async; as callNumber) {
+              @if ((callNumber.first | json) !== '{}' || (callNumber.second | json) !== '{}') {
+                <dt class="col-2 py-0 label-title" translate>Call number</dt>
+                <dd class="col-10 py-0 mb-0">
+                  <shared-inherited-call-number [item]="itemData"></shared-inherited-call-number>
+                </dd>
+              }
+            }
+            @if (itemData.metadata.location.pid | getRecord:'locations' | async; as location) {
+              <dt class="col-2 py-0 label-title" translate>Library</dt>
+              <dd class="col-10 py-0 mb-0">
+                @if ($any(location).metadata.library.pid | getRecord: 'libraries' | async; as library) {
+                  {{ $any(library).metadata.name }} - {{ $any(location).metadata.name }}
+                }
+              </dd>
+            }
+          </dl>
+        }
       </li>
-    </ng-container>
+    }
   </ul>
-</ng-container>
+}
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.html
index 2e22210f9..7c8b6e3e5 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -18,19 +18,23 @@
   <h4 class="modal-title pull-left" translate>Import</h4>
 </div>
 <div class="modal-body">
-  <h5 *ngIf="records.length < 2; else plurial" translate>A document is available</h5>
-  <ng-template #plurial>
+  @if (records.length < 2) {
+    <h5 translate>A document is available</h5>
+  } @else {
     <h5 translate>Documents are available</h5>
-  </ng-template>
+  }
   <ul class="list-unstyled mb-0">
-    <li *ngFor="let record of records">
-      <a [routerLink]="['/records', 'documents', 'detail', record.metadata.pid]" (click)="close()">
-      <ng-container *ngIf="record.metadata.ui_title_text_responsibility; else noTitle">
-        {{ record.metadata.ui_title_text_responsibility }}
-      </ng-container>
-      <ng-template #noTitle>{{ 'Document' | translate }}</ng-template>
-      </a>
-    </li>
+    @for (record of records; track record) {
+      <li>
+        <a [routerLink]="['/records', 'documents', 'detail', $any(record).metadata.pid]" (click)="close()">
+          @if ($any(record).metadata.ui_title_text_responsibility) {
+            {{ $any(record).metadata.ui_title_text_responsibility }}
+          } @else {
+            {{ 'Document' | translate }}
+          }
+        </a>
+      </li>
+    }
   </ul>
   <div class="font-weight-bold mt-3" translate>Do you want to import this document?</div>
 </div>
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.ts
index 408be3c10..a6ce58d08 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -32,9 +32,9 @@ export class DialogImportComponent {
 
   /**
    * Constructor
-   * @param _bsModalRef - BsModalRef
+   * @param bsModalRef - BsModalRef
    */
-  constructor(private _bsModalRef: BsModalRef) {}
+  constructor(private bsModalRef: BsModalRef) {}
 
   /** Confirm action */
   confirm() {
@@ -50,6 +50,6 @@ export class DialogImportComponent {
 
   /** Close modal box */
   close() {
-    this._bsModalRef.hide();
+    this.bsModalRef.hide();
   }
 }
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/document-description.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/document-description/document-description.component.html
index 297afa8e2..e22988d78 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/document-description.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/document-description/document-description.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2023 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -17,431 +17,536 @@
 
 <div class="container div-striped p-0">
   <!-- -------------- WORK / EXPRESSION -------------- -->
-
   <!-- SUPPLEMENT, RELATED TO -->
-  <div class="striped" *ngIf="record.metadata.supplement">
-    <admin-other-edition fieldLabel="{{ 'Supplement' | translate }}" [field]="record.metadata.supplement"></admin-other-edition>
-  </div>
-  <div class="striped" *ngIf="record.metadata.relatedTo">
-    <admin-other-edition fieldLabel="{{ 'Related to' | translate }}" [field]="record.metadata.relatedTo"></admin-other-edition>
-  </div>
+  @if (record.metadata.supplement) {
+    <div class="striped">
+      <admin-other-edition fieldLabel="{{ 'Supplement' | translate }}" [field]="record.metadata.supplement"></admin-other-edition>
+    </div>
+  }
+  @if (record.metadata.relatedTo) {
+    <div class="striped">
+      <admin-other-edition fieldLabel="{{ 'Related to' | translate }}" [field]="record.metadata.relatedTo"></admin-other-edition>
+    </div>
+  }
 
   <!-- NOTE (TYPE GENERAL) -->
-  <div class="striped" *ngIf="notesGeneral">
-    <admin-description-zone>
-      <ng-container label>{{ 'General note' | translate }}</ng-container>
-      <ng-container content>
-        <ng-container *ngFor="let noteType of notesGeneral | keyvalue">
-          <ul class="list-unstyled mb-0">
-            <li *ngFor="let note of noteType.value">{{ note }}</li>
-          </ul>
+  @if (notesGeneral) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'General note' | translate }}</ng-container>
+        <ng-container content>
+          @for (noteType of notesGeneral | keyvalue; track noteType) {
+            <ul class="list-unstyled mb-0">
+              <li *ngFor="let note of noteType.value">{{ note }}</li>
+            </ul>
+          }
         </ng-container>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+      </admin-description-zone>
+    </div>
+  }
 
   <!--CREDITS -->
-  <div class="striped" *ngIf="record.metadata.credits">
-    <admin-description-zone>
-      <ng-container label>{{ 'Other responsibilities' | translate }}</ng-container>
-      <ng-container content>
-        <ul class="list-unstyled mb-0">
-          <li *ngFor="let credit of record.metadata.credits">{{ credit }}</li>
-        </ul>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (record.metadata.credits) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Other responsibilities' | translate }}</ng-container>
+        <ng-container content>
+          <ul class="list-unstyled mb-0">
+            <li *ngFor="let credit of record.metadata.credits">{{ credit }}</li>
+          </ul>
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- LANGUAGE -->
-  <div class="striped" *ngIf="record.metadata.language && record.metadata.language.length > 0">
-    <admin-description-zone>
-      <ng-container label>{{ 'Language' | translate }}</ng-container>
-      <ng-container content>
-        <ng-container *ngFor="let lang of record.metadata.language; last as isLast">
-          {{ lang.value | translateLanguage: currentLanguage }}<ng-container *ngIf="!isLast">, </ng-container>
+  @if (record.metadata.language && record.metadata.language.length > 0) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Language' | translate }}</ng-container>
+        <ng-container content>
+          @for (lang of record.metadata.language; track lang; let isLast = $last) {
+            {{ lang.value | translateLanguage: currentLanguage }}
+            @if (!isLast) {, }
+          }
         </ng-container>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- ORIGINAL LANGUAGE -->
-  <div class="striped" *ngIf="record.metadata.originalLanguage">
-    <admin-description-zone>
-      <ng-container label>{{ 'Original language' | translate }}</ng-container>
-      <ng-container content>
-        <ng-container *ngFor="let lang of record.metadata.originalLanguage; last as isLast">
-          {{ lang | translateLanguage: currentLanguage }}<ng-container *ngIf="!isLast">, </ng-container>
+  @if (record.metadata.originalLanguage) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Original language' | translate }}</ng-container>
+        <ng-container content>
+          @for (lang of record.metadata.originalLanguage; track lang; let isLast = $last) {
+              {{ lang | translateLanguage: currentLanguage }}
+              @if (!isLast) {, }
+          }
         </ng-container>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- ORIGINAL TITLE -->
-  <div class="striped" *ngIf="record.metadata.originalTitle">
-    <admin-description-zone>
-      <ng-container label>{{ 'Original title' | translate }}</ng-container>
-      <ng-container content>
-        <ul class="list-unstyled mb-0">
-          <li *ngFor="let title of record.metadata.originalTitle">{{ title }}</li>
-        </ul>
-      </ng-container>
-    </admin-description-zone>
-  </div>
-
-  <!-- WORK ACCESS POINT -->
-  <ng-container *ngVar="workAccessPoint as works">
-    <div class="striped" *ngIf="works.length > 0">
+  @if (record.metadata.originalTitle) {
+    <div class="striped">
       <admin-description-zone>
-        <ng-container label>{{ 'Work' | translate }}</ng-container>
+        <ng-container label>{{ 'Original title' | translate }}</ng-container>
         <ng-container content>
           <ul class="list-unstyled mb-0">
-            <li *ngFor="let work of works">{{ work }}</li>
+            @for (title of record.metadata.originalTitle; track title) {
+              <li>{{ title }}</li>
+            }
           </ul>
         </ng-container>
       </admin-description-zone>
     </div>
-  </ng-container>
+  }
+
+  <!-- WORK ACCESS POINT -->
+  @if (workAccessPoint; as works) {
+    @if (works.length > 0) {
+      <div class="striped">
+        <admin-description-zone>
+          <ng-container label>{{ 'Work' | translate }}</ng-container>
+          <ng-container content>
+            <ul class="list-unstyled mb-0">
+              <li *ngFor="let work of works">{{ work }}</li>
+            </ul>
+          </ng-container>
+        </admin-description-zone>
+      </div>
+    }
+  }
 
   <!-- TABLE OF CONTENTS -->
-  <div class="striped" *ngIf="record.metadata.tableOfContents">
-    <admin-description-zone>
-      <ng-container label>{{ 'Contents' | translate }}</ng-container>
-      <ng-container content>
-        <ul class="list-unstyled mb-0">
-          <li *ngFor="let table of record.metadata.tableOfContents">{{ table }}</li>
-        </ul>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (record.metadata.tableOfContents) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Contents' | translate }}</ng-container>
+        <ng-container content>
+          <ul class="list-unstyled mb-0">
+            @for (table of record.metadata.tableOfContents; track table) {
+              <li>{{ table }}</li>
+            }
+          </ul>
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- DISSERTATION -->
-  <div class="striped" *ngIf="record.metadata.dissertation">
-    <admin-description-zone>
-      <ng-container label>{{ 'Thesis' | translate }}</ng-container>
-      <ng-container content>
-        <ul class="list-unstyled mb-0">
-          <ng-container *ngFor="let dissertation of record.metadata.dissertation">
-            <ng-container *ngFor="let label of dissertation.label">
-              <li>{{ label.value }}</li>
-            </ng-container>
-          </ng-container>
-        </ul>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (record.metadata.dissertation) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Thesis' | translate }}</ng-container>
+        <ng-container content>
+          <ul class="list-unstyled mb-0">
+            @for (dissertation of record.metadata.dissertation; track dissertation) {
+              @for (label of dissertation.label; track label) {
+                <li>{{ label.value }}</li>
+              }
+            }
+          </ul>
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- INTENDED AUDIENCE -->
-  <div class="striped" *ngIf="record.metadata.intendedAudience">
-    <admin-description-zone>
-      <ng-container label>{{ 'Intended audience' | translate }}</ng-container>
-      <ng-container content>
-        <ng-container *ngFor="let audience of record.metadata.intendedAudience; last as isLast">
-          {{ audience.value | translate }}<ng-container *ngIf="!isLast">, </ng-container>
+  @if (record.metadata.intendedAudience) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Intended audience' | translate }}</ng-container>
+        <ng-container content>
+          @for (audience of record.metadata.intendedAudience; track audience; let isLast = $last) {
+            {{ audience.value | translate }}
+            @if (!isLast) {, }
+          }
         </ng-container>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- ILLUSTRATIVE CONTENT -->
-  <div class="striped" *ngIf="record.metadata.illustrativeContent">
-    <admin-description-zone>
-      <ng-container label>{{ 'Illustrations' | translate }}</ng-container>
-      <ng-container content>
-        {{ record.metadata.illustrativeContent.join(', ') }}
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (record.metadata.illustrativeContent) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Illustrations' | translate }}</ng-container>
+        <ng-container content>
+          {{ record.metadata.illustrativeContent.join(', ') }}
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- COLOR CONTENT -->
-  <div class="striped" *ngIf="record.metadata.colorContent">
-    <admin-description-zone>
-      <ng-container label>{{ 'Colors' | translate }}</ng-container>
-      <ng-container content>
-        <ng-container *ngFor="let color of record.metadata.colorContent; last as isLast">
-          {{ color | translate }}<ng-container *ngIf="!isLast">, </ng-container>
+  @if (record.metadata.colorContent) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Colors' | translate }}</ng-container>
+        <ng-container content>
+          @for (color of record.metadata.colorContent; track color; let isLast = $last) {
+            {{ color | translate }}
+            @if (!isLast) {, }
+          }
         </ng-container>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- SCALE -->
-  <div class="striped" *ngIf="record.metadata.scale">
-    <admin-description-zone>
-      <ng-container label>{{ 'Scale' | translate }}</ng-container>
-      <ng-container content>
-        <ul class="list-unstyled mb-0">
-          <li *ngFor="let scale of record.metadata.scale">{{ scale.label }}</li>
-        </ul>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (record.metadata.scale) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Scale' | translate }}</ng-container>
+        <ng-container content>
+          <ul class="list-unstyled mb-0">
+            @for (scale of record.metadata.scale; track scale) {
+              <li>{{ scale.label }}</li>
+            }
+          </ul>
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- CARTOGRAPHIC ATTRIBUTES -->
-  <div class="striped" *ngIf="cartographicAttributes.length > 0">
-    <admin-description-zone>
-      <ng-container label>{{ 'Cartographic data' | translate }}</ng-container>
-      <ng-container content>
-        <ul class="list-unstyled mb-0">
-          <li *ngFor="let cartographic of cartographicAttributes">
-            <ng-container *ngIf="cartographic.projection">{{ cartographic.projection }}</ng-container>
-            <ng-container *ngIf="cartographic.projection && cartographic.coordinates && cartographic.coordinates.label">;</ng-container>
-            <ng-container *ngIf="cartographic.coordinates && cartographic.coordinates.label">
-              {{ cartographic.coordinates.label }}
-            </ng-container>
-          </li>
-        </ul>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (cartographicAttributes.length > 0) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Cartographic data' | translate }}</ng-container>
+        <ng-container content>
+          <ul class="list-unstyled mb-0">
+            @for (cartographic of cartographicAttributes; track cartographic) {
+              <li>
+                @if (cartographic.projection) {
+                  {{ cartographic.projection }}
+                }
+                @if (cartographic.projection && cartographic.coordinates && cartographic.coordinates.label) {
+                  ;
+                }
+                @if (cartographic.coordinates && cartographic.coordinates.label) {
+                  {{ cartographic.coordinates.label }}
+                }
+              </li>
+            }
+          </ul>
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- CLASSIFICATION -->
-  <div class="striped" *ngIf="record.metadata.classification">
-    <admin-description-zone>
-      <ng-container label>{{ 'Classification' | translate }}</ng-container>
-      <ng-container content>
-        <ul class="list-unstyled mb-0">
-          <li *ngFor="let classification of record.metadata.classification">
-            {{ classification.classificationPortion }}
-            <ng-container *ngIf="classification.subdivision">
-            - {{ classification.subdivision.join(' - ') }}
-            </ng-container>
-            ({{ classification.type | translate }})
-          </li>
-        </ul>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (record.metadata.classification) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Classification' | translate }}</ng-container>
+        <ng-container content>
+          <ul class="list-unstyled mb-0">
+            @for (classification of record.metadata.classification; track classification) {
+              <li>
+                {{ classification.classificationPortion }}
+                @if (classification.subdivision) {
+                  - {{ classification.subdivision.join(' - ') }}
+                }
+                ({{ classification.type | translate }})
+              </li>
+            }
+          </ul>
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- -------------- MANIFESTATION -------------- -->
 
   <!-- USAGE AND ACCESS POLICY -->
-  <div class="striped" *ngIf="record.metadata.usageAndAccessPolicy">
-    <admin-description-zone>
-      <ng-container label>{{ 'Use and access condition' | translate }}</ng-container>
-      <ng-container content>
-        <ul class="list-unstyled mb-0">
-        <li *ngFor="let usage of record.metadata.usageAndAccessPolicy">{{ usage.label }}</li>
-      </ul>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (record.metadata.usageAndAccessPolicy) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Use and access condition' | translate }}</ng-container>
+        <ng-container content>
+          <ul class="list-unstyled mb-0">
+            @for (usage of record.metadata.usageAndAccessPolicy; track usage) {
+              <li>{{ usage.label }}</li>
+            }
+          </ul>
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- OTHER EDITION, OTHER PHYSICAL FORMAT, HAS REPRODUCTION -->
-  <div class="striped" *ngIf="record.metadata.otherEdition">
-    <admin-other-edition fieldLabel="{{ 'Other edition' | translate }}" [field]="record.metadata.otherEdition"></admin-other-edition>
-  </div>
-  <div class="striped" *ngIf="record.metadata.otherPhysicalFormat">
-    <admin-other-edition fieldLabel="{{ 'Also issued as' | translate }}" [field]="record.metadata.otherPhysicalFormat"></admin-other-edition>
-  </div>
-  <div class="striped" *ngIf="record.metadata.hasReproduction">
-    <admin-other-edition fieldLabel="{{ 'Reproduced as' | translate }}" [field]="record.metadata.hasReproduction"></admin-other-edition>
-  </div>
+  @if (record.metadata.otherEdition) {
+    <div class="striped">
+      <admin-other-edition fieldLabel="{{ 'Other edition' | translate }}" [field]="record.metadata.otherEdition"></admin-other-edition>
+    </div>
+  }
+  @if (record.metadata.otherPhysicalFormat) {
+    <div class="striped">
+      <admin-other-edition fieldLabel="{{ 'Also issued as' | translate }}" [field]="record.metadata.otherPhysicalFormat"></admin-other-edition>
+    </div>
+  }
+  @if (record.metadata.hasReproduction) {
+    <div class="striped">
+      <admin-other-edition fieldLabel="{{ 'Reproduced as' | translate }}" [field]="record.metadata.hasReproduction"></admin-other-edition>
+    </div>
+  }
 
   <!-- TITLE (KEY TITLE, ABBREVIATED TITLE, VARIANT TITLE)-->
-  <ng-container *ngIf="titleVariants !== {}">
+  @if (titleVariants !== {}) {
     <div class="striped" *ngFor="let title of titleVariants | keyvalue">
       <admin-description-zone>
         <ng-container label>{{ title.key | translate | ucfirst }}</ng-container>
         <ng-container content>
           <ul class="list-unstyled mb-0">
-            <li *ngFor="let value of title.value">{{ value }}</li>
+            @for (value of title.value; track value) {
+              <li>{{ value }}</li>
+            }
           </ul>
         </ng-container>
       </admin-description-zone>
     </div>
-  </ng-container>
+  }
 
   <!-- RESPONSIBILITY STATEMENT -->
-  <div class="striped" *ngIf="record.metadata.ui_responsibilities">
-    <admin-description-zone>
-      <ng-container label>{{ 'Statement of responsibility' | translate }}</ng-container>
-      <ng-container content>
-        <ul class="list-unstyled mb-0">
-          <li *ngFor="let responsibility of record.metadata.ui_responsibilities">{{ responsibility }}</li>
-        </ul>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (record.metadata.ui_responsibilities) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Statement of responsibility' | translate }}</ng-container>
+        <ng-container content>
+          <ul class="list-unstyled mb-0">
+            @for (responsibility of record.metadata.ui_responsibilities; track responsibility) {
+              <li>{{ responsibility }}</li>
+            }
+          </ul>
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- SERIES STATEMENT -->
-  <div class="striped" *ngIf="record.metadata.seriesStatement">
-    <admin-description-zone>
-      <ng-container label>{{ 'Series statement' | translate }}</ng-container>
-      <ng-container content>
-        <ul class="list-unstyled mb-0">
-          <li *ngFor="let serie of editionStatement">{{ serie.value }}</li>
-        </ul>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (record.metadata.seriesStatement) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Series statement' | translate }}</ng-container>
+        <ng-container content>
+          <ul class="list-unstyled mb-0">
+            @for (serie of editionStatement; track serie) {
+              <li>{{ serie.value }}</li>
+            }
+          </ul>
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- PROVISION ACTIVITY STATEMENT (TYPES PRODUCTION, DIFFUSION/DISTRIBUTION, FABRICATION) -->
-  <ng-container *ngVar="record.metadata.provisionActivity | documentProvisionActivity | keyvalue | callbackArrayFilter: filterNotPublicationProvisionActivity as provisionActivity">
-    <div class="striped" *ngFor="let provision of provisionActivity">
-    <admin-description-zone>
-      <ng-container label>{{ provision.key | translate }}</ng-container>
-      <ng-container content>
-        <ul class="list-unstyled mb-0">
-        <li *ngFor="let value of provision.value; last as isLast">
-          {{ value }}<ng-container *ngIf="!isLast">, </ng-container>
-        </li>
-        </ul>
-      </ng-container>
-    </admin-description-zone>
-  </div>
-  </ng-container>
+  @if (record.metadata.provisionActivity | documentProvisionActivity | keyvalue | callbackArrayFilter: filterNotPublicationProvisionActivity;as provisionActivity) {
+    @for (provision of provisionActivity; track provision) {
+      <div class="striped">
+        <admin-description-zone>
+          <ng-container label>{{ provision.key | translate }}</ng-container>
+          <ng-container content>
+            <ul class="list-unstyled mb-0">
+              @for (value of provision.value; track value; let isLast = $last) {
+                <li>{{ value }}@if (!isLast) {, }</li>
+              }
+            </ul>
+          </ng-container>
+        </admin-description-zone>
+      </div>
+    }
+  }
 
   <!-- PROVISION ACTIVITY ORIGINAL DATE (TYPES PRODUCTION, DIFFUSION/DISTRIBUTION, FABRICATION) -->
-  <div class="striped" *ngIf="provisionActivityOriginalDate.length > 0">
-    <admin-description-zone>
-      <ng-container label>{{ 'Date of the original' | translate }}</ng-container>
-      <ng-container content>
-        <ng-container *ngFor="let provision of provisionActivityOriginalDate; last as isLast">
-          {{ provision.original_date }}<ng-container *ngIf="!isLast">, </ng-container>
+  @if (provisionActivityOriginalDate.length > 0) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Date of the original' | translate }}</ng-container>
+        <ng-container content>
+          @for (provision of provisionActivityOriginalDate; track provision; let isLast = $last) {
+            {{ provision.original_date }}@if (!isLast) {, }
+          }
         </ng-container>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- COPYRIGHT DATE -->
-  <div class="striped" *ngIf="record.metadata.copyrightDate">
-    <admin-description-zone>
-      <ng-container label>{{ 'Copyright date' | translate }}</ng-container>
-      <ng-container content>
-        {{ record.metadata.copyrightDate.join(", ") }}
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (record.metadata.copyrightDate) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Copyright date' | translate }}</ng-container>
+        <ng-container content>
+          {{ record.metadata.copyrightDate.join(", ") }}
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- SEQUENCE NUMBERING -->
-  <div class="striped" *ngIf="record.metadata.sequence_numbering">
-    <admin-description-zone>
-      <ng-container label>{{ 'Numbering' | translate }}</ng-container>
-      <ng-container content>
-        {{ record.metadata.sequence_numbering }}
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (record.metadata.sequence_numbering) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Numbering' | translate }}</ng-container>
+        <ng-container content>
+          {{ record.metadata.sequence_numbering }}
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- DIMENSIONS -->
-  <div class="striped" *ngIf="record.metadata.dimensions">
-    <admin-description-zone>
-      <ng-container label>{{ 'Dimensions' | translate }}</ng-container>
-      <ng-container content>
-        {{ record.metadata.dimensions.join(", ") }}
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (record.metadata.dimensions) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Dimensions' | translate }}</ng-container>
+        <ng-container content>
+          {{ record.metadata.dimensions.join(", ") }}
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- BOOK FORMAT -->
-  <div class="striped" *ngIf="record.metadata.bookFormat">
-    <admin-description-zone>
-      <ng-container label>{{ 'Format' | translate }}</ng-container>
-      <ng-container content>
-        {{ record.metadata.bookFormat.join(", ") }}
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (record.metadata.bookFormat) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Format' | translate }}</ng-container>
+        <ng-container content>
+          {{ record.metadata.bookFormat.join(", ") }}
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- PRODUCTION METHOD -->
-  <div class="striped" *ngIf="record.metadata.productionMethod">
-    <admin-description-zone>
-      <ng-container label>{{ 'Production method' | translate }}</ng-container>
-      <ng-container content>
-        <ng-container *ngFor="let method of record.metadata.productionMethod; last as isLast">
-          {{ method | translate }}<ng-container *ngIf="!isLast">, </ng-container>
+  @if (record.metadata.productionMethod) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Production method' | translate }}</ng-container>
+        <ng-container content>
+          @for (method of record.metadata.productionMethod; track method; let isLast = $last) {
+            {{ method | translate }}@if (!isLast) {, }
+          }
         </ng-container>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- NOTE (TYPE: CITED BY, OTHER PHYSICAL DETAILS, ACCOMPANYING MATERIAL) -->
-  <ng-container *ngIf="notesExceptGeneral">
-    <div class="striped" *ngFor="let noteType of notesExceptGeneral | keyvalue">
+  @if (notesExceptGeneral) {
+    @for (noteType of notesExceptGeneral | keyvalue; track noteType) {
+      <div class="striped">
+        <admin-description-zone>
+          <ng-container label>{{ noteType.key | translate | ucfirst }}</ng-container>
+          <ng-container content>
+            <ul class="list-unstyled mb-0">
+              @for (note of noteType.value; track note) {
+                <li>{{ note }}</li>
+              }
+            </ul>
+          </ng-container>
+        </admin-description-zone>
+      </div>
+    }
+  }
+
+  <!-- SUPPLEMENTARY CONTENT -->
+  @if (record.metadata.supplementaryContent) {
+    <div class="striped">
       <admin-description-zone>
-        <ng-container label>{{ noteType.key | translate | ucfirst }}</ng-container>
+        <ng-container label>{{ 'Supplementary content' | translate }}</ng-container>
         <ng-container content>
           <ul class="list-unstyled mb-0">
-            <li *ngFor="let note of noteType.value">{{ note }}</li>
+            @for (sup of record.metadata.supplementaryContent; track sup) {
+              <li>{{ sup }}</li>
+            }
           </ul>
         </ng-container>
       </admin-description-zone>
     </div>
-  </ng-container>
-
-  <!-- SUPPLEMENTARY CONTENT -->
-  <div class="striped" *ngIf="record.metadata.supplementaryContent">
-    <admin-description-zone>
-      <ng-container label>{{ 'Supplementary content' | translate }}</ng-container>
-      <ng-container content>
-        <ul class="list-unstyled mb-0">
-          <li *ngFor="let sup of record.metadata.supplementaryContent">{{ sup }}</li>
-        </ul>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  }
 
   <!-- ACQUISITION TERMS -->
-  <div class="striped" *ngIf="record.metadata.acquisitionTerms">
-    <admin-description-zone>
-      <ng-container label>{{ 'Terms of availability' | translate }}</ng-container>
-      <ng-container content>
-        <ul class="list-unstyled mb-0">
-          <li *ngFor="let term of record.metadata.acquisitionTerms">{{ term }}</li>
-        </ul>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (record.metadata.acquisitionTerms) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Terms of availability' | translate }}</ng-container>
+        <ng-container content>
+          <ul class="list-unstyled mb-0">
+            @for (term of record.metadata.acquisitionTerms; track term) {
+              <li>{{ term }}</li>
+            }
+          </ul>
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- IDENTIFIED BY -->
-  <div class="striped" *ngIf="identifiedBy && identifiedBy.length > 0">
-    <admin-description-zone>
-      <ng-container label>{{ 'Identifier' | translate }}</ng-container>
-      <ng-container content>
-        <ul class="list-unstyled mb-0">
-          <li *ngFor="let identifier of identifiedBy; let i = index"
-          [attr.id]="i | idAttribute:{prefix: 'doc-identifier'}">
-            <ng-container *ngIf="identifier.type === 'uri'; else stringBlock">
-              <a class="rero-ils-external-link" [href]="identifier.value | safeUrl">{{ identifier.value }}</a>
-            </ng-container>
-            <ng-template #stringBlock>
-              {{ identifier.value }}
-            </ng-template>
-            <ng-container *ngIf="identifier.details"> - {{ identifier.details }}</ng-container>
-            <small class="badge badge-secondary text-uppercase ml-1" translate>
-              {{ identifier.type }}
-            </small>
-          </li>
-        </ul>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (identifiedBy && identifiedBy.length > 0) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Identifier' | translate }}</ng-container>
+        <ng-container content>
+          <ul class="list-unstyled mb-0">
+            @for (identifier of identifiedBy; track identifier; let i = $index) {
+              <li [attr.id]="i | idAttribute:{prefix: 'doc-identifier'}">
+                @if (identifier.type === 'uri') {
+                  <a class="rero-ils-external-link" [href]="identifier.value | safeUrl">{{ identifier.value }}</a>
+                } @else {
+                  {{ identifier.value }}
+                }
+                @if (identifier.details) {
+                   - {{ identifier.details }}
+                }
+                <small class="badge badge-secondary text-uppercase ml-1" translate>
+                  {{ identifier.type }}
+                </small>
+              </li>
+            }
+          </ul>
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- -------------- TYPOLOGY -------------- -->
 
   <!-- CONTENT MEDIA CARRIER -->
-  <div class="striped" *ngIf="record.metadata.contentMediaCarrier">
-    <admin-description-zone>
-      <ng-container label>{{ 'Carrier and content type' | translate }}</ng-container>
-      <ng-container content>
-        <ng-container *ngFor="let content of record.metadata.contentMediaCarrier; last as isLastL1">
-          {{ content.carrierType | translate }}
-          <ng-container *ngIf="content.contentType">
-            (<ng-container *ngFor="let type of content.contentType; last as isLast">{{ type | translate }}<ng-container *ngIf="!isLast">, </ng-container></ng-container>)
-          </ng-container>
-          <ng-container *ngIf="!isLastL1">, </ng-container>
+  @if (record.metadata.contentMediaCarrier) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Carrier and content type' | translate }}</ng-container>
+        <ng-container content>
+          @for (content of record.metadata.contentMediaCarrier; track content; let isLastL1 = $last) {
+              {{ content.carrierType | translate }}
+              @if (content.contentType) {
+                (@for (type of content.contentType; track type; let isLast = $last) {
+                  {{ type | translate }}@if (!isLast) {, }
+                })
+              }
+              @if (!isLastL1) {, }
+          }
         </ng-container>
-      </ng-container>
-    </admin-description-zone>
-  </div>
+      </admin-description-zone>
+    </div>
+  }
 
   <!-- ISSUANCE -->
-  <div class="striped" *ngIf="record.metadata.issuance">
-    <admin-description-zone>
-      <ng-container label>{{ 'Mode of issuance' | translate }}</ng-container>
-      <ng-container content>
-        {{ record.metadata.issuance.main_type | translate }} / {{ record.metadata.issuance.subtype | translate }}
-      </ng-container>
-    </admin-description-zone>
-  </div>
+  @if (record.metadata.issuance) {
+    <div class="striped">
+      <admin-description-zone>
+        <ng-container label>{{ 'Mode of issuance' | translate }}</ng-container>
+        <ng-container content>
+          {{ record.metadata.issuance.main_type | translate }} / {{ record.metadata.issuance.subtype | translate }}
+        </ng-container>
+      </admin-description-zone>
+    </div>
+  }
 </div>
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/other-edition/other-edition.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/document-description/other-edition/other-edition.component.html
index d46ea40a3..5b39a5a25 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/other-edition/other-edition.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/document-description/other-edition/other-edition.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,34 +14,37 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div *ngIf="!header; else editionHeader">
+@if (!header) {
   <admin-description-zone>
     <ng-container label>{{ fieldLabel }}</ng-container>
     <ng-container content>
       <ul class="list-unstyled mb-0">
-        <li *ngFor="let edition of field">
-          <ng-container *ngIf="edition.label; else editionLink">{{ edition.label }}</ng-container>
-          <ng-template #editionLink>
-            <ng-container *ngIf="edition.pid | getRecord : 'documents' : 'field' : 'title' | async as documentTitle">
-              <a [routerLink]="['/records', 'documents', 'detail', edition.pid]">{{ documentTitle | mainTitleRelation }}</a>
-            </ng-container>
-          </ng-template>
-        </li>
+        @for (edition of field; track edition) {
+          <li>
+            @if (edition.label) {
+              {{ edition.label }}
+            } @else {
+              @if (edition.pid | getRecord : 'documents' : 'field' : 'title' | async; as documentTitle) {
+                <a [routerLink]="['/records', 'documents', 'detail', edition.pid]">{{ $any(documentTitle) | mainTitleRelation }}</a>
+              }
+            }
+          </li>
+        }
       </ul>
     </ng-container>
   </admin-description-zone>
-</div>
-<ng-template #editionHeader>
+} @else {
   <div class="mb-0">
     <b>{{ fieldLabel }}</b>:
-    <ng-container *ngFor="let edition of field; last as isLast">
-      <ng-container *ngIf="edition.label; else editionLink">{{ edition.label }}</ng-container>
-      <ng-template #editionLink>
-        <ng-container *ngIf="edition.pid | getRecord : 'documents' : 'field' : 'title' | async as documentTitle">
-          <a [routerLink]="['/records', 'documents', 'detail', edition.pid]">{{ documentTitle | mainTitleRelation }}</a>
-        </ng-container>
-      </ng-template>
-      <ng-container *ngIf="!isLast">; </ng-container>
-    </ng-container>
+    @for (edition of field; track edition; let isLast = $last) {
+      @if (edition.label) {
+        {{ edition.label }}
+      } @else {
+        @if (edition.pid | getRecord : 'documents' : 'field' : 'title' | async; as documentTitle) {
+          <a [routerLink]="['/records', 'documents', 'detail', edition.pid]">{{ $any(documentTitle) | mainTitleRelation }}</a>
+        }
+      }
+      @if (!isLast) {; }
+    }
   </div>
-</ng-template>
+}
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html
index ac4441a8f..4c5668ad9 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,7 +15,7 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record">
+@if (record) {
   <!-- HEADER -->
   <header class="row mt-5 mb-3">
     <div class="col-lg-2 d-sm-block text-center">
@@ -23,183 +23,209 @@
     </div>
     <div class="col-lg-10">
       <!-- ADMIN METADATA -->
-      <ng-container *ngIf="record.metadata.adminMetadata && (record.metadata.adminMetadata.encodingLevel !== 'Full level' || record.metadata.adminMetadata.note)">
+      @if (record.metadata.adminMetadata && (record.metadata.adminMetadata.encodingLevel !== 'Full level' || record.metadata.adminMetadata.note)) {
         <div class="p-2 alert alert-warning mb-2">
           {{ 'Encoding level' | translate }}: {{ record.metadata.adminMetadata.encodingLevel | translate }}.
-          <ng-container *ngIf="record.metadata.adminMetadata.note">
+          @if (record.metadata.adminMetadata.note) {
             {{ record.metadata.adminMetadata.note| join: '. ' }}.
-          </ng-container>
+          }
         </div>
-      </ng-container>
+      }
 
       <!-- TITLE -->
-      <h2 id="doc-title" *ngIf="record.metadata.title && record.metadata.title | mainTitle as title" class="pl-0 mt-1">
-        <ng-core-text-read-more
-          [text]="title"
-          [unit]="'character'"
-          [limit]="150"
-          [showMoreLabel]="'Show more' | translate"
-          [showLessLabel]="'Show less' | translate"
-        ></ng-core-text-read-more>
-      </h2>
+      @if (record.metadata.title && record.metadata.title | mainTitle; as title) {
+        <h2 id="doc-title" class="pl-0 mt-1">
+          <ng-core-text-read-more
+            [text]="title"
+            [unit]="'character'"
+            [limit]="150"
+            [showMoreLabel]="'Show more' | translate"
+            [showLessLabel]="'Show less' | translate"
+          ></ng-core-text-read-more>
+        </h2>
+      }
 
       <!-- TITLE ALTERNATIVE GRAPHICS -->
-      <ng-container *ngIf="record.metadata.ui_title_altgr">
-        <ng-container *ngFor="let altgr_title of record.metadata.ui_title_altgr; let i = index">
+      @if (record.metadata.ui_title_altgr) {
+        @for (altgr_title of record.metadata.ui_title_altgr; track altgr_title; let i = $index) {
           <h3 id="{{ 'doc-altgr-title-' + i }}">{{ altgr_title }}</h3>
-        </ng-container>
-      </ng-container>
+        }
+      }
 
       <!-- CONTRIBUTION -->
       <shared-contribution [contributions]="record.metadata?.contribution"
-                           [withRoles]="true"
-                           [activateLink]="activateLink">
+                            [withRoles]="true"
+                            [activateLink]="activateLink">
       </shared-contribution>
-
       <!-- PUBLICATION ACTIVITY: PUBLICATION -->
       <ng-container *ngVar="record.metadata.provisionActivity | documentProvisionActivity | keyvalue | callbackArrayFilter: filterPublicationProvisionActivity as provisionActivity">
-        <ng-container *ngFor="let provision of provisionActivity">
+        @for (provision of provisionActivity; track provision) {
           <ul class="list-unstyled mb-0">
-            <li *ngFor="let value of provision.value">{{ value }}</li>
+            @for (value of $any(provision).value; track value) {
+              <li>{{ value }}</li>
+            }
           </ul>
-        </ng-container>
+        }
       </ng-container>
 
       <!-- EXTENT-->
-      <div id="doc-extent" *ngIf="record.metadata.extent">
-        {{ record.metadata.extent }}
-      </div>
+      @if (record.metadata.extent) {
+        <div id="doc-extent">
+          {{ record.metadata.extent }}
+        </div>
+      }
 
       <!-- DURATION -->
-      <div id="doc-duration" *ngIf="record.metadata.duration && record.metadata.duration.length > 0">
-        {{ 'Duration' | translate }}: {{ record.metadata.duration.join(", ") }}
-      </div>
+      @if (record.metadata.duration && record.metadata.duration.length > 0) {
+        <div id="doc-duration">
+          {{ 'Duration' | translate }}: {{ record.metadata.duration.join(", ") }}
+        </div>
+      }
 
       <!-- EDITION STATEMENT -->
-      <div id="doc-edition-statement" *ngIf="record.metadata.editionStatement">
-        <ul class="list-unstyled mb-0">
-          <li *ngFor="let edition of record.metadata.editionStatement">{{ edition._text[0].value }}</li>
-        </ul>
-      </div>
+      @if (record.metadata.editionStatement) {
+        <div id="doc-edition-statement">
+          <ul class="list-unstyled mb-0">
+            @for (edition of record.metadata.editionStatement; track edition) {
+              <li>{{ edition._text[0].value }}</li>
+            }
+          </ul>
+        </div>
+      }
 
       <!-- FREQUENCY -->
-      <div id="doc-frequency" *ngIf="record.metadata.frequency">
-        <b>{{ 'Frequency' | translate }}</b>:
-        <ng-container *ngFor="let freq of record.metadata.frequency; last as isLast">
-        {{ freq.label }} <ng-container *ngIf="freq.date">({{ freq.date }})</ng-container><ng-container *ngIf="!isLast">; </ng-container>
-        </ng-container>
-      </div>
+      @if (record.metadata.frequency) {
+        <div id="doc-frequency">
+          <b>{{ 'Frequency' | translate }}</b>:
+          @for (freq of record.metadata.frequency; track freq; let isLast = $last) {
+            {{ freq.label }}
+            @if (freq.date) {
+              ({{ freq.date }}) @if (!isLast) {; }
+            }
+          }
+        </div>
+      }
 
       <!-- IS PART OF -->
       <shared-part-of [record]="record"></shared-part-of>
 
       <!-- ISSUED WITH -->
-      <admin-other-edition
-        *ngIf="record.metadata.issuedWith"
-        fieldLabel="{{ 'Issued with' | translate }}"
-        [field]="record.metadata.issuedWith"
-        [header]="true"></admin-other-edition>
+      @if (record.metadata.issuedWith) {
+        <admin-other-edition
+          fieldLabel="{{ 'Issued with' | translate }}"
+          [field]="record.metadata.issuedWith"
+          [header]="true"></admin-other-edition>
+      }
 
       <!-- PRECEDED BY -->
-      <admin-other-edition
-        *ngIf="record.metadata.precededBy"
-        fieldLabel="{{ 'Preceded by' | translate }}"
-        [field]="record.metadata.precededBy"
-        [header]="true"></admin-other-edition>
+      @if (record.metadata.precededBy) {
+        <admin-other-edition
+          fieldLabel="{{ 'Preceded by' | translate }}"
+          [field]="record.metadata.precededBy"
+          [header]="true"></admin-other-edition>
+      }
 
       <!-- SUCCEEDED BY -->
-      <admin-other-edition
-        *ngIf="record.metadata.succeededBy"
-        fieldLabel="{{ 'Succeeded by' | translate }}"
-        [field]="record.metadata.succeededBy"
-        [header]="true"></admin-other-edition>
+      @if (record.metadata.succeededBy) {
+        <admin-other-edition
+          fieldLabel="{{ 'Succeeded by' | translate }}"
+          [field]="record.metadata.succeededBy"
+          [header]="true"></admin-other-edition>
+      }
 
       <!-- SUPPLEMENT TO -->
-      <admin-other-edition
-        *ngIf="record.metadata.supplementTo"
-        fieldLabel="{{ 'Supplement to' | translate }}"
-        [field]="record.metadata.supplementTo"
-        [header]="true"></admin-other-edition>
+      @if (record.metadata.supplementTo) {
+        <admin-other-edition
+          fieldLabel="{{ 'Supplement to' | translate }}"
+          [field]="record.metadata.supplementTo"
+          [header]="true"></admin-other-edition>
+      }
 
       <!-- REPRODUCTION OF -->
-      <admin-other-edition
-        *ngIf="record.metadata.reproductionOf"
-        fieldLabel="{{ 'Reproduction of' | translate }}"
-        [field]="record.metadata.reproductionOf"
-        [header]="true"></admin-other-edition>
+      @if (record.metadata.reproductionOf) {
+        <admin-other-edition
+          fieldLabel="{{ 'Reproduction of' | translate }}"
+          [field]="record.metadata.reproductionOf"
+          [header]="true"></admin-other-edition>
+      }
 
       <!-- ELECTRONIC LOCATOR: RELATED RESOURCE -->
-      <div class="row" *ngIf="relatedResources.length > 0">
-        <div class="col">
-          <ul class="list-unstyled mt-1 mb-0">
-            <li *ngFor="let eloc of relatedResources">
-              <admin-related-resource [electronicLocator]="eloc"></admin-related-resource>
-            </li>
-          </ul>
+      @if (relatedResources.length > 0) {
+        <div class="row">
+          <div class="col">
+            <ul class="list-unstyled mt-1 mb-0">
+              @for (eloc of relatedResources; track eloc) {
+                <li>
+                  <admin-related-resource [electronicLocator]="eloc"></admin-related-resource>
+                </li>
+              }
+            </ul>
+          </div>
         </div>
-      </div>
+      }
 
       <!-- SUMMARY -->
-      <ng-container *ngIf="record.metadata.summary">
-        <ng-container *ngFor="let sum of record.metadata.summary">
-          <div *ngFor="let data of sum.label">
-            <!--
-            <span *ngIf="data.language" class="badge badge-secondary mr-1">
-              {{ ('lang_script_' + data.language) | translate }}
-            </span>
-            -->
-            <ng-core-text-read-more
-              [text]="data.value"
-              [unit]="'character'"
-              [limit]="400"
-              [showMoreLabel]="'Show more' | translate"
-              [showLessLabel]="'Show less' | translate"
-            ></ng-core-text-read-more>
-          </div>
-        </ng-container>
-      </ng-container>
+      @if (record.metadata.summary) {
+        @for (sum of record.metadata.summary; track sum) {
+          @for (data of sum.label; track data) {
+            <div>
+              <ng-core-text-read-more
+                [text]="data.value"
+                [unit]="'character'"
+                [limit]="400"
+                [showMoreLabel]="'Show more' | translate"
+                [showLessLabel]="'Show less' | translate"
+              ></ng-core-text-read-more>
+            </div>
+          }
+        }
+      }
 
       <!-- SUBJECTS -->
-      <div class="row" *ngIf="record.metadata.subjects as subjects">
-        <div class="col">
-          <span *ngFor="let subject of subjects"
-            class="badge badge-secondary mr-1"
-            title="{{ subject.entity.type | translate }}">
-            <i class="fa fa-tag mr-1"></i>
-            <shared-entity-link
-              resourceName="subjects"
-              [entity]="subject.entity"
-              className="text-light"
-            ></shared-entity-link>
-          </span>
+      @if (record.metadata.subjects; as subjects) {
+        <div class="row">
+          <div class="col">
+            @for (subject of subjects; track subject) {
+              <span
+                class="badge badge-secondary mr-1"
+                title="{{ subject.entity.type | translate }}">
+                <i class="fa fa-tag mr-1"></i>
+                <shared-entity-link resourceName="subjects" [entity]="subject.entity" className="text-light"></shared-entity-link>
+              </span>
+            }
+          </div>
         </div>
-      </div>
+      }
 
       <!-- GENRE, FORM -->
-      <div class="mt-1" *ngIf="record.metadata.genreForm">
-        <span class="mr-1" *ngFor="let genre of record.metadata.genreForm">
-          <i class="fa fa-tag mr-1"></i>
-          <shared-entity-link
-            resourceName="genreForm"
-            [entity]="genre.entity"
-          ></shared-entity-link>
-        </span>
-      </div>
+      @if (record.metadata.genreForm) {
+        <div class="mt-1">
+          @for (genre of record.metadata.genreForm; track genre) {
+            <span class="mr-1">
+              <i class="fa fa-tag mr-1"></i>
+              <shared-entity-link resourceName="genreForm" [entity]="genre.entity"></shared-entity-link>
+            </span>
+          }
+        </div>
+      }
 
       <!-- MASKED -->
-      <admin-record-masked *ngIf="record.metadata._masked" [record]="record" [withLabel]="true"></admin-record-masked>
+      @if (record.metadata._masked) {
+        <admin-record-masked [record]="record" [withLabel]="true"></admin-record-masked>
+      }
 
       <!-- LINKED DOCUMENTS -->
-      <a
-        class="btn btn-sm btn-outline-primary mt-3"
-        [routerLink]="['/records', 'documents']"
-        [queryParams]="{q: 'partOf.document.pid:' + pid, simple: 0}"
-        *ngIf="linkedDocumentsCount"
-      >
-        <i class="fa fa-list" aria-hidden="true"></i>
-        {{ linkedDocumentsCount }}
-        {{ linkedDocumentsCount | i18nPlural: {'=1': 'article/volume', 'other': 'articles/volumes'} | translate }}
-      </a>
+      @if (linkedDocumentsCount) {
+        <a
+          class="btn btn-sm btn-outline-primary mt-3"
+          [routerLink]="['/records', 'documents']"
+          [queryParams]="{q: 'partOf.document.pid:' + pid, simple: 0}"
+        >
+          <i class="fa fa-list" aria-hidden="true"></i>
+          {{ linkedDocumentsCount }}
+          {{ linkedDocumentsCount | i18nPlural: {'=1': 'article/volume', 'other': 'articles/volumes'} | translate }}
+        </a>
+      }
     </div>
   </header>
 
@@ -208,15 +234,17 @@ <h3 id="{{ 'doc-altgr-title-' + i }}">{{ altgr_title }}</h3>
   <div class="mt-2">
     <tabset>
       <!-- GET TAB -->
-      <tab id="documents-get-tab" tabOrder="1" [active]="true" *ngIf="record.metadata.pid">
-        <ng-template tabHeading>
-          <i class="fa fa-list-ul mr-1"></i>{{ 'Get' | translate }}
-        </ng-template>
-        <div class="mt-2">
-          <!-- HOLDINGS -->
-          <admin-holding-organisation [document]="record"></admin-holding-organisation>
-        </div>
-      </tab>
+      @if (record.metadata.pid) {
+        <tab id="documents-get-tab" tabOrder="1" [active]="true">
+          <ng-template tabHeading>
+            <i class="fa fa-list-ul mr-1"></i>{{ 'Get' | translate }}
+          </ng-template>
+          <div class="mt-2">
+            <!-- HOLDINGS -->
+            <admin-holding-organisation [document]="record"></admin-holding-organisation>
+          </div>
+        </tab>
+      }
       <!-- END OF GET TAB -->
       <!-- DESCRIPTION TAB -->
       <tab id="documents-description-tab" tabOrder="2" [active]="!record.metadata.pid">
@@ -229,71 +257,73 @@ <h3 id="{{ 'doc-altgr-title-' + i }}">{{ altgr_title }}</h3>
       </tab>
       <!-- END OF DESCRIPTION TAB -->
       <!-- ENTITIES RELATED -->
-      <tab *ngIf="!record.metadata.harvested && record.metadata.pid" id="documents-entities-tab" tabOrder="3">
-        <ng-template tabHeading>
-          <i class="fa fa-cubes mr-1"></i> {{ 'Related Entities' | translate }}
-        </ng-template>
-        <div class="mt-2">
-          <admin-entities-related [record]="record"></admin-entities-related>
-        </div>
-      </tab>
+      @if (!record.metadata.harvested && record.metadata.pid) {
+        <tab id="documents-entities-tab" tabOrder="3">
+          <ng-template tabHeading>
+            <i class="fa fa-cubes mr-1"></i> {{ 'Related Entities' | translate }}
+          </ng-template>
+          <div class="mt-2">
+            <admin-entities-related [record]="record"></admin-entities-related>
+          </div>
+        </tab>
+      }
       <!-- END ENTITIES RELATED -->
       <!-- LOCAL FIELDS TAB -->
-      <tab
-        *ngIf="!record.metadata.harvested && record.metadata.pid && showHideLocalFieldsTab"
-        id="documents-local-field-tab"
-        tabOrder="4"
-      >
-        <ng-template tabHeading>
-          <i class="fa fa-list-ul mr-1"></i> {{ 'Local fields' | translate }}
-        </ng-template>
-        <div class="mt-2">
-          <admin-local-field [resourceType]="'documents'" [resourcePid]="record.metadata.pid"></admin-local-field>
-        </div>
-      </tab>
+      @if (!record.metadata.harvested && record.metadata.pid && showHideLocalFieldsTab) {
+        <tab id="documents-local-field-tab" tabOrder="4">
+          <ng-template tabHeading>
+            <i class="fa fa-list-ul mr-1"></i> {{ 'Local fields' | translate }}
+          </ng-template>
+          <div class="mt-2">
+            <admin-local-field [resourceType]="'documents'" [resourcePid]="record.metadata.pid"></admin-local-field>
+          </div>
+        </tab>
+      }
       <!-- END OF LOCAL FIELDS TAB -->
       <!-- MARC TAB -->
-      <tab id="documents-marc-tab" tabOrder="5" *ngIf="marc$ | async as marc">
-        <ng-template tabHeading>
-          <i class="fa fa-list-ul mr-1"></i><span translate>Marc</span>
-        </ng-template>
-        <div class="mt-2">
-          <!-- MARC -->
-          <table class="table table-striped table-sm">
-            <tbody>
-            <tr *ngFor="let field of marc">
-              <ng-container *ngIf="field | marc as f">
-                <th scope="row">{{ f.field }}</th>
-                <td>{{ f.ind1 }}</td>
-                <td>{{ f.ind2 }}</td>
-                <td>{{ f.value }}</td>
-              </ng-container>
-            </tr>
-            </tbody>
-          </table>
-        </div>
-      </tab>
+      @if (marc$ | async; as marc) {
+        <tab id="documents-marc-tab" tabOrder="5">
+          <ng-template tabHeading>
+            <i class="fa fa-list-ul mr-1"></i><span translate>Marc</span>
+          </ng-template>
+          <div class="mt-2">
+            <!-- MARC -->
+            <table class="table table-striped table-sm">
+              <tbody>
+                @for(field of marc; track field) {
+                  <tr>
+                    @if (field | marc; as f) {
+                      <th scope="row">{{ f.field }}</th>
+                      <td>{{ f.ind1 }}</td>
+                      <td>{{ f.ind2 }}</td>
+                      <td>{{ f.value }}</td>
+                    }
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </tab>
+      }
       <!-- END OF MARC TAB -->
     </tabset>
   </div>
   <!-- END OF TABS -->
-  <admin-operation-logs-dialog
-    *ngIf="isEnabledOperationLog && record.metadata.pid"
-    resourceType="documents"
-    [resourcePid]="record.metadata.pid"
-  ></admin-operation-logs-dialog>
-</ng-container>
+  @if (isEnabledOperationLog && record.metadata.pid) {
+    <admin-operation-logs-dialog resourceType="documents" [resourcePid]="record.metadata.pid"></admin-operation-logs-dialog>
+  }
+}
 
 <ng-template #entityLink let-entity="entity" let-class="class">
   <i class="fa fa-tag mr-1"></i>
-  <a
-    *ngIf="activateLink && entity.entity.resource_type; else subjectNoLink"
-    [class]="class"
-    [routerLink]="['/records', entity.entity.resource_type + '_entities', 'detail', entity.entity.pid]"
-  >
-    {{ entity.entity | entityLabel }}
-  </a>
-  <ng-template #subjectNoLink>
+  @if (activateLink && entity.entity.resource_type) {
+    <a
+      [class]="class"
+      [routerLink]="['/records', entity.entity.resource_type + '_entities', 'detail', entity.entity.pid]"
+    >
+      {{ entity.entity | entityLabel }}
+    </a>
+  } @else {
     {{ entity.entity | entityLabel }}
-  </ng-template>
+  }
 </ng-template>
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.ts
index b0a3503a1..94cd70a36 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -64,13 +64,13 @@ export class DocumentDetailViewComponent implements DetailRecord, OnInit, OnDest
    * @return boolean
    */
   get isEnabledOperationLog(): boolean {
-    return this._operationLogsService.isLogVisible('documents');
+    return this.operationLogsService.isLogVisible('documents');
   }
 
   /** External identifier for imported record. */
   get pid(): string | null {
-    if (this._activatedRouter.snapshot && this._activatedRouter.snapshot.params && this._activatedRouter.snapshot.params.pid !== null) {
-      return this._activatedRouter.snapshot.params.pid;
+    if (this.activatedRouter.snapshot && this.activatedRouter.snapshot.params && this.activatedRouter.snapshot.params.pid !== null) {
+      return this.activatedRouter.snapshot.params.pid;
     }
     return null;
   }
@@ -80,7 +80,7 @@ export class DocumentDetailViewComponent implements DetailRecord, OnInit, OnDest
    * @return string - language
    */
   get currentLanguage(): string {
-    return this._translateService.currentLang;
+    return this.translateService.currentLang;
   }
 
   /** return all available permissions for current user */
@@ -91,44 +91,44 @@ export class DocumentDetailViewComponent implements DetailRecord, OnInit, OnDest
    * @return boolean - if False, hide the local fields tab
    */
   get showHideLocalFieldsTab(): boolean {
-    return this._permissionsService.canAccess([PERMISSIONS.LOFI_SEARCH, PERMISSIONS.LOFI_CREATE]);
+    return this.permissionsService.canAccess([PERMISSIONS.LOFI_SEARCH, PERMISSIONS.LOFI_CREATE]);
   }
 
   /**
    * Constructor
-   * @param _translateService - TranslateService to translate some strings.
-   * @param _activatedRouter - ActivatedRoute to get url parameters.
-   * @param _recordService - RecordService to the MARC version for the record.
-   * @param _operationLogsService - OperationLogsService
-   * @param _documentApiService - DocumentApiService
-   * @param _permissionsService - PermissionsService
+   * @param translateService - TranslateService to translate some strings.
+   * @param activatedRouter - ActivatedRoute to get url parameters.
+   * @param recordService - RecordService to the MARC version for the record.
+   * @param operationLogsService - OperationLogsService
+   * @param documentApiService - DocumentApiService
+   * @param permissionsService - PermissionsService
    */
   constructor(
-    private _translateService: TranslateService,
-    private _activatedRouter: ActivatedRoute,
-    private _recordService: RecordService,
-    private _operationLogsService: OperationLogsService,
-    private _documentApiService: DocumentApiService,
-    private _permissionsService: PermissionsService
+    private translateService: TranslateService,
+    private activatedRouter: ActivatedRoute,
+    private recordService: RecordService,
+    private operationLogsService: OperationLogsService,
+    private documentApiService: DocumentApiService,
+    private permissionsService: PermissionsService
   ) { }
 
   /** On init hook */
   ngOnInit(): void {
-    this.activateLink = !this._activatedRouter.snapshot.params.type.startsWith('import_');
+    this.activateLink = !this.activatedRouter.snapshot.params.type.startsWith('import_');
     this._recordObs = this.record$.pipe(
       switchMap((record: any) => {
         this.record = record;
         this.relatedResources = this.processRelatedResources(record);
         if (record != null && record.metadata != null && this.record.metadata.pid == null) {
-          this.marc$ = this._recordService.getRecord(
-            this._activatedRouter.snapshot.params.type, this.pid, 0, {
+          this.marc$ = this.recordService.getRecord(
+            this.activatedRouter.snapshot.params.type, this.pid, 0, {
             Accept: 'application/marc+json, application/json'
           });
         } else {
           this.marc$ = of(null);
         }
         return this.pid
-          ? this._documentApiService.getLinkedDocumentsCount(this.pid)
+          ? this.documentApiService.getLinkedDocumentsCount(this.pid)
           : of(0);
       })
     ).subscribe((count: number) => {
@@ -162,15 +162,15 @@ export class DocumentDetailViewComponent implements DetailRecord, OnInit, OnDest
       numbering.push(num.year);
     }
     if (num.volume) {
-      const volume = [this._translateService.instant('vol'), num.volume];
+      const volume = [this.translateService.instant('vol'), num.volume];
       numbering.push(volume.join('. '));
     }
     if (num.issue) {
-      const issue = [this._translateService.instant('nr'), num.issue];
+      const issue = [this.translateService.instant('nr'), num.issue];
       numbering.push(issue.join('. '));
     }
     if (num.pages) {
-      const pages = [this._translateService.instant('p'), num.pages];
+      const pages = [this.translateService.instant('p'), num.pages];
       numbering.push(pages.join('. '));
     }
     return numbering.join(', ');
@@ -184,11 +184,11 @@ export class DocumentDetailViewComponent implements DetailRecord, OnInit, OnDest
   getPartOfLabel(hostDocument: any) {
     switch (hostDocument.metadata.issuance.subtype) {
       case 'periodical':
-        return this._translateService.instant('Journal');
+        return this.translateService.instant('Journal');
       case 'monographicSeries':
-        return this._translateService.instant('Series');
+        return this.translateService.instant('Series');
       default:
-        return this._translateService.instant('Published in');
+        return this.translateService.instant('Published in');
     }
   }
 
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail/document-detail.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail/document-detail.component.html
index 71f9ba20d..7a2ac49ff 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail/document-detail.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail/document-detail.component.html
@@ -1,6 +1,6 @@
 <!--
-  RERO angular core
-  Copyright (C) 2020-2023 RERO
+  RERO ILS UI
+  Copyright (C) 2020-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,8 +15,8 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <div class="main-content">
-  <ng-core-detail-button
-    *ngIf="record"
+  @if (record) {
+    <ng-core-detail-button
     [record]="record"
     [type]="type"
     [adminMode]="adminMode"
@@ -27,25 +27,31 @@
     (deleteMessageEvent)="showDeleteMessage($event)"
   >
     <ng-container beforeButton>
-      <ng-container *ngIf="record">
-        <button
-          *ngIf="!record.metadata.pid && source"
-          class="btn btn-sm btn-outline-primary ml-1"
-          [permissions]="permissions.DOC_CREATE"
-          (click)="importDocument($event, record, { source: source, pid: pid })"
-          translate>Import</button>
-        <button
-          *ngIf="record.metadata.pid"
-          class="btn btn-sm btn-outline-primary ml-1"
-          [permissions]="permissions.DOC_CREATE"
-          [routerLink]="['/records', 'documents', 'duplicate']"
-          [queryParams]="{type: 'documents', pid: record.metadata.pid}"
-          translate>Duplicate</button>
-      </ng-container>
+      @if (record) {
+        @if (!record.metadata.pid && source) {
+          <button
+            class="btn btn-sm btn-outline-primary ml-1"
+            [permissions]="permissions.DOC_CREATE"
+            (click)="importDocument($event, record, { source: source, pid: pid })"
+            translate>Import</button>
+        }
+        @if (record.metadata.pid) {
+          <button
+            class="btn btn-sm btn-outline-primary ml-1"
+            [permissions]="permissions.DOC_CREATE"
+            [routerLink]="['/records', 'documents', 'duplicate']"
+            [queryParams]="{type: 'documents', pid: record.metadata.pid}"
+            translate>Duplicate</button>
+        }
+      }
     </ng-container>
   </ng-core-detail-button>
-  <ng-core-error [error]="error" *ngIf="error"></ng-core-error>
+  }
+  @if (error) {
+    <ng-core-error [error]="error"></ng-core-error>
+  }
   <ng-template ngCoreRecordDetail></ng-template>
-  <ng-core-record-files [type]="type" [pid]="record.id"
-    *ngIf="record && filesEnabled && updateStatus && updateStatus.can"></ng-core-record-files>
+  @if (record && filesEnabled && updateStatus && updateStatus.can) {
+    <ng-core-record-files [type]="type" [pid]="record.id"></ng-core-record-files>
+  }
 </div>
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/entities-related/entities-related.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/entities-related/entities-related.component.html
index c663cab32..6b4bdd3d6 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/entities-related/entities-related.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/entities-related/entities-related.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,17 +15,23 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <div class="container">
-  <div [class]="i%2 === 0 ? 'bg-light':''" class="row" *ngFor="let field of entities | keyvalue; let i = index">
-    <div class="font-weight-bold col-3 py-1">
-      {{ field.key | translate |ucfirst }}
+  @for (field of entities | keyvalue; track field; let i = $index) {
+    <div [class]="i%2 === 0 ? 'bg-light':''" class="row">
+      <div class="font-weight-bold col-3 py-1">
+        {{ field.key | translate |ucfirst }}
+      </div>
+      <div class="col-9 py-1">
+        <ul class="list-unstyled mb-0">
+          @for (entity of field.value; track entity) {
+            <li>
+              <i title="{{ entity.type | translate }}" class="fa {{ entity.icon }} mr-2"></i>
+              <a [routerLink]="['/records', entity.resource_type + '_entities', 'detail', entity.pid]">
+                {{ entity.authorized_access_point }}
+              </a>
+            </li>
+          }
+        </ul>
+      </div>
     </div>
-    <div class="col-9 py-1">
-      <ul class="list-unstyled mb-0">
-        <li *ngFor="let entity of field.value">
-          <i title="{{ entity.type | translate }}" class="fa {{ entity.icon }} mr-2"></i>
-          <a [routerLink]="['/records', entity.resource_type + '_entities', 'detail', entity.pid]">{{ entity.authorized_access_point }}</a>
-        </li>
-      </ul>
-    </div>
-  </div>
+  }
 </div>
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding-detail/holding-detail.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/holding-detail/holding-detail.component.html
index f0988b14a..a941403c9 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding-detail/holding-detail.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding-detail/holding-detail.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020 RERO
+  Copyright (C) 2020-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,73 +14,76 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
+@if (holding) {
+  <div class="row col">
+    @if (context === 'document') {
+      <admin-holding-shared-view [holding]="holding"  class="row col-12"></admin-holding-shared-view>
+    }
 
-<div *ngIf="holding" class="row col">
+    <!-- MISSING ISSUES -->
+    @if (holding.metadata.missing_issues) {
+      <div class="col-3 font-weight-bold" translate>Missing issues</div>
+      <div class="col-9">{{ holding.metadata.missing_issues }}</div>
+    }
 
-  <admin-holding-shared-view *ngIf="context === 'document'" [holding]="holding"  class="row col-12"></admin-holding-shared-view>
+    <!-- NOTES -->
+    @for (note of holding.metadata.notes | notesFilter: noteAuthorizedTypes; track note) {
+      <div class="col-3 font-weight-bold" translate>{{ note.type }}</div>
+      <div class="col-9" [innerHtml]="note.content | nl2br"></div>
+    }
 
-  <!-- MISSING ISSUES -->
-  <ng-container *ngIf="holding.metadata.missing_issues">
-    <div class="col-3 font-weight-bold" translate>Missing issues</div>
-    <div class="col-9">{{ holding.metadata.missing_issues }}</div>
-  </ng-container>
+    @if (context === 'holdings') {
+      <!-- VENDOR -->
+      @if (holding.metadata.vendor) {
+        <div class="col-3 font-weight-bold" translate>Vendor</div>
+        <div class="col-9">
+          {{ holding.metadata.vendor.pid | getRecord: 'vendors' : 'field' : 'name' | async }}
+        </div>
+      }
 
-  <!-- NOTES -->
-  <ng-container *ngFor="let note of holding.metadata.notes | notesFilter: noteAuthorizedTypes">
-    <div class="col-3 font-weight-bold" translate>{{ note.type }}</div>
-    <div class="col-9" [innerHtml]="note.content | nl2br">
-    </div>
-  </ng-container>
+      <!-- ISSUE BINDING -->
+      @if (holding.metadata.issue_binding) {
+        <div class="col-3 font-weight-bold" translate>Issue binding</div>
+        <div class="col-9">{{ holding.metadata.issue_binding }}</div>
+      }
 
-  <!-- VENDOR -->
-  <ng-container *ngIf="context === 'holdings' && holding.metadata.vendor">
-    <div class="col-3 font-weight-bold" translate>Vendor</div>
-    <div class="col-9">
-      {{ holding.metadata.vendor.pid | getRecord: 'vendors' : 'field' : 'name' | async }}
-    </div>
-  </ng-container>
+      <!-- ACQUISITION STATUS -->
+      @if (holding.metadata.acquisition_status) {
+        <div class="col-3 font-weight-bold" translate>Acquisition status</div>
+        <div class="col-9">{{ holding.metadata.acquisition_status | translate }}</div>
+      }
 
-  <!-- ISSUE BINDING -->
-  <ng-container *ngIf="context === 'holdings' && holding.metadata.issue_binding">
-    <div class="col-3 font-weight-bold" translate>Issue binding</div>
-    <div class="col-9">{{ holding.metadata.issue_binding }}</div>
-  </ng-container>
+      <!-- ACQUISITION METHOD -->
+      @if (holding.metadata.acquisition_method) {
+        <div class="col-3 font-weight-bold" translate>Acquisition method</div>
+        <div class="col-9">{{ holding.metadata.acquisition_method | translate }}</div>
+      }
 
-  <!-- ACQUISITION STATUS -->
-  <ng-container *ngIf="context === 'holdings' && holding.metadata.acquisition_status">
-    <div class="col-3 font-weight-bold" translate>Acquisition status</div>
-    <div class="col-9">{{ holding.metadata.acquisition_status | translate }}</div>
-  </ng-container>
+      <!-- ACQUISITION EXPECTED END DATE -->
+      @if (holding.metadata.acquisition_expected_end_date) {
+        <div class="col-3 font-weight-bold" translate>Acquisition expected end date</div>
+        <div class="col-9">
+          {{ holding.metadata.acquisition_expected_end_date | dateTranslate :'shortDate' }}
+        </div>
+      }
 
-  <!-- ACQUISITION METHOD -->
-  <ng-container *ngIf="context === 'holdings' && holding.metadata.acquisition_method">
-    <div class="col-3 font-weight-bold" translate>Acquisition method</div>
-    <div class="col-9">{{ holding.metadata.acquisition_method | translate }}</div>
-  </ng-container>
+      <!-- GENERAL RETENTION POLICY -->
+      @if (holding.metadata.general_retention_policy) {
+        <div class="col-3 font-weight-bold" translate>General retention policy</div>
+        <div class="col-9">{{ holding.metadata.general_retention_policy | translate }}</div>
+      }
 
-  <!-- ACQUISITION EXPECTED END DATE -->
-  <ng-container *ngIf="context === 'holdings' && holding.metadata.acquisition_expected_end_date">
-    <div class="col-3 font-weight-bold" translate>Acquisition expected end date</div>
-    <div class="col-9">
-      {{ holding.metadata.acquisition_expected_end_date | dateTranslate :'shortDate' }}
-    </div>
-  </ng-container>
+      <!-- COMPLETENESS -->
+      @if (holding.metadata.completeness) {
+        <div class="col-3 font-weight-bold" translate>Completeness</div>
+        <div class="col-9">{{ holding.metadata.completeness | translate }}</div>
+      }
 
-  <!-- GENERAL RETENTION POLICY -->
-  <ng-container *ngIf="context === 'holdings' && holding.metadata.general_retention_policy">
-    <div class="col-3 font-weight-bold" translate>General retention policy</div>
-    <div class="col-9">{{ holding.metadata.general_retention_policy | translate }}</div>
-  </ng-container>
-
-  <!-- COMPLETNESS -->
-  <ng-container *ngIf="context === 'holdings' && holding.metadata.completeness">
-    <div class="col-3 font-weight-bold" translate>Completness</div>
-    <div class="col-9">{{ holding.metadata.completeness | translate }}</div>
-  </ng-container>
-
-  <!-- COMPOSITE COPY REPORT -->
-  <ng-container *ngIf="context === 'holdings' && holding.metadata.composite_copy_report">
-    <div class="col-3 font-weight-bold" translate>Composite copy report</div>
-    <div class="col-9">{{ holding.metadata.composite_copy_report | translate }}</div>
-  </ng-container>
-</div>
+      <!-- COMPOSITE COPY REPORT -->
+      @if (holding.metadata.composite_copy_report) {
+        <div class="col-3 font-weight-bold" translate>Composite copy report</div>
+        <div class="col-9">{{ holding.metadata.composite_copy_report | translate }}</div>
+      }
+    }
+  </div>
+}
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding-organisation/holding-organisation.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/holding-organisation/holding-organisation.component.html
index 2ec0ca4c0..e308a6077 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding-organisation/holding-organisation.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding-organisation/holding-organisation.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,18 +14,16 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="ready; else loaded">
+@defer (when ready) {
   <!-- current organisation -->
   <admin-holdings [holdingType]="holdingType" [document]="document"></admin-holdings>
 
   <!-- other organisations -->
-  <ng-container *ngIf="otherOrganisationCount > 0">
+  @if (otherOrganisationCount > 0) {
     <h5 class="other" translate>Other organisations</h5>
     <admin-holdings [holdingType]="holdingType" [document]="document" [isCurrentOrganisation]="false"></admin-holdings>
-  </ng-container>
-</ng-container>
-
-<ng-template #loaded>
+  }
+} @loading {
   <span class="spinner-grow spinner-grow-sm" role="status"></span>
   <span class="ml-1" translate>loading in progress...</span>
-</ng-template>
+}
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding-organisation/holding-organisation.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/holding-organisation/holding-organisation.component.ts
index 815b6b081..83fb0ce1e 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding-organisation/holding-organisation.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding-organisation/holding-organisation.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -29,7 +29,7 @@ export class HoldingOrganisationComponent implements OnInit {
   /** Document record */
   @Input() document: any;
 
-  /** All elements is loade */
+  /** All elements is loaded */
   ready = false;
   /** Holdings count for current organisation */
   currentOrganisationCount = 0;
@@ -50,25 +50,25 @@ export class HoldingOrganisationComponent implements OnInit {
 
   /**
    * Constructor
-   * @param _holdingsApiService - HoldingsApiService
-   * @param _userService - UserService
+   * @param holdingsApiService - HoldingsApiService
+   * @param userService - UserService
    */
   constructor(
-    private _holdingsApiService: HoldingsApiService,
-    private _userService: UserService
+    private holdingsApiService: HoldingsApiService,
+    private userService: UserService
   ) {}
 
   /** On init hook */
   ngOnInit(): void {
     const documentPid = this.document.metadata.pid;
-    const organisationPid = this._userService.user.currentOrganisation;
-    const currentOrganisation = this._holdingsApiService.getHoldingsCount(
+    const organisationPid = this.userService.user.currentOrganisation;
+    const currentOrganisation$ = this.holdingsApiService.getHoldingsCount(
       documentPid, organisationPid);
-    const otherOrganisation = this._holdingsApiService.getHoldingsCount(
+    const otherOrganisation$ = this.holdingsApiService.getHoldingsCount(
       documentPid, organisationPid, false
     );
 
-    forkJoin([currentOrganisation, otherOrganisation])
+    forkJoin([currentOrganisation$, otherOrganisation$])
       .subscribe(([currentCount, otherCount]) => {
         this.currentOrganisationCount = currentCount;
         this.otherOrganisationCount = otherCount;
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding-shared-view/holding-shared-view.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/holding-shared-view/holding-shared-view.component.html
index 845034612..cc4fe0f83 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding-shared-view/holding-shared-view.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding-shared-view/holding-shared-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,52 +15,53 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <!-- CALL NUMBER -->
-<ng-container *ngIf="holding">
-  <ng-container *ngIf="holding.metadata.call_number || holding.metadata.second_call_number">
+@if (holding) {
+  @if (holding.metadata.call_number || holding.metadata.second_call_number) {
     <div class="col-sm-3 font-weight-bold" translate>
       Call number
     </div>
     <div id="holding-call-number-{{ holding.metadata.pid }}" class="col-sm-9 pl-4">
-      <ng-container *ngIf="holding.metadata.call_number">
-      {{ holding.metadata.call_number }}
-      </ng-container>
-      <ng-container *ngIf="holding.metadata.call_number && holding.metadata.second_call_number">
+      @if (holding.metadata.call_number) {
+        {{ holding.metadata.call_number }}
+      }
+      @if (holding.metadata.call_number && holding.metadata.second_call_number) {
         |
-      </ng-container>
-      <ng-container *ngIf="holding.metadata.second_call_number">
+      }
+      @if (holding.metadata.second_call_number) {
         {{ holding.metadata.second_call_number }}
-        </ng-container>
+      }
     </div>
-  </ng-container>
+  }
 
   <!-- AVAILABLE COLLECTION -->
-  <ng-container *ngIf="holding.metadata.enumerationAndChronology">
+  @if (holding.metadata.enumerationAndChronology) {
     <div class="col-sm-3 font-weight-bold" translate>
       Available collection
     </div>
-    <div id="holding-enum-chrono-{{ holding.metadata.pid }}"
-         class="col-sm-9 pl-4"
-         [innerHTML]="holding.metadata.enumerationAndChronology | nl2br">
+    <div
+      id="holding-enum-chrono-{{ holding.metadata.pid }}"
+      class="col-sm-9 pl-4"
+      [innerHTML]="holding.metadata.enumerationAndChronology | nl2br">
     </div>
-  </ng-container>
+  }
 
   <!-- SUPPLEMENTARY CONTENT -->
-  <ng-container *ngIf="holding.metadata.supplementaryContent">
-    <div class="col-sm-3 font-weight-bold" translate>
-      Supplementary content
-    </div>
-    <div  id="holding-sup-content-{{ holding.metadata.pid }}" class="col-sm-9 pl-4">
-      {{ holding.metadata.supplementaryContent }}
-    </div>
-  </ng-container>
+  @if (holding.metadata.supplementaryContent) {
+      <div class="col-sm-3 font-weight-bold" translate>
+        Supplementary content
+      </div>
+      <div id="holding-sup-content-{{ holding.metadata.pid }}" class="col-sm-9 pl-4">
+        {{ holding.metadata.supplementaryContent }}
+      </div>
+  }
 
   <!-- INDEXES -->
-  <ng-container *ngIf="holding.metadata.index">
+  @if (holding.metadata.index) {
     <div class="col-sm-3 font-weight-bold" translate>
       Indexes
     </div>
-    <div  id="holding-index-{{ holding.metadata.pid }}" class="col-sm-9 pl-4">
+    <div id="holding-index-{{ holding.metadata.pid }}" class="col-sm-9 pl-4">
       {{ holding.metadata.index }}
     </div>
-  </ng-container>
-<ng-container>
+  }
+}
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.html
index 764749395..57b972c8a 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,122 +15,149 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="container item px-0 mt-1 mb-2" *ngIf="item">
-  <div class="row">
-    <!-- METADATA COLUMN -->
-    <div class="col-10">
-      <div class="row">
-        <!-- Barcode -->
-        <div class="col-4 pl-5 font-weight-bold label-title" translate>Barcode</div>
-        <div class="col-8">
-          <admin-record-masked *ngIf="item.metadata._masked" [record]="item"></admin-record-masked>
-          <!-- Remove link if not current organisation -->
-          <ng-container *ngIf="permissions; else barcodeOnly">
-            <a [routerLink]="['/records', 'items', 'detail', item.metadata.pid]" name="barcode">
+@if (item) {
+  <div class="container item px-0 mt-1 mb-2">
+    <div class="row">
+      <!-- METADATA COLUMN -->
+      <div class="col-10">
+        <div class="row">
+          <!-- Barcode -->
+          <div class="col-4 pl-5 font-weight-bold label-title" translate>Barcode</div>
+          <div class="col-8">
+            @if (item.metadata._masked) {
+              <admin-record-masked [record]="item"></admin-record-masked>
+            }
+            <!-- Remove link if not current organisation -->
+            @if (permissions) {
+              <a [routerLink]="['/records', 'items', 'detail', item.metadata.pid]" name="barcode">
+                {{ item.metadata.barcode }}
+              </a>
+            } @else {
               {{ item.metadata.barcode }}
-            </a>
-          </ng-container>
-          <ng-template #barcodeOnly>{{ item.metadata.barcode }}</ng-template>
-        </div>
-        <!-- Unit -->
-        <ng-container *ngIf="item.metadata.enumerationAndChronology">
-          <div class="col-4 pl-5 font-weight-bold label-title" translate>Unit</div>
+            }
+          </div>
+          <!-- Unit -->
+          @if (item.metadata.enumerationAndChronology) {
+            <div class="col-4 pl-5 font-weight-bold label-title" translate>Unit</div>
+            <div class="col-8">{{ item.metadata.enumerationAndChronology }}</div>
+          }
+          <!-- Call numbers -->
+          <div class="col-4 pl-5 font-weight-bold label-title" translate>Call number</div>
           <div class="col-8">
-            {{ item.metadata.enumerationAndChronology }}
+            <shared-inherited-call-number [item]="item"></shared-inherited-call-number>
           </div>
-        </ng-container>
-        <!-- Call numbers -->
-        <div class="col-4 pl-5 font-weight-bold label-title" translate>Call number</div>
-        <div class="col-8">
-          <shared-inherited-call-number [item]="item"></shared-inherited-call-number>
-        </div>
-        <!-- Status -->
-        <div class="col-4 pl-5 font-weight-bold label-title" translate>Status</div>
-        <div class="col-8">
-          <shared-availability
-            recordType="item"
-            [record]="item"
-            [apiService]="itemApiService"
-          ></shared-availability>
-        </div>
-        <!-- URL -->
-        <ng-container *ngIf="item.metadata.url">
-          <div class="col-4 pl-5 font-weight-bold label-title" translate>Online access</div>
-          <div class="col-8"><a target="_blank" [href]="item.metadata.url | safeUrl">{{ item.metadata.url }}</a></div>
-        </ng-container>
-        <!-- TEMPORARY LOCATION -->
-        <ng-container *ngIf="item.metadata.temporary_location">
-          <div class="col-4 pl-5 font-weight-bold label-title" translate>Temporary location</div>
-          <div class="col-8">{{ item.metadata.temporary_location.name }}</div>
-        </ng-container>
-        <!-- ITEM IN COLLECTION (hide if not current organisation) -->
-        <ng-container *ngIf="permissions && item.metadata.pid | itemInCollection | async as collections">
-          <div class="col-4 pl-5 font-weight-bold label-title" translate>Exhibition/course</div>
+          <!-- Status -->
+          <div class="col-4 pl-5 font-weight-bold label-title" translate>Status</div>
           <div class="col-8">
-            <ng-container *ngFor="let collection of collections; let last=last">
-              <a [routerLink]="['/records', 'collections', 'detail', collection.metadata.pid]">{{ collection.metadata.title }}</a>
-              {{ last ? '' : '; ' }}
-            </ng-container>
+            <shared-availability
+              recordType="item"
+              [record]="item"
+              [apiService]="itemApiService"
+            ></shared-availability>
           </div>
-        </ng-container>
+          <!-- URL -->
+          @if (item.metadata.url) {
+            <div class="col-4 pl-5 font-weight-bold label-title" translate>Online access</div>
+            <div class="col-8"><a target="_blank" [href]="item.metadata.url | safeUrl">{{ item.metadata.url }}</a></div>
+          }
+          <!-- TEMPORARY LOCATION -->
+          @if (item.metadata.temporary_location) {
+            <div class="col-4 pl-5 font-weight-bold label-title" translate>Temporary location</div>
+            <div class="col-8">{{ item.metadata.temporary_location.name }}</div>
+          }
+          <!-- ITEM IN COLLECTION (hide if not current organisation) -->
+          @if (permissions && item.metadata.pid | itemInCollection | async; as collections) {
+            <div class="col-4 pl-5 font-weight-bold label-title" translate>Exhibition/course</div>
+            <div class="col-8">
+              @for (collection of collections; track collection; let last=$last) {
+                <a [routerLink]="['/records', 'collections', 'detail', $any(collection).metadata.pid]">
+                  {{ $any(collection).metadata.title }}
+                </a>{{ last ? '' : '; ' }}
+              }
+            </div>
+          }
+        </div>
+        <!-- (hide if not current organisation) -->
+        @if (permissions) {
+          @for (note of item.metadata.notes; track note) {
+            <admin-holding-item-note [note]="note"></admin-holding-item-note>
+          }
+          <admin-holding-item-temporary-item-type [record]="item"></admin-holding-item-temporary-item-type>
+        }
       </div>
-      <!-- (hide if not current organisation) -->
-      <ng-container *ngIf="permissions">
-        <admin-holding-item-note [note]="note" *ngFor="let note of item.metadata.notes"></admin-holding-item-note>
-        <admin-holding-item-temporary-item-type [record]="item"></admin-holding-item-temporary-item-type>
-      </ng-container>
-    </div>
-    <!-- ACTIONS BUTTONS -->
-    <div class="col-2 text-right" name="buttons">
-      <ng-container *ngIf="permissions; else noAction">
-        <button *ngIf="permissions?.canRequest?.can; else notRequest"
-                type="button" class="btn btn-sm btn-outline-primary "
-                (click)="addRequest(item.metadata.pid, 'item')"
+      <!-- ACTIONS BUTTONS -->
+      <div class="col-2 text-right" name="buttons">
+        @if (permissions) {
+          @if (permissions?.canRequest?.can) {
+            <button
+              type="button"
+              class="btn btn-sm btn-outline-primary "
+              (click)="addRequest(item.metadata.pid, 'item')"
+              title="{{ 'Item request' | translate }}"
+              name="request"
+            >
+              <i class="fa fa-shopping-basket" aria-hidden="true"></i>
+            </button>
+          } @else {
+              <button
+                type="button"
+                class="btn btn-sm btn-outline-primary disabled"
                 title="{{ 'Item request' | translate }}"
-                name="request">
-          <i class="fa fa-shopping-basket" aria-hidden="true"></i>
-        </button>
-        <ng-template #notRequest>
-          <button type="button" class="btn btn-sm btn-outline-primary disabled"
-                  title="{{ 'Item request' | translate }}"
-                  [popover]="tolTemplate" triggers="mouseenter:mouseleave"
-                  name="request">
-            <i class="fa fa-shopping-basket" aria-hidden="true"></i>
-          </button>
-          <ng-template #tolTemplate><div [innerHtml]="cannotRequestInfoMessage | nl2br"></div></ng-template>
-        </ng-template>
-        <button *ngIf="permissions?.switchLocation?.can"
-                type="button" class="btn btn-sm btn-outline-primary ml-1"
-                title="{{ 'Switch location' | translate }}"
-                [routerLink]="['/records', 'items', 'switch_location', item.metadata.pid]"
-                name="switch location">
-          <i class="fa fa-random"></i>
-        </button>
-        <button *ngIf="permissions?.update?.can"
-                type="button" class="btn btn-sm btn-outline-primary ml-1"
-                title="{{ 'Edit' | translate }}"
-                [routerLink]="['/records', 'items', 'edit', item.metadata.pid]"
-                name="edit">
-          <i class="fa fa-pencil"></i>
-        </button>
-        <button *ngIf="permissions?.delete?.can; else deleteInfo"
-                type="button" class="btn btn-outline-danger btn-sm ml-1"
-                title="{{ 'Delete' | translate }}"
-                (click)="delete(item.metadata.pid)"
-                name="delete">
-          <i class="fa fa-trash"></i>
-        </button>
-        <ng-template #deleteInfo>
-          <button type="button" class="btn btn-sm btn-outline-danger ml-1 disabled"
-                  title="{{ 'Delete' | translate }}"
-                  [popover]="tolTemplate" triggers="mouseenter:mouseleave"
-                  name="delete">
-            <i class="fa fa-trash"></i>
-          </button>
-          <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
-        </ng-template>
-      </ng-container>
-      <ng-template #noAction>&nbsp;</ng-template>
+                [popover]="tolTemplate"
+                triggers="mouseenter:mouseleave"
+                name="request"
+              >
+                <i class="fa fa-shopping-basket" aria-hidden="true"></i>
+              </button>
+              <ng-template #tolTemplate><div [innerHtml]="cannotRequestInfoMessage | nl2br"></div></ng-template>
+          }
+          @if (permissions?.switchLocation?.can) {
+            <button
+              type="button"
+              class="btn btn-sm btn-outline-primary ml-1"
+              title="{{ 'Switch location' | translate }}"
+              [routerLink]="['/records', 'items', 'switch_location', item.metadata.pid]"
+              name="switch location"
+            >
+              <i class="fa fa-random"></i>
+            </button>
+          }
+          @if (permissions?.update?.can) {
+            <button
+              type="button" class="btn btn-sm btn-outline-primary ml-1"
+              title="{{ 'Edit' | translate }}"
+              [routerLink]="['/records', 'items', 'edit', item.metadata.pid]"
+              name="edit"
+            >
+              <i class="fa fa-pencil"></i>
+            </button>
+          }
+          @if (permissions?.delete?.can) {
+            <button
+              type="button" class="btn btn-outline-danger btn-sm ml-1"
+              title="{{ 'Delete' | translate }}"
+              (click)="delete(item.metadata.pid)"
+              name="delete"
+            >
+              <i class="fa fa-trash"></i>
+            </button>
+          } @else {
+            <button
+              type="button"
+              class="btn btn-sm btn-outline-danger ml-1 disabled"
+              title="{{ 'Delete' | translate }}"
+              [popover]="tolTemplate"
+              triggers="mouseenter:mouseleave"
+              name="delete"
+            >
+              <i class="fa fa-trash"></i>
+            </button>
+            <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
+          }
+        } @else {
+          &nbsp;
+        }
+      </div>
     </div>
   </div>
-</div>
+}
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.ts
index ae43bb134..8fa2aa1e9 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -49,7 +49,7 @@ export class DefaultHoldingItemComponent implements OnInit {
   // GETTER & SETTER ==========================================================
   /** Current interface language */
   get language() {
-    return this._translateService.currentLang;
+    return this.translateService.currentLang;
   }
 
   /**
@@ -64,32 +64,32 @@ export class DefaultHoldingItemComponent implements OnInit {
 
   /** Message containing the reasons why the item cannot be deleted. */
   get deleteInfoMessage(): string {
-    return this._recordPermissionService.generateDeleteMessage(this.permissions.delete.reasons);
+    return this.recordPermissionService.generateDeleteMessage(this.permissions.delete.reasons);
   }
 
   /** Message containing the reasons wht the item cannot be requested. */
   get cannotRequestInfoMessage(): string {
-    return this._recordPermissionService.generateTooltipMessage(this.permissions.canRequest.reasons, 'request');
+    return this.recordPermissionService.generateTooltipMessage(this.permissions.canRequest.reasons, 'request');
   }
 
   // CONSTRUCTOR & HOOKS ==============================================================
   /**
    * Constructor
-   * @param _recordUiService - RecordUiService
-   * @param _userService - UserService
-   * @param _recordPermissionService - RecordPermissionService
-   * @param _modalService - BsModalService
-   * @param _itemService - ItemService
-   * @param _translateService - TranslateService
+   * @param recordUiService - RecordUiService
+   * @param userService - UserService
+   * @param recordPermissionService - RecordPermissionService
+   * @param modalService - BsModalService
+   * @param itemService - ItemService
+   * @param translateService - TranslateService
    * @param itemApiService - ItemApiService
    */
   constructor(
-    protected _recordUiService: RecordUiService,
-    protected _recordPermissionService: RecordPermissionService,
-    protected _userService: UserService,
-    protected _modalService: BsModalService,
-    protected _itemService: ItemsService,
-    protected _translateService: TranslateService,
+    protected recordUiService: RecordUiService,
+    protected recordPermissionService: RecordPermissionService,
+    protected userService: UserService,
+    protected modalService: BsModalService,
+    protected itemService: ItemsService,
+    protected translateService: TranslateService,
     public itemApiService: ItemApiService
   ) { }
 
@@ -100,7 +100,6 @@ export class DefaultHoldingItemComponent implements OnInit {
     }
   }
 
-
   // COMPONENT FUNCTIONS ======================================================
 
   /**
@@ -109,11 +108,11 @@ export class DefaultHoldingItemComponent implements OnInit {
    * @param recordType - the record type (should be `item`)
    */
   addRequest(recordPid: string, recordType: string): void {
-    const modalRef = this._modalService.show(ItemRequestComponent, {
+    const modalRef = this.modalService.show(ItemRequestComponent, {
       initialState: { recordPid, recordType }
     });
     modalRef.content.onSubmit.pipe(first()).subscribe(_ => {
-      this._itemService.getByPidFromEs(recordPid).subscribe(result => {
+      this.itemService.getByPidFromEs(recordPid).subscribe(result => {
         this.item = result;
         this._getPermissions();
       });
@@ -131,16 +130,16 @@ export class DefaultHoldingItemComponent implements OnInit {
   // PRIVATE COMPONENT FUNCTIONS ==============================================
   /** Get permissions */
   private _getPermissions(): void {
-    const permissionObs = this._recordPermissionService.getPermission('items', this.item.metadata.pid);
-    const canRequestObs = this._itemService.canRequest(this.item.metadata.pid);
-    forkJoin([permissionObs, canRequestObs]).subscribe(
+    const permissionObs$ = this.recordPermissionService.getPermission('items', this.item.metadata.pid);
+    const canRequestObs$ = this.itemService.canRequest(this.item.metadata.pid);
+    forkJoin([permissionObs$, canRequestObs$]).subscribe(
       ([permissions, canRequest]) => {
         // DEV NOTES :: Why using switch location.
         //   The item permissions returned by server could be limited by the `membership` method. This method check if the item owning
         //   library is the same as current UI used library. So the switch library button should be displayed if the user may edit the item
         //   but are not using the same library as item owning library.
         const switchLocation = {can: permissions.update.can };
-        this.permissions = this._recordPermissionService.membership(this._userService.user, this.item.metadata.library.pid, permissions);
+        this.permissions = this.recordPermissionService.membership(this.userService.user, this.item.metadata.library.pid, permissions);
         this.permissions.switchLocation = switchLocation;
         this.permissions.canRequest = canRequest;
       });
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding-item-note/holding-item-note.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding-item-note/holding-item-note.component.ts
index 8da31fc87..5e689c213 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding-item-note/holding-item-note.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding-item-note/holding-item-note.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -20,10 +20,12 @@ import { ItemNote } from '@app/admin/classes/items';
 @Component({
   selector: 'admin-holding-item-note',
   template: `
-    <div class="row" *ngIf="note">
-      <div class="col-4 font-weight-bold label-title pl-5">{{ note.type.toString() | translate}}</div>
-      <div class="col-8" [innerHTML]="note.content"></div>
-    </div>
+    @if (note) {
+      <div class="row">
+        <div class="col-4 font-weight-bold label-title pl-5">{{ note.type.toString() | translate }}</div>
+        <div class="col-8" [innerHTML]="note.content"></div>
+      </div>
+    }
   `
 })
 export class HoldingItemNoteComponent {
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding-item-temporary-item-type/holding-item-temporary-item-type.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding-item-temporary-item-type/holding-item-temporary-item-type.component.ts
index 2634c49a7..51d07f1ce 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding-item-temporary-item-type/holding-item-temporary-item-type.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding-item-temporary-item-type/holding-item-temporary-item-type.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -21,7 +21,7 @@ import moment from 'moment';
 @Component({
   selector: 'admin-holding-item-temporary-item-type',
   template: `
-    <ng-container *ngIf="hasTemporaryItemType()">
+    @if (hasTemporaryItemType()) {
       <div class="row">
         <div class="col-4 pl-5">
           <i class="fa fa-long-arrow-right pr-1"></i>
@@ -30,12 +30,14 @@ import moment from 'moment';
         </div>
         <div class="col-8">
           {{ record.metadata.temporary_item_type.pid | getRecord:'item_types': 'field':'name' | async }}
-          <span *ngIf="record.metadata.temporary_item_type.end_date as endDate" class="ml-1 small text-secondary">
-            (<i class="fa fa-long-arrow-right" aria-hidden="true"></i> {{ endDate | dateTranslate :'shortDate' }})
-          </span>
+          @if (record.metadata.temporary_item_type.end_date; as endDate) {
+            <span class="ml-1 small text-secondary">
+              (<i class="fa fa-long-arrow-right" aria-hidden="true"></i> {{ endDate | dateTranslate :'shortDate' }})
+            </span>
+          }
         </div>
       </div>
-    </ng-container>
+    }
   `
 })
 export class HoldingItemTemporaryItemTypeComponent {
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.html
index dc57a2684..310d5e9fa 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -22,127 +22,152 @@
               (click)="isItemsCollapsed = !isItemsCollapsed"
               [attr.aria-expanded]="!isItemsCollapsed" aria-controls="collapse">
       </button>
-      <admin-record-masked *ngIf="holding.metadata._masked" [record]="holding"></admin-record-masked>
+      @if (holding.metadata._masked) {
+        <admin-record-masked [record]="holding"></admin-record-masked>
+      }
       <span>{{ holding.metadata.library.name }}: {{ holding.metadata.location.name }}</span>
     </div>
     <div class="col-2 mt-1">
       {{ holding.metadata.circulation_category.circulation_information | getTranslatedLabel : language }}
     </div>
-    <div *ngIf="holdingType === 'serial'" class="col text-right">
-    <ng-container *ngIf="permissions; else noAction">
-      <!-- HOLDING VIEW -->
-      <button [routerLink]="['/', 'records', 'holdings', 'detail', holding.metadata.pid]"
-              class="btn btn-outline-primary btn-sm ml-1"
-              title="{{ 'Holdings detail' | translate }}">
-        <i class="fa fa-eye"></i>
-      </button>
-      <!-- REQUEST BUTTON -->
-      <button *ngIf="permissions && permissions.canRequest && permissions.canRequest.can; else notRequest"
-            type="button" class="btn btn-outline-primary btn-sm ml-1" (click)="addRequest(holding.metadata.pid, 'holding')"
-            title="{{ 'Holdings request' | translate }}"
-            name="request">
-        <i class="fa fa-shopping-basket" aria-hidden="true"></i>
-      </button>
-      <ng-template #notRequest>
-        <button type="button" class="btn btn-outline-primary btn-sm ml-1 disabled"
-          title="{{ 'Holdings request' | translate }}"
-          [popover]="tolTemplate" triggers="mouseenter:mouseleave"
-          name="request">
-        <i class="fa fa-shopping-basket" aria-hidden="true"></i>
-        </button>
-        <ng-template #tolTemplate><div [innerHtml]="cannotRequestInfoMessage | nl2br"></div></ng-template>
-      </ng-template>
-      <!-- EDIT BUTTON -->
-      <button *ngIf="permissions && permissions.update && permissions.update.can"
+
+    @if (holdingType === 'serial') {
+      <div class="col text-right">
+        @if (permissions) {
+          <!-- HOLDING VIEW -->
+          <button [routerLink]="['/', 'records', 'holdings', 'detail', holding.metadata.pid]"
+                  class="btn btn-outline-primary btn-sm ml-1"
+                  title="{{ 'Holdings detail' | translate }}">
+            <i class="fa fa-eye"></i>
+          </button>
+          <!-- REQUEST BUTTON -->
+          @if (permissions && permissions.canRequest && permissions.canRequest.can) {
+            <button
+              type="button" class="btn btn-outline-primary btn-sm ml-1" (click)="addRequest(holding.metadata.pid, 'holding')"
+              title="{{ 'Holdings request' | translate }}"
+              name="request"
+            >
+              <i class="fa fa-shopping-basket" aria-hidden="true"></i>
+            </button>
+          } @else {
+              <button type="button" class="btn btn-outline-primary btn-sm ml-1 disabled"
+                title="{{ 'Holdings request' | translate }}"
+                [popover]="tolTemplate" triggers="mouseenter:mouseleave"
+                name="request">
+              <i class="fa fa-shopping-basket" aria-hidden="true"></i>
+              </button>
+              <ng-template #tolTemplate><div [innerHtml]="cannotRequestInfoMessage | nl2br"></div></ng-template>
+          }
+          <!-- EDIT BUTTON -->
+          @if (permissions && permissions.update && permissions.update.can) {
+            <button
               title="{{ 'Edit holdings' | translate }}"
               [routerLink]="['/', 'records', 'holdings', 'edit', holding.metadata.pid]"
-              class="btn btn-outline-primary btn-sm ml-1">
-        <i class="fa fa-pencil"></i>
-      </button>
-      <!-- DELETE BUTTON -->
-      <button *ngIf="permissions && permissions.delete && permissions.delete.can; else deleteInfo" type="button"
-      title="{{ 'Delete holdings' | translate }}"
-        class="btn btn-outline-danger btn-sm ml-1" (click)="delete()">
-        <i class="fa fa-trash"></i>
-      </button>
-    </ng-container>
-    <ng-template #noAction></ng-template>
-    </div>
-    <admin-holding-detail *ngIf="holdingType === 'serial'" context="document" [holding]="holding" class="col-sm-12"></admin-holding-detail>
-  </div>
-  <div class="card-body" *ngIf="!isItemsCollapsed">
-    <ng-container [ngSwitch]="holdingType">
-
-      <!-- ELECTRONIC HOLDING ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-      <div class="row" *ngSwitchCase="'electronic'">
-          <div class="col" *ngFor="let elocation of holding.metadata.electronic_location">
-            <a class="rero-ils-external-link" [href]="elocation.uri | safeUrl">{{ elocation.source }}</a>
-          </div>
+              class="btn btn-outline-primary btn-sm ml-1"
+            >
+              <i class="fa fa-pencil"></i>
+            </button>
+          }
+          <!-- DELETE BUTTON -->
+          @if (permissions && permissions.delete && permissions.delete.can) {
+            <button
+              type="button"
+              title="{{ 'Delete holdings' | translate }}"
+              class="btn btn-outline-danger btn-sm ml-1" (click)="delete()"
+            >
+              <i class="fa fa-trash"></i>
+            </button>
+          } @else {
+            <button
+              type="button"
+              class="btn btn-sm btn-outline-danger ml-1 disabled"
+              [popover]="tolTemplate"
+              triggers="mouseenter:mouseleave"
+            >
+              <i class="fa fa-trash"></i>
+            </button>
+            <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
+          }
+        }
       </div>
-
-      <!-- SERIAL HOLDING ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-      <ng-container *ngSwitchCase="'serial'">
-        <ng-container *ngIf="items else no_items">
-          <div class="row font-weight-bold">
-            <div class="col-sm-3" translate>Barcode</div>
-            <div class="col-sm-2" translate>Status</div>
-            <div class="col-sm-3" translate>Unit</div>
-            <div class="col-sm-2" translate>Call number</div>
-          </div>
-          <admin-serial-holding-item
-              *ngFor="let item of items | slice:0: displayItemsCounter"
-              [holding]="holding"
-              [item]="item"
-              [isCurrentOrganisation]="isCurrentOrganisation"
-              (deleteItem)="deleteItem($event)"
-              [attr.id]="item.metadata.barcode | idAttribute:{prefix: 'item'}">
-          ></admin-serial-holding-item>
-          <div class="row pl-3" *ngIf="displayItemsCounter < totalItemsCounter">
-            <a [routerLink]="[]" (click)="showMore(5)" [attr.id]="holding.metadata.pid | idAttribute:{prefix: 'holding', suffix: 'show-more-button'}">
-              <i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
-              {{ 'Show more' | translate }} ...
-            </a>
-            <span class="pl-2 pt-1 small text-secondary">({{ showMoreItemsCounter('issue') }})</span>
-          </div>
-        </ng-container>
-        <ng-template #no_items>
+      <admin-holding-detail context="document" [holding]="holding" class="col-sm-12"></admin-holding-detail>
+    }
+  </div>
+  @if (!isItemsCollapsed) {
+    <div class="card-body">
+      @switch (holdingType) {
+        <!-- ELECTRONIC HOLDING -->
+        @case ('electronic') {
           <div class="row">
-            <div class="offset-sm-1 col-sm-11" translate>No item received.</div>
+            @for (elocation of holding.metadata.electronic_location; track elocation) {
+              <div class="col">
+                <a class="rero-ils-external-link" [href]="elocation.uri | safeUrl">{{ elocation.source }}</a>
+              </div>
+            }
           </div>
-        </ng-template>
-      </ng-container>
-
-      <!-- DEFAULT HOLDING ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-      <ng-container *ngSwitchDefault>
-        <ng-container *ngIf="items && items.length > 0">
-          <ng-container *ngFor="let item of items | slice:0: displayItemsCounter; let last = last">
-            <admin-default-holding-item
+        }
+        <!-- SERIAL HOLDING -->
+        @case ('serial') {
+          @if (items) {
+            <div class="row font-weight-bold">
+              <div class="col-sm-3" translate>Barcode</div>
+              <div class="col-sm-2" translate>Status</div>
+              <div class="col-sm-3" translate>Unit</div>
+              <div class="col-sm-2" translate>Call number</div>
+            </div>
+            @for (item of items | slice:0: displayItemsCounter; track item) {
+              <admin-serial-holding-item
                 [holding]="holding"
                 [item]="item"
                 [isCurrentOrganisation]="isCurrentOrganisation"
                 (deleteItem)="deleteItem($event)"
-                [attr.id]="item.metadata.barcode | idAttribute:{prefix: 'item'}">
-            </admin-default-holding-item>
-            <ng-container *ngIf="!last">
-              <hr>
-            </ng-container>
-          </ng-container>
-          <div class="row pl-3" *ngIf="displayItemsCounter < totalItemsCounter">
-            <a [routerLink]="[]" (click)="showMore(5)" [attr.id]="holding.metadata.pid | idAttribute:{prefix: 'holding', suffix: 'show-more-button'}">
-              <i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
-              {{ 'Show more' | translate }} ...
-            </a>
-            <span class="pl-2 pt-1 small text-secondary">({{ showMoreItemsCounter('item') }})</span>
-          </div>
-        </ng-container>
-      </ng-container>
-    </ng-container>
-  </div>
-</div>
+                [attr.id]="$any(item).metadata.barcode | idAttribute:{prefix: 'item'}"
+              ></admin-serial-holding-item>
+            }
+            @if (displayItemsCounter < totalItemsCounter) {
+              <div class="row pl-3">
+                <a [routerLink]="[]" (click)="showMore(5)" [attr.id]="holding.metadata.pid | idAttribute:{prefix: 'holding', suffix: 'show-more-button'}">
+                  <i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
+                  {{ 'Show more' | translate }} ...
+                </a>
+                <span class="pl-2 pt-1 small text-secondary">({{ showMoreItemsCounter('issue') }})</span>
+              </div>
+            }
+          } @else {
+            <div class="row">
+              <div class="offset-sm-1 col-sm-11" translate>No item received.</div>
+            </div>
+          }
+
 
-<ng-template #deleteInfo>
-  <button type="button" class="btn btn-sm btn-outline-danger ml-1 disabled"  [popover]="tolTemplate" triggers="mouseenter:mouseleave">
-    <i class="fa fa-trash"></i>
-  </button>
-  <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
-</ng-template>
+        }
+        @default {
+          <!-- DEFAULT HOLDING ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
+          @if (items && items.length > 0) {
+            @for (item of items | slice:0: displayItemsCounter; track item; let last = $last) {
+                <admin-default-holding-item
+                    [holding]="holding"
+                    [item]="item"
+                    [isCurrentOrganisation]="isCurrentOrganisation"
+                    (deleteItem)="deleteItem($event)"
+                    [attr.id]="$any(item).metadata.barcode | idAttribute:{prefix: 'item'}">
+                </admin-default-holding-item>
+                @if (!last) {
+                  <hr>
+                }
+            }
+            @if (displayItemsCounter < totalItemsCounter) {
+              <div class="row pl-3">
+                <a [routerLink]="[]" (click)="showMore(5)" [attr.id]="holding.metadata.pid | idAttribute:{prefix: 'holding', suffix: 'show-more-button'}">
+                  <i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
+                  {{ 'Show more' | translate }} ...
+                </a>
+                <span class="pl-2 pt-1 small text-secondary">({{ showMoreItemsCounter('item') }})</span>
+              </div>
+            }
+          }
+        }
+      }
+    </div>
+  }
+</div>
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.ts
index 1b5668943..c7ec0a20f 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -16,13 +16,13 @@
  */
 
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { HoldingsService } from '@app/admin/service/holdings.service';
+import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { TranslateService } from '@ngx-translate/core';
 import { RecordService, RecordUiService } from '@rero/ng-core';
 import { Record } from '@rero/ng-core/lib/record/record';
 import { UserService } from '@rero/shared';
 import { BsModalService } from 'ngx-bootstrap/modal';
-import { HoldingsService } from '@app/admin/service/holdings.service';
-import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { forkJoin } from 'rxjs';
 import { first } from 'rxjs/operators';
 import { ItemRequestComponent } from '../item-request/item-request.component';
@@ -60,28 +60,28 @@ export class HoldingComponent implements OnInit, OnDestroy {
   // GETTER & SETTER ==========================================================
   /** Current interface language */
   get language() {
-    return this._translateService.currentLang;
+    return this.translateService.currentLang;
   }
 
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _recordUiService - RecordUiService
-   * @param _recordService - RecordService
-   * @param _recordPermissionService - RecordPermissionService
-   * @param _translateService - TranslateService
-   * @param _userService - UserService
-   * @param _holdingService: HoldingsService
-   * @param _modalService - BsModalService
+   * @param recordUiService - RecordUiService
+   * @param recordService - RecordService
+   * @param recordPermissionService - RecordPermissionService
+   * @param translateService - TranslateService
+   * @param userService - UserService
+   * @param holdingService: HoldingsService
+   * @param modalService - BsModalService
    */
   constructor(
-    private _recordUiService: RecordUiService,
-    private _recordService: RecordService,
-    private _recordPermissionService: RecordPermissionService,
-    private _translateService: TranslateService,
-    protected _userService: UserService,
-    protected _holdingService: HoldingsService,
-    protected _modalService: BsModalService,
+    private recordUiService: RecordUiService,
+    private recordService: RecordService,
+    private recordPermissionService: RecordPermissionService,
+    private translateService: TranslateService,
+    protected userService: UserService,
+    protected holdingService: HoldingsService,
+    protected modalService: BsModalService,
   ) { }
 
   /** onInit hook */
@@ -104,13 +104,13 @@ export class HoldingComponent implements OnInit, OnDestroy {
 
   /** Get permissions */
   private _getPermissions(): void {
-    const permissionObs = this._recordPermissionService.getPermission('holdings', this.holding.metadata.pid);
-    const canRequestObs = this._holdingService.canRequest(this.holding.metadata.pid);
+    const permissionObs = this.recordPermissionService.getPermission('holdings', this.holding.metadata.pid);
+    const canRequestObs = this.holdingService.canRequest(this.holding.metadata.pid);
     forkJoin([permissionObs, canRequestObs]).subscribe(
       ([permissions, canRequest]) => {
-        this.permissions = this._recordPermissionService
+        this.permissions = this.recordPermissionService
           .membership(
-            this._userService.user,
+            this.userService.user,
             this.holding.metadata.library.pid,
             permissions
           );
@@ -123,7 +123,7 @@ export class HoldingComponent implements OnInit, OnDestroy {
    * @param recordPid - string
    */
   addRequest(recordPid: string, recordType: string): void {
-    const modalRef = this._modalService.show(ItemRequestComponent, {
+    const modalRef = this.modalService.show(ItemRequestComponent, {
       initialState: { recordPid, recordType }
     });
     modalRef.content.onSubmit.pipe(first()).subscribe(_ => {
@@ -136,7 +136,7 @@ export class HoldingComponent implements OnInit, OnDestroy {
    * Return a message containing the reasons wht the holding cannot be requested
    */
   get cannotRequestInfoMessage(): string {
-    return this._recordPermissionService.generateTooltipMessage(this.permissions.canRequest.reasons, 'request');
+    return this.recordPermissionService.generateTooltipMessage(this.permissions.canRequest.reasons, 'request');
   }
 
   /** Load the items corresponding to a given holding PID. */
@@ -152,11 +152,11 @@ export class HoldingComponent implements OnInit, OnDestroy {
         sort = 'enumeration_chronology';
         break;
     }
-    this.itemsRef = this._recordService
+    this.itemsRef = this.recordService
       .getRecords('items', query, 1, RecordService.MAX_REST_RESULTS_SIZE, [], {}, {Accept: 'application/rero+json'}, sort)
       .subscribe((result: Record) => {
-        this.items = (this._recordService.totalHits(result.hits.total) > 0) ? result.hits.hits : null;
-        this.totalItemsCounter = this._recordService.totalHits(result.hits.total);
+        this.items = (this.recordService.totalHits(result.hits.total) > 0) ? result.hits.hits : null;
+        this.totalItemsCounter = this.recordService.totalHits(result.hits.total);
       });
   }
 
@@ -176,7 +176,7 @@ export class HoldingComponent implements OnInit, OnDestroy {
    * @param itemPid: string - the PID of the item to remove.
    */
   deleteItem(itemPid: string): void {
-    this._recordUiService.deleteRecord('items', itemPid).subscribe(
+    this.recordUiService.deleteRecord('items', itemPid).subscribe(
       (success: boolean) => {
         if (success) {
           // Remove the corresponding item from the item list.
@@ -214,7 +214,7 @@ export class HoldingComponent implements OnInit, OnDestroy {
    * @return the delete info message use hover the delete button
    */
   get deleteInfoMessage(): string {
-    return this._recordPermissionService.generateDeleteMessage(
+    return this.recordPermissionService.generateDeleteMessage(
       this.permissions.delete.reasons
     );
   }
@@ -245,7 +245,7 @@ export class HoldingComponent implements OnInit, OnDestroy {
     };
     const message = messages.hasOwnProperty(itemType) ? messages[itemType] : messages.default;
     const additionalItemCounter = this.totalItemsCounter - this.displayItemsCounter;
-    return this._translateService.instant(
+    return this.translateService.instant(
       (additionalItemCounter === 1) ? message.singular : message.plural,
       {counter: additionalItemCounter}
     );
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding/serial-holding-item/serial-holding-item.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/holding/serial-holding-item/serial-holding-item.component.html
index feffe4b91..87284e495 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding/serial-holding-item/serial-holding-item.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding/serial-holding-item/serial-holding-item.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,102 +15,124 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="container px-0 mt-1 mb-2" *ngIf="item && ((item.metadata.issue && item.metadata.issue.status !== itemIssueStatus.DELETED) || item.metadata.type === 'provisional')">
-  <div class="row">  <!-- First row :: item detail -->
-    <div class="col-sm-3">
-      <admin-record-masked *ngIf="item.metadata._masked" [record]="item"></admin-record-masked>
-      <ng-container *ngIf="permissions; else barcodeOnly">
-        <a [routerLink]="['/records', 'items', 'detail', item.metadata.pid]" name="barcode">
+@if (item && ((item.metadata.issue && item.metadata.issue.status !== itemIssueStatus.DELETED) || item.metadata.type === 'provisional')) {
+  <div class="container px-0 mt-1 mb-2">
+    <div class="row">  <!-- First row :: item detail -->
+      <div class="col-sm-3">
+        @if (item.metadata._masked) {
+          <admin-record-masked [record]="item"></admin-record-masked>
+        }
+        @if (permissions) {
+          <a [routerLink]="['/records', 'items', 'detail', item.metadata.pid]" name="barcode">
+            {{ item.metadata.barcode }}
+          </a>
+        } @else {
           {{ item.metadata.barcode }}
-        </a>
-      </ng-container>
-      <ng-template #barcodeOnly>{{ item.metadata.barcode }}</ng-template>
-    </div>
-    <div class="col-sm-2" name="status">
-      <shared-availability
-        recordType="item"
-        [record]="item"
-        [apiService]="itemApiService"
-      ></shared-availability>
-    </div>
-    <div class="col-sm-3" name="issue">{{ item.metadata.enumerationAndChronology }}</div>
-    <div class="col-sm-2" name="call-number">
-      <shared-inherited-call-number [item]="item"></shared-inherited-call-number>
-    </div>
-    <div class="col-sm-2 text-right" name="buttons">
-      <ng-container *ngIf="permissions; else noAction">
-        <button *ngIf="permissions.canRequest && permissions.canRequest.can; else notRequest"
-                type="button" class="btn btn-sm btn-outline-primary " (click)="addRequest(item.metadata.pid, 'item')"
-                title="{{ 'Item request' | translate }}"
-                name="request">
-          <i class="fa fa-shopping-basket" aria-hidden="true"></i>
-        </button>
-        <ng-template #notRequest>
-          <button type="button" class="btn btn-sm btn-outline-primary disabled"
-            title="{{ 'Item request' | translate }}"
-            [popover]="tolTemplate" triggers="mouseenter:mouseleave"
-            name="request">
-            <i class="fa fa-shopping-basket" aria-hidden="true"></i>
-          </button>
-          <ng-template #tolTemplate><div [innerHtml]="cannotRequestInfoMessage | nl2br"></div></ng-template>
-        </ng-template>
-        <button *ngIf="permissions.update && permissions.update.can"
-          type="button" class="btn btn-sm btn-outline-primary ml-1"
-          title="{{ 'Edit' | translate }}"
-          [routerLink]="['/records', 'items', 'edit', item.metadata.pid]"
-          name="edit">
-          <i class="fa fa-pencil"></i>
-        </button>
-        <button *ngIf="permissions.delete && permissions.delete.can; else deleteInfo"
-          type="button" class="btn btn-outline-danger btn-sm ml-1"
-          title="{{ 'Delete' | translate }}"
-          (click)="delete(item.metadata.pid)"
-          name="delete">
-          <i class="fa fa-trash"></i>
-        </button>
-        <ng-template #deleteInfo>
-          <button type="button" class="btn btn-sm btn-outline-danger ml-1 disabled"
-            title="{{ 'Delete' | translate }}"
-            [popover]="tolTemplate" triggers="mouseenter:mouseleave"
-            name="delete">
-            <i class="fa fa-trash"></i>
-          </button>
-          <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
-        </ng-template>
-      </ng-container>
-      <ng-template #noAction>&nbsp;</ng-template>
-    </div>
-  </div>
-  <ng-container *ngIf="permissions">
-    <admin-holding-item-note [note]="note" *ngFor="let note of item.metadata.notes"></admin-holding-item-note>
-    <admin-holding-item-temporary-item-type [record]="item"></admin-holding-item-temporary-item-type>
-  </ng-container>
-  <!-- TEMPORARY LOCATION -->
-  <ng-container *ngIf="permissions && item.metadata.temporary_location">
-    <div class="row pl-5">
-      <div class="col-3">
-        <i class="fa fa-long-arrow-right pr-1"></i>
-        <span class="label-title" translate>Temporary location</span>
+        }
       </div>
-      <div class="col">
-        {{ item.metadata.temporary_location.pid | getRecord: 'locations' : 'field': 'name' | async }}
+      <div class="col-sm-2" name="status">
+        <shared-availability
+          recordType="item"
+          [record]="item"
+          [apiService]="itemApiService"
+        ></shared-availability>
       </div>
-    </div>
-  </ng-container>
-  <!-- ITEM IN COLLECTION -->
-  <ng-container *ngIf="permissions && item.metadata.pid | itemInCollection | async as collections">
-    <div class="row pl-5">
-      <div class="col-3">
-        <i class="fa fa-long-arrow-right pr-1"></i>
-        <span class="label-title" translate>Exhibition/course</span>
+      <div class="col-sm-3" name="issue">{{ item.metadata.enumerationAndChronology }}</div>
+      <div class="col-sm-2" name="call-number">
+        <shared-inherited-call-number [item]="item"></shared-inherited-call-number>
       </div>
-      <div class="col">
-        <ng-container *ngFor="let collection of collections; let last=last">
-          <a [routerLink]="['/records', 'collections', 'detail', collection.metadata.pid]">
-            {{ collection.metadata.title }}
-          </a>{{ last ? '' : '; ' }}
-        </ng-container>
+      <div class="col-sm-2 text-right" name="buttons">
+        @if (permissions) {
+          @if (permissions.canRequest && permissions.canRequest.can) {
+            <button
+              type="button" class="btn btn-sm btn-outline-primary " (click)="addRequest(item.metadata.pid, 'item')"
+              title="{{ 'Item request' | translate }}"
+              name="request"
+            >
+              <i class="fa fa-shopping-basket" aria-hidden="true"></i>
+            </button>
+          } @else {
+            <button
+              type="button"
+              class="btn btn-sm btn-outline-primary disabled"
+              title="{{ 'Item request' | translate }}"
+              [popover]="tolTemplate" triggers="mouseenter:mouseleave"
+              name="request"
+            >
+              <i class="fa fa-shopping-basket" aria-hidden="true"></i>
+            </button>
+            <ng-template #tolTemplate><div [innerHtml]="cannotRequestInfoMessage | nl2br"></div></ng-template>
+          }
+          @if (permissions.update && permissions.update.can) {
+            <button
+              type="button" class="btn btn-sm btn-outline-primary ml-1"
+              title="{{ 'Edit' | translate }}"
+              [routerLink]="['/records', 'items', 'edit', item.metadata.pid]"
+              name="edit"
+            >
+              <i class="fa fa-pencil"></i>
+            </button>
+          }
+          @if (permissions.delete && permissions.delete.can) {
+            <button
+              type="button" class="btn btn-outline-danger btn-sm ml-1"
+              title="{{ 'Delete' | translate }}"
+              (click)="delete(item.metadata.pid)"
+              name="delete"
+            >
+              <i class="fa fa-trash"></i>
+            </button>
+          } @else {
+            <button
+              type="button"
+              class="btn btn-sm btn-outline-danger ml-1 disabled"
+              title="{{ 'Delete' | translate }}"
+              [popover]="tolTemplate"
+              triggers="mouseenter:mouseleave"
+              name="delete"
+            >
+              <i class="fa fa-trash"></i>
+            </button>
+            <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
+          }
+        } @else {
+          &nbsp;
+        }
       </div>
     </div>
-  </ng-container>
-</div>
+    @if (permissions) {
+      @for (note of item.metadata.notes; track note) {
+        <admin-holding-item-note [note]="note"></admin-holding-item-note>
+      }
+      <admin-holding-item-temporary-item-type [record]="item"></admin-holding-item-temporary-item-type>
+    }
+    <!-- TEMPORARY LOCATION -->
+    @if (permissions && item.metadata.temporary_location) {
+      <div class="row pl-5">
+        <div class="col-3">
+          <i class="fa fa-long-arrow-right pr-1"></i>
+          <span class="label-title" translate>Temporary location</span>
+        </div>
+        <div class="col">
+          {{ item.metadata.temporary_location.pid | getRecord: 'locations' : 'field': 'name' | async }}
+        </div>
+      </div>
+    }
+    <!-- ITEM IN COLLECTION -->
+    @if (permissions && item.metadata.pid | itemInCollection | async; as collections) {
+      <div class="row pl-5">
+        <div class="col-3">
+          <i class="fa fa-long-arrow-right pr-1"></i>
+          <span class="label-title" translate>Exhibition/course</span>
+        </div>
+        <div class="col">
+          @for (collection of collections; track collection; let last=$last) {
+            <a [routerLink]="['/records', 'collections', 'detail', $any(collection).metadata.pid]">
+              {{ $any(collection).metadata.title }}
+            </a>{{ last ? '' : '; ' }}
+          }
+        </div>
+      </div>
+    }
+  </div>
+}
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.html
index 3dea21a41..7f1392b2f 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2022 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,53 +14,56 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="row" *ngIf="canAdd">
-  <div class="col">
-    <div class="btn-group pull-right" dropdown>
-      <button [permissions]="[permissions.HOLD_CREATE, permissions.ITEM_CREATE]"
-              id="document-add-actions"
-              dropdownToggle
-              type="button"
-              class="btn btn-sm btn-outline-primary dropdown-toggle"
-              aria-controls="dropdown-animated">
-        {{ 'Add' | translate }}
-        <span class="caret"></span>
-      </button>
-      <ul id="document-add-actions-animated"
-         *dropdownMenu class="dropdown-menu dropdown-menu-right"
-         role="menu"
-         aria-labelledby="document-add-actions">
-        <li class="text-right" role="menuitem" [permissions]="permissions.ITEM_CREATE">
-          <a class="dropdown-item"
-             [routerLink]="['/', 'records', 'items', 'new']"
-             [queryParams]="{ document: document.metadata.pid }"
-             translate>an item</a>
-        </li>
-        <li class="text-right" role="menuitem" [permissions]="permissions.HOLD_CREATE">
-          <a class="dropdown-item"
-             [routerLink]="['/', 'records', 'holdings', 'new']"
-             [queryParams]="{ document: document.metadata.pid }"
-             translate>a holdings</a>
-        </li>
-      </ul>
+@if (canAdd) {
+  <div class="row">
+    <div class="col">
+      <div class="btn-group pull-right" dropdown>
+        <button [permissions]="[permissions.HOLD_CREATE, permissions.ITEM_CREATE]"
+                id="document-add-actions"
+                dropdownToggle
+                type="button"
+                class="btn btn-sm btn-outline-primary dropdown-toggle"
+                aria-controls="dropdown-animated">
+          {{ 'Add' | translate }}
+          <span class="caret"></span>
+        </button>
+        <ul id="document-add-actions-animated"
+           *dropdownMenu class="dropdown-menu dropdown-menu-right"
+           role="menu"
+           aria-labelledby="document-add-actions">
+          <li class="text-right" role="menuitem" [permissions]="permissions.ITEM_CREATE">
+            <a class="dropdown-item"
+               [routerLink]="['/', 'records', 'items', 'new']"
+               [queryParams]="{ document: document.metadata.pid }"
+               translate>an item</a>
+          </li>
+          <li class="text-right" role="menuitem" [permissions]="permissions.HOLD_CREATE">
+            <a class="dropdown-item"
+               [routerLink]="['/', 'records', 'holdings', 'new']"
+               [queryParams]="{ document: document.metadata.pid }"
+               translate>a holdings</a>
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
-</div>
+}
 
-<ng-container *ngIf="holdings">
-  <admin-document-holding
-    *ngFor="let holding of holdings"
-    [holding]="holding"
-    [isItemsCollapsed]="holdingsTotal > 1"
-    [isCurrentOrganisation]="isCurrentOrganisation"
-    (deleteHolding)="deleteHolding($event)"
-  >
-  </admin-document-holding>
-  <ng-container *ngIf="isLinkShowMore">
+@if (holdings) {
+  @for (holding of holdings; track holding) {
+    <admin-document-holding
+      [holding]="holding"
+      [isItemsCollapsed]="holdingsTotal > 1"
+      [isCurrentOrganisation]="isCurrentOrganisation"
+      (deleteHolding)="deleteHolding($event)"
+    >
+    </admin-document-holding>
+  }
+  @if (isLinkShowMore) {
     <button class="btn btn-link" (click)="showMore()">
       <i class="fa fa-arrow-circle-o-down"></i>
       {{ 'Show more' | translate }}
     </button>
-    <small *ngIf="isLinkShowMore">({{ hiddenHoldings }})</small>
-  </ng-container>
-</ng-container>
+    <small>({{ hiddenHoldings }})</small>
+  }
+}
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.ts
index d074a69d1..5383bf1e2 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -58,7 +58,7 @@ export class HoldingsComponent implements OnInit {
    */
   get isLinkShowMore(): boolean {
     return this.holdingsTotal > 0
-      && ((this.page * this._holdingsApiService.ITEMS_PER_PAGE) < this.holdingsTotal);
+      && ((this.page * this.holdingsApiService.ITEMS_PER_PAGE) < this.holdingsTotal);
   }
 
   /**
@@ -66,14 +66,12 @@ export class HoldingsComponent implements OnInit {
    * @return string
    */
   get hiddenHoldings(): string {
-    let count = this.holdingsTotal - (this.page * this._holdingsApiService.ITEMS_PER_PAGE);
-    if (count < 0) {
-      count = 0;
-    }
+    let count = this.holdingsTotal - (this.page * this.holdingsApiService.ITEMS_PER_PAGE);
+    count = Math.max(count, 0)
     const linkText = (count > 1)
       ? '{{ counter }} hidden holdings'
       : '{{ counter }} hidden holding';
-    const linkTextTranslate = this._translateService.instant(linkText);
+    const linkTextTranslate = this.translateService.instant(linkText);
     return linkTextTranslate.replace('{{ counter }}', count);
   }
 
@@ -84,24 +82,24 @@ export class HoldingsComponent implements OnInit {
 
   /** return the organisation pid */
   get organisationPid(): string {
-    return this._userService.user.currentOrganisation;
+    return this.userService.user.currentOrganisation;
   }
 
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _userService - UserService
-   * @param _holdingsApiService - HoldingsApiService
-   * @param _recordUiService - RecordUiService
-   * @param _recordPermissionService - RecordPermissionService
-   * @param _translateService - TranslateService
+   * @param userService - UserService
+   * @param holdingsApiService - HoldingsApiService
+   * @param recordUiService - RecordUiService
+   * @param recordPermissionService - RecordPermissionService
+   * @param translateService - TranslateService
    */
   constructor(
-    private _userService: UserService,
-    private _holdingsApiService: HoldingsApiService,
-    private _recordUiService: RecordUiService,
-    private _recordPermissionService: RecordPermissionService,
-    private _translateService: TranslateService
+    private userService: UserService,
+    private holdingsApiService: HoldingsApiService,
+    private recordUiService: RecordUiService,
+    private recordPermissionService: RecordPermissionService,
+    private translateService: TranslateService
   ) { }
 
   /** onInit hook */
@@ -110,8 +108,8 @@ export class HoldingsComponent implements OnInit {
     const holdingsRecords = this._holdingsQuery(this.documentPid, this.organisationPid, 1, this.isCurrentOrganisation);
     const holdingsCount = this._holdingsCountQuery(this.documentPid, this.organisationPid, this.isCurrentOrganisation);
     if (this.isCurrentOrganisation) {
-      const holdPermissionsRef = this._recordPermissionService.getPermission('holdings');
-      const itemPermissionsRef = this._recordPermissionService.getPermission('items');
+      const holdPermissionsRef = this.recordPermissionService.getPermission('holdings');
+      const itemPermissionsRef = this.recordPermissionService.getPermission('items');
       forkJoin([holdingsRecords, holdingsCount, holdPermissionsRef, itemPermissionsRef])
         .subscribe(([holdings, counter, holdPerm, itemPerm]) => {
           this.holdings = holdings;
@@ -143,13 +141,13 @@ export class HoldingsComponent implements OnInit {
    *          * 'callBackend' : boolean if backend API should be called
    */
   deleteHolding(data: { holding: any, callBackend: boolean }) {
-    const holding = data.holding;
+    const { holding } = data;
     if (data.callBackend === false) {
       this.holdings = this.holdings.filter(
         h => h.metadata.pid !== holding.metadata.pid
       );
     } else {
-      this._recordUiService.deleteRecord('holdings', holding.metadata.pid)
+      this.recordUiService.deleteRecord('holdings', holding.metadata.pid)
         .subscribe((success: any) => {
           if (success) {
             this.holdings = this.holdings.filter(
@@ -169,7 +167,7 @@ export class HoldingsComponent implements OnInit {
    */
   private _holdingsCountQuery(
     documentPid: string, organisationPid: string, isCurrentOrganisation: boolean = true): Observable<number> {
-    return this._holdingsApiService.getHoldingsCount(documentPid, organisationPid, isCurrentOrganisation);
+    return this.holdingsApiService.getHoldingsCount(documentPid, organisationPid, isCurrentOrganisation);
   }
 
 
@@ -183,7 +181,7 @@ export class HoldingsComponent implements OnInit {
    */
   private _holdingsQuery(
     documentPid: string, organisationPid: string, page: number, isCurrentOrganisation: boolean = true): Observable<any> {
-    return this._holdingsApiService.getHoldings(
-      documentPid, organisationPid, isCurrentOrganisation, page, this._holdingsApiService.ITEMS_PER_PAGE);
+    return this.holdingsApiService.getHoldings(
+      documentPid, organisationPid, isCurrentOrganisation, page, this.holdingsApiService.ITEMS_PER_PAGE);
   }
 }
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.html
index 88760600e..c6d8aa3c8 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020 RERO
+  Copyright (C) 2020-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,64 +14,75 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div *ngIf="form" class="modal show d-block" role="dialog">
-  <div class="modal-dialog modal-dialog-centered" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" translate>Item request</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true" data-dismiss="modal" (click)="closeModal()">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <div *ngIf="requestedBy$ | async as requestedBy" class="card-body">
-          <div class="row card-text">
-            <div class="border border-warning rounded alert alert-warning  pt-2 pb-2 col-auto">
-              <ng-container *ngIf="requestedBy.length < 2; else pluralBlock">
-                <i class="fa fa-exclamation-triangle pr-1" aria-hidden="true"></i>
-                {{ requestedBy.length }} {{ 'request in the queue' | translate }}
-              </ng-container>
-              <ng-template #pluralBlock>
-                <i class="fa fa-exclamation-triangle pr-1" aria-hidden="true"></i>
-                {{ requestedBy.length }} {{ 'requests in the queue' | translate }}
-              </ng-template>
+@if (form) {
+  <div class="modal show d-block" role="dialog">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" translate>Item request</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true" data-dismiss="modal" (click)="closeModal()">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          @if (requestedBy$ | async; as requestedBy) {
+            <div class="card-body">
+              <div class="row card-text">
+                <div class="border border-warning rounded alert alert-warning  pt-2 pb-2 col-auto">
+                  @if (requestedBy.length < 2) {
+                    <i class="fa fa-exclamation-triangle pr-1" aria-hidden="true"></i>
+                    {{ requestedBy.length }} {{ 'request in the queue' | translate }}
+                  } @else {
+                    <i class="fa fa-exclamation-triangle pr-1" aria-hidden="true"></i>
+                    {{ requestedBy.length }} {{ 'requests in the queue' | translate }}
+                  }
+                </div>
+                <div class="col-auto">
+                  <button type="button" class="btn btn-outline-primary btn-link pt-2 pb-2"
+                  [routerLink]="['/records', 'items', 'detail', recordPid]"
+                  (click)="closeModal()" translate>Edit queue</button>
+                </div>
+              </div>
             </div>
-            <div class="col-auto">
-              <button type="button" class="btn btn-outline-primary btn-link pt-2 pb-2"
-              [routerLink]="['/records', 'items', 'detail', recordPid]"
-              (click)="closeModal()" translate>Edit queue</button>
+          }
+          @if (patron) {
+            <div class="card mb-2">
+              <div class="card-body">
+                <h5 class="card-title">{{ patron.last_name }}, {{ patron.first_name }}</h5>
+                <p class="card-text">
+                  {{ patron.street }}<br>
+                  {{ patron.postal_code }} {{ patron.city }}<br>
+                  {{ patron.email }}
+                </p>
+                @if (patron | patronBlockedMessage; as message) {
+                  <div class="alert alert-danger" role="alert">
+                    {{ message }}
+                  </div>
+                }
+              </div>
             </div>
-          </div>
-        </div>
-        <div *ngIf="patron" class="card mb-2">
-          <div class="card-body">
-            <h5 class="card-title">{{ patron.last_name }}, {{ patron.first_name }}</h5>
-            <p class="card-text">
-              {{ patron.street }}<br>
-              {{ patron.postal_code }} {{ patron.city }}<br>
-              {{ patron.email }}
-            </p>
-            <div *ngIf="patron | patronBlockedMessage as message" class="alert alert-danger" role="alert">
-              {{ message }}
+          }
+          <form [formGroup]="form" (ngSubmit)="submit(model)">
+            <formly-form [form]="form" [fields]="formFields" [model]="model"></formly-form>
+            <div class="text-right">
+              <button
+                id="new-request-button"
+                type="submit"
+                class="btn btn-sm btn-primary"
+                [disabled]="!form.valid || requestInProgress"
+              >
+                @if (!requestInProgress) {
+                  {{ 'New request' | translate }}
+                } @else {
+                  <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
+                  {{ 'Request in progress' | translate }}
+                }
+              </button>
             </div>
-          </div>
+          </form>
         </div>
-        <form [formGroup]="form" (ngSubmit)="submit(model)">
-          <formly-form [form]="form" [fields]="formFields" [model]="model"></formly-form>
-          <div class="text-right">
-            <button id="new-request-button"
-                    type="submit"
-                    class="btn btn-sm btn-primary"
-                    [disabled]="!form.valid || requestInProgress">
-              <ng-container *ngIf="!requestInProgress; else inProcess">{{ 'New request' | translate }}</ng-container>
-              <ng-template #inProcess>
-                <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
-                {{ 'Request in progress' | translate }}
-              </ng-template>
-            </button>
-          </div>
-        </form>
       </div>
     </div>
   </div>
-</div>
+
+}
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.ts
index c3dd4f0b8..76831e7aa 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.ts
@@ -70,41 +70,41 @@ export class ItemRequestComponent implements OnInit {
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _modalService - BsModalService
-   * @param _bsModalRef - BsModalRef
-   * @param _userService - UserService
-   * @param _recordService - RecordService
-   * @param _http - HttpClient
-   * @param _toastr - ToastrService
-   * @param _translateService - TranslateService
-   * @param _loanService: LoanService
-   * @param _itemService: ItemService
-   * @param _holdingService: HoldingsService
+   * @param modalService - BsModalService
+   * @param bsModalRef - BsModalRef
+   * @param userService - UserService
+   * @param recordService - RecordService
+   * @param http - HttpClient
+   * @param toastr - ToastrService
+   * @param translateService - TranslateService
+   * @param loanService: LoanService
+   * @param itemService: ItemService
+   * @param holdingService: HoldingsService
    */
   constructor(
-    private _modalService: BsModalService,
-    private _bsModalRef: BsModalRef,
-    private _userService: UserService,
-    private _recordService: RecordService,
-    private _http: HttpClient,
-    private _toastr: ToastrService,
-    private _loanService: LoanService,
-    private _translateService: TranslateService,
-    private _itemService: ItemsService,
-    private _holdingService: HoldingsService,
+    private modalService: BsModalService,
+    private bsModalRef: BsModalRef,
+    private userService: UserService,
+    private recordService: RecordService,
+    private http: HttpClient,
+    private toastr: ToastrService,
+    private loanService: LoanService,
+    private translateService: TranslateService,
+    private itemService: ItemsService,
+    private holdingService: HoldingsService,
   ) { }
 
   /** OnInit hook */
   ngOnInit() {
-    this.currentUser = this._userService.user;
-    const initialState: any = this._modalService.config.initialState;
+    this.currentUser = this.userService.user;
+    const initialState: any = this.modalService.config.initialState;
     if (!Object.hasOwn(initialState, 'recordPid')) {
       this.closeModal();
     }
     this.recordPid = initialState.recordPid;
     this.recordType = initialState.recordType;
-    this.service = (this.recordType === 'item') ? this._itemService : this._holdingService;
-    this.requestedBy$ = (this.recordType === 'item') ?  this._loanService.requestedBy$(this.recordPid) : null;
+    this.service = (this.recordType === 'item') ? this.itemService : this.holdingService;
+    this.requestedBy$ = (this.recordType === 'item') ?  this.loanService.requestedBy$(this.recordPid) : null;
     this.initForm();
   }
 
@@ -132,21 +132,21 @@ export class ItemRequestComponent implements OnInit {
       key = 'description';
       body[key] = model.description;
     }
-    this._http.post(`/api/${this.recordType}/request`, body)
+    this.http.post(`/api/${this.recordType}/request`, body)
       .pipe(tap(() => this.requestInProgress = false))
       .subscribe(
         (_: unknown) => {
           this.onSubmit.next(undefined);
           this.closeModal();
-          this._toastr.success(
-            this._translateService.instant('Request registered.'),
-            this._translateService.instant('Item request')
+          this.toastr.success(
+            this.translateService.instant('Request registered.'),
+            this.translateService.instant('Item request')
           );
         },
         (error: unknown) => {
-          this._toastr.error(
-            this._translateService.instant('An error has occurred. Please try again.'),
-            this._translateService.instant('Item request'),
+          this.toastr.error(
+            this.translateService.instant('An error has occurred. Please try again.'),
+            this.translateService.instant('Item request'),
             { disableTimeOut: true }
           );
         }
@@ -158,7 +158,7 @@ export class ItemRequestComponent implements OnInit {
    * @param event - Event
    */
   closeModal() {
-    this._bsModalRef.hide();
+    this.bsModalRef.hide();
   }
 
   /**
@@ -173,7 +173,7 @@ export class ItemRequestComponent implements OnInit {
             type: 'input',
             focus: true,
             props: {
-              label: this._translateService.instant('Patron barcode'),
+              label: this.translateService.instant('Patron barcode'),
               required: true,
               keydown: (field, event) => {
                 if (event.key === 'Enter') {
@@ -185,7 +185,7 @@ export class ItemRequestComponent implements OnInit {
               userExist: {
                 expression: (fc: UntypedFormControl) =>  {
                   return new Promise((resolve) => {
-                    const value = fc.value;
+                    const { value } = fc;
                     if (value.length > 2) {
                       this.getPatron(fc.value).subscribe((result: any) => {
                         this.patron = (result.length === 1)
@@ -196,12 +196,12 @@ export class ItemRequestComponent implements OnInit {
                     }
                   });
                 },
-                message: this._translateService.instant('Patron not found.')
+                message: this.translateService.instant('Patron not found.')
               },
               can_request: {
                 expression: (fc: UntypedFormControl) => {
                   return new Promise((resolve) => {
-                    const value = fc.value;
+                    const { value } = fc;
                     if (value.length > 2) {
                       this.service.canRequest(
                         this.recordPid,
@@ -218,7 +218,7 @@ export class ItemRequestComponent implements OnInit {
                   });
                 },
                 message: () => {
-                  return this._translateService.instant(
+                  return this.translateService.instant(
                     this.canRequestMessage
                   );
                 }
@@ -229,9 +229,9 @@ export class ItemRequestComponent implements OnInit {
             key: 'pickupPid',
             type: 'select',
             props: {
-              label: this._translateService.instant('Pickup location'),
+              label: this.translateService.instant('Pickup location'),
               required: true,
-              placeholder: this._translateService.instant('Select…'),
+              placeholder: this.translateService.instant('Select…'),
               options: pickups
             }
           }
@@ -241,8 +241,8 @@ export class ItemRequestComponent implements OnInit {
             key: 'description',
             type: 'input',
             props: {
-              label: this._translateService.instant('Collection or item year, volume, number, pages'),
-              placeholder: this._translateService.instant('Year / Volume / Number / Pages'),
+              label: this.translateService.instant('Collection or item year, volume, number, pages'),
+              placeholder: this.translateService.instant('Year / Volume / Number / Pages'),
               maxLength: 100,
               required: true,
             }
@@ -263,7 +263,7 @@ export class ItemRequestComponent implements OnInit {
    */
 
   private getPickupLocations(): Observable<Array<any>> {
-    const currentLibrary = this.currentUser.currentLibrary;
+    const { currentLibrary } = this.currentUser;
     return this.service.getPickupLocations(this.recordPid).pipe(
       map((locations: any) => locations.map((loc: any) => {
         if (this.pickupDefaultValue === undefined && loc.library.pid === currentLibrary) {
@@ -284,9 +284,9 @@ export class ItemRequestComponent implements OnInit {
    */
   private getPatron(barcode: string) {
     const query = `barcode:${barcode}`;
-    return this._recordService.getRecords('patrons', query, 1, 1).pipe(
+    return this.recordService.getRecords('patrons', query, 1, 1).pipe(
       debounceTime(500),
-      map((result: Record) => this._recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
+      map((result: Record) => this.recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
       shareReplay(1)
     );
   }
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/related-resource/related-resource.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/related-resource/related-resource.component.html
index 89e0de8a9..4c588e249 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/related-resource/related-resource.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/related-resource/related-resource.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,12 +15,14 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<ng-container *ngIf="electronicLocator">
-  <a target="_blank" [href]="electronicLocator.url | safeUrl">
-    <i class="fa fa-link"></i> {{ electronicLocator.type | translate }}
-    <ng-container *ngIf="electronicLocator.content">
-      : {{ electronicLocator.content | translate }}
-    </ng-container>
-  </a>
-  <ng-container *ngIf="publicNotes"> ({{ publicNotes }})</ng-container>
-</ng-container>
+@if (electronicLocator) {
+    <a target="_blank" [href]="electronicLocator.url | safeUrl">
+      <i class="fa fa-link"></i> {{ electronicLocator.type | translate }}
+      @if (electronicLocator.content) {
+        : {{ electronicLocator.content | translate }}
+      }
+    </a>
+    @if (publicNotes) {
+      ({{ publicNotes }})
+    }
+}
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-detail-view.component.html b/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-detail-view.component.html
index f3148032a..d5fa6509f 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,42 +15,55 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record$ | async as record">
-  <div class="float-right mt-2 mb-4">
-    <a (click)="search(record.metadata)" class="btn btn-sm btn-primary mr-n4">
-      <i class="fa fa-search" aria-hidden="true"></i>
-      {{ 'Search documents' | translate }}
-    </a>
-  </div>
-  <h1 class="mb-0" *ngVar="icon(record.metadata.type) as icon">
-    <i class="fa {{ icon.class }}" title="{{ icon.title }}" aria-hidden="true"></i>
-    {{ record.metadata.authorized_access_point }}</h1>
-  <small>
-    {{ 'Local ID' | translate }}: {{ record.metadata.pid }}
-  </small>
-  <span class="badge badge-info" translate>Local</span>
+@if (record$ | async; as record) {
+    <div class="float-right mt-2 mb-4">
+      <a (click)="search($any(record).metadata)" class="btn btn-sm btn-primary mr-n4">
+        <i class="fa fa-search" aria-hidden="true"></i>
+        {{ 'Search documents' | translate }}
+      </a>
+    </div>
+    <h1 class="mb-0" *ngVar="icon($any(record).metadata.type) as icon">
+      <i class="fa {{ icon.class }}" title="{{ icon.title }}" aria-hidden="true"></i>
+      {{ $any(record).metadata.authorized_access_point }}</h1>
+    <small>
+      {{ 'Local ID' | translate }}: {{ $any(record).metadata.pid }}
+    </small>
+    <span class="badge badge-info" translate>Local</span>
 
-  <article class="card my-2">
-    <header class="card-header">
-      <b class="card-title mb-0">{{ 'local' | translate | uppercase }}</b>
-    </header>
-    <article class="card-body collapse show" [ngSwitch]="record.metadata.type">
-      <admin-local-organisation-detail-view *ngSwitchCase="entityType.ORGANISATION" [record]="record.metadata"></admin-local-organisation-detail-view>
-      <admin-local-person-detail-view *ngSwitchCase="entityType.PERSON" [record]="record.metadata"></admin-local-person-detail-view>
-      <admin-local-place-detail-view *ngSwitchCase="entityType.PLACE" [record]="record.metadata"></admin-local-place-detail-view>
-      <admin-local-place-detail-view *ngSwitchCase="entityType.TEMPORAL" [record]="record.metadata"></admin-local-place-detail-view>
-      <admin-local-topic-detail-view *ngSwitchCase="entityType.TOPIC" [record]="record.metadata"></admin-local-topic-detail-view>
-      <admin-local-work-detail-view *ngSwitchCase="entityType.WORK" [record]="record.metadata"></admin-local-work-detail-view>
-      <span *ngSwitchDefault>{{ 'Missing template for this entity type:' | translate }} {{ record.metadata.type }}</span>
+    <article class="card my-2">
+      <header class="card-header">
+        <b class="card-title mb-0">{{ 'local' | translate | uppercase }}</b>
+      </header>
+      <article class="card-body collapse show">
+        @switch ($any(record).metadata.type) {
+          @case (entityType.ORGANISATION) {
+            <admin-local-organisation-detail-view [record]="$any(record).metadata"></admin-local-organisation-detail-view>
+          }
+          @case (entityType.PERSON) {
+            <admin-local-person-detail-view [record]="$any(record).metadata"></admin-local-person-detail-view>
+          }
+          @case (entityType.PLACE) {
+            <admin-local-place-detail-view [record]="$any(record).metadata"></admin-local-place-detail-view>
+          }
+          @case (entityType.TEMPORAL) {
+            <admin-local-place-detail-view [record]="$any(record).metadata"></admin-local-place-detail-view>
+          }
+          @case (entityType.TOPIC) {
+            <admin-local-topic-detail-view [record]="$any(record).metadata"></admin-local-topic-detail-view>
+          }
+          @case (entityType.WORK) {
+            <admin-local-work-detail-view [record]="$any(record).metadata"></admin-local-work-detail-view>
+          }
+          @default {
+            {{ 'Missing template for this entity type:' | translate }} {{ $any(record).metadata.type }}
+          }
+        }
+      </article>
     </article>
-  </article>
 
-  <!-- OPERATION LOGS-->
-  <admin-operation-logs-dialog
-    *ngIf="isEnabledOperationLog"
-    [resourceType]="'local_entities'"
-    [resourcePid]="record.metadata.pid"
-  ></admin-operation-logs-dialog>
-
-</ng-container>
+    <!-- OPERATION LOGS-->
+    @if (isEnabledOperationLog) {
+      <admin-operation-logs-dialog [resourceType]="'local_entities'" [resourcePid]="$any(record).metadata.pid"></admin-operation-logs-dialog>
+    }
+}
 
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-detail-view.component.ts b/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-detail-view.component.ts
index 23ca3f6ba..19d648866 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -42,19 +42,19 @@ export class EntitiesLocalDetailViewComponent implements OnInit, DetailRecord {
 
   /**
    * Constructor
-   * @param _translateService - TranslateService
-   * @param _router - Router
-   * @param _operationLogsService - OperationLogsService
+   * @param translateService - TranslateService
+   * @param router - Router
+   * @param operationLogsService - OperationLogsService
    */
   constructor(
-    private _translateService: TranslateService,
-    private _router: Router,
-    private _operationLogsService: OperationLogsService
+    private translateService: TranslateService,
+    private router: Router,
+    private operationLogsService: OperationLogsService
   ) {}
 
   /** OnInit hook */
   ngOnInit(): void {
-    this.isEnabledOperationLog = this._operationLogsService.isLogVisible('local_entities');
+    this.isEnabledOperationLog = this.operationLogsService.isLogVisible('local_entities');
   }
 
   /**
@@ -65,19 +65,19 @@ export class EntitiesLocalDetailViewComponent implements OnInit, DetailRecord {
   icon(type: string): { class: string, title: string } {
     switch (type) {
       case EntityType.ORGANISATION:
-        return { class: EntityTypeIcon.ORGANISATION, title: this._translateService.instant('Organisation') };
+        return { class: EntityTypeIcon.ORGANISATION, title: this.translateService.instant('Organisation') };
       case EntityType.PERSON:
-        return { class: EntityTypeIcon.PERSON, title: this._translateService.instant('Person') };
+        return { class: EntityTypeIcon.PERSON, title: this.translateService.instant('Person') };
       case EntityType.PLACE:
-        return { class: EntityTypeIcon.PLACE, title: this._translateService.instant('Place') };
+        return { class: EntityTypeIcon.PLACE, title: this.translateService.instant('Place') };
       case EntityType.TEMPORAL:
-        return { class: EntityTypeIcon.TEMPORAL, title: this._translateService.instant('Temporal') };
+        return { class: EntityTypeIcon.TEMPORAL, title: this.translateService.instant('Temporal') };
       case EntityType.TOPIC:
-        return { class: EntityTypeIcon.TOPIC, title: this._translateService.instant('Topic') };
+        return { class: EntityTypeIcon.TOPIC, title: this.translateService.instant('Topic') };
       case EntityType.WORK:
-        return { class: EntityTypeIcon.WORK, title: this._translateService.instant('Work') };
+        return { class: EntityTypeIcon.WORK, title: this.translateService.instant('Work') };
       default:
-        return { class: 'fa-question', title: this._translateService.instant('Missing type') };
+        return { class: 'fa-question', title: this.translateService.instant('Missing type') };
     }
   }
 
@@ -86,7 +86,7 @@ export class EntitiesLocalDetailViewComponent implements OnInit, DetailRecord {
    * @param metadata - the record metadata
    */
   search(metadata: any): void {
-    this._router.navigate(
+    this.router.navigate(
       ['/records', 'documents'],
       {
         queryParams: { q: Entity.generateSearchQuery(metadata.type, 'local', metadata.pid), simple: '0' },
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-global.component.ts b/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-global.component.ts
index 2272419a7..655dcdee0 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-global.component.ts
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-global.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -22,23 +22,19 @@ import { Component, Input } from '@angular/core';
   template: `
   <dl class="entity-fields">
     <ng-content></ng-content>
-    <ng-container *ngIf="record.source_catalog">
-      <dt translate>
-        Source catalog
-      </dt>
-      <dd>
-        {{ record.source_catalog }}
-      </dd>
-    </ng-container>
-    <ng-container *ngIf="record.identifier">
-      <dt translate>
-        Identifier
-      </dt>
+    @if (record.source_catalog) {
+        <dt translate>Source catalog</dt>
+        <dd>{{ record.source_catalog }}</dd>
+    }
+    @if (record.identifier) {
+      <dt translate>Identifier</dt>
       <dd>
         {{ record.identifier.type | translate }} - {{ record.identifier.value }}
-        <span *ngIf="record.identifier.source">({{ record.identifier.source }})</span>
+        @if (record.identifier.source) {
+          ({{ record.identifier.source }})
+        }
       </dd>
-    </ng-container>
+    }
   </dl>
   `
 })
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-organisation-detail-view/local-organisation-detail-view.component.html b/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-organisation-detail-view/local-organisation-detail-view.component.html
index fdb3caa63..71005ca37 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-organisation-detail-view/local-organisation-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-organisation-detail-view/local-organisation-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -18,41 +18,38 @@
 
 <admin-entities-local-global [record]="record">
   <!-- NAME -->
-  <ng-container *ngIf="record.name">
+  @if (record.name) {
     <dt translate>Name</dt>
     <dd>{{ record.name }}</dd>
-  </ng-container>
-
+  }
   <!-- SUBORDINATE UNIT -->
-  <ng-container *ngIf="record.subordinate_unit">
+  @if (record.subordinate_unit) {
     <dt translate>Subordinate unit</dt>
     <dd>
       <ul>
-        <li *ngFor="let name of record.subordinate_unit">{{ name }}</li>
+        @for (name of record.subordinate_unit; track name) {
+          <li>{{ name }}</li>
+        }
       </ul>
     </dd>
-  </ng-container>
-
+  }
   <!-- CONFERENCE PLACE -->
-  <ng-container *ngIf="record.conference_place">
+  @if (record.conference_place) {
     <dt translate>Conference place</dt>
     <dd>{{ record.conference_place }}</dd>
-  </ng-container>
-
+  }
   <!-- CONFERENCE NUMBERING -->
-  <ng-container *ngIf="record.conference_numbering">
+  @if (record.conference_numbering) {
     <dt translate>Conference numbering</dt>
     <dd>{{ record.conference_numbering }}</dd>
-  </ng-container>
-
+  }
   <!-- CONFERENCE DATE -->
-  <ng-container *ngIf="record.conference_date">
+  @if (record.conference_date) {
     <dt translate>Conference date</dt>
     <dd>{{ record.conference_date }}</dd>
-  </ng-container>
-
+  }
   <!-- CONFERENCE -->
-  <ng-container *ngIf="record.conference">
+  @if (record.conference) {
     <dt translate>Conference</dt>
     <dd>
       <i class="fa mr-2" [ngClass]="{
@@ -60,27 +57,26 @@
         'fa-times text-danger': !record.conference
       }"></i>
     </dd>
-  </ng-container>
-
+  }
   <!-- START DATE -->
-  <ng-container *ngIf="record.start_date">
+  @if (record.start_date) {
     <dt translate>Start date</dt>
     <dd>{{ record.start_date }}</dd>
-  </ng-container>
-
+  }
   <!-- END DATE -->
-  <ng-container *ngIf="record.end_date">
+  @if (record.end_date) {
     <dt translate>End date</dt>
     <dd>{{ record.end_date }}</dd>
-  </ng-container>
-
+  }
   <!-- ALTERNATIVE NAMES -->
-  <ng-container *ngIf="record.alternative_names && record.alternative_names.length > 0">
+  @if (record.alternative_names && record.alternative_names.length > 0) {
     <dt translate>Alternative names</dt>
     <dd>
       <ul>
-        <li *ngFor="let name of record.alternative_names">{{ name }}</li>
+        @for (name of record.alternative_names; track name) {
+          <li>{{ name }}</li>
+        }
       </ul>
     </dd>
-  </ng-container>
+  }
 </admin-entities-local-global>
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-person-detail-view/local-person-detail-view.component.html b/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-person-detail-view/local-person-detail-view.component.html
index bf4ce3bb5..3dd11665a 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-person-detail-view/local-person-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-person-detail-view/local-person-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -18,48 +18,44 @@
 
 <admin-entities-local-global [record]="record">
   <!-- NAME -->
-  <ng-container *ngIf="record.name">
+  @if (record.name) {
     <dt translate>Name</dt>
     <dd>{{ record.name }}</dd>
-  </ng-container>
-
+  }
   <!-- DATE OF BIRTH -->
-  <ng-container *ngIf="record.date_of_birth">
+  @if (record.date_of_birth) {
     <dt translate>Birth date</dt>
     <dd>{{ record.date_of_birth }}</dd>
-  </ng-container>
-
+  }
   <!-- DATE OF DEATH -->
-  <ng-container *ngIf="record.date_of_death">
+  @if (record.date_of_death) {
     <dt translate>Death date</dt>
     <dd>{{ record.date_of_death }}</dd>
-  </ng-container>
-
+  }
   <!-- NUMERATION -->
-  <ng-container *ngIf="record.numeration">
+  @if (record.numeration) {
     <dt translate>Numeration</dt>
     <dd>{{ record.numeration }}</dd>
-  </ng-container>
-
+  }
   <!-- QUALIFIER -->
-  <ng-container *ngIf="record.qualifier">
+  @if (record.qualifier) {
     <dt translate>Qualifier</dt>
     <dd>{{ record.qualifier }}</dd>
-  </ng-container>
-
+  }
   <!-- FULLER FORM OF NAME -->
-  <ng-container *ngIf="record.fuller_form_of_name">
+  @if (record.fuller_form_of_name) {
     <dt translate>Fuller form of name</dt>
     <dd>{{ record.fuller_form_of_name }}</dd>
-  </ng-container>
-
+  }
   <!-- ALTERNATIVE NAMES -->
-  <ng-container *ngIf="record.alternative_names && record.alternative_names.length > 0">
-    <dt translate>Alternative names</dt>
-    <dd>
-      <ul>
-        <li *ngFor="let name of record.alternative_names">{{ name }}</li>
-      </ul>
-  </dd>
-  </ng-container>
+  @if (record.alternative_names && record.alternative_names.length > 0) {
+      <dt translate>Alternative names</dt>
+      <dd>
+        <ul>
+          @for (name of record.alternative_names; track name) {
+            <li>{{ name }}</li>
+          }
+        </ul>
+    </dd>
+  }
 </admin-entities-local-global>
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-place-detail-view/local-place-detail-view.component.html b/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-place-detail-view/local-place-detail-view.component.html
index f8efd4a32..e0af58135 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-place-detail-view/local-place-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-place-detail-view/local-place-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -18,18 +18,19 @@
 
 <admin-entities-local-global [record]="record">
   <!-- NAME -->
-  <ng-container *ngIf="record.name">
+  @if (record.name) {
     <dt translate>Name</dt>
     <dd>{{ record.name }}</dd>
-  </ng-container>
-
+  }
   <!-- ALTERNATIVE NAMES -->
-  <ng-container *ngIf="record.alternative_names && record.alternative_names.length > 0">
+  @if (record.alternative_names && record.alternative_names.length > 0) {
     <dt translate>Alternative names</dt>
     <dd>
       <ul>
-        <li *ngFor="let name of record.alternative_names">{{ name }}</li>
+        @for (name of record.alternative_names; track name) {
+          <li>{{ name }}</li>
+        }
       </ul>
     </dd>
-  </ng-container>
+  }
 </admin-entities-local-global>
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-topic-detail-view/local-topic-detail-view.component.html b/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-topic-detail-view/local-topic-detail-view.component.html
index 9fbc5c69c..ae788e616 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-topic-detail-view/local-topic-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-topic-detail-view/local-topic-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,20 +15,16 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<dl class="row mb-0">
-
-</dl>
 
 <!-- GLOBAL FIELDS -->
 <admin-entities-local-global [record]="record">
   <!-- NAME -->
-  <ng-container *ngIf="record.name">
+  @if (record.name) {
     <dt translate>Name</dt>
     <dd>{{ record.name }}</dd>
-  </ng-container>
-
+  }
   <!-- GENRE FORM -->
-  <ng-container *ngIf="record.genreForm">
+  @if (record.genreForm) {
     <dt translate>Genre form</dt>
     <dd>
       <i class="fa mr-2" [ngClass]="{
@@ -36,15 +32,18 @@
         'fa-times text-danger': !record.conference
       }"></i>
     </dd>
-  </ng-container>
-
+  }
   <!-- ALTERNATIVE NAMES -->
-  <ng-container *ngIf="record.alternative_names && record.alternative_names.length > 0">
-    <dt translate>Alternative names</dt>
-    <dd>
-      <ul>
-        <li *ngFor="let name of record.alternative_names">{{ name }}</li>
-      </ul>
-    </dd>
-  </ng-container>
+  @if (record.alternative_names && record.alternative_names.length > 0) {
+    <ng-container>
+      <dt translate>Alternative names</dt>
+      <dd>
+        <ul>
+          @for (name of record.alternative_names; track name) {
+            <li>{{ name }}</li>
+          }
+        </ul>
+      </dd>
+    </ng-container>
+  }
 </admin-entities-local-global>
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-work-detail-view/local-work-detail-view.component.html b/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-work-detail-view/local-work-detail-view.component.html
index 36a0eebbb..28e5269af 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-work-detail-view/local-work-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-work-detail-view/local-work-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -18,14 +18,13 @@
 
 <admin-entities-local-global [record]="record">
   <!-- TITLE -->
-  <ng-container *ngIf="record.title">
+  @if (record.title) {
     <dt translate>Title</dt>
     <dd>{{ record.title }}</dd>
-  </ng-container>
-
+  }
   <!-- CREATOR -->
-  <ng-container *ngIf="record.creator">
+  @if (record.creator) {
     <dt translate>Creator</dt>
     <dd>{{ record.creator }}</dd>
-  </ng-container>
+  }
 </admin-entities-local-global>
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.html b/projects/admin/src/app/record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.html
index 38d0600e3..5d5022a9e 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,36 +15,52 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record$ | async as record">
-  <div class="float-right mt-2 mb-4 mr-n4">
-    <a (click)="search(record.metadata)" class="btn btn-sm btn-primary">
-      <i class="fa fa-search" aria-hidden="true"></i>
-      {{ 'Search documents' | translate }}
-    </a>
-  </div>
+@if (record$ | async; as record) {
+    <div class="float-right mt-2 mb-4 mr-n4">
+      <a (click)="search($any(record).metadata)" class="btn btn-sm btn-primary">
+        <i class="fa fa-search" aria-hidden="true"></i>
+        {{ 'Search documents' | translate }}
+      </a>
+    </div>
 
-  <h1 class="mb-0" *ngVar="icon(record.metadata.type) as icon">
-    <i class="fa {{ icon.class }}" title="{{ icon.title }}" aria-hidden="true"></i>
-    {{ record.metadata | extractSourceField : 'authorized_access_point' }}</h1>
-  <small>
-    {{ 'MEF ID' | translate }}: {{ record.metadata.pid }}
-  </small>
-  <span class="badge badge-warning" translate>Remote</span>
+    <h1 class="mb-0" *ngVar="icon($any(record).metadata.type) as icon">
+      <i class="fa {{ icon.class }}" title="{{ icon.title }}" aria-hidden="true"></i>
+      {{ $any(record).metadata | extractSourceField : 'authorized_access_point' }}</h1>
+    <small>
+      {{ 'MEF ID' | translate }}: {{ $any(record).metadata.pid }}
+    </small>
+    <span class="badge badge-warning" translate>Remote</span>
 
-  <!-- SOURCES -->
-  <article class="card my-2" *ngFor="let source of record.metadata.sources.sort()">
-    <header class="card-header">
-      <b class="card-title mb-0">
-        {{ source | translate | uppercase }}
-      </b>
-    </header>
-    <article id="contribution-{{ source }}" class="card-body collapse show" [ngSwitch]="record.metadata.type">
-      <admin-remote-entities-person-detail-view *ngSwitchCase="entityType.PERSON" [record]="record.metadata[source]" [source]="source"></admin-remote-entities-person-detail-view>
-      <admin-remote-entities-organisation-detail-view *ngSwitchCase="entityType.ORGANISATION" [record]="record.metadata[source]" [source]="source"></admin-remote-entities-organisation-detail-view>
-      <admin-remote-topic-detail-view *ngSwitchCase="entityType.TOPIC" [record]="record.metadata[source]" [source]="source"></admin-remote-topic-detail-view>
-      <admin-remote-topic-detail-view *ngSwitchCase="entityType.PLACE" [record]="record.metadata[source]" [source]="source"></admin-remote-topic-detail-view>
-      <admin-remote-topic-detail-view *ngSwitchCase="entityType.TEMPORAL" [record]="record.metadata[source]" [source]="source"></admin-remote-topic-detail-view>
-      <span *ngSwitchDefault>{{ 'Missing template for this entity type:' | translate }} {{ record.metadata.type }}</span>
-    </article>
-  </article>
-</ng-container>
+    <!-- SOURCES -->
+    @for (source of $any(record).metadata.sources.sort(); track source) {
+      <article class="card my-2">
+        <header class="card-header">
+          <b class="card-title mb-0">
+            {{ source | translate | uppercase }}
+          </b>
+        </header>
+        <article id="contribution-{{ source }}" class="card-body collapse show">
+          @switch ($any(record).metadata.type) {
+            @case (entityType.PERSON) {
+              <admin-remote-entities-person-detail-view [record]="$any(record).metadata[source]" [source]="source"></admin-remote-entities-person-detail-view>
+            }
+            @case (entityType.ORGANISATION) {
+              <admin-remote-entities-organisation-detail-view [record]="$any(record).metadata[source]" [source]="source"></admin-remote-entities-organisation-detail-view>
+            }
+            @case (entityType.TOPIC) {
+              <admin-remote-topic-detail-view [record]="$any(record).metadata[source]" [source]="source"></admin-remote-topic-detail-view>
+            }
+            @case (entityType.PLACE) {
+              <admin-remote-topic-detail-view [record]="$any(record).metadata[source]" [source]="source"></admin-remote-topic-detail-view>
+            }
+            @case (entityType.TEMPORAL) {
+              <admin-remote-topic-detail-view [record]="$any(record).metadata[source]" [source]="source"></admin-remote-topic-detail-view>
+            }
+            @default {
+              {{ 'Missing template for this entity type:' | translate }} {{ $any(record).metadata.type }}
+            }
+          }
+        </article>
+      </article>
+    }
+}
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.ts b/projects/admin/src/app/record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.ts
index 2251d02ea..e32f11e69 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -39,14 +39,14 @@ export class RemoteEntitiesDetailViewComponent implements DetailRecord {
 
   /**
    * Constructor
-   * @param _translateService - TranslateService
-   * @param _router - Router
-   * @param _appSettingsService - AppSettingsService
+   * @param translateService - TranslateService
+   * @param router - Router
+   * @param appSettingsService - AppSettingsService
    */
   constructor(
-    private _translateService: TranslateService,
-    private _router: Router,
-    private _appSettingsService: AppSettingsService
+    private translateService: TranslateService,
+    private router: Router,
+    private appSettingsService: AppSettingsService
   ) { }
 
   /**
@@ -59,32 +59,32 @@ export class RemoteEntitiesDetailViewComponent implements DetailRecord {
       case EntityType.PERSON:
         return {
           class: EntityTypeIcon.PERSON,
-          title: this._translateService.instant(EntityType.PERSON)
+          title: this.translateService.instant(EntityType.PERSON)
         };
       case EntityType.ORGANISATION:
         return {
           class: EntityTypeIcon.ORGANISATION,
-          title: this._translateService.instant(EntityType.ORGANISATION)
+          title: this.translateService.instant(EntityType.ORGANISATION)
         };
       case EntityType.TOPIC:
         return {
           class: EntityTypeIcon.TOPIC,
-          title: this._translateService.instant(EntityType.TOPIC)
+          title: this.translateService.instant(EntityType.TOPIC)
         };
       case EntityType.PLACE:
         return {
           class: EntityTypeIcon.PLACE,
-          title: this._translateService.instant(EntityType.PLACE)
+          title: this.translateService.instant(EntityType.PLACE)
         };
       case EntityType.TEMPORAL:
         return {
           class: EntityTypeIcon.TEMPORAL,
-          title: this._translateService.instant(EntityType.TEMPORAL)
+          title: this.translateService.instant(EntityType.TEMPORAL)
         };
       default:
         return {
           class: 'fa-question',
-          title: this._translateService.instant('Missing type')
+          title: this.translateService.instant('Missing type')
         };
     }
   }
@@ -97,15 +97,15 @@ export class RemoteEntitiesDetailViewComponent implements DetailRecord {
   search(metadata: any): void {
     let catalogKey = undefined;
     let catalogPid = undefined;
-    const orderKey = this.findOrderKeyByLanguage(this._translateService.currentLang);
-    this._appSettingsService.settings.agentLabelOrder[orderKey].forEach((source: string) => {
+    const orderKey = this.findOrderKeyByLanguage(this.translateService.currentLang);
+    this.appSettingsService.settings.agentLabelOrder[orderKey].forEach((source: string) => {
       if (metadata.sources.includes(source) && !catalogKey && !catalogPid) {
         catalogKey = source;
         catalogPid = metadata[source].pid;
       }
     });
     if (catalogKey && catalogPid) {
-      this._router.navigate(
+      this.router.navigate(
         ['/records', 'documents'],
         {
           queryParams: { q: Entity.generateSearchQuery(metadata.type, catalogKey, catalogPid), simple: '0' },
@@ -121,9 +121,9 @@ export class RemoteEntitiesDetailViewComponent implements DetailRecord {
    * @returns The matched language code
    */
   private findOrderKeyByLanguage(language: string): string {
-    let orderKey = Object.keys(this._appSettingsService.settings.agentLabelOrder).find((key: string) => key === language);
+    let orderKey = Object.keys(this.appSettingsService.settings.agentLabelOrder).find((key: string) => key === language);
     if (!orderKey) {
-      orderKey = this._appSettingsService.settings.agentLabelOrder.fallback;
+      orderKey = this.appSettingsService.settings.agentLabelOrder.fallback;
     }
 
     return orderKey;
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-organisation-detail-view/remote-entities-organisation-detail-view.component.html b/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-organisation-detail-view/remote-entities-organisation-detail-view.component.html
index 5ca296530..3489ba158 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-organisation-detail-view/remote-entities-organisation-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-organisation-detail-view/remote-entities-organisation-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -17,55 +17,57 @@
 -->
 <dl class="entity-fields">
   <!-- DATE OF ESTABLISHMENT -->
-  <ng-container *ngIf="record.date_of_establishment">
+  @if (record.date_of_establishment) {
     <dt translate>Date of establishment</dt>
     <dd>{{ record.date_of_establishment }}</dd>
-  </ng-container>
+  }
   <!-- DATE OF TERMINATION -->
-  <ng-container *ngIf="record.date_of_termination">
+  @if (record.date_of_termination) {
     <dt translate>Date of termination</dt>
     <dd>{{ record.date_of_termination }}</dd>
-  </ng-container>
+  }
     <!-- LANGUAGE -->
-  <ng-container *ngIf="record.language">
+  @if (record.language) {
     <dt translate>Language</dt>
     <dd>
       <ul>
-        <li *ngFor="let language of record.language">
-          {{ ('lang_' + language) | translate }}
-        </li>
+        @for (language of record.language; track language) {
+          <li>{{ ('lang_' + language) | translate }}</li>
+        }
       </ul>
     </dd>
-  </ng-container>
+  }
   <!-- COUNTRY ASSOCIATED -->
-  <ng-container *ngIf="record.country_associated">
+  @if (record.country_associated) {
     <dt translate>Country associated</dt>
     <dd>{{ 'country_' + record.country_associated | translate }}</dd>
-  </ng-container>
+  }
+
   <!-- AUTHORIZED ACCESS POINT -->
-  <ng-container *ngIf="record.authorized_access_point">
+  @if (record.authorized_access_point) {
     <dt translate>Authorized access point</dt>
     <dd>{{ record.authorized_access_point }}</dd>
-  </ng-container>
+  }
   <!-- VARIANT NAME -->
-  <ng-container *ngIf="record.variant_access_point">
+  @if (record.variant_access_point) {
     <dt translate>Variant name</dt>
     <dd>
       <ul>
-        <li *ngFor="let variant_name of record.variant_access_point">
-          {{ variant_name }}
-        </li>
+        @for (variant_name of record.variant_access_point; track variant_name) {
+          <li>{{ variant_name }}</li>
+        }
       </ul>
     </dd>
-  </ng-container>
+  }
   <!-- ID -->
-  <ng-container *ngIf="record.identifier">
+  @if (record.identifier) {
     <dt translate>Id</dt>
     <dd>
-      <ng-container *ngIf="disabledLink(source); else noLink">
-      <a [href]="record.identifier | safeUrl">{{ record.pid }}</a>
-      </ng-container>
-      <ng-template #noLink>{{ record.pid }}</ng-template>
+      @if (disabledLink(source)) {
+        <a [href]="record.identifier | safeUrl">{{ record.pid }}</a>
+      } @else {
+        {{ record.pid }}
+      }
     </dd>
-  </ng-container>
+  }
 </dl>
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-person-detail-view/remote-entities-person-detail-view.component.html b/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-person-detail-view/remote-entities-person-detail-view.component.html
index 96155dadb..18e0cf26c 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-person-detail-view/remote-entities-person-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-person-detail-view/remote-entities-person-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -17,65 +17,66 @@
 -->
 <dl class="entity-fields">
   <!-- DATE OF BIRTH -->
-  <ng-container *ngIf="record.date_of_birth">
+  @if (record.date_of_birth) {
     <dt translate>Birth date</dt>
     <dd>{{ record.date_of_birth }}</dd>
-  </ng-container>
+  }
   <!-- DATE OF DEATH -->
-  <ng-container *ngIf="record.date_of_death">
+  @if (record.date_of_death) {
     <dt translate>Death date</dt>
     <dd>{{ record.date_of_death }}</dd>
-  </ng-container>
+  }
   <!-- LANGUAGE -->
-  <ng-container *ngIf="record.language">
+  @if (record.language) {
     <dt translate>Language</dt>
     <dd>
       <ul>
-        <li *ngFor="let language of record.language">
-          {{ ('lang_' + language) | translate }}
-        </li>
+        @for (language of record.language; track language) {
+          <li>{{ ('lang_' + language) | translate }}</li>
+        }
       </ul>
     </dd>
-  </ng-container>
+  }
     <!-- GENDER -->
-  <ng-container *ngIf="record.Gender">
+  @if (record.Gender) {
     <dt translate>Gender</dt>
     <dd>{{ record.Gender }}</dd>
-  </ng-container>
+  }
   <!-- BIBLIOGRAPHICAL INFORMATION -->
-  <ng-container *ngIf="record.biographical_information">
+  @if (record.biographical_information) {
     <dt translate>Biographical information</dt>
     <dd [innerHtml]="record.biographical_information.join('\n') | urlActive | nl2br"></dd>
-  </ng-container>
+  }
   <!-- NAME -->
-  <ng-container *ngIf="record.name">
+  @if (record.name) {
     <dt translate>Name</dt>
     <dd>{{ record.name }}</dd>
-  </ng-container>
+  }
   <!-- VARIANT ACCESS POINT -->
-  <ng-container *ngIf="record.variant_access_point">
+  @if (record.variant_access_point) {
     <dt translate>Variant name</dt>
     <dd>
       <ul>
-        <li *ngFor="let variant_name of record.variant_access_point">
-          {{ variant_name }}
-        </li>
+        @for (variant_name of record.variant_access_point; track variant_name) {
+          <li>{{ variant_name }}</li>
+        }
       </ul>
     </dd>
-  </ng-container>
+  }
   <!-- AUTHORIZED ACCESS POINT -->
-  <ng-container *ngIf="record.authorized_access_point">
+  @if (record.authorized_access_point) {
     <dt translate>Authorized access point</dt>
     <dd>{{ record.authorized_access_point }}</dd>
-  </ng-container>
+  }
   <!-- ID -->
-  <ng-container *ngIf="record.identifier">
+  @if (record.identifier) {
     <dt translate>Id</dt>
     <dd>
-      <ng-container *ngIf="disabledLink(source); else noLink">
-      <a href="{{ record.identifier }}">{{ record.pid }}</a>
-      </ng-container>
-      <ng-template #noLink>{{ record.pid }}</ng-template>
+      @if (disabledLink(source)) {
+        <a href="{{ record.identifier }}">{{ record.pid }}</a>
+      } @else {
+        {{ record.pid }}
+      }
     </dd>
-  </ng-container>
+  }
 </dl>
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-topic-detail-view/remote-topic-detail-view.component.html b/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-topic-detail-view/remote-topic-detail-view.component.html
index ec45cabe3..cd9895385 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-topic-detail-view/remote-topic-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-topic-detail-view/remote-topic-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -17,69 +17,80 @@
 -->
 <dl class="entity-fields">
   <!-- BNF TYPE -->
-  <ng-container *ngIf="record.bnf_type">
+  @if (record.bnf_type) {
     <dt translate>Type</dt>
     <dd>{{ record.bnf_type }}</dd>
-  </ng-container>
+  }
   <!-- VARIANT ACCESS POINT(S) -->
-  <ng-container *ngIf="record.variant_access_point">
+  @if (record.variant_access_point) {
     <dt translate>Variant access point(s)</dt>
     <dd>
       <ul>
-        <li *ngFor="let variant_access_point of record.variant_access_point">
-          {{ variant_access_point }}
-        </li>
+        @for (variant_access_point of record.variant_access_point; track variant_access_point) {
+          <li>{{ variant_access_point }}</li>
+        }
       </ul>
     </dd>
-  </ng-container>
+  }
   <!-- BROADER -->
-  <ng-container *ngIf="record.broader">
+  @if (record.broader) {
     <dt translate>Broader</dt>
     <dd>
       <ul>
-        <li *ngFor="let broader of record.broader">
-          {{ broader.authorized_access_point }}
-        </li>
+        @for (broader of record.broader; track broader) {
+          <li>{{ broader.authorized_access_point }}</li>
+        }
       </ul>
     </dd>
-  </ng-container>
+  }
   <!-- RELATED -->
-  <ng-container *ngIf="record.related">
+  @if (record.related) {
     <dt translate>Related</dt>
     <dd>
       <ul>
-        <li *ngFor="let related of record.related">
-          {{ related.authorized_access_point }}
-        </li>
+        @for (related of record.related; track related) {
+          <li>{{ related.authorized_access_point }}</li>
+        }
       </ul>
     </dd>
-  </ng-container>
+  }
+
   <!-- CLASSIFICATION(S) -->
-  <ng-container *ngIf="record.classification">
+  @if (record.classification) {
     <dt translate>Classification(s)</dt>
     <dd>
       <ul>
-        <li *ngFor="let classification of record.classification">
-          <span class="mr-1" *ngIf="classification.classificationPortion">{{ classification.classificationPortion }}</span>
-          <span class="mr-1" *ngIf="classification.name">{{ classification.name }}</span>
-          <span class="badge badge-secondary" *ngIf="classification.type">{{ classification.type | translate }}</span>
-        </li>
+        @for (classification of record.classification; track classification) {
+          <li>
+            @if (classification.classificationPortion) {
+              <span class="mr-1">{{ classification.classificationPortion }}</span>
+            }
+            @if (classification.name) {
+              <span class="mr-1">{{ classification.name }}</span>
+            }
+            @if (classification.type) {
+              <span class="badge badge-secondary">{{ classification.type | translate }}</span>
+            }
+          </li>
+        }
       </ul>
     </dd>
-  </ng-container>
+  }
   <!-- IDENTIFIED BY -->
-  <ng-container *ngIf="record.identifiedBy">
+  @if (record.identifiedBy) {
     <dt translate>Identified by</dt>
     <dd>
       <ul>
-        <ng-container *ngFor="let identifiedBy of record.identifiedBy">
-          <li *ngIf="identifiedBy.type === 'uri'">
-            <a href="{{ identifiedBy.value }}">{{ identifiedBy.source }}</a>
-          </li>
-        </ng-container>
+        @for (identifiedBy of record.identifiedBy; track identifiedBy) {
+          @if (identifiedBy.type === 'uri') {
+            <li>
+              <a href="{{ identifiedBy.value }}">{{ identifiedBy.source }}</a>
+            </li>
+          }
+        }
       </ul>
     </dd>
-  </ng-container>
+  }
   <dt translate>Id</dt>
   <dd>{{ record.pid }}</dd>
 </dl>
diff --git a/projects/admin/src/app/record/detail-view/holding-detail-view/holding-detail-view.component.html b/projects/admin/src/app/record/detail-view/holding-detail-view/holding-detail-view.component.html
index 5bece9ba1..fc70e2026 100644
--- a/projects/admin/src/app/record/detail-view/holding-detail-view/holding-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/holding-detail-view/holding-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,10 +14,10 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record && record.metadata as data">
-  <ng-container [ngSwitch]="data.holdings_type">
-    <ng-container *ngSwitchCase="'serial'">
+@if (record && record.metadata; as data) {
+  @switch (data.holdings_type) {
+    @case ('serial') {
       <admin-serial-holding-detail-view [holding]="record"></admin-serial-holding-detail-view>
-    </ng-container>
-  </ng-container>
-</ng-container>
+    }
+  }
+}
diff --git a/projects/admin/src/app/record/detail-view/holding-detail-view/holding-detail-view.component.ts b/projects/admin/src/app/record/detail-view/holding-detail-view/holding-detail-view.component.ts
index ccfd7e9a8..8c255a76b 100644
--- a/projects/admin/src/app/record/detail-view/holding-detail-view/holding-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/holding-detail-view/holding-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -35,25 +35,23 @@ export class HoldingDetailViewComponent implements OnInit , OnDestroy, DetailRec
   record: any;
 
   /** The observer to the record observable */
-  private _recordObs: Subscription;
+  private recordObs: Subscription;
 
   /**
    * Constructor
-   * @param _router: Router
+   * @param router: Router
    */
-  constructor(
-    private _router: Router
-  ) { }
+  constructor(private router: Router) {}
 
   /**
    * Init hook
    */
   ngOnInit() {
-    this._recordObs = this.record$.subscribe(record => {
+    this.recordObs = this.record$.subscribe(record => {
       this.record = record;
       // TODO : At this time, only 'serial' holding should be displayed. Then redirect user to the document detail view
       if (this.record.metadata.holdings_type !== 'serial') {
-        this._router.navigate(['/errors/403'], { skipLocationChange: true });
+        this.router.navigate(['/errors/403'], { skipLocationChange: true });
       }
     });
   }
@@ -62,7 +60,7 @@ export class HoldingDetailViewComponent implements OnInit , OnDestroy, DetailRec
    * Destroy hook
    */
   ngOnDestroy(): void {
-    this._recordObs.unsubscribe();
+    this.recordObs.unsubscribe();
   }
 
 }
diff --git a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.html b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.html
index eb4f88cbc..f145dc69c 100644
--- a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.html
+++ b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2022-2023 RERO
+  Copyright (C) 2022-2024 RERO
   Copyright (C) 2022-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -26,89 +26,106 @@
                   [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
           </button>
           <div class="pull-right">
-            <i class="fa" [ngClass]="getIcon()" [title]="iconTitle" *ngIf="isCollapsed"></i>
+            @if (isCollapsed) {
+              <i class="fa" [ngClass]="getIcon()" [title]="iconTitle"></i>
+            }
           </div>
         </div>
         <div class="col-8">
           <a [routerLink]="['/records', 'items', 'detail', issue.metadata.pid]" class="issue-title">
             {{ issue.metadata.enumerationAndChronology }}
           </a>
-          <span class="badge badge-pill badge-info mx-2" *ngIf="issue.new_issue" translate>New</span>
-          <i class="fa fa-sticky-note-o mx-2 text-warning" *ngIf="issue.metadata.notes"></i>
+          @if (issue.new_issue) {
+            <span class="badge badge-pill badge-info mx-2" translate>New</span>
+          }
+          @if (issue.metadata.notes) {
+            <i class="fa fa-sticky-note-o mx-2 text-warning"></i>
+          }
           <shared-inherited-call-number class="call-numbers px-2" [item]="issue"></shared-inherited-call-number>
-          <i *ngIf="issue.metadata?.issue?.claims?.counter > 0 && isCollapsed" class="fa fa-exclamation-triangle text-warning" aria-hidden="true"></i>
+          @if (issue.metadata?.issue?.claims?.counter > 0 && isCollapsed) {
+            <i class="fa fa-exclamation-triangle text-warning" aria-hidden="true"></i>
+          }
         </div>
-        <span class="col-3 text-right" *ngIf="isCollapsed">
-          {{ issue.metadata.issue.status_date | dateTranslate : 'shortDate' }}
-        </span>
-        <dl class="col-12 row mb-1" *ngIf="!isCollapsed">
-          <dd class="offset-1 col-11 text-danger mb-0" *ngIf="issue.metadata._masked">
-            <i class="fa fa-eye-slash pr-1"></i>
-            {{ 'This issue has been marked as masked' | translate }}
-          </dd>
-          <dt class="offset-1 col-3 label-title" translate>Status</dt>
-          <dd class="col-8 mb-0">
-            <i class="fa pr-2" [class]="getIcon(true)"></i>
-            {{ issue.metadata.issue.status | translate }}
-            <span class="small pl-2 text-secondary">
-              ({{ 'Assigned on' | translate }} {{ issue.metadata.issue.status_date | dateTranslate }})
-            </span>
-          </dd>
-          <dt class="offset-1 col-3 label-title" translate>Expected date</dt>
-          <dd class="col-8 mb-0">{{ issue.metadata.issue.expected_date | dateTranslate }}</dd>
-          <ng-container *ngIf="issue.metadata.issue.status === issueItemStatusRef.RECEIVED">
-            <dt class="offset-1 col-3 label-title" translate>Received date</dt>
-            <dd class="col-8 mb-0">{{ issue.metadata.issue.received_date | dateTranslate }}</dd>
-          </ng-container>
-          <ng-container *ngIf="issue.metadata?.issue?.claims?.counter > 0">
-            <dt class="offset-1 col-3 label-title" translate>
-              <span [ngPlural]="issue.metadata.issue.claims.counter">
-                <ng-template ngPluralCase="=1">{{ 'Claim' | translate }}</ng-template>
-                <ng-template ngPluralCase="other">{{ 'Claims' | translate }}</ng-template>
-              </span>
-            </dt>
+        @if (isCollapsed) {
+          <span class="col-3 text-right">
+            {{ issue.metadata.issue.status_date | dateTranslate : 'shortDate' }}
+          </span>
+        }
+        @if (!isCollapsed) {
+          <dl class="col-12 row mb-1">
+            @if (issue.metadata._masked) {
+              <dd class="offset-1 col-11 text-danger mb-0">
+                <i class="fa fa-eye-slash pr-1"></i>
+                {{ 'This issue has been marked as masked' | translate }}
+              </dd>
+            }
+            <dt class="offset-1 col-3 label-title" translate>Status</dt>
             <dd class="col-8 mb-0">
-              {{ issue.metadata.issue.claims.counter }}
+              <i class="fa pr-2" [class]="getIcon(true)"></i>
+              {{ issue.metadata.issue.status | translate }}
               <span class="small pl-2 text-secondary">
-                ({{ 'last claim' | translate }}: {{ claimLastDate | dateTranslate: 'short' }})
+                ({{ 'Assigned on' | translate }} {{ issue.metadata.issue.status_date | dateTranslate }})
               </span>
             </dd>
-          </ng-container>
-        </dl>
+            <dt class="offset-1 col-3 label-title" translate>Expected date</dt>
+            <dd class="col-8 mb-0">{{ issue.metadata.issue.expected_date | dateTranslate }}</dd>
+            @if (issue.metadata.issue.status === issueItemStatusRef.RECEIVED) {
+              <dt class="offset-1 col-3 label-title" translate>Received date</dt>
+              <dd class="col-8 mb-0">{{ issue.metadata.issue.received_date | dateTranslate }}</dd>
+            }
+            @if (issue.metadata?.issue?.claims?.counter > 0) {
+              <dt class="offset-1 col-3 label-title" translate>
+                <span [ngPlural]="issue.metadata.issue.claims.counter">
+                  <ng-template ngPluralCase="=1">{{ 'Claim' | translate }}</ng-template>
+                  <ng-template ngPluralCase="other">{{ 'Claims' | translate }}</ng-template>
+                </span>
+              </dt>
+              <dd class="col-8 mb-0">
+                {{ issue.metadata.issue.claims.counter }}
+                <span class="small pl-2 text-secondary">
+                  ({{ 'last claim' | translate }}: {{ claimLastDate | dateTranslate: 'short' }})
+                </span>
+              </dd>
+            }
+          </dl>
+        }
       </div>
     </div>
     <div class="col-2 text-right">
       <!-- CLAIMS BUTTON -->
-      <button *ngIf="recordPermissions?.update?.can && isClaimAllowed"
-              type="button"
-              title="{{ 'Claim' | translate }}"
-              class="btn btn-sm btn-outline-primary ml-1"
-              (click)="openClaimEmailDialog()">
-        <i class="fa fa-gavel"></i>
-      </button>
-      <!-- EDIT BUTTON -->
-      <button *ngIf="recordPermissions?.update?.can"
-              type="button" class="btn btn-sm btn-outline-primary ml-1"
-              title="{{ 'Edit' | translate }}"
-              [routerLink]="['/records', 'items', 'edit', issue.metadata.pid]"
-              [queryParams]="{'redirectTo': 'records/holdings/detail/' + holding.id }">
-        <i class="fa fa-pencil"></i>
-      </button>
+      @if (recordPermissions?.update?.can) {
+        @if (isClaimAllowed) {
+          <button type="button"
+                  title="{{ 'Claim' | translate }}"
+                  class="btn btn-sm btn-outline-primary ml-1"
+                  (click)="openClaimEmailDialog()">
+            <i class="fa fa-gavel"></i>
+          </button>
+        }
+        <!-- EDIT BUTTON -->
+        <button type="button" class="btn btn-sm btn-outline-primary ml-1"
+                title="{{ 'Edit' | translate }}"
+                [routerLink]="['/records', 'items', 'edit', issue.metadata.pid]"
+                [queryParams]="{'redirectTo': 'records/holdings/detail/' + holding.id }">
+          <i class="fa fa-pencil"></i>
+        </button>
+      }
+
       <!-- DELETE BUTTON -->
-      <button *ngIf="recordPermissions?.delete?.can; else deleteInfo"
-              type="button" class="btn btn-outline-danger btn-sm ml-1"
-              title="{{ 'Delete' | translate }}"
-              (click)="deleteIssue(issue)">
-        <i class="fa fa-trash" ></i>
-      </button>
-      <ng-template #deleteInfo>
+      @if (recordPermissions?.delete?.can) {
+        <button type="button" class="btn btn-outline-danger btn-sm ml-1"
+                title="{{ 'Delete' | translate }}"
+                (click)="deleteIssue(issue)">
+          <i class="fa fa-trash" ></i>
+        </button>
+      } @else {
         <button type="button" class="btn btn-sm btn-outline-danger ml-1 disabled"
                 title="{{ 'Delete' | translate }}"
                 [popover]="tolTemplate" triggers="mouseenter:mouseleave">
           <i class="fa fa-trash"></i>
         </button>
         <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage(issue) | nl2br"></div></ng-template>
-      </ng-template>
+      }
     </div>
   </div>
 </div>
diff --git a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.ts b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.ts
index 78acc47fc..2b69ba3b5 100644
--- a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.ts
+++ b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022-2023 RERO
+ * Copyright (C) 2022-2024 RERO
  * Copyright (C) 2022-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -57,8 +57,8 @@ export class ReceivedIssueComponent implements OnInit {
    */
   get iconTitle(): string {
     return (this.issue.metadata._masked)
-      ? this._translateService.instant('Masked')
-      : this._translateService.instant(this.issue.metadata.issue.status);
+      ? this.translateService.instant('Masked')
+      : this.translateService.instant(this.issue.metadata.issue.status);
   }
 
   /** @return last claim date */
@@ -70,34 +70,34 @@ export class ReceivedIssueComponent implements OnInit {
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _holdingService - HoldingService
-   * @param _translateService - TranslateService
-   * @param _recordPermissionService - RecordPermissionService
-   * @param _recordUiService: RecordUiService
-   * @param _issueService: IssueService
-   * @param _userService: UserService
+   * @param holdingService - HoldingService
+   * @param translateService - TranslateService
+   * @param recordPermissionService - RecordPermissionService
+   * @param recordUiService: RecordUiService
+   * @param issueService: IssueService
+   * @param userService: UserService
    */
   constructor(
-    private _holdingService: HoldingsService,
-    private _translateService: TranslateService,
-    private _recordPermissionService: RecordPermissionService,
-    private _recordUiService: RecordUiService,
-    private _issueService: IssueService,
-    private _userService: UserService
+    private holdingService: HoldingsService,
+    private translateService: TranslateService,
+    private recordPermissionService: RecordPermissionService,
+    private recordUiService: RecordUiService,
+    private issueService: IssueService,
+    private userService: UserService
   ) { }
 
   // COMPONENT FUNCTIONS ======================================================
 
   /** OnInit hook */
   ngOnInit(): void {
-    this._recordPermissionService
+    this.recordPermissionService
       .getPermission('items', this.issue.metadata.pid)
-      .subscribe(permission => this.recordPermissions =  this._recordPermissionService.membership(
-        this._userService.user,
+      .subscribe(permission => this.recordPermissions =  this.recordPermissionService.membership(
+        this.userService.user,
         this.issue.metadata.library.pid,
         permission
       ));
-    this.isClaimAllowed = this._issueService.isClaimAllowed(this.issue.metadata.issue.status);
+    this.isClaimAllowed = this.issueService.isClaimAllowed(this.issue.metadata.issue.status);
   }
 
   /**
@@ -108,7 +108,7 @@ export class ReceivedIssueComponent implements OnInit {
   getIcon(realState: boolean = false): string {
     return (this.issue.metadata._masked && !realState)
       ? 'fa-eye-slash text-danger'
-      : this._holdingService.getIcon(this.issue.metadata.issue.status);
+      : this.holdingService.getIcon(this.issue.metadata.issue.status);
   }
 
   /**
@@ -118,7 +118,7 @@ export class ReceivedIssueComponent implements OnInit {
    */
   deleteInfoMessage(issue: any): string {
     return (this.recordPermissions?.delete?.reasons)
-      ? this._recordPermissionService.generateDeleteMessage(this.recordPermissions.delete.reasons)
+      ? this.recordPermissionService.generateDeleteMessage(this.recordPermissions.delete.reasons)
       : '';
   }
 
@@ -127,14 +127,14 @@ export class ReceivedIssueComponent implements OnInit {
    * @param issue: The issue item to delete
    */
   deleteIssue(issue) {
-    this._recordUiService.deleteRecord('items', issue.metadata.pid).subscribe(
+    this.recordUiService.deleteRecord('items', issue.metadata.pid).subscribe(
       () => this.delete.emit(issue)
     );
   }
 
   /** Open claim dialog */
   openClaimEmailDialog(): void {
-    const modalRef = this._issueService.openClaimEmailDialog(this.issue);
+    const modalRef = this.issueService.openClaimEmailDialog(this.issue);
     modalRef.content.recordChange.subscribe((record: any) => this.issue = record);
   }
 }
diff --git a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.html b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.html
index 20407bae5..27bf5bd9a 100644
--- a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,25 +15,29 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <h1 class="mb-2" translate>Holdings</h1>
-<admin-record-masked *ngIf="holding.metadata._masked" [record]="holding" [withLabel]="true"></admin-record-masked>
-<div class="card mb-3" *ngIf="holding.metadata.document.pid | getRecord:'documents' | async as document">
-  <div class="card-body row">
-    <a [routerLink]="['/records', 'documents', 'detail', document.metadata.pid]" class="col-1">
-      <i class="fa fa-arrow-left"></i>
-    </a>
-    <admin-documents-brief-view
-        class="col"
-        [record]="document"
-        [type]="'documents'" [detailUrl]="{
-          link: '/records/documents/detail/' + document.metadata.pid,
-          external: false
-        }"
-    ></admin-documents-brief-view>
+@if (holding.metadata._masked) {
+  <admin-record-masked [record]="holding" [withLabel]="true"></admin-record-masked>
+}
+@if (holding.metadata.document.pid | getRecord:'documents' | async; as document) {
+  <div class="card mb-3">
+    <div class="card-body row">
+      <a [routerLink]="['/records', 'documents', 'detail', $any(document).metadata.pid]" class="col-1">
+        <i class="fa fa-arrow-left"></i>
+      </a>
+      <admin-documents-brief-view
+          class="col"
+          [record]="document"
+          [type]="'documents'" [detailUrl]="{
+            link: '/records/documents/detail/' + $any(document).metadata.pid,
+            external: false
+          }"
+      ></admin-documents-brief-view>
+    </div>
   </div>
-</div>
-<div *ngIf="holding">
+}
+@if (holding) {
   <admin-holding-shared-view [holding]="holding" class="row col"></admin-holding-shared-view>
-</div>
+}
 
 <!-- TABS ================================================================= -->
 <!--    3 tabs will be displayed : Issues, Holdings details, Local fields -->
@@ -50,65 +54,67 @@ <h1 class="mb-2" translate>Holdings</h1>
           <i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i>
           {{ 'Show more' | translate }} &hellip;
         </button>
-        <button class="ml-auto btn btn-sm btn-outline-primary"
-                *ngIf="allowIssueCreation"
-                [routerLink]="['/records', 'items', 'new']"
-                [queryParams]="{
-                  'holding': holding.id,
-                  'irregular': true,
-                  'redirectTo': 'records/holdings/detail/' + holding.id
-                }"
-        >
-          <i class="fa fa-plus-square-o"></i>
-          {{ 'Add irregular issue' | translate }} &hellip;
-        </button>
+        @if (allowIssueCreation) {
+          <button class="ml-auto btn btn-sm btn-outline-primary"
+                  [routerLink]="['/records', 'items', 'new']"
+                  [queryParams]="{
+                    'holding': holding.id,
+                    'irregular': true,
+                    'redirectTo': 'records/holdings/detail/' + holding.id
+                  }"
+          >
+            <i class="fa fa-plus-square-o"></i>
+            {{ 'Add irregular issue' | translate }} &hellip;
+          </button>
+        }
       </div>
       <div class="issues">
         <!-- expected issues ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-        <admin-expected-issue
-          *ngFor="let prediction of predictionsItems; let last = last"
-          [issue]="prediction"
-        >
-          <ng-container actions *ngIf="last">
-            <button *ngIf="allowIssueCreation"
-                    type="button" class="btn btn-sm btn-outline-primary ml-1"
-                    title="{{ 'Quick receive' | translate }}"
-                    (click)="quickIssueReceive()">
-              <i class="fa fa-check-circle"></i>
-            </button>
-            <button *ngIf="allowIssueCreation"
-                    type="button" class="btn btn-sm btn-outline-primary ml-1"
-                    title="{{ 'Receive and edit this issue' | translate }}"
-                    [routerLink]="['/records', 'items', 'new']"
-                    [queryParams]="{
-                              'holding': holding.id,
-                              'redirectTo': 'records/holdings/detail/' + holding.id,
-                              'enumerationAndChronology': prediction.issue,
-                              'expected_date': prediction.expected_date
-                          }">
-              <i class="fa fa-plus"></i>
-            </button>
-          </ng-container>
-        </admin-expected-issue>
+        @for (prediction of predictionsItems; track prediction; let last = $last) {
+          <admin-expected-issue [issue]="prediction">
+            @if (last) {
+              <ng-container actions>
+                @if (allowIssueCreation) {
+                  <button type="button" class="btn btn-sm btn-outline-primary ml-1"
+                          title="{{ 'Quick receive' | translate }}"
+                          (click)="quickIssueReceive()">
+                    <i class="fa fa-check-circle"></i>
+                  </button>
+                }
+                @if (allowIssueCreation) {
+                  <button type="button" class="btn btn-sm btn-outline-primary ml-1"
+                          title="{{ 'Receive and edit this issue' | translate }}"
+                          [routerLink]="['/records', 'items', 'new']"
+                          [queryParams]="{
+                                    'holding': holding.id,
+                                    'redirectTo': 'records/holdings/detail/' + holding.id,
+                                    'enumerationAndChronology': prediction.issue,
+                                    'expected_date': prediction.expected_date
+                                }">
+                    <i class="fa fa-plus"></i>
+                  </button>
+                }
+              </ng-container>
+            }
+          </admin-expected-issue>
+        }
         <!-- received issues ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-        <admin-received-issue
-          *ngFor="let item of receivedItems; let last = last"
-          [issue]="item"
-          [holding]="holding"
-          (delete)="deleteIssue($event)"
-        ></admin-received-issue>
+        @for (item of receivedItems; track item; let last = $last) {
+          <admin-received-issue [issue]="item" [holding]="holding" (delete)="deleteIssue($event)"></admin-received-issue>
+        }
       </div>
       <!-- SHOW MORE RECEIVED ISSUE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-      <div class="row mt-1" *ngIf="receivedItems.length < totalReceivedItems">
-        <div class="col">
-          <button [routerLink]="[]" (click)="showMore('received', 5)" class="btn btn-sm btn-outline-primary">
-            <i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
-            {{ 'Show more' | translate }} ...
-          </button>
-          <span class="pl-3 small text-secondary">({{ showMoreIssuesCounter }})</span>
+      @if (receivedItems.length < totalReceivedItems) {
+        <div class="row mt-1">
+          <div class="col">
+            <button [routerLink]="[]" (click)="showMore('received', 5)" class="btn btn-sm btn-outline-primary">
+              <i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
+              {{ 'Show more' | translate }} ...
+            </button>
+            <span class="pl-3 small text-secondary">({{ showMoreIssuesCounter }})</span>
+          </div>
         </div>
-      </div>
-
+      }
     </div>
   </tab>
   <!-- END OF ISSUES TAB ---------------------------------------------------->
@@ -125,20 +131,20 @@ <h1 class="mb-2" translate>Holdings</h1>
   <!-- END OF DETAILS TAB ---------------------------------------------------->
 
   <!-- LOCAL FIELDS TAB ------------------------------------------------------------>
-  <tab *ngIf="displayLocalFieldsTab" id="holding-local-field-tab" tabOrder="3">
-    <ng-template tabHeading>
-      <i class="fa fa-list-ul mr-1"></i><span translate>Local fields</span>
-    </ng-template>
-    <div class="mt-2">
-      <admin-local-field [resourceType]="'holdings'" [resourcePid]="holding.metadata.pid"></admin-local-field>
-    </div>
-  </tab>
+  @if (displayLocalFieldsTab) {
+    <tab id="holding-local-field-tab" tabOrder="3">
+      <ng-template tabHeading>
+        <i class="fa fa-list-ul mr-1"></i><span translate>Local fields</span>
+      </ng-template>
+      <div class="mt-2">
+        <admin-local-field [resourceType]="'holdings'" [resourcePid]="holding.metadata.pid"></admin-local-field>
+      </div>
+    </tab>
+  }
   <!-- END OF LOCAL FIELDS TAB ---------------------------------------------------->
 </tabset>
 
 <!-- OPERATION LOGS-->
-<admin-operation-logs-dialog
-  *ngIf="isEnabledOperationLog"
-  resourceType="holdings"
-  [resourcePid]="holding.metadata.pid"
-></admin-operation-logs-dialog>
+@if (isEnabledOperationLog) {
+  <admin-operation-logs-dialog resourceType="holdings" [resourcePid]="holding.metadata.pid"></admin-operation-logs-dialog>
+}
diff --git a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.ts b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.ts
index b50e7112c..54f47e507 100644
--- a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -52,15 +52,15 @@ export class SerialHoldingDetailViewComponent implements OnInit {
   allowIssueCreation: boolean = false;
 
   /** received issue counter : number of received issue to load/display */
-  private _receivedIssueCounter = 5;
+  private receivedIssueCounter = 5;
   /** prediction issue counter : number of prediction issue to load/display */
-  private _predictionIssueCounter = 3;
+  private predictionIssueCounter = 3;
 
 
   // GETTER & SETTER ==========================================================
   /** Is operation log enabled. */
   get isEnabledOperationLog(): boolean {
-    return this._operationLogsService.isLogVisible('holdings');
+    return this.operationLogsService.isLogVisible('holdings');
   }
 
   /** Determine if the `Local fields` tab should be displayed or not. */
@@ -68,10 +68,10 @@ export class SerialHoldingDetailViewComponent implements OnInit {
     /* DEV NOTES :: Why not using the `[permissions]` directive:
          As the permissions directive is set on a <tab> element and this <tab> is
          also a directive ; the tab content if correctly removed but not the
-         related tabset entry that is not DOM related. Using `*ngIf` the <tab>
+         related tabset entry that is not DOM related. Using `@if` the <tab>
          directive code isn't called and not tabset entry is created.
      */
-    return this._permissionsService.canAccess([
+    return this.permissionsService.canAccess([
       PERMISSIONS.LOFI_SEARCH,
       PERMISSIONS.LOFI_CREATE
     ]);
@@ -84,8 +84,8 @@ export class SerialHoldingDetailViewComponent implements OnInit {
   get showMoreIssuesCounter() {
     const additionalIssueCounter = this.totalReceivedItems - this.receivedItems.length;
     return (additionalIssueCounter === 1)
-      ? this._translateService.instant('1 hidden issue')
-      : this._translateService.instant('{{ counter }} hidden issues',
+      ? this.translateService.instant('1 hidden issue')
+      : this.translateService.instant('{{ counter }} hidden issues',
         {counter: additionalIssueCounter});
   }
 
@@ -93,22 +93,22 @@ export class SerialHoldingDetailViewComponent implements OnInit {
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _holdingService: HoldingService
-   * @param _recordService: RecordService
-   * @param _translateService: TranslateService,
-   * @param _toastrService: ToastrService
-   * @param _operationLogsService: OperationLogsService
-   * @param _permissionsService: PermissionsService
-   * @param _userService: UserService
+   * @param holdingService: HoldingService
+   * @param recordService: RecordService
+   * @param translateService: TranslateService,
+   * @param toastrService: ToastrService
+   * @param operationLogsService: OperationLogsService
+   * @param permissionsService: PermissionsService
+   * @param userService: UserService
    */
   constructor(
-    private _holdingService: HoldingsService,
-    private _recordService: RecordService,
-    private _translateService: TranslateService,
-    private _toastrService: ToastrService,
-    private _operationLogsService: OperationLogsService,
-    private _permissionsService: PermissionsService,
-    private _userService: UserService
+    private holdingService: HoldingsService,
+    private recordService: RecordService,
+    private translateService: TranslateService,
+    private toastrService: ToastrService,
+    private operationLogsService: OperationLogsService,
+    private permissionsService: PermissionsService,
+    private userService: UserService
   ) {}
 
   /** OnInit hook */
@@ -127,11 +127,11 @@ export class SerialHoldingDetailViewComponent implements OnInit {
    */
   showMore(type: string, increment: number = 10) {
     if (type === 'received') {
-      this._receivedIssueCounter += increment;
+      this.receivedIssueCounter += increment;
       this._loadReceivedItems();
     }
     if (type === 'prediction') {
-      this._predictionIssueCounter += increment;
+      this.predictionIssueCounter += increment;
       this._loadPrediction();
     }
   }
@@ -149,9 +149,9 @@ export class SerialHoldingDetailViewComponent implements OnInit {
    * This function allow to receive the next predicted issue for a serial holding
    */
   quickIssueReceive() {
-    this._holdingService.quickReceivedIssue(this.holding).subscribe(
+    this.holdingService.quickReceivedIssue(this.holding).subscribe(
       (result) => {
-        this._toastrService.success(this._translateService.instant('New issue created.'));
+        this.toastrService.success(this.translateService.instant('New issue created.'));
         // change item structure to have same structure as received items
         const item = {
           id: result.issue.pid,
@@ -163,7 +163,7 @@ export class SerialHoldingDetailViewComponent implements OnInit {
       },
       (error) => {
         const message = `[${error.status}-${error.statusText}] ${error.error.message}`;
-        this._toastrService.error(message, this._translateService.instant('Issue creation failed!'));
+        this.toastrService.error(message, this.translateService.instant('Issue creation failed!'));
       }
     );
   }
@@ -176,30 +176,30 @@ export class SerialHoldingDetailViewComponent implements OnInit {
    *   the holding library owner
    */
   private _computePermissions(): void {
-    if (this._permissionsService.canAccess(PERMISSIONS.ITEM_CREATE)) {
-      this.allowIssueCreation = this._userService.user.currentLibrary === this.holding.metadata.library.pid;
+    if (this.permissionsService.canAccess(PERMISSIONS.ITEM_CREATE)) {
+      this.allowIssueCreation = this.userService.user.currentLibrary === this.holding.metadata.library.pid;
     }
   }
 
   /** Load prediction issues corresponding to the holding. */
   private _loadPrediction() {
-    this._holdingService
-      .getHoldingPatternPreview(this.holding.id, this._predictionIssueCounter)
+    this.holdingService
+      .getHoldingPatternPreview(this.holding.id, this.predictionIssueCounter)
       .subscribe(predictions => this.predictionsItems = predictions);
   }
 
   /** Load received items corresponding to the holding. */
   private _loadReceivedItems() {
-    this._recordService
+    this.recordService
       .getRecords(
         'items',
         `holding.pid:${this.holding.id} AND NOT type:provisional`,
         1,
-        this._receivedIssueCounter,
+        this.receivedIssueCounter,
         [], {}, null,
         '-issue_sort_date'
       ).subscribe((result: Record) => {
-        this.totalReceivedItems = this._recordService.totalHits(result.hits.total);
+        this.totalReceivedItems = this.recordService.totalHits(result.hits.total);
         this.receivedItems = result.hits.hits;
       });
   }
diff --git a/projects/admin/src/app/record/detail-view/ill-request-detail-view/ill-request-detail-view.component.html b/projects/admin/src/app/record/detail-view/ill-request-detail-view/ill-request-detail-view.component.html
index eed013ca7..a894f0eb7 100644
--- a/projects/admin/src/app/record/detail-view/ill-request-detail-view/ill-request-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/ill-request-detail-view/ill-request-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,43 +14,47 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record">
-  <h1 class="d-inline">{{ 'ILL request' | translate }} #{{ record.metadata.pid}}</h1>
+@if (record) {
+  <h1>{{ 'ILL request' | translate }} #{{ record.metadata.pid }}</h1>
   <div class="card mt-5">
     <h6 class="card-header">
       <i class="fa fa-book pr-2"></i>
       {{ 'Document information' | translate }}
     </h6>
-    <!-- DOCUMENT INFORMATIONS -->
+    <!-- DOCUMENT INFORMATION'S -->
     <div class="card-body">
-      <h3>{{ record.metadata.document.title}}</h3>
+      <h3>{{ record.metadata.document.title }}</h3>
       <dl class="mt-2 row">
-        <ng-container *ngIf="record.metadata.document.authors as authors">
-          <dt class="col-sm-5 col-md-3 col-lg-2 offset-1 label-title" translate>Authors</dt>
-          <dd class="col-sm-6 col-md-8 col-lg-9 mb-1">{{ authors }}</dd>
-        </ng-container>
-        <ng-container *ngIf="record.metadata.document.publisher || record.metadata.document.year">
-          <dt class="col-sm-5 col-md-3 col-lg-2 offset-1 label-title" translate>Edition</dt>
-          <dd class="col-sm-6 col-md-8 col-lg-9 mb-1">
-            <ng-container *ngIf="record.metadata.document.publisher as publisher">{{ publisher }}</ng-container>
-            <ng-container *ngIf="record.metadata.document.year as year">&nbsp;({{ year }})</ng-container>
+        @if (record.metadata.document.authors; as authors) {
+          <dt class="col-sm-5 col-md-3 col-lg-3 label-title" translate>Authors</dt>
+          <dd class="col-sm-6 col-md-8 col-lg-8 mb-1">{{ authors }}</dd>
+        }
+        @if (record.metadata.document.publisher || record.metadata.document.year) {
+          <dt class="col-sm-5 col-md-3 col-lg-3 label-title" translate>Edition</dt>
+          <dd class="col-sm-6 col-md-8 col-lg-8 mb-1">
+            @if (record.metadata.document.publisher; as publisher) {
+              {{ publisher }}
+            }
+            @if (record.metadata.document.year; as year) {
+              &nbsp;({{ year }})
+            }
           </dd>
-        </ng-container>
-        <ng-container *ngIf="record.metadata.document.identifier as identifier">
-          <dt class="col-sm-5 col-md-3 col-lg-2 offset-1 label-title" translate>Identifiers</dt>
-          <dd class="col-sm-6 col-md-8 col-lg-9 mb-1">{{ identifier }}</dd>
-        </ng-container>
-        <ng-container *ngIf="record.metadata.document.source as source">
-          <dt class="col-sm-5 col-md-3 col-lg-2 offset-1 label-title" translate>Published in</dt>
-          <dd class="col-sm-6 col-md-8 col-lg-9 mb-1">
+        }
+        @if (record.metadata.document.identifier; as identifier) {
+          <dt class="col-sm-5 col-md-3 col-lg-3 label-title" translate>Identifiers</dt>
+          <dd class="col-sm-6 col-md-8 col-lg-8 mb-1">{{ identifier }}</dd>
+        }
+        @if (record.metadata.document.source; as source) {
+          <dt class="col-sm-5 col-md-3 col-lg-3 offset-1 label-title" translate>Published in</dt>
+          <dd class="col-sm-6 col-md-8 col-lg-8 mb-1">
             {{ source.journal_title }}
-            <ng-container *ngIf="source.volume || source.number">
-              &nbsp;(<ng-container *ngIf="source.volume">Vol.{{ source.volume }}</ng-container>
-              <ng-container *ngIf="source.volume && source.number"> &mdash; </ng-container>
-              <ng-container *ngIf="source.number">n° {{ source.number }}</ng-container>)
-            </ng-container>
+            @if (source.volume || source.number) {
+              &nbsp;(@if (source.volume) { Vol.{{ source.volume }} }
+              @if (source.volume && source.number) { &mdash; }
+              @if (source.number) { n° {{ source.number }} })
+            }
           </dd>
-        </ng-container>
+        }
       </dl>
     </div>
   </div>
@@ -63,64 +67,71 @@ <h6 class="card-header">
     </h6>
     <div class="card-body">
       <dl class="mt-2 row">
-        <ng-container *ngIf="record.metadata.found_in as source">
-          <dt class="col-sm-5 col-md-3 col-lg-2 offset-1 label-title" translate>Found in</dt>
-          <dd class="col-sm-6 col-md-8 col-lg-9 mb-1">
+        @if (record.metadata.found_in; as source) {
+          <dt class="col-sm-5 col-md-3 col-lg-3 label-title" translate>Found in</dt>
+          <dd class="col-sm-6 col-md-8 col-lg-8 mb-1">
             {{ source.source }} &mdash; <a class="rero-ils-external-link" href="{{ source.url }}">{{ source.url }}</a>
           </dd>
-        </ng-container>
-        <dt class="col-sm-5 col-md-3 col-lg-2 offset-1 label-title" translate>Requester</dt>
-        <dd class="col-sm-6 col-md-8 col-lg-9 mb-1">
-          <a *ngIf="requester && requester.patron && requester.patron.barcode[0]" [routerLink]="['/circulation', 'patron', requester.patron.barcode[0]]">
-            <span id="patron-last-name">{{ requester.last_name }}</span>
-            <span id="patron-first-name" *ngIf="requester.first_name as firstName">, {{ firstName }}</span>
-          </a>
+        }
+        <dt class="col-sm-5 col-md-3 col-lg-3 label-title" translate>Requester</dt>
+        <dd class="col-sm-6 col-md-8 col-lg-8 mb-1">
+          @if (requester && requester.patron && requester.patron.barcode[0]) {
+            <a [routerLink]="['/circulation', 'patron', requester.patron.barcode[0]]">
+              <span id="patron-last-name">{{ requester.last_name }}</span>
+              @if (requester.first_name; as firstName) {
+                <span id="patron-first-name">, {{ firstName }}</span>
+              }
+            </a>
+          }
         </dd>
-        <dt class="col-sm-5 col-md-3 col-lg-2 offset-1 label-title" translate>Request date</dt>
-        <dd class="col-sm-6 col-md-8 col-lg-9 mb-1">{{ record.created | dateTranslate : 'medium' }}</dd>
-        <dt class="col-sm-5 col-md-3 col-lg-2 offset-1 label-title" translate>Request status</dt>
-        <dd class="col-sm-6 col-md-8 col-lg-9 mb-1">
+        <dt class="col-sm-5 col-md-3 col-lg-3 label-title" translate>Request date</dt>
+        <dd class="col-sm-6 col-md-8 col-lg-8 mb-1">{{ record.created | dateTranslate : 'medium' }}</dd>
+        <dt class="col-sm-5 col-md-3 col-lg-3 label-title" translate>Request status</dt>
+        <dd class="col-sm-6 col-md-8 col-lg-8 mb-1">
           <span class="badge badge-{{ badgeColor(record.metadata.status) }} px-2 py-1" translate>
             {{ record.metadata.status }}
           </span>
         </dd>
-        <dt class="col-sm-5 col-md-3 col-lg-2 offset-1 label-title" translate>Loan status</dt>
-        <dd class="col-sm-6 col-md-8 col-lg-9 mb-1">
+        <dt class="col-sm-5 col-md-3 col-lg-3 label-title" translate>Loan status</dt>
+        <dd class="col-sm-6 col-md-8 col-lg-8 mb-1">
           <span class="badge badge-{{ badgeColor(record.metadata.loan_status) }} px-2 py-1" translate>
             {{ record.metadata.loan_status || 'None' | translate }}
           </span>
         </dd>
-        <dt class="col-sm-5 col-md-3 col-lg-2 offset-1 label-title" translate>Pickup location</dt>
-        <dd class="col-sm-6 col-md-8 col-lg-9 mb-1">
-          <ng-container *ngIf="record.metadata.pickup_location.pid | getRecord:'locations':'field':'ill_pickup_name' | async as location_name">
+        <dt class="col-sm-5 col-md-3 col-lg-3 label-title" translate>Pickup location</dt>
+        <dd class="col-sm-6 col-md-8 col-lg-8 mb-1">
+          @if (record.metadata.pickup_location.pid | getRecord:'locations':'field':'ill_pickup_name' | async; as location_name) {
             {{ location_name }}
-          </ng-container>
+          }
         </dd>
-        <dt class="col-sm-5 col-md-3 col-lg-2 offset-1 label-title" translate>Scope</dt>
-        <dd class="col-sm-6 col-md-8 col-lg-9 mb-1">
-          <ng-container *ngIf="record.metadata.copy === true" translate>Copy</ng-container>
-          <ng-container *ngIf="record.metadata.copy === false" translate>Loan</ng-container>
+        <dt class="col-sm-5 col-md-3 col-lg-3 label-title" translate>Scope</dt>
+        <dd class="col-sm-6 col-md-8 col-lg-8 mb-1">
+          @if (record.metadata.copy) {
+            <span translate>Copy</span>
+          } @else {
+            <span translate>Loan</span>
+          }
         </dd>
-        <ng-container *ngIf="record.metadata.copy === true">
-          <dt class="col-sm-5 col-md-3 col-lg-2 offset-1 label-title" translate>Pages</dt>
-          <dd class="col-sm-6 col-md-8 col-lg-9 mb-1">{{ record.metadata.pages }}</dd>
-        </ng-container>
+        @if (record.metadata.copy) {
+          <dt class="col-sm-5 col-md-3 col-lg-3 label-title" translate>Pages</dt>
+          <dd class="col-sm-6 col-md-8 col-lg-8 mb-1">{{ record.metadata.pages }}</dd>
+        }
       </dl>
     </div>
     <!-- NOTES :: public/staff -->
-    <ng-container *ngIf="record.metadata.notes">
+    @if (record.metadata.notes) {
       <div class="card-header">
         <i class="fa fa-sticky-note-o pr-2"></i>
         {{ 'Notes' | translate }}
       </div>
       <div class="card-body container">
         <dl class="row mt-2">
-          <ng-container *ngFor="let note of record.metadata.notes">
-            <dt class="col-sm-5 col-md-3 col-lg-2 offset-1 label-title" translate>{{ note.type }}</dt>
-            <dd class="col-sm-6 col-md-8 col-lg-9 mb-1" [innerHTML]="note.content | nl2br"></dd>
-          </ng-container>
+          @for (note of record.metadata.notes; track note) {
+            <dt class="col-sm-5 col-md-3 col-lg-3 label-title" translate>{{ note.type }}</dt>
+            <dd class="col-sm-6 col-md-8 col-lg-8 mb-1" [innerHTML]="note.content | nl2br"></dd>
+          }
         </dl>
       </div>
-    </ng-container>
+    }
   </div>
-</ng-container>
+}
diff --git a/projects/admin/src/app/record/detail-view/ill-request-detail-view/ill-request-detail-view.component.ts b/projects/admin/src/app/record/detail-view/ill-request-detail-view/ill-request-detail-view.component.ts
index cad8199b3..25e8c6a62 100644
--- a/projects/admin/src/app/record/detail-view/ill-request-detail-view/ill-request-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/ill-request-detail-view/ill-request-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -40,19 +40,19 @@ export class IllRequestDetailViewComponent implements DetailRecord, OnInit {
   // CONSTRUCTOR & HOOKS =======================================================
   /**
    * Constructor
-   * @param _recordService - RecordService
-   * @param _illRequestService - IllRequestsService
+   * @param recordService - RecordService
+   * @param illRequestService - IllRequestsService
    */
   constructor(
-    private _recordService: RecordService,
-    private _illRequestService: IllRequestsService,
+    private recordService: RecordService,
+    private illRequestService: IllRequestsService,
   ) {}
 
   /** OnInit hook */
   ngOnInit(): void {
     this.record$.subscribe((record) => {
       this.record = record;
-      this._recordService.getRecord('patrons', this.record.metadata.patron.pid).subscribe(
+      this.recordService.getRecord('patrons', this.record.metadata.patron.pid).subscribe(
         (patron) => this.requester = patron.metadata
       );
     });
@@ -61,7 +61,7 @@ export class IllRequestDetailViewComponent implements DetailRecord, OnInit {
   // FUNCTIONS =================================================================
   /** get the bootstrap color to apply on the request status badge */
   badgeColor(status: string): string {
-    return this._illRequestService.badgeColor(status);
+    return this.illRequestService.badgeColor(status);
   }
 
 }
diff --git a/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.html b/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.html
index 9ba598d7b..57f2e08c7 100644
--- a/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,52 +15,59 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record">
-  <div *ngIf="recordPermissions?.update?.can && isIssue && isClaimAllowed" class="float-right mt-2 mr-n4 btn-additional-action">
-    <a class="btn btn-sm btn-outline-primary" (click)="openClaimEmailDialog()" translate>Add a claim</a>
-  </div>
-  <div *ngIf="isIssue">
+@if (record) {
+  @if (recordPermissions?.update?.can && isIssue && isClaimAllowed) {
+    <div class="float-right mt-2 mr-n4 btn-additional-action">
+      <a class="btn btn-sm btn-outline-primary" (click)="openClaimEmailDialog()" translate>Add a claim</a>
+    </div>
+  }
+  @if (isIssue) {
     <a [routerLink]="parentHoldingUrl">
       <i class="fa fa-arrow-left mr-1"></i>
       {{ 'Back to parent holding' | translate }}
     </a>
-  </div>
+  }
   <header>
     <h1>{{ 'Barcode' | translate }} {{ record.metadata.barcode }}</h1>
   </header>
   <section class="mb-4">
-    <admin-record-masked *ngIf="record.metadata._masked" [record]="record" [withLabel]="true"></admin-record-masked>
+    @if (record.metadata._masked) {
+      <admin-record-masked [record]="record" [withLabel]="true"></admin-record-masked>
+    }
     <dl class="row mb-0">
       <!-- INHERITED CALL NUMBER -->
-      <ng-container *ngIf="record | itemHoldingsCallNumber | async as callNumber">
-        <ng-container *ngIf="(callNumber | json) !== ({ first: {}, second: {} } | json)">
+      @if (record | itemHoldingsCallNumber | async; as callNumber) {
+        @if ((callNumber | json) !== ({ first: {}, second: {} } | json)) {
           <dt class="col-3 label-title" translate>Call number </dt>
           <dd class="col-9">
             <shared-inherited-call-number [item]="record" context="first"></shared-inherited-call-number>
           </dd>
-        </ng-container>
-      </ng-container>
+        }
+      }
       <!-- SECOND CALL NUMBER -->
-      <ng-container *ngIf="record.metadata.second_call_number">
+      @if (record.metadata.second_call_number) {
         <dt class="col-3 label-title" translate>Second call number</dt>
         <dd class="col-9">{{ record.metadata.second_call_number }}</dd>
-      </ng-container>
+      }
       <!-- ENUMERATION AND CHRONOLOGY / UNIT -->
-      <ng-container *ngIf="record.metadata.enumerationAndChronology">
+      @if (record.metadata.enumerationAndChronology) {
         <dt class="col-3 label-title" translate>Unit</dt>
         <dd class="col-9">{{ record.metadata.enumerationAndChronology }}</dd>
-      </ng-container>
+      }
       <!-- ITEM TYPE -->
       <dt class="col-3 label-title" translate>Type</dt>
       <dd class="col-9" *ngVar="record.metadata.item_type.pid | getRecord:'item_types': 'field':'name' | async as defaultItty">
-        <ng-container *ngIf="hasTemporaryItemType(); else defaultItemTypeBlock">
+        @if (hasTemporaryItemType()) {
           <del class="text-muted mr-2">{{ defaultItty }}</del>
           {{ record.metadata.temporary_item_type.pid | getRecord:'item_types': 'field':'name' | async }}
-          <span *ngIf="record.metadata.temporary_item_type.end_date as endDate" class="ml-1 small text-secondary">
-            (<i class="fa fa-long-arrow-right" aria-hidden="true"></i> {{ endDate | dateTranslate :'shortDate' }})
-          </span>
-        </ng-container>
-        <ng-template #defaultItemTypeBlock>{{ defaultItty }}</ng-template>
+          @if (record.metadata.temporary_item_type.end_date; as endDate) {
+            <span class="ml-1 small text-secondary">
+              (<i class="fa fa-long-arrow-right" aria-hidden="true"></i> {{ endDate | dateTranslate :'shortDate' }})
+            </span>
+          }
+        } @else {
+          {{ defaultItty }}
+        }
       </dd>
       <!-- DOCUMENT -->
       <dt class="col-3 label-title" translate>Document</dt>
@@ -70,32 +77,34 @@ <h1>{{ 'Barcode' | translate }} {{ record.metadata.barcode }}</h1>
         </a>
       </dd>
       <!-- LIBRARY -->
-      <dt class="col-3 label-title" translate>Library</dt>
-      <dd class="col-9">
-        <ng-container *ngIf="location">
+      @if (location) {
+        <dt class="col-3 label-title" translate>Library</dt>
+        <dd class="col-9">
           {{ location.metadata.library.pid | getRecord: 'libraries': 'field': 'name' | async }}
-        </ng-container>
-      </dd>
+        </dd>
+      }
       <!-- LOCATION -->
-      <dt class="col-3 label-title" translate>Location</dt>
-      <dd class="col-9">
-        <ng-container *ngIf="location">{{ location.metadata.name }}</ng-container>
-      </dd>
+      @if (location) {
+        <dt class="col-3 label-title" translate>Location</dt>
+        <dd class="col-9">{{ location.metadata.name }}</dd>
+      }
       <!-- TEMPORARY LOCATION -->
-      <ng-container *ngIf="record.metadata.temporary_location">
+      @if (record.metadata.temporary_location) {
         <dt class="col-3 label-title" translate>Temporary location</dt>
         <dd class="col-9">{{ record.metadata.temporary_location.pid | getRecord: 'locations' : 'field' : 'name' | async }}</dd>
-      </ng-container>
+      }
       <!-- ITEM IN COLLECTION -->
-      <ng-container *ngIf="record.metadata.pid | itemInCollection | async as collections">
+      @if (record.metadata.pid | itemInCollection | async; as collections) {
         <dt class="col-3 label-title" translate>Exhibition/course</dt>
         <dd class="col-9">
-          <ng-container *ngFor="let collection of collections; let last=last">
-            <a [routerLink]="['/records', 'collections', 'detail', collection.metadata.pid]">{{ collection.metadata.title }}</a>
+          @for (collection of collections; track collection; let last=$last) {
+            <a
+              [routerLink]="['/records', 'collections', 'detail', $any(collection).metadata.pid]"
+            >{{ $any(collection).metadata.title }}</a>
             {{ last ? '' : '; ' }}
-          </ng-container>
+          }
         </dd>
-      </ng-container>
+      }
       <!-- AVAILABILITY -->
       <dt class="col-3 label-title" translate>Availability</dt>
       <dd class="col-9">
@@ -109,167 +118,177 @@ <h1>{{ 'Barcode' | translate }} {{ record.metadata.barcode }}</h1>
       <dt class="col-3 label-title" translate>New acquisition</dt>
       <dd class="col-9">
         <i class="fa"
-           [ngClass]="(record.metadata.acquisition_date) ? 'fa-check text-success' : 'fa-times text-danger'"
-           aria-hidden="true">
+            [ngClass]="(record.metadata.acquisition_date) ? 'fa-check text-success' : 'fa-times text-danger'"
+            aria-hidden="true">
         </i>
-        <span class="ml-1" *ngIf="record.metadata.acquisition_date">
-          ({{ record.metadata.acquisition_date | dateTranslate : 'shortDate' }})
-        </span>
+        @if (record.metadata.acquisition_date) {
+          <span class="ml-1">
+            ({{ record.metadata.acquisition_date | dateTranslate : 'shortDate' }})
+          </span>
+        }
       </dd>
       <!-- PRICE -->
-      <ng-container *ngIf="record.metadata | keyExists:'price'">
+      @if (record.metadata | keyExists:'price') {
         <dt class="col-3 label-title" translate>Price</dt>
         <dd class="col-9">{{ record.metadata.price | currency:organisationCurrency:'symbol' }}</dd>
-      </ng-container>
+      }
       <!-- PAC CODE -->
-      <ng-container *ngIf="record.metadata | keyExists:'pac_code'">
+      @if (record.metadata | keyExists:'pac_code') {
         <dt class="col-3 label-title" translate>PAC code</dt>
         <dd class="col-9">{{ record.metadata.pac_code | translate }}</dd>
-      </ng-container>
+      }
       <!-- URL -->
-      <ng-container *ngIf="record.metadata | keyExists:'url'">
+      @if (record.metadata | keyExists:'url') {
         <dt class="col-3 label-title" translate>Online access</dt>
         <dd class="col-9"><a [href]="record.metadata.url | safeUrl ">{{ record.metadata.url }}</a></dd>
-      </ng-container>
+      }
     </dl>
   </section>
 
   <!-- ISSUE DATA -->
-  <section *ngIf="isIssue">
-    <header>
-      <h3 translate>Issue data</h3>
-    </header>
-    <dl class="row">
-      <!-- is regular -->
-      <dt class="col-3 label-title" translate>Regular issue</dt>
-      <dd class="col-9">
-        <i class="fa"
-           [ngClass]="(record.metadata.issue.regular) ? 'fa-check text-success' : 'fa-times text-danger'"
-           aria-hidden="true">
-        </i>
-      </dd>
-      <!-- expected date -->
-      <dt class="col-3 label-title" translate>Expected date</dt>
-      <dd class="col-9">{{ record.metadata.issue.expected_date | dateTranslate }}</dd>
-      <!-- received date -->
-      <dt class="col-3 label-title" translate>Received date</dt>
-      <dd class="col-9">
-        <ng-container *ngIf="record.metadata.issue.status === issueItemStatus.RECEIVED; else notYetReceived">
-          {{ record.metadata.issue.received_date | dateTranslate }}
-        </ng-container>
-        <ng-template #notYetReceived>
-          <span class="no-data" translate>Not yet received</span>
-        </ng-template>
-      </dd>
-      <!-- issue status -->
-      <dt class="col-3 abel-title" translate>Status</dt>
-      <dd class="col-9">
-        <i class="fa" [ngClass]="getIcon(record.metadata.issue.status)"></i>
-        {{ record.metadata.issue.status | translate }} ({{ record.metadata.issue.status_date | dateTranslate }})
-      </dd>
-    </dl>
-  </section>
+  @if (isIssue) {
+    <section>
+      <header>
+        <h3 translate>Issue data</h3>
+      </header>
+      <dl class="row">
+        <!-- is regular -->
+        <dt class="col-3 label-title" translate>Regular issue</dt>
+        <dd class="col-9">
+          <i class="fa"
+              [ngClass]="(record.metadata.issue.regular) ? 'fa-check text-success' : 'fa-times text-danger'"
+              aria-hidden="true">
+          </i>
+        </dd>
+        <!-- expected date -->
+        <dt class="col-3 label-title" translate>Expected date</dt>
+        <dd class="col-9">{{ record.metadata.issue.expected_date | dateTranslate }}</dd>
+        <!-- received date -->
+        <dt class="col-3 label-title" translate>Received date</dt>
+        <dd class="col-9">
+          @if (record.metadata.issue.status === issueItemStatus.RECEIVED) {
+            {{ record.metadata.issue.received_date | dateTranslate }}
+          } @else {
+            <span class="no-data" translate>Not yet received</span>
+          }
+        </dd>
+        <!-- issue status -->
+        <dt class="col-3 abel-title" translate>Status</dt>
+        <dd class="col-9">
+          <i class="fa" [ngClass]="getIcon(record.metadata.issue.status)"></i>
+          {{ record.metadata.issue.status | translate }} ({{ record.metadata.issue.status_date | dateTranslate }})
+        </dd>
+      </dl>
+    </section>
+  }
 
   <!-- NOTES -->
-  <section *ngIf="record.metadata.notes">
-    <div class="card item-notes">
-      <div class="card-header" translate>Notes</div>
-      <div class="card-body">
-        <div class="row mb-1" *ngFor="let note of record.metadata.notes">
-          <dt class="col-3 label-title">
-            <i class="fa mr-4 small"
-               [ngClass]="{
-                  'fa-eye text-success': isPublicNote(note),
-                  'fa-eye-slash text-secondary': !isPublicNote(note)
-               }"
-            ></i>
-            <strong translate>{{ note.type }}</strong>
-          </dt>
-          <dd class="col-9 text-justify" [innerHTML]="note.content | nl2br"></dd>
+  @if (record.metadata.notes) {
+    <section>
+      <div class="card item-notes">
+        <div class="card-header" translate>Notes</div>
+        <div class="card-body">
+          @for (note of record.metadata.notes; track note) {
+            <div class="row mb-1">
+              <dt class="col-3 label-title">
+                <i class="fa mr-4 small"
+                    [ngClass]="{
+                      'fa-eye text-success': isPublicNote(note),
+                      'fa-eye-slash text-secondary': !isPublicNote(note)
+                    }"
+                ></i>
+                <strong translate>{{ note.type }}</strong>
+              </dt>
+              <dd class="col-9 text-justify" [innerHTML]="note.content | nl2br"></dd>
+            </div>
+          }
+        </div>
+        <div class="card-footer text-muted small">
+          <i class="fa fa-eye text-success"></i> {{ 'Public notes' | translate }}
+          <i class="fa fa-eye-slash text-secondary ml-4"></i> {{ 'Staff notes' | translate }}
         </div>
       </div>
-      <div class="card-footer text-muted small">
-        <i class="fa fa-eye text-success"></i> {{ 'Public notes' | translate }}
-        <i class="fa fa-eye-slash text-secondary ml-4"></i> {{ 'Staff notes' | translate }}
-      </div>
-    </div>
-  </section>
+    </section>
+  }
 
   <!-- LEGACY -->
-  <ng-container *ngIf="(record.metadata | keyExists:'legacy_checkout_count') || (record.metadata | keyExists:'legacy_circulation_rules')">
+  @if ((record.metadata | keyExists:'legacy_checkout_count') || (record.metadata | keyExists:'legacy_circulation_rules')) {
     <section class="mb-4 mt-4">
-      <header class="row">
-        <h4 translate>Legacy circulation rules</h4>
-      </header>
-      <dl class="row mb-0">
-        <!-- LEGACY CHECKOUT COUNT -->
-        <ng-container *ngIf="record.metadata | keyExists:'legacy_checkout_count'">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
-            Checkout count
-          </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ record.metadata.legacy_checkout_count }}
-          </dd>
-        </ng-container>
-        <!-- LEGACY LOAN DURATION -->
-        <ng-container *ngIf="record.metadata.legacy_circulation_rules | keyExists:'loan_duration'">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
-            Loan duration
-          </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ record.metadata.legacy_circulation_rules.loan_duration }}
-          </dd>
-        </ng-container>
-        <!-- LEGACY USE ITEM SPECIFIC RULES -->
-        <ng-container *ngIf="record.metadata.legacy_circulation_rules | keyExists:'use_item_specific_rules'">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
-            Use item specific rules
-          </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            <i
-              class="fa fa-circle"
-              [ngClass]="{
-                'text-danger': !record.metadata.legacy_circulation_rules.use_item_specific_rules,
-                'text-success': !record.metadata.legacy_circulation_rules.use_item_specific_rules
-              }"
-              aria-hidden="true"
-            ></i>
-          </dd>
-        </ng-container>
-        <!-- LEGACY ALLOW REQUEST -->
-        <ng-container *ngIf="record.metadata.legacy_circulation_rules | keyExists:'allow_request'">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
-            Allow request
-          </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            <i
-              class="fa fa-circle"
-              [ngClass]="{
-                'text-danger': !record.metadata.legacy_circulation_rules.allow_request,
-                'text-success': record.metadata.legacy_circulation_rules.allow_request }"
-              aria-hidden="true"
-            ></i>
-          </dd>
-        </ng-container>
-        <!-- LEGACY ALLOW REQUEST -->
-        <ng-container *ngIf="record.metadata.legacy_circulation_rules | keyExists:'floats'">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
-            Floats
-          </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            <i
-              class="fa fa-circle"
-              [ngClass]="{
-                'text-danger': !record.metadata.legacy_circulation_rules.floats,
-                'text-success': record.metadata.legacy_circulation_rules.floats
-              }"
-              aria-hidden="true"
-            ></i>
-          </dd>
-        </ng-container>
-      </dl>
+      <div class="card">
+        <div class="card-header" translate>Legacy circulation rules</div>
+        <div class="card-body">
+          <dl class="row mb-0">
+            <!-- LEGACY CHECKOUT COUNT -->
+            @if (record.metadata | keyExists:'legacy_checkout_count') {
+              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
+                Checkout count
+              </dt>
+              <dd class="col-sm-7 col-md-8 mb-0">
+                {{ record.metadata.legacy_checkout_count }}
+              </dd>
+            }
+            <!-- LEGACY LOAN DURATION -->
+            @if (record.metadata.legacy_circulation_rules | keyExists:'loan_duration') {
+              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
+                Loan duration
+              </dt>
+              <dd class="col-sm-7 col-md-8 mb-0">
+                {{ record.metadata.legacy_circulation_rules.loan_duration }}
+              </dd>
+            }
+            <!-- LEGACY USE ITEM SPECIFIC RULES -->
+            @if (record.metadata.legacy_circulation_rules | keyExists:'use_item_specific_rules') {
+              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
+                Use item specific rules
+              </dt>
+              <dd class="col-sm-7 col-md-8 mb-0">
+                <i
+                  class="fa fa-circle"
+                  [ngClass]="{
+                    'text-danger': !record.metadata.legacy_circulation_rules.use_item_specific_rules,
+                    'text-success': !record.metadata.legacy_circulation_rules.use_item_specific_rules
+                  }"
+                  aria-hidden="true"
+                ></i>
+              </dd>
+            }
+            <!-- LEGACY ALLOW REQUEST -->
+            @if (record.metadata.legacy_circulation_rules | keyExists:'allow_request') {
+              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
+                Allow request
+              </dt>
+              <dd class="col-sm-7 col-md-8 mb-0">
+                <i
+                  class="fa fa-circle"
+                  [ngClass]="{
+                    'text-danger': !record.metadata.legacy_circulation_rules.allow_request,
+                    'text-success': record.metadata.legacy_circulation_rules.allow_request }"
+                  aria-hidden="true"
+                ></i>
+              </dd>
+            }
+
+            <!-- LEGACY ALLOW REQUEST -->
+            @if (record.metadata.legacy_circulation_rules | keyExists:'floats') {
+              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
+                Floats
+              </dt>
+              <dd class="col-sm-7 col-md-8 mb-0">
+                <i
+                  class="fa fa-circle"
+                  [ngClass]="{
+                    'text-danger': !record.metadata.legacy_circulation_rules.floats,
+                    'text-success': record.metadata.legacy_circulation_rules.floats
+                  }"
+                  aria-hidden="true"
+                ></i>
+              </dd>
+            }
+          </dl>
+        </div>
+      </div>
     </section>
-  </ng-container>
+  }
 
   <!-- TABS -->
   <section class="mt-3 mb-4">
@@ -285,43 +304,37 @@ <h4 translate>Legacy circulation rules</h4>
       </tab>
       <!-- END OF LOCAL FIELDS TAB ---------------------------------------------------->
       <!-- CLAIMS TAB ------------------------------------------------------------>
-      <tab *ngIf="record.metadata?.issue?.claims" id="documents-claims-tab" tabOrder="2">
-        <ng-template tabHeading>
-          <i class="fa fa-gavel mr-1"></i>
-            <span [ngPlural]="record.metadata.issue.claims.counter">
-              <ng-template ngPluralCase="=0">{{ 'Claim' | translate }}</ng-template>
-              <ng-template ngPluralCase="=1">{{ 'Claim' | translate }}</ng-template>
-              <ng-template ngPluralCase="other">{{ 'Claims' | translate }}</ng-template>
-            </span>
-            <span class="ml-2 badge badge-info font-weight-normal">{{ record.metadata.issue.claims.counter }}</span>
-        </ng-template>
-        <div class="mt-2">
-          <ul>
-            <li *ngFor="let date of claimsDates">
-              {{ date | dateTranslate: 'shortDate' }} - {{ date | dateTranslate: 'shortTime' }}
-            </li>
-          </ul>
-        </div>
-      </tab>
+      @if (record.metadata?.issue?.claims) {
+        <tab id="documents-claims-tab" tabOrder="2">
+          <ng-template tabHeading>
+            <i class="fa fa-gavel mr-1"></i>
+              <span [ngPlural]="record.metadata.issue.claims.counter">
+                <ng-template ngPluralCase="=0">{{ 'Claim' | translate }}</ng-template>
+                <ng-template ngPluralCase="=1">{{ 'Claim' | translate }}</ng-template>
+                <ng-template ngPluralCase="other">{{ 'Claims' | translate }}</ng-template>
+              </span>
+              <span class="ml-2 badge badge-info font-weight-normal">{{ record.metadata.issue.claims.counter }}</span>
+          </ng-template>
+          <div class="mt-2">
+            <ul>
+              <li *ngFor="let date of claimsDates">
+                {{ date | dateTranslate: 'shortDate' }} - {{ date | dateTranslate: 'shortTime' }}
+              </li>
+            </ul>
+          </div>
+        </tab>
+      }
     </tabset>
   </section>
 
   <!-- TRANSACTIONS -->
-  <admin-item-transactions
-    [itemPid]="record.metadata.pid"
-    (requestEvent)="updateItemStatus()"
-  ></admin-item-transactions>
+  <admin-item-transactions [itemPid]="record.metadata.pid" (requestEvent)="updateItemStatus()"></admin-item-transactions>
 
   <!-- OPERATION LOGS-->
-  <admin-operation-logs-dialog
-    *ngIf="isEnabledOperationLog"
-    [resourceType]="'items'"
-    [resourcePid]="record.metadata.pid"
-  ></admin-operation-logs-dialog>
+  @if (isEnabledOperationLog) {
+    <admin-operation-logs-dialog [resourceType]="'items'" [resourcePid]="record.metadata.pid"></admin-operation-logs-dialog>
+  }
 
   <!-- CIRCULATION LOGS -->
-  <admin-circulation-logs-dialog
-    [resourcePid]="record.metadata.pid"
-    [resourceType]="'item'"
-  ></admin-circulation-logs-dialog>
-</ng-container>
+  <admin-circulation-logs-dialog [resourcePid]="record.metadata.pid" [resourceType]="'item'"></admin-circulation-logs-dialog>
+}
diff --git a/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.ts b/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.ts
index 8bd67647b..0625fcd16 100644
--- a/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -54,14 +54,14 @@ export class ItemDetailViewComponent implements DetailRecord, OnInit, OnDestroy
   recordPermissions: any;
 
   /** Record subscription */
-  private _recordObs: Subscription;
+  private recordObs: Subscription;
 
   /**
    * Is operation log enabled
    * @return boolean
    */
   get isEnabledOperationLog(): boolean {
-    return this._operationLogsService.isLogVisible('items');
+    return this.operationLogsService.isLogVisible('items');
   }
 
   /**
@@ -85,12 +85,12 @@ export class ItemDetailViewComponent implements DetailRecord, OnInit, OnDestroy
    * @return string
    */
   get organisationCurrency(): string {
-    return this._organisationService.organisation.default_currency;
+    return this.organisationService.organisation.default_currency;
   }
 
   /** Allow claim (show button) */
   get isClaimAllowed(): boolean {
-    return this._issueService.isClaimAllowed(this.record.metadata.issue.status);
+    return this.issueService.isClaimAllowed(this.record.metadata.issue.status);
   }
 
   /** returns an array of claim dates in DESC order */
@@ -108,46 +108,46 @@ export class ItemDetailViewComponent implements DetailRecord, OnInit, OnDestroy
   /**
    * Constructor
    * @param itemApiService - ItemApiService
-   * @param _recordService - RecordService
-   * @param _holdingService - HoldingsService
-   * @param _operationLogsService - OperationLogsService
-   * @param _organisationService - OrganisationService
-   * @param _issueService - IssueService
-   * @param _recordPermissionService - RecordPermissionService
-   * @param _userService - UserService
+   * @param recordService - RecordService
+   * @param holdingService - HoldingsService
+   * @param operationLogsService - OperationLogsService
+   * @param organisationService - OrganisationService
+   * @param issueService - IssueService
+   * @param recordPermissionService - RecordPermissionService
+   * @param userService - UserService
    */
   constructor(
     public itemApiService: ItemApiService,
-    private _recordService: RecordService,
-    private _holdingService: HoldingsService,
-    private _operationLogsService: OperationLogsService,
-    private _organisationService: OrganisationService,
-    private _issueService: IssueService,
-    private _recordPermissionService: RecordPermissionService,
-    private _userService: UserService
+    private recordService: RecordService,
+    private holdingService: HoldingsService,
+    private operationLogsService: OperationLogsService,
+    private organisationService: OrganisationService,
+    private issueService: IssueService,
+    private recordPermissionService: RecordPermissionService,
+    private userService: UserService
   ) {}
 
   /** OnInit hook */
   ngOnInit(): void {
-    this._recordObs = this.record$.pipe(
+    this.recordObs = this.record$.pipe(
       switchMap((record: any) => {
-        return this._recordPermissionService.getPermission('items', record.metadata.pid).pipe(
+        return this.recordPermissionService.getPermission('items', record.metadata.pid).pipe(
           map(permission => {
-            this.recordPermissions = this._recordPermissionService
-              .membership(this._userService.user, record.metadata.library.pid, permission);
+            this.recordPermissions = this.recordPermissionService
+              .membership(this.userService.user, record.metadata.library.pid, permission);
             return record;
           })
         )
       })
     ).subscribe((record: any) => {
       this.record = record;
-      this._recordService.getRecord('locations', record.metadata.location.pid, 1).subscribe(data => this.location = data);
+      this.recordService.getRecord('locations', record.metadata.location.pid, 1).subscribe(data => this.location = data);
     });
   }
 
   /** OnDestroy hook */
   ngOnDestroy() {
-    this._recordObs.unsubscribe();
+    this.recordObs.unsubscribe();
   }
 
   /**
@@ -173,7 +173,7 @@ export class ItemDetailViewComponent implements DetailRecord, OnInit, OnDestroy
 
   /** Update item status */
   updateItemStatus(): void {
-    this._recordService.getRecord('items', this.record.metadata.pid, 1)
+    this.recordService.getRecord('items', this.record.metadata.pid, 1)
       .subscribe((item: any) => this.record = item);
   }
 
@@ -182,12 +182,12 @@ export class ItemDetailViewComponent implements DetailRecord, OnInit, OnDestroy
    * @return string
    */
   getIcon(status: IssueItemStatus): string {
-    return this._holdingService.getIcon(status);
+    return this.holdingService.getIcon(status);
   }
 
   /** Open claim dialog */
   openClaimEmailDialog(): void {
-    const bsModalRef = this._issueService.openClaimEmailDialog(this.record);
+    const bsModalRef = this.issueService.openClaimEmailDialog(this.record);
     bsModalRef.content.recordChange.subscribe(() => this.record$
       .subscribe((record: any) => this.record = record));
   }
diff --git a/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.html b/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.html
index fc455c9d8..bac7e3105 100644
--- a/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.html
+++ b/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,26 +15,26 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<ng-container *ngIf="transaction">
-  <ng-container *ngIf="transaction.metadata.patron_pid | getRecord:'patrons' | async as patron">
-    <div id="{{patron.metadata.patron.barcode[0]}}" class="row mb-2">
+@if (transaction) {
+  @if (transaction.metadata.patron_pid | getRecord:'patrons' | async; as patron) {
+    <div id="{{ $any(patron).metadata.patron.barcode[0] }}" class="row mb-2">
       <div class="col-4">
-        <a name="loans" [routerLink]="['/circulation', 'patron', patron.metadata.patron.barcode[0]]">
-          {{ patron.metadata.last_name }} {{ patron.metadata.first_name }} ({{ patron.metadata.patron.barcode }})
+        <a name="loans" [routerLink]="['/circulation', 'patron', $any(patron).metadata.patron.barcode[0]]">
+          {{ $any(patron).metadata.last_name }} {{ $any(patron).metadata.first_name }} ({{ $any(patron).metadata.patron.barcode }})
         </a>
       </div>
       <!-- LOANS (BORROW) -->
-      <ng-container *ngIf="type === 'loan_borrow'">
+      @if (type === 'loan_borrow') {
         <div class="col-4">
           {{ transaction.metadata.extension_count ?  transaction.metadata.extension_count : '-' }}
         </div>
         <div class="col-3">
           {{ transaction.metadata.end_date | dateTranslate:'longDate' }}
         </div>
-      </ng-container>
+      }
       <!-- REQUESTS -->
-      <ng-container *ngIf="type === 'loan_request' && pickupLocations && pickupLocations.length > 0">
-        <ng-container *ngIf="canUpdateRequestPickupLocation(); else pickupLocationName">
+      @if (type === 'loan_request' && pickupLocations && pickupLocations.length > 0) {
+        @if (canUpdateRequestPickupLocation()) {
           <div class="btn-group col-4" dropdown>
             <button class="btn btn-outline-secondary btn-block d-md-block dropdown-toggle  dropdown-toggle-split text-left" type="button"
                     dropdownToggle aria-controls="dropdown-animated" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
@@ -42,39 +42,41 @@
               {{ currentPickupLocation }}
             </button>
             <ul id="dropdown-animated" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="dropdown-animated">
-              <li role="menuitem" *ngFor="let pickup of pickupLocations; let i = index">
-                <a class="dropdown-item" (click)="emitUpdatePickupLocation(pickup.value)">{{ pickup.label }}</a>
-              </li>
+              @for (pickup of pickupLocations; track pickup; let i = $index) {
+                <li role="menuitem">
+                  <a class="dropdown-item" (click)="emitUpdatePickupLocation(pickup.value)">{{ pickup.label }}</a>
+                </li>
+              }
             </ul>
           </div>
-        </ng-container>
-        <ng-template #pickupLocationName>
+        } @else {
           <div name="location" class="col-4" title="{{'The pickup location cannot be modified' | translate }}">
             {{ transaction.metadata.pickup_location_pid | getRecord:'locations':'field':'pickup_name' | async }}
           </div>
-        </ng-template>
+        }
         <div class="col-3">
           {{ transaction.created | dateTranslate:'medium' }}
         </div>
         <div class="col-1 text-right">
-          <ng-container *ngIf="canCancelRequest(); else noCancel">
-            <button type="button"
-                    class="btn btn-outline-danger btn-sm"
-                    (click)="showCancelRequestDialog()"
-                    name="cancel">
+          @if (canCancelRequest()) {
+            <button type="button" class="btn btn-outline-danger btn-sm"
+              (click)="showCancelRequestDialog()"
+              name="cancel"
+            >
               <i class="fa fa-trash-o" aria-hidden="true"></i>
             </button>
-          </ng-container>
-          <ng-template #noCancel>
+          } @else {
             <button type="button" class="btn btn-outline-danger btn-sm"
-                    title="{{'The request cannot be cancelled' | translate }}"
-                    name="cancel"
-                    disabled>
+              title="{{'The request cannot be cancelled' | translate }}"
+              name="cancel"
+              disabled
+            >
               <i class="fa fa-trash-o" aria-hidden="true"></i>
             </button>
-          </ng-template>
+          }
         </div>
-      </ng-container>
+      }
     </div>
-  </ng-container>
-</ng-container>
+  }
+}
+
diff --git a/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.ts b/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.ts
index fa505c1f2..d8e492f62 100644
--- a/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.ts
+++ b/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -47,13 +47,13 @@ export class ItemTransactionComponent implements OnInit, OnDestroy {
   pickupLocations: any;
 
   /** Pickup default $ref */
-  private _pickupDefaultValue: string;
+  private pickupDefaultValue: string;
   /** Current user */
-  private _currentUser: any;
+  private currentUser: any;
   /** Pickup locations observable reference */
-  private _pickupLocations$: any;
+  private pickupLocations$: any;
   /** Authorized Transaction Type to load pickup locations */
-  private _authorizedTypeToLoadPickupLocations = [
+  private authorizedTypeToLoadPickupLocations = [
     'loan_request'
   ];
 
@@ -67,30 +67,30 @@ export class ItemTransactionComponent implements OnInit, OnDestroy {
     if (location != null) {
       return location.label;
     }
-    return this._translateService.instant('No pickup location');
+    return this.translateService.instant('No pickup location');
   }
 
 
   // CONSTRUCTOR & HOOKS ==================================================================
   /**
    * constructor
-   * @param _userService - User service
-   * @param _translateService - TranslateService
-   * @param _itemService - ItemsService
-   * @param _loanService - LoanService
+   * @param userService - User service
+   * @param translateService - TranslateService
+   * @param itemService - ItemsService
+   * @param loanService - LoanService
    */
   constructor(
-    private _userService: UserService,
-    private _translateService: TranslateService,
-    private _itemService: ItemsService,
-    private _loanService: LoanService
+    private userService: UserService,
+    private translateService: TranslateService,
+    private itemService: ItemsService,
+    private loanService: LoanService
   ) {}
 
   /** OnInit hook */
   ngOnInit() {
-    this._currentUser = this._userService.user;
-    if (this._authorizedTypeToLoadPickupLocations.includes(this.type)) {
-      this._pickupLocations$ = this.getPickupLocations().subscribe((pickups) => {
+    this.currentUser = this.userService.user;
+    if (this.authorizedTypeToLoadPickupLocations.includes(this.type)) {
+      this.pickupLocations$ = this.getPickupLocations().subscribe((pickups) => {
         this.pickupLocations = pickups;
       });
     }
@@ -98,8 +98,8 @@ export class ItemTransactionComponent implements OnInit, OnDestroy {
 
   /** OnDestroy hook */
   ngOnDestroy() {
-    if (this._authorizedTypeToLoadPickupLocations.includes(this.type)) {
-      this._pickupLocations$.unsubscribe();
+    if (this.authorizedTypeToLoadPickupLocations.includes(this.type)) {
+      this.pickupLocations$.unsubscribe();
     }
   }
 
@@ -110,7 +110,7 @@ export class ItemTransactionComponent implements OnInit, OnDestroy {
    * @returns true if it is possible to cancel a loan
    */
   canCancelRequest(): boolean {
-    return this._loanService.canCancelRequest(this.transaction);
+    return this.loanService.canCancelRequest(this.transaction);
   }
 
   /**
@@ -118,12 +118,12 @@ export class ItemTransactionComponent implements OnInit, OnDestroy {
    * @returns true if it is possible to update pickup location.
    */
   canUpdateRequestPickupLocation(): boolean {
-    return this._loanService.canUpdateRequestPickupLocation(this.transaction);
+    return this.loanService.canUpdateRequestPickupLocation(this.transaction);
   }
 
   /** Show a confirmation dialog box for cancel request. */
   showCancelRequestDialog(): void {
-    this._loanService.cancelRequestDialog().subscribe((confirm: boolean) => {
+    this.loanService.cancelRequestDialog().subscribe((confirm: boolean) => {
       if (confirm) {
         this.emitCancelRequest();
       }
@@ -146,11 +146,11 @@ export class ItemTransactionComponent implements OnInit, OnDestroy {
 
   /** Get pickups by organisation pid */
   private getPickupLocations(): Observable<{label: string, value: string}> {
-    const currentLibrary = this._currentUser.currentLibrary;
-    return this._itemService.getPickupLocations(this.itemPid).pipe(
+    const { currentLibrary } = this.currentUser;
+    return this.itemService.getPickupLocations(this.itemPid).pipe(
         map(locations => locations.map((loc: any) => {
-          if (this._pickupDefaultValue === undefined && loc.library.pid === currentLibrary) {
-            this._pickupDefaultValue = loc.pid;
+          if (this.pickupDefaultValue === undefined && loc.library.pid === currentLibrary) {
+            this.pickupDefaultValue = loc.pid;
           }
           return {
             label: loc.pickup_name || loc.name,
diff --git a/projects/admin/src/app/record/detail-view/item-detail-view/item-transactions/item-transactions.component.html b/projects/admin/src/app/record/detail-view/item-detail-view/item-transactions/item-transactions.component.html
index 8538ef084..44eb46074 100644
--- a/projects/admin/src/app/record/detail-view/item-detail-view/item-transactions/item-transactions.component.html
+++ b/projects/admin/src/app/record/detail-view/item-detail-view/item-transactions/item-transactions.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-   Copyright (C) 2019-2022 RERO
+   Copyright (C) 2019-2024 RERO
 
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
@@ -16,7 +16,7 @@
 -->
 <div class="card mt-2" id="item-loans-requests" [permissions]="permissions.CIRC_ADMIN">
   <!-- Loan borrowed -->
-  <ng-container *ngIf="borrowedBy.length > 0">
+  @defer(when borrowedBy.length > 0) {
     <div class="card-header font-weight-bold" translate>Borrowed by</div>
     <div class="card-body">
       <div class="row mb-2">
@@ -24,36 +24,41 @@
         <div class="col-4 font-weight-bold" translate>Renewal</div>
         <div class="col-3 font-weight-bold" translate>Due date</div>
       </div>
-      <admin-item-transaction
-        type="loan_borrow"
-        [transaction]="borrowedBy[0]"
-      ></admin-item-transaction>
+      <admin-item-transaction type="loan_borrow" [transaction]="borrowedBy[0]"></admin-item-transaction>
     </div>
-  </ng-container>
-  <!-- Loan requested -->
+  } @placeholder {
+    <i class="fa fa-spinner"></i> {{ 'loading in progress...' | translate }}
+  }
 
+  <!-- Loan requested -->
   <div class="card-header">
     <b translate>Requested by</b>
     <button class="btn btn-outline-primary btn-link btn-sm ml-2 float-right" (click)="addRequest()">
       <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} …
     </button>
   </div>
-  <div class="card-body" *ngIf="requestedBy.length > 0 else noRequest">
-    <div class="row mb-2">
-      <div class="col-4 font-weight-bold" translate>Patron</div>
-      <div class="col-4 font-weight-bold" translate>Pick-up Location</div>
-      <div class="col-3 font-weight-bold" translate>Request date</div>
-    </div>
-    <admin-item-transaction
-      *ngFor="let request of requestedBy"
-      type="loan_request"
-      [transaction]="request"
-      [itemPid]="itemPid"
-      (cancelRequestEvent)="cancelRequest($event)"
-      (updatePickupLocationEvent)="updateRequestPickupLocation($event)"
-    ></admin-item-transaction>
-  </div>
-  <ng-template #noRequest>
-    <div class="p-3" translate>No pending request</div>
-  </ng-template>
+  @defer (when requestedBy) {
+    @if (requestedBy.length > 0) {
+      <div class="card-body">
+        <div class="row mb-2">
+          <div class="col-4 font-weight-bold" translate>Patron</div>
+          <div class="col-4 font-weight-bold" translate>Pick-up Location</div>
+          <div class="col-3 font-weight-bold" translate>Request date</div>
+        </div>
+        @for (request of requestedBy; track request) {
+          <admin-item-transaction
+            type="loan_request"
+            [transaction]="request"
+            [itemPid]="itemPid"
+            (cancelRequestEvent)="cancelRequest($event)"
+            (updatePickupLocationEvent)="updateRequestPickupLocation($event)"
+          ></admin-item-transaction>
+        }
+      </div>
+    } @else {
+      <div class="p-3" translate>No pending request</div>
+    }
+  } @placeholder {
+    <i class="fa fa-spinner"></i> {{ 'loading in progress...' | translate }}
+  }
 </div>
diff --git a/projects/admin/src/app/record/detail-view/item-detail-view/item-transactions/item-transactions.component.ts b/projects/admin/src/app/record/detail-view/item-detail-view/item-transactions/item-transactions.component.ts
index ec129746a..3bea04209 100644
--- a/projects/admin/src/app/record/detail-view/item-detail-view/item-transactions/item-transactions.component.ts
+++ b/projects/admin/src/app/record/detail-view/item-detail-view/item-transactions/item-transactions.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -49,24 +49,24 @@ export class ItemTransactionsComponent implements OnInit {
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _loanService - LoanService
-   * @param _modalService - BsModalService
-   * @param _toastrService - ToastrService
-   * @param _translateService - TranslateService
-   * @param _userService - UserService
+   * @param loanService - LoanService
+   * @param modalService - BsModalService
+   * @param toastrService - ToastrService
+   * @param translateService - TranslateService
+   * @param userService - UserService
    */
   constructor(
-    private _loanService: LoanService,
-    private _modalService: BsModalService,
-    private _toastrService: ToastrService,
-    private _translateService: TranslateService,
-    private _userService: UserService
+    private loanService: LoanService,
+    private modalService: BsModalService,
+    private toastrService: ToastrService,
+    private translateService: TranslateService,
+    private userService: UserService
   ) { }
 
   /** OnInit hook */
   ngOnInit() {
-    const borrowedBy$ = this._loanService.borrowedBy$(this.itemPid);
-    const requestedBy$ = this._loanService.requestedBy$(this.itemPid);
+    const borrowedBy$ = this.loanService.borrowedBy$(this.itemPid);
+    const requestedBy$ = this.loanService.requestedBy$(this.itemPid);
     forkJoin([borrowedBy$, requestedBy$])
       .subscribe(([borrowedLoan, requestedLoans]) => {
         this.borrowedBy = borrowedLoan;
@@ -79,7 +79,7 @@ export class ItemTransactionsComponent implements OnInit {
    * Add request on this item
    */
   addRequest(): void {
-    const modalRef = this._modalService.show(ItemRequestComponent, {
+    const modalRef = this.modalService.show(ItemRequestComponent, {
       initialState: { recordPid: this.itemPid, recordType: 'item' }
     });
     modalRef.content.onSubmit
@@ -95,13 +95,13 @@ export class ItemTransactionsComponent implements OnInit {
    * @param transaction - request to cancel
    */
   cancelRequest(transaction: any): void {
-    this._loanService
-      .cancelLoan(this.itemPid, transaction.metadata.pid, this._userService.user.currentLibrary)
+    this.loanService
+      .cancelLoan(this.itemPid, transaction.metadata.pid, this.userService.user.currentLibrary)
       .subscribe((itemData: any) => {
-        const status = this._translateService.instant(itemData.status);
-        this._toastrService.warning(
-          this._translateService.instant('The pending request has been cancelled.'),
-          this._translateService.instant('Request')
+        const status = this.translateService.instant(itemData.status);
+        this.toastrService.warning(
+          this.translateService.instant('The pending request has been cancelled.'),
+          this.translateService.instant('Request')
         );
         this.requestEvent.emit();
         this._refreshRequestList();
@@ -113,12 +113,12 @@ export class ItemTransactionsComponent implements OnInit {
    * @param data - pickup location pid to change
    */
   updateRequestPickupLocation(data: any): void {
-    this._loanService
+    this.loanService
       .updateLoanPickupLocation(data.transaction.metadata.pid, data.pickupLocationPid)
       .subscribe(_ => {
-        this._toastrService.success(
-          this._translateService.instant('The pickup location has been changed.'),
-          this._translateService.instant('Request')
+        this.toastrService.success(
+          this.translateService.instant('The pickup location has been changed.'),
+          this.translateService.instant('Request')
         );
         this._refreshRequestList();
       });
@@ -129,7 +129,7 @@ export class ItemTransactionsComponent implements OnInit {
    * Refresh the request list
    */
   private _refreshRequestList(): void {
-    this._loanService
+    this.loanService
       .requestedBy$(this.itemPid)
       .subscribe(requestedLoans =>
         this.requestedBy = requestedLoans
diff --git a/projects/admin/src/app/record/detail-view/item-type-detail-view/item-type-detail-view.component.html b/projects/admin/src/app/record/detail-view/item-type-detail-view/item-type-detail-view.component.html
index 589e54cd4..c4f71d794 100644
--- a/projects/admin/src/app/record/detail-view/item-type-detail-view/item-type-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/item-type-detail-view/item-type-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,14 +14,14 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record$ | async as record">
+@if (record$ | async; as record) {
   <h1 class="mb-5">{{ record.metadata.name }}</h1>
   <dl class="row">
-    <!-- DESCRIPTIION -->
-    <ng-container *ngIf="record.metadata.description">
+    <!-- DESCRIPTION -->
+    @if (record.metadata.description) {
       <dt class="col-3 label-title" translate>Description</dt>
       <dd class="col-9">{{ record.metadata.description }}</dd>
-    </ng-container>
+    }
     <!-- TYPE -->
     <dt class="col-3 label-title" translate>Type</dt>
     <dd class="col-9">{{ record.metadata.type }}</dd>
@@ -34,34 +34,36 @@ <h1 class="mb-5">{{ record.metadata.name }}</h1>
       }"></i>
     </dd>
     <!-- DISPLAYED status -->
-    <ng-container *ngIf="record.metadata.displayed_status">
+    @if (record.metadata.displayed_status) {
       <dt class="col-3 label-title" translate>Displayed status</dt>
       <dd class="col-9">
         <ul class="list-unstyled m-0 p-0">
-          <li *ngFor="let status of record.metadata.displayed_status">
-            <span class="small font-weight-bold text-info language-statement">
-              <i class="fa fa-language"></i>
-              ({{ status.language }})
-            </span>
-            {{ status.label }}
-          </li>
+          @for (status of record.metadata.displayed_status; track status) {
+            <li>
+              <span class="small font-weight-bold text-info language-statement">
+                <i class="fa fa-language"></i> ({{ status.language }})
+              </span>
+              {{ status.label }}
+            </li>
+          }
         </ul>
       </dd>
-    </ng-container>
-    <!-- CIRCULATION INFORMATIONS -->
-    <ng-container *ngIf="record.metadata.circulation_information">
+    }
+    <!-- CIRCULATION INFORMATION'S -->
+    @if (record.metadata.circulation_information) {
       <dt class="col-3 label-title" translate>Circulation information</dt>
       <dd class="col-9">
         <ul class="list-unstyled m-0 p-0">
-        <li *ngFor="let circulation of record.metadata.circulation_information">
-          <span class="small font-weight-bold text-info language-statement">
-            <i class="fa fa-language"></i>
-            ({{ circulation.language }})
-          </span>
-          {{ circulation.label }}
-        </li>
+          @for (circulation of record.metadata.circulation_information; track circulation) {
+            <li>
+              <span class="small font-weight-bold text-info language-statement">
+                <i class="fa fa-language"></i> ({{ circulation.language }})
+              </span>
+              {{ circulation.label }}
+            </li>
+          }
         </ul>
       </dd>
-    </ng-container>
+    }
   </dl>
-</ng-container>
+}
diff --git a/projects/admin/src/app/record/detail-view/item-type-detail-view/item-type-detail-view.component.ts b/projects/admin/src/app/record/detail-view/item-type-detail-view/item-type-detail-view.component.ts
index 32d1beb4e..b7a74541e 100644
--- a/projects/admin/src/app/record/detail-view/item-type-detail-view/item-type-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/item-type-detail-view/item-type-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -28,6 +28,4 @@ export class ItemTypeDetailViewComponent implements DetailRecord {
   record$: Observable<any>;
 
   type: string;
-
-  constructor() { }
 }
diff --git a/projects/admin/src/app/record/detail-view/library-detail-view/day-opening-hours/day-opening-hours.component.ts b/projects/admin/src/app/record/detail-view/library-detail-view/day-opening-hours/day-opening-hours.component.ts
index b1d3b5689..19a23d65d 100644
--- a/projects/admin/src/app/record/detail-view/library-detail-view/day-opening-hours/day-opening-hours.component.ts
+++ b/projects/admin/src/app/record/detail-view/library-detail-view/day-opening-hours/day-opening-hours.component.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
- * Copyright (C) 2022 UCLouvain
+ * Copyright (C) 2022-2024 RERO
+ * Copyright (C) 2022-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -29,12 +29,13 @@ import { Component, Input } from '@angular/core';
         }"></i>
       </dd>
       <dd class="col">
-        <ng-container *ngIf="day.is_open; else closed">
-          <span class="period" *ngFor="let time of day.times">{{ time.start_time }} - {{ time.end_time }}</span>
-        </ng-container>
-        <ng-template #closed>
+        @if (day.is_open) {
+          @for (time of day.times; track time) {
+            <span class="period">{{ time.start_time }} - {{ time.end_time }}</span>
+          }
+        } @else {
           <span class="text-danger" translate>Closed</span>
-        </ng-template>
+        }
       </dd>
     </dl>
   `,
diff --git a/projects/admin/src/app/record/detail-view/library-detail-view/exception-date/exception-date.component.html b/projects/admin/src/app/record/detail-view/library-detail-view/exception-date/exception-date.component.html
index 55053f7c4..388e2ed4b 100644
--- a/projects/admin/src/app/record/detail-view/library-detail-view/exception-date/exception-date.component.html
+++ b/projects/admin/src/app/record/detail-view/library-detail-view/exception-date/exception-date.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-   Copyright (C) 2019 RERO
+   Copyright (C) 2019-2024 RERO
 
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
@@ -14,28 +14,32 @@
    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div *ngIf="exception" class="row exception-date py-2" [ngClass]="{'over-exception': isOver(exception)}">
-  <div class="status col-1">
-    <i class="fa" aria-hidden="true" [ngClass]="{
-      'fa-circle text-success': exception.is_open,
-      'fa-ban text-danger': !exception.is_open
-    }"></i>
-  </div>
-  <span class="col-3">
-    {{ exception.start_date }}
-    <ng-container *ngIf="exception.end_date">
-      <i class="fa fa-long-arrow-right"></i> {{ exception.end_date }}
-    </ng-container>
-  </span>
-  <div class="col-2">
-    <ng-container *ngIf="exception.times">
-      <div class="time" *ngFor="let time of exception.times">{{ time.start_time }} - {{ time.end_time }}</div>
-    </ng-container>
-    <div *ngIf="exception.repeat">
-      <i class="fa fa-repeat pr-1"></i>
-      {{ exception.repeat.period | translate }}={{ exception.repeat.interval }}
+@if (exception) {
+  <div class="row exception-date py-2" [ngClass]="{'over-exception': isOver(exception)}">
+    <div class="status col-1">
+      <i class="fa" aria-hidden="true" [ngClass]="{
+        'fa-circle text-success': exception.is_open,
+        'fa-ban text-danger': !exception.is_open
+      }"></i>
+    </div>
+    <span class="col-3">
+      {{ exception.start_date }}
+      @if (exception.end_date) {
+        <i class="fa fa-long-arrow-right"></i> {{ exception.end_date }}
+      }
+    </span>
+    <div class="col-2">
+      @if (exception.times) {
+        @for (time of exception.times; track time) {
+          <div class="time">{{ time.start_time }} - {{ time.end_time }}</div>
+        }
+      }
+      @if (exception.repeat) {
+        <i class="fa fa-repeat pr-1"></i>
+        {{ exception.repeat.period | translate }}={{ exception.repeat.interval }}
+      }
     </div>
+    <span class="col">{{ exception.title }}</span>
+    <pre [hidden]="true" class="col-12">{{ exception | json }}</pre>
   </div>
-  <span class="col">{{ exception.title }}</span>
-  <pre [hidden]="true" class="col-12">{{ exception | json }}</pre>
-</div>
+}
diff --git a/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.html b/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.html
index 982717453..273b11944 100644
--- a/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,7 +15,7 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record">
+@if (record) {
   <section id="library-profile" class="container-fluid card p-0 my-3">
     <div class="card-body row">
       <div class="col-2">
@@ -29,14 +29,14 @@ <h1>{{ record.name }}</h1>
         <dl class="row library-metadata">
           <dt class="metadata-code offset-1 col-3" translate>Code</dt>
           <dd class="col-8">{{ record.code }}</dd>
-          <ng-container *ngIf="record.email">
+          @if (record.email) {
             <dt class="metadata-email offset-1 col-3" translate>Email</dt>
             <dd class="col-8">{{ record.email }}</dd>
-          </ng-container>
-          <ng-container *ngIf="record.address">
+          }
+          @if (record.address) {
             <dt class="metadata-address offset-1 col-3" translate>Address</dt>
             <dd class="col-8">{{ record.address }}</dd>
-          </ng-container>
+          }
           <dt class="metadata-language offset-1 col-3" translate>Language</dt>
           <dd class="col-8">{{ ('lang_' + record.communication_language) | translate | ucfirst }}</dd>
         </dl>
@@ -51,19 +51,25 @@ <h1>{{ record.name }}</h1>
         <div class="w-100 d-flex align-items-center">
           <i class="fa fa-map-marker mr-2"></i>
           <span translate>Locations</span>
-          <a *ngIf="isUserCanAddLocation && activeIndex === 0"
-             [routerLink]="['/', 'records', 'locations', 'new']" [queryParams]="{ library: record.pid }"
-             class="ml-2 btn btn-sm btn-outline-primary ml-auto">
-            <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} &hellip;
-          </a>
+          @if (isUserCanAddLocation && activeIndex === 0) {
+            <a
+              [routerLink]="['/', 'records', 'locations', 'new']"
+              [queryParams]="{ library: record.pid }"
+              class="ml-2 btn btn-sm btn-outline-primary ml-auto">
+              <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} &hellip;
+            </a>
+          }
         </div>
       </ng-template>
-      <ul class="list-group list-group-flush" *ngIf="locations; else no_locations">
-        <li *ngFor="let location of locations" class="list-group-item p-1">
-          <admin-location [location]="location" [library]="record" class="row" (deleteLocation)="deleteLocation($event)"></admin-location>
-        </li>
-      </ul>
-      <ng-template #no_locations><p translate>no location</p></ng-template>
+      @if (locations) {
+        <ul class="list-group list-group-flush">
+          <li *ngFor="let location of locations" class="list-group-item p-1">
+            <admin-location [location]="location" [library]="record" class="row" (deleteLocation)="deleteLocation($event)"></admin-location>
+          </li>
+        </ul>
+      } @else {
+        <p translate>no location</p>
+      }
     </p-accordionTab>
     <!-- opening hours ==================================================== -->
     <p-accordionTab>
@@ -71,43 +77,44 @@ <h1>{{ record.name }}</h1>
         <i class="fa fa-clock-o mr-2"></i>
         <span translate>Opening Hours</span>
         <div class="ml-auto opening-days-summary">
-          <i class="fa" *ngFor="let day of record.opening_hours"
-             [ngClass]="{
-                      'fa-times-circle-o text-danger': !day.is_open,
-                      'fa-circle text-success': day.is_open
-                   }"
-          ></i>
+          @for (day of record.opening_hours; track day) {
+            <i class="fa" [ngClass]="{'fa-times-circle-o text-danger': !day.is_open, 'fa-circle text-success': day.is_open}"></i>
+          }
         </div>
       </ng-template>
       <admin-day-opening-hours [day]="day" *ngFor="let day of record.opening_hours"></admin-day-opening-hours>
     </p-accordionTab>
     <!-- exception dates ================================================== -->
-    <p-accordionTab *ngIf="record.exception_dates">
-      <ng-template pTemplate="header">
-        <i class="fa fa-exclamation-triangle mr-2"></i>
-        <span translate>Exceptions (holidays, etc.)</span>
-        <span class="badge badge-primary ml-auto">{{ record.exception_dates.length }}</span>
-      </ng-template>
-      <admin-exception-date [exception]="exception" *ngFor="let exception of record.exception_dates"></admin-exception-date>
-    </p-accordionTab>
+    @if (record.exception_dates) {
+      <p-accordionTab>
+        <ng-template pTemplate="header">
+          <i class="fa fa-exclamation-triangle mr-2"></i>
+          <span translate>Exceptions (holidays, etc.)</span>
+          <span class="badge badge-primary ml-auto">{{ record.exception_dates.length }}</span>
+        </ng-template>
+        <admin-exception-date [exception]="exception" *ngFor="let exception of record.exception_dates"></admin-exception-date>
+      </p-accordionTab>
+    }
     <!-- notification settings ============================================ -->
     <p-accordionTab>
       <ng-template pTemplate="header">
         <i class="fa fa-envelope-o mr-2"></i>
         <span translate>Notification settings</span>
       </ng-template>
-      <dl class="row" *ngIf="record.notification_settings as notificationSettings">
-        <ng-container *ngFor="let setting of notificationSettings">
-          <dt class="col-3">{{ setting.type | translate | ucfirst }}:</dt>
-          <dd class="col-7">
-            {{ setting.email }}
-            <ng-container *ngIf="setting.delay">
-              ; {{ 'Delay' | translate }}: {{ setting.delay }}
-              {{ setting.delay > 1 ? ('minutes' | translate) : ('minute' | translate) }}
-            </ng-container>
-          </dd>
-        </ng-container>
-      </dl>
+      @if (record.notification_settings; as notificationSettings) {
+        <dl class="row">
+          @for (setting of notificationSettings; track setting) {
+            <dt class="col-3">{{ setting.type | translate | ucfirst }}:</dt>
+            <dd class="col-7">
+              {{ setting.email }}
+              @if (setting.delay) {
+                ; {{ 'Delay' | translate }}: {{ setting.delay }}
+                {{ setting.delay > 1 ? ('minutes' | translate) : ('minute' | translate) }}
+              }
+            </dd>
+          }
+        </dl>
+      }
     </p-accordionTab>
     <!-- acquisition settings ============================================= -->
     <p-accordionTab>
@@ -115,7 +122,7 @@ <h1>{{ record.name }}</h1>
         <i class="fa fa-university mr-2"></i>
         <span translate>Acquisition settings</span>
       </ng-template>
-      <ng-container *ngIf="record.acquisition_settings as acquisitionSettings">
+      @if (record.acquisition_settings; as acquisitionSettings) {
         <p-divider align="left" class="col-12 my-1">
           <div class="d-inline-flex align-items-center">
             <i class="fa fa-book mr-2"></i>
@@ -123,17 +130,19 @@ <h1>{{ record.name }}</h1>
           </div>
         </p-divider>
         <dl class="row justify-content-start">
-          <ng-container *ngIf="acquisitionSettings.shipping_informations as acqInfos"
-                        [ngTemplateOutlet]="address_block"
-                        [ngTemplateOutletContext]="{ label: 'Shipping informations' | translate, data: acqInfos}"
-          ></ng-container>
-          <ng-container *ngIf="acquisitionSettings.billing_informations as acqInfos"
-                        [ngTemplateOutlet]="address_block"
-                        [ngTemplateOutletContext]="{ label: 'Billing informations' | translate, data: acqInfos}"
-          ></ng-container>
+          @if (acquisitionSettings.shipping_informations; as acqInfos) {
+            <ng-container [ngTemplateOutlet]="address_block"
+                          [ngTemplateOutletContext]="{ label: 'Shipping informations' | translate, data: acqInfos}"
+            ></ng-container>
+          }
+          @if (acquisitionSettings.billing_informations; as acqInfos) {
+            <ng-container [ngTemplateOutlet]="address_block"
+                          [ngTemplateOutletContext]="{ label: 'Billing informations' | translate, data: acqInfos}"
+            ></ng-container>
+          }
         </dl>
-      </ng-container>
-      <ng-container *ngIf="record.serial_acquisition_settings as acquisitionSettings">
+      }
+      @if (record.serial_acquisition_settings; as acquisitionSettings) {
         <p-divider align="left" class="col-12 my-1">
           <div class="d-inline-flex align-items-center">
             <i class="fa fa-newspaper-o mr-2"></i>
@@ -141,74 +150,94 @@ <h1>{{ record.name }}</h1>
           </div>
         </p-divider>
         <dl class="row justify-content-start">
-          <ng-container *ngIf="acquisitionSettings.shipping_informations as acqInfos"
-                        [ngTemplateOutlet]="address_block"
-                        [ngTemplateOutletContext]="{ label: 'Shipping informations' | translate, data: acqInfos}"
-          ></ng-container>
-          <ng-container *ngIf="acquisitionSettings.billing_informations as acqInfos"
-                        [ngTemplateOutlet]="address_block"
-                        [ngTemplateOutletContext]="{ label: 'Billing informations' | translate, data: acqInfos}"
-          ></ng-container>
+          @if (acquisitionSettings.shipping_informations; as acqInfos) {
+            <ng-container [ngTemplateOutlet]="address_block"
+                          [ngTemplateOutletContext]="{ label: 'Shipping informations' | translate, data: acqInfos}"
+            ></ng-container>
+          }
+          @if (acquisitionSettings.billing_informations; as acqInfos) {
+            <ng-container [ngTemplateOutlet]="address_block"
+                          [ngTemplateOutletContext]="{ label: 'Billing informations' | translate, data: acqInfos}"
+            ></ng-container>
+          }
         </dl>
-      </ng-container>
+      }
     </p-accordionTab>
     <!-- rollover settings ================================================ -->
-    <p-accordionTab *ngIf="record.rollover_settings">
-      <ng-template pTemplate="header">
-        <i class="fa fa-wrench mr-2"></i>
-        <span translate>Rollover settings</span>
-        <div class="ml-auto rollover-settings">
-          <i class="fa"
-             [ngClass]="{
-                'fa-times text-danger': record.rollover_settings.account_transfer === 'rollover_no_transfer',
-                'fa-check text-success': record.rollover_settings.account_transfer === 'rollover_allocated_amount'
-             }"
-          ></i>
-        </div>
-      </ng-template>
-      <dl class="row">
-        <dt class="col-3 label-title" translate>Account transfer</dt>
-        <dd class="col">{{ record.rollover_settings.account_transfer | translate }}</dd>
-      </dl>
-    </p-accordionTab>
+    @if (record.rollover_settings) {
+      <p-accordionTab>
+        <ng-template pTemplate="header">
+          <i class="fa fa-wrench mr-2"></i>
+          <span translate>Rollover settings</span>
+          <div class="ml-auto rollover-settings">
+            <i class="fa"
+                [ngClass]="{
+                  'fa-times text-danger': record.rollover_settings.account_transfer === 'rollover_no_transfer',
+                  'fa-check text-success': record.rollover_settings.account_transfer === 'rollover_allocated_amount'
+                }"
+            ></i>
+          </div>
+        </ng-template>
+        <dl class="row">
+          <dt class="col-3 label-title" translate>Account transfer</dt>
+          <dd class="col">{{ record.rollover_settings.account_transfer | translate }}</dd>
+        </dl>
+      </p-accordionTab>
+    }
   </p-accordion>
-</ng-container>
-
 
-<ng-template #address_block let-label="label" let-data="data">
-  <div class="address-card col-6 px-1">
-    <div class="address-card-content container">
-      <span class="address-card-type">
-        <i class="fa fa-address-card mr-1"></i>
-        {{ label }}
-      </span>
-      <div class="row">
-        <i class="fa fa-home col-1 pt-1"></i>
-        <div class="col">
-          {{ data.name }}<br/>
-          <ng-container *ngIf="data.address">
-            <ng-container *ngIf="data.address.street">{{ data.address.street }}<br/></ng-container>
-            <ng-container *ngIf="data.address.zip_code || data.address.city">
-              <span *ngIf="data.address.zip_code">{{ data.address.zip_code }}</span>
-              <span *ngIf="data.address.zip_code && data.address.city"> - </span>
-              <span *ngIf="data.address.city">{{ data.address.city }}</span><br/>
-            </ng-container>
-            <ng-container *ngIf="data.address.country">{{ data.address.country | countryCodeTranslate }}</ng-container>
-          </ng-container>
+  <ng-template #address_block let-label="label" let-data="data">
+    <div class="address-card col-6 px-1">
+      <div class="address-card-content container">
+        <span class="address-card-type">
+          <i class="fa fa-address-card mr-1"></i>
+          {{ label }}
+        </span>
+        <div class="row">
+          <i class="fa fa-home col-1 pt-1"></i>
+          <div class="col">
+            {{ data.name }}<br/>
+            @if (data.address) {
+              @if (data.address.street) {
+                {{ data.address.street }}<br/>
+              }
+              @if (data.address.zip_code || data.address.city) {
+                @if (data.address.zip_code) {
+                  {{ data.address.zip_code }}
+                }
+                @if (data.address.zip_code && data.address.city) {
+                  -
+                }
+                @if (data.address.city) {
+                  {{ data.address.city }}
+                }
+                <br/>
+              }
+              @if (data.address.country) {
+                {{ data.address.country | countryCodeTranslate }}
+              }
+            }
+          </div>
         </div>
-      </div>
-      <div class="row mt-2" *ngIf="data.email">
-        <i class="fa fa-at col-1 pt-1"></i>
-        <span class="col">{{ data.email }}</span>
-      </div>
-      <div class="row mt-2" *ngIf="data.phone">
-        <i class="fa fa-phone-square col-1 pt-1"></i>
-        <span class="col">{{ data.phone }}</span>
-      </div>
-      <div class="row mt-2" *ngIf="data.extra">
-        <i class="fa fa-sticky-note-o col-1 pt-1"></i>
-        <span class="col">{{ data.extra }}</span>
+        @if (data.email) {
+          <div class="row mt-2">
+            <i class="fa fa-at col-1 pt-1"></i>
+            <span class="col">{{ data.email }}</span>
+          </div>
+        }
+        @if (data.phone) {
+          <div class="row mt-2">
+            <i class="fa fa-phone-square col-1 pt-1"></i>
+            <span class="col">{{ data.phone }}</span>
+          </div>
+        }
+        @if (data.extra) {
+          <div class="row mt-2">
+            <i class="fa fa-sticky-note-o col-1 pt-1"></i>
+            <span class="col">{{ data.extra }}</span>
+          </div>
+        }
       </div>
     </div>
-  </div>
-</ng-template>
+  </ng-template>
+}
diff --git a/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.ts b/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.ts
index 4cac36380..1be9995d0 100644
--- a/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -45,27 +45,27 @@ export class LibraryDetailViewComponent implements DetailRecord, OnInit, OnDestr
   activeIndex = 0;
 
   /** Record subscription */
-  private _recordObs: Subscription;
+  private recordObs: Subscription;
 
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _recordService - RecordService
-   * @param _userService - UserService
+   * @param recordService - RecordService
+   * @param userService - UserService
    */
   constructor(
-    private _recordService: RecordService,
-    private _userService: UserService
+    private recordService: RecordService,
+    private userService: UserService
   ) { }
 
   /** OnInit hook */
   ngOnInit() {
-   this._recordObs = this.record$.subscribe((data: any) => {
+   this.recordObs = this.record$.subscribe((data: any) => {
       const libraryPid = data.metadata.pid;
       this.record = new Library(data.metadata);
-      this.isUserCanAddLocation = this._userService.user.currentLibrary === libraryPid;
+      this.isUserCanAddLocation = this.userService.user.currentLibrary === libraryPid;
       // Load linked locations
-      this._recordService
+      this.recordService
         .getRecords('locations', `library.pid:${libraryPid}`, 1, RecordService.MAX_REST_RESULTS_SIZE, [], {}, null, 'name')
         .subscribe((record: Record) => this.locations = record.hits.hits || []);
    });
@@ -73,7 +73,7 @@ export class LibraryDetailViewComponent implements DetailRecord, OnInit, OnDestr
 
   /** OnDestroy hook */
   ngOnDestroy(): void {
-    this._recordObs.unsubscribe();
+    this.recordObs.unsubscribe();
   }
 
   // COMPONENT FUNCTIONS ======================================================
diff --git a/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.html b/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.html
index 681fbe636..0d24e917a 100644
--- a/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.html
+++ b/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,40 +14,46 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="permissions">
+@if (permissions) {
   <div class="col">
     <a [routerLink]="['/records/locations/detail', location.metadata.pid]">{{ location.metadata.name }}</a>
   </div>
   <div class="col-2 text-right">
-    <i class="fa fa-truck ml-2" *ngIf="location.metadata.is_pickup" title="{{ 'Pickup location' | translate }}"></i>
-    <i class="fa fa-truck ml-2 text-primary" *ngIf="location.metadata.is_ill_pickup" title="{{ 'ILL pickup location' | translate }}"></i>
-    <i class="fa fa-globe ml-1" *ngIf="location.metadata.is_online" title="{{ 'Online location' | translate }}"></i>
+    @if (location.metadata.is_pickup) {
+      <i class="fa fa-truck ml-2" title="{{ 'Pickup location' | translate }}"></i>
+    }
+    @if (location.metadata.is_ill_pickup) {
+      <i class="fa fa-truck ml-2 text-primary" title="{{ 'ILL pickup location' | translate }}"></i>
+    }
+    @if (location.metadata.is_online) {
+      <i class="fa fa-globe ml-1" title="{{ 'Online location' | translate }}"></i>
+    }
   </div>
   <div class="col-lg-2 col-sm-3 col-2">
     <div class=" float-right ml-2">
       <!-- Edit button -->
-      <button *ngIf="this.permissions.update.can"
-              type="button"
-              class="btn btn-outline-primary btn-sm ml-1"
-              title="{{ 'Edit' | translate }}"
-              [routerLink]="['/records', 'locations', 'edit', location.metadata.pid]">
-        <i class="fa fa-pencil"></i>
-      </button>
+      @if (permissions.update.can) {
+        <button type="button" class="btn btn-outline-primary btn-sm ml-1"
+                title="{{ 'Edit' | translate }}"
+                [routerLink]="['/records', 'locations', 'edit', location.metadata.pid]">
+          <i class="fa fa-pencil"></i>
+        </button>
+      }
       <!-- Delete button -->
-      <button *ngIf="this.permissions.delete.can; else deleteInfo"
-              type="button" class="btn btn-outline-danger btn-sm ml-1"
-              title="{{ 'Delete' | translate }}"
-              (click)="delete(location.metadata.pid)">
-        <i class="fa fa-trash" ></i>
-      </button>
-      <ng-template #deleteInfo>
+      @if (permissions.delete.can) {
+        <button type="button" class="btn btn-outline-danger btn-sm ml-1"
+                title="{{ 'Delete' | translate }}"
+                (click)="delete(location.metadata.pid)">
+          <i class="fa fa-trash" ></i>
+        </button>
+      } @else {
         <button type="button" class="btn btn-sm btn-outline-danger ml-1 disabled"
                 title="{{ 'Delete' | translate }}"
                 [popover]="tolTemplate" triggers="mouseenter:mouseleave">
           <i class="fa fa-trash"></i>
         </button>
         <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
-      </ng-template>
+      }
     </div>
   </div>
-</ng-container>
+}
diff --git a/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.ts b/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.ts
index 3e4e6dcfb..f55e372d9 100644
--- a/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.ts
+++ b/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -38,19 +38,19 @@ export class LocationComponent implements OnInit {
 
   /**
    * Constructor
-   * @param _recordUiService: RecordUiService
-   * @param _recordPermissionService: RecordPermissionService
+   * @param recordUiService: RecordUiService
+   * @param recordPermissionService: RecordPermissionService
    */
   constructor(
-    private _recordUiService: RecordUiService,
-    private _recordPermissionService: RecordPermissionService
+    private recordUiService: RecordUiService,
+    private recordPermissionService: RecordPermissionService
   ) { }
 
   /**
    * Init
    */
   ngOnInit() {
-    this._recordPermissionService.getPermission('locations', this.location.metadata.pid).subscribe(
+    this.recordPermissionService.getPermission('locations', this.location.metadata.pid).subscribe(
       (permissions) => this.permissions = permissions
     );
   }
@@ -60,7 +60,7 @@ export class LocationComponent implements OnInit {
    * @param locationPid - location PID
    */
   delete(locationPid: string) {
-    this._recordUiService.deleteRecord('locations', locationPid).subscribe((success: boolean) => {
+    this.recordUiService.deleteRecord('locations', locationPid).subscribe((success: boolean) => {
       if (success) {
         this.deleteLocation.emit(locationPid);
       }
@@ -71,7 +71,7 @@ export class LocationComponent implements OnInit {
    * Return a message containing the reasons wht the item cannot be requested
    */
   get deleteInfoMessage(): string {
-    return this._recordPermissionService.generateDeleteMessage(this.permissions.delete.reasons);
+    return this.recordPermissionService.generateDeleteMessage(this.permissions.delete.reasons);
   }
 
 }
diff --git a/projects/admin/src/app/record/detail-view/local-field/local-field.component.html b/projects/admin/src/app/record/detail-view/local-field/local-field.component.html
index 292972335..817d19f99 100644
--- a/projects/admin/src/app/record/detail-view/local-field/local-field.component.html
+++ b/projects/admin/src/app/record/detail-view/local-field/local-field.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,48 +15,57 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="!isLoading">
-  <div class="container-fluid" *ngIf="localFields.length > 0 else addLocalField">
-    <dl class="row">
-      <ng-container *ngFor="let field of localFields">
-        <dt class="col-2 label-title" translate>{{ 'local_' + field.name }}</dt>
-        <dd class="col-10">{{ field.value | join:'; ' }}</dd>
-      </ng-container>
-    </dl>
+@defer (when isLoading) {
+  @if (localFields.length > 0) {
+    <div class="container-fluid">
+      <dl class="row">
+        @for (field of localFields; track field) {
+          <dt class="col-2 label-title" translate>{{ 'local_' + field.name }}</dt>
+          <dd class="col-10">{{ field.value | join:'; ' }}</dd>
+        }
+      </dl>
 
-    <div class="mt-2">
-      <button
-        *ngIf="recordPermissions && recordPermissions.update.can"
-        [routerLink]="['/records', 'local_fields', 'edit', localFieldRecordPid]"
+      <div class="mt-2">
+        @if (recordPermissions) {
+          @if (recordPermissions.update.can) {
+            <button
+              [routerLink]="['/records', 'local_fields', 'edit', localFieldRecordPid]"
+              [queryParams]="{ type: resourceType, ref: resourcePid }"
+              class="btn btn-sm btn-outline-primary ml-1"
+              name="edit"
+              type="button"
+              title="{{ 'Edit' | translate }}"
+            >
+              <i class="fa fa-pencil"></i> {{ 'Edit' | translate }}
+            </button>
+          }
+          @if (recordPermissions.delete.can) {
+            <button
+              class="btn btn-sm btn-outline-danger ml-1"
+              title="{{ 'Delete' | translate }}"
+              (click)="delete()"
+            >
+              <i class="fa fa-trash"></i> {{ 'Delete' | translate }}
+            </button>
+          }
+        } @else {
+          &nbsp;
+        }
+      </div>
+    </div>
+  } @else {
+    <div class="text-right">
+      <a
+        [routerLink]="['/records', 'local_fields', 'new']"
         [queryParams]="{ type: resourceType, ref: resourcePid }"
-        class="btn btn-sm btn-outline-primary ml-1"
-        name="edit"
-        type="button"
-        title="{{ 'Edit' | translate }}"
-      >
-        <i class="fa fa-pencil"></i> {{ 'Edit' | translate }}
-      </button>
-      <button
-        *ngIf="recordPermissions && recordPermissions.delete.can"
-        class="btn btn-sm btn-outline-danger ml-1"
-        title="{{ 'Delete' | translate }}"
-        (click)="delete()"
+        class="btn btn-sm btn-outline-primary"
+        [permissions]="permissions.LOFI_CREATE"
       >
-        <i class="fa fa-trash"></i> {{ 'Delete' | translate }}
-      </button>
+        <i class="fa fa-plus-square-o"></i> {{ 'Add local fields' | translate }}
+      </a>
     </div>
-  </div>
-</ng-container>
+  }
 
-<ng-template #addLocalField>
-  <div class="text-right">
-    <a
-      [routerLink]="['/records', 'local_fields', 'new']"
-      [queryParams]="{ type: resourceType, ref: resourcePid }"
-      class="btn btn-sm btn-outline-primary"
-      [permissions]="permissions.LOFI_CREATE"
-    >
-      <i class="fa fa-plus-square-o"></i> {{ 'Add local fields' | translate }}
-    </a>
-  </div>
-</ng-template>
+} @placeholder {
+  <i class="fa fa-spinner"></i> {{ 'loading in progress...' | translate }}
+}
diff --git a/projects/admin/src/app/record/detail-view/local-field/local-field.component.ts b/projects/admin/src/app/record/detail-view/local-field/local-field.component.ts
index 55646fbcc..5a8130133 100644
--- a/projects/admin/src/app/record/detail-view/local-field/local-field.component.ts
+++ b/projects/admin/src/app/record/detail-view/local-field/local-field.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -53,34 +53,34 @@ export class LocalFieldComponent implements OnInit, OnDestroy {
     items: 'item'
   };
   /** all component subscription */
-  private _subscriptions = new Subscription();
+  private subscriptions = new Subscription();
 
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _localFieldApiService - LocalFieldApiService
-   * @param _userService - UserService
-   * @param _recordPermissionService - RecordPermissionService
+   * @param localFieldApiService - LocalFieldApiService
+   * @param userService - UserService
+   * @param recordPermissionService - RecordPermissionService
    */
   constructor(
-    private _localFieldApiService: LocalFieldApiService,
-    private _userService: UserService,
-    private _recordPermissionService: RecordPermissionService
+    private localFieldApiService: LocalFieldApiService,
+    private userService: UserService,
+    private recordPermissionService: RecordPermissionService
   ) { }
 
   /** OnInit hook */
   ngOnInit() {
-    this._localFieldApiService
+    this.localFieldApiService
       .getByResourceTypeAndResourcePidAndOrganisationId(
         this._translateType(this.resourceType),
         this.resourcePid,
-        this._userService.user.currentOrganisation
+        this.userService.user.currentOrganisation
       )
       .subscribe((record: any) => {
         if (record?.metadata) {
           this.localFieldRecordPid = record.metadata.pid;
           if (record.metadata?.fields) {
-            const fields = record.metadata.fields;
+            const { fields } = record.metadata;
             // Sort local fields using numeric part of the field name.
             const sortKeys = Object.keys(fields).sort((k1, k2) => parseInt(k1.replace(/\D/g, '')) - parseInt(k2.replace(/\D/g, '')));
             for (const key of sortKeys) {
@@ -88,7 +88,7 @@ export class LocalFieldComponent implements OnInit, OnDestroy {
             }
           }
           // Permission loading
-          this._subscriptions.add(this._recordPermissionService
+          this.subscriptions.add(this.recordPermissionService
             .getPermission('local_fields', record.metadata.pid)
             .subscribe((permissions) => this.recordPermissions = permissions)
           );
@@ -99,13 +99,13 @@ export class LocalFieldComponent implements OnInit, OnDestroy {
 
   /** OnDestroy hook */
   ngOnDestroy() {
-    this._subscriptions.unsubscribe()
+    this.subscriptions.unsubscribe()
   }
 
   // PUBLIC FUNCTIONS =========================================================
   /** Delete the complete LocalField resource. */
   delete(): void {
-    this._localFieldApiService
+    this.localFieldApiService
       .delete(this.localFieldRecordPid)
       .subscribe((success: any) => {
         if (success) {
diff --git a/projects/admin/src/app/record/detail-view/location-detail-view/location-detail-view.component.html b/projects/admin/src/app/record/detail-view/location-detail-view/location-detail-view.component.html
index 28cb4ec71..2da212c21 100644
--- a/projects/admin/src/app/record/detail-view/location-detail-view/location-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/location-detail-view/location-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,94 +14,104 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record && record.metadata as data">
-    <h1 class="mb-3">{{ data.name | translate }}</h1>
-    <article>
-        <!-- DETAILS -->
-        <section class="m-2 p-2">
-            <!-- LIBRARY -->
-            <dl class="row mb-0">
-                <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Library</dt>
-                <dd class="col-sm-7 col-md-8 mb-0">
-                    {{ data.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
-                </dd>
-            </dl>
-            <!-- NAME -->
-            <dl class="row mb-0">
-                <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Name</dt>
-                <dd class="col-sm-7 col-md-8 mb-0">{{ data.name }}</dd>
-            </dl>
-            <!-- CODE -->
-            <dl class="row mb-0">
-                <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Code</dt>
-                <dd class="col-sm-7 col-md-8 mb-0">{{ data.code }}</dd>
-            </dl>
-            <!-- IS ONLINE -->
-            <dl class="row mb-0">
-              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Is online</dt>
+@if (record && record.metadata; as data) {
+  <h1 class="mb-3">{{ data.name | translate }}</h1>
+  <article>
+      <!-- DETAILS -->
+      <section class="m-2 p-2">
+          <!-- LIBRARY -->
+          <dl class="row mb-0">
+              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Library</dt>
+              <dd class="col-sm-7 col-md-8 mb-0">
+                  {{ data.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
+              </dd>
+          </dl>
+          <!-- NAME -->
+          <dl class="row mb-0">
+              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Name</dt>
+              <dd class="col-sm-7 col-md-8 mb-0">{{ data.name }}</dd>
+          </dl>
+          <!-- CODE -->
+          <dl class="row mb-0">
+              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Code</dt>
+              <dd class="col-sm-7 col-md-8 mb-0">{{ data.code }}</dd>
+          </dl>
+          <!-- IS ONLINE -->
+          <dl class="row mb-0">
+            <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Is online</dt>
+            <dd class="col-sm-7 col-md-8 mb-0">
+              <i class="fa"
+                  [ngClass]="(data.is_online) ? 'fa-check' : 'fa-times'"
+                  [ngStyle]="{'color': (data.is_online) ? 'green' : 'red'}"
+                  aria-hidden="true">
+              </i>
+            </dd>
+          </dl>
+          <!-- IS PICKUP -->
+          <dl class="row mb-0">
+              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Is pickup</dt>
               <dd class="col-sm-7 col-md-8 mb-0">
                 <i class="fa"
-                   [ngClass]="(data.is_online) ? 'fa-check' : 'fa-times'"
-                   [ngStyle]="{'color': (data.is_online) ? 'green' : 'red'}"
-                   aria-hidden="true">
+                    [ngClass]="(data.is_pickup) ? 'fa-check' : 'fa-times'"
+                    [ngStyle]="{'color': (data.is_pickup) ? 'green' : 'red'}"
+                    aria-hidden="true">
                 </i>
               </dd>
-            </dl>
-            <!-- IS PICKUP -->
+          </dl>
+          <!-- PICKUP LOCATION NAME -->
+          @if (data.pickup_name !== undefined && data.is_pickup) {
             <dl class="row mb-0">
-                <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Is pickup</dt>
-                <dd class="col-sm-7 col-md-8 mb-0">
-                  <i class="fa"
-                     [ngClass]="(data.is_pickup) ? 'fa-check' : 'fa-times'"
-                     [ngStyle]="{'color': (data.is_pickup) ? 'green' : 'red'}"
-                     aria-hidden="true">
-                  </i>
-                </dd>
-            </dl>
-            <!-- PICKUP LOCATION NAME -->
-            <dl class="row mb-0" *ngIf="data.pickup_name !== undefined && data.is_pickup">
                 <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Pickup location name</dt>
                 <dd class="col-sm-7 col-md-8 mb-0">{{ data.pickup_name }}</dd>
             </dl>
-            <h4 class="mt-4" translate>Restrictions</h4>
-            <!-- ALLOW REQUEST -->
+          }
+          <h4 class="mt-4" translate>Restrictions</h4>
+          <!-- ALLOW REQUEST -->
+          <dl class="row mb-0">
+            <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Allow request</dt>
+            <dd class="col-sm-7 col-md-8 mb-0">
+              <i class="fa"
+                  [ngClass]="(data.allow_request) ? 'fa-check' : 'fa-times'"
+                  [ngStyle]="{'color': (data.allow_request) ? 'green' : 'red'}"
+                  aria-hidden="true">
+              </i>
+            </dd>
+          </dl>
+          <!-- SEND NOTIFICATION -->
+          @if (data.allow_request) {
             <dl class="row mb-0">
-              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Allow request</dt>
-              <dd class="col-sm-7 col-md-8 mb-0">
-                <i class="fa"
-                   [ngClass]="(data.allow_request) ? 'fa-check' : 'fa-times'"
-                   [ngStyle]="{'color': (data.allow_request) ? 'green' : 'red'}"
-                   aria-hidden="true">
-                </i>
-              </dd>
-            </dl>
-            <!-- SEND NOTIFICATION -->
-            <dl class="row mb-0" *ngIf="data.allow_request">
               <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Send notification</dt>
               <dd class="col-sm-7 col-md-8 mb-0">
                 <i class="fa"
-                   [ngClass]="(data.send_notification) ? 'fa-check' : 'fa-times'"
-                   [ngStyle]="{'color': (data.send_notification) ? 'green' : 'red'}"
-                   aria-hidden="true">
+                    [ngClass]="(data.send_notification) ? 'fa-check' : 'fa-times'"
+                    [ngStyle]="{'color': (data.send_notification) ? 'green' : 'red'}"
+                    aria-hidden="true">
                 </i>
               </dd>
             </dl>
-            <!-- CONTACT EMAIL -->
-            <dl class="row mb-0" *ngIf="data.send_notification && data.allow_request">
+          }
+          <!-- CONTACT EMAIL -->
+          @if (data.send_notification && data.allow_request) {
+            <dl class="row mb-0">
               <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Contact email</dt>
               <dd class="col-sm-7 col-md-8 mb-0">{{ data.notification_email }}</dd>
             </dl>
-            <!-- RESTRICT PICKUP TO -->
-            <dl class="row mb-0" *ngIf="data.restrict_pickup_to && data.allow_request">
+          }
+          <!-- RESTRICT PICKUP TO -->
+          @if (data.restrict_pickup_to && data.allow_request) {
+            <dl class="row mb-0">
               <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Restrict pickup to</dt>
               <dd class="col-sm-7 col-md-8 mb-0">
                 <ul>
-                  <li *ngFor="let location of data.restrict_pickup_to">
-                    {{ location.pid | getRecord: 'locations' : 'field' : 'pickup_name' | async  }}
-                  </li>
+                  @for (location of data.restrict_pickup_to; track location) {
+                    <li>
+                      {{ location.pid | getRecord: 'locations' : 'field' : 'pickup_name' | async  }}
+                    </li>
+                  }
                 </ul>
               </dd>
             </dl>
-        </section>
-    </article>
-</ng-container>
+          }
+      </section>
+  </article>
+}
diff --git a/projects/admin/src/app/record/detail-view/location-detail-view/location-detail-view.component.ts b/projects/admin/src/app/record/detail-view/location-detail-view/location-detail-view.component.ts
index 0bd79756f..82d74f57a 100644
--- a/projects/admin/src/app/record/detail-view/location-detail-view/location-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/location-detail-view/location-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -37,9 +37,6 @@ export class LocationDetailViewComponent implements OnInit, OnDestroy, DetailRec
   /** The observer to the record observable */
   private _recordObs: Subscription;
 
-  /** Constructor */
-  constructor() { }
-
   /** On init hook */
   ngOnInit() {
     this._recordObs = this.record$.subscribe(record => {
diff --git a/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.html b/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.html
index 5b777fc21..0aa85f3bb 100644
--- a/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,36 +14,28 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record$ | async as record">
+@if (record$ | async; as record) {
   <h1>{{ record.metadata.name }}</h1>
   <dl class="row">
     <!-- ADDRESS -->
-    <ng-container *ngIf="record.metadata.address">
+    @if (record.metadata.address) {
       <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Address</dt>
-      <dd class="col-sm-7 col-md-8 mb-0">
-        {{ record.metadata.address }}
-      </dd>
-    </ng-container>
+      <dd class="col-sm-7 col-md-8 mb-0" [innerHTML]="record.metadata.address | nl2br"></dd>
+    }
     <!-- CODE -->
-    <ng-container *ngIf="record.metadata.address">
+    @if (record.metadata.code) {
       <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Code</dt>
-      <dd class="col-sm-7 col-md-8 mb-0">
-        {{ record.metadata.code }}
-      </dd>
-    </ng-container>
+      <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.code }}</dd>
+    }
     <!-- DEFAULT CURRENCY -->
-    <ng-container *ngIf="record.metadata.default_currency">
+    @if (record.metadata.default_currency) {
       <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Default currency</dt>
-      <dd class="col-sm-7 col-md-8 mb-0">
-        {{ record.metadata.default_currency }}
-      </dd>
-    </ng-container>
+      <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.default_currency }}</dd>
+    }
   </dl>
 
   <!-- OPERATION LOGS-->
-  <admin-operation-logs
-    *ngIf="isEnabledOperationLog"
-    resourceType="organisations"
-    [resourcePid]="record.metadata.pid"
-  ></admin-operation-logs>
-</ng-container>
+  @if (isEnabledOperationLog) {
+    <admin-operation-log resourceType="organisations" [resourcePid]="record.metadata.pid"></admin-operation-log>
+  }
+}
diff --git a/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.ts b/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.ts
index 9edd9fe20..b43c1d348 100644
--- a/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -39,13 +39,11 @@ export class OrganisationDetailViewComponent implements DetailRecord {
    * @return boolean
    */
   get isEnabledOperationLog(): boolean {
-    return this._operationLogsService.isLogVisible('organisations');
+    return this.operationLogsService.isLogVisible('organisations');
   }
 
   /** Constructor
-   * @param _operationLogsService - OperationLogsService
+   * @param operationLogsService - OperationLogsService
    */
-  constructor(
-    private _operationLogsService: OperationLogsService
-  ) {}
+  constructor(private operationLogsService: OperationLogsService) {}
 }
diff --git a/projects/admin/src/app/record/detail-view/patron-detail-view/patron-detail-view.component.html b/projects/admin/src/app/record/detail-view/patron-detail-view/patron-detail-view.component.html
index a49cd3ef2..2105d7418 100644
--- a/projects/admin/src/app/record/detail-view/patron-detail-view/patron-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/patron-detail-view/patron-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,14 +15,15 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<ng-container *ngIf="patron">
-
+@if (patron) {
   <!-- BLOCKED OR NOT? -->
-  <div *ngIf="patron.patron && patron.patron.blocked" class="mt-3 alert alert-danger" role="alert">
-    <h4 class="alert-heading" translate>This patron is currently blocked</h4>
-    <hr/>
-    <p>{{ patron.patron.blocked_note }}</p>
-  </div>
+  @if (patron.patron && patron.patron.blocked) {
+    <div class="mt-3 alert alert-danger" role="alert">
+      <h4 class="alert-heading" translate>This patron is currently blocked</h4>
+      <hr/>
+      <p>{{ patron.patron.blocked_note }}</p>
+    </div>
+  }
 
   <section id="contact-profile" class="container-fluid card p-0 mt-3">
     <!-- MAIN PROFILE SECTION ================================================== -->
@@ -35,52 +36,61 @@ <h4 class="alert-heading" translate>This patron is currently blocked</h4>
       <div class="col-10">
         <h1>
           {{ patron.last_name }} {{ patron.first_name }}
-          <a
-            *ngIf="patron.patron"
-            [permissions]="permissions.CIRC_ADMIN"
-            [routerLink]="['/circulation', 'patron', patron.patron.barcode[0]]"
-            class="btn-link btn btn-sm btn-outline-primary"
-          >
-            <i class="fa fa-exchange mr-2"></i>
-            {{ 'Circulation' | translate }}
-          </a>
+          @if (patron.patron) {
+            <a
+              [permissions]="permissions.CIRC_ADMIN"
+              [routerLink]="['/circulation', 'patron', patron.patron.barcode[0]]"
+              class="btn-link btn btn-sm btn-outline-primary"
+            >
+              <i class="fa fa-exchange mr-2"></i>
+              {{ 'Circulation' | translate }}
+            </a>
+          }
         </h1>
         <dl class="row">
           <dt class="col-1 text-right"><i class="fa fa-calendar-o"></i></dt>
           <dt class="col-3" translate>Date of birth</dt>
           <dd class="col-8">{{ patron.birth_date | dateTranslate:'mediumDate' }}</dd>
-          <ng-container *ngIf="patron.email">
-            <dt class="col-1 text-right"><i class="fa fa-envelope"></i></dt>
-            <dt class="col-3" translate>Email</dt>
-            <dd class="col-8">{{ patron.email }}</dd>
-          </ng-container>
-          <ng-container *ngVar="phones as patronPhones">
-            <ng-container *ngIf="patronPhones.length > 0">
+          @if (patron.email) {
+              <dt class="col-1 text-right"><i class="fa fa-envelope"></i></dt>
+              <dt class="col-3" translate>Email</dt>
+              <dd class="col-8">{{ patron.email }}</dd>
+          }
+          @if (phones; as patronPhones) {
+            @if (patronPhones.length > 0) {
               <dt class="col-1 text-right"><i class="fa fa-phone"></i></dt>
               <dt class="col-3" translate>{{ patronPhones.length | i18nPlural: {'=1': 'Phone', 'other': 'Phones'} }}</dt>
               <dd class="col-8">
                 <ul class="list-unstyled m-0">
-                  <li *ngFor="let phone of patronPhones">
-                    <span class="metadata" translate>{{ phone.type }}</span> {{ phone.value }}
-                  </li>
+                  @for (phone of patronPhones; track phone) {
+                    <li>
+                      {{ phone.value }} <span class="metadata" translate>{{ phone.type }}</span>
+                    </li>
+                  }
                 </ul>
               </dd>
-            </ng-container>
-          </ng-container>
-          <ng-container *ngIf="patron.street || patron.postal_code || patron.city || patron.country">
+            }
+          }
+          @if (patron.street || patron.postal_code || patron.city || patron.country) {
             <dt class="col-1 text-right"><i class="fa fa-home"></i></dt>
             <dt class="col-3" translate>Address</dt>
             <dd class="col-8">
-              <ng-container *ngIf="patron.street">{{ patron.street }}<br/></ng-container>
-              <ng-container *ngIf="patron.postal_code || patron.city">{{ patron.postal_code }} {{ patron.city }}<br/></ng-container>
-              <ng-container *ngIf="patron.country">{{ 'country_' + patron.country | translate }}</ng-container>
+              @if (patron.street) {
+                {{ patron.street }}<br/>
+              }
+              @if (patron.postal_code || patron.city) {
+                {{ patron.postal_code }} {{ patron.city }}<br/>
+              }
+              @if (patron.country) {
+                {{ 'country_' + patron.country | translate }}
+              }
             </dd>
-          </ng-container>
+          }
         </dl>
       </div>
     </div>
     <!-- NOTES ================================================================= -->
-    <ng-container *ngIf="patron.notes && patron.notes.length > 0">
+    @if (patron.notes && patron.notes.length > 0) {
       <div class="card-header">
         <button type="button" class="btn-show-more"
                 [ngClass]="{'btn-expanded': !sectionCollapsed.notes, 'btn-collapsed': sectionCollapsed.notes}"
@@ -88,16 +98,20 @@ <h1>
                 [attr.aria-expanded]="!sectionCollapsed.notes" aria-controls="collapse">
         </button>
         {{ patron.notes.length | i18nPlural: {'=1': 'Note', 'other': 'Notes'} | translate }}
-        <span *ngIf="sectionCollapsed.notes" class="badge badge-secondary ml-2">{{ patron.notes.length }}</span>
+        @if (sectionCollapsed.notes) {
+          <span class="badge badge-secondary ml-2">{{ patron.notes.length }}</span>
+        }
       </div>
       <div class="card-body py-2" [hidden]="sectionCollapsed.notes">
-        <div class="row note" *ngFor="let note of patron.notes">
-          <div class="col-2"><span class="badge {{ getNoteBadgeColor(note.type) }}">{{ note.type | translate }}</span></div>
-          <blockquote class="col" [innerHTML]="note.content | nl2br"></blockquote>
-        </div>
+        @for (note of patron.notes; track note) {
+          <div class="row note">
+            <div class="col-2"><span class="badge {{ getNoteBadgeColor(note.type) }}">{{ note.type | translate }}</span></div>
+            <blockquote class="col" [innerHTML]="note.content | nl2br"></blockquote>
+          </div>
+        }
       </div>
-    </ng-container>
-    <!-- USER INFORMATIONS SECTION ============================================= -->
+    }
+    <!-- USER INFORMATION'S SECTION ============================================= -->
     <div class="card-header">
       <button type="button" class="btn-show-more"
               [ngClass]="{'btn-expanded': !sectionCollapsed.user, 'btn-collapsed': sectionCollapsed.user}"
@@ -124,8 +138,8 @@ <h1>
       <dt class="col-3 offset-1" translate>Creation date</dt>
       <dd class="col-8">{{ record.created | dateTranslate: 'mediumDate' }}</dd>
     </dl>
-    <!-- PATRON INFORMATIONS SECTION =========================================== -->
-    <ng-container *ngIf="patron.patron">
+    <!-- PATRON INFORMATION'S SECTION =========================================== -->
+    @if (patron.patron) {
       <div class="card-header">
         <button type="button" class="btn-show-more"
                 [ngClass]="{'btn-expanded': !sectionCollapsed.patron, 'btn-collapsed': sectionCollapsed.patron}"
@@ -144,7 +158,7 @@ <h1>
         <dd class="col-8">{{ patron.patron.type.pid | getRecord: 'patron_types' : 'field' : 'name' | async }}</dd>
         <dt class="col-3 offset-1" translate>Account expiration</dt>
         <dd class="col-8">{{ patron.patron.expiration_date | dateTranslate:'mediumDate' }}</dd>
-        <ng-container *ngIf="patron.patron.libraries && patron.patron.libraries.length > 0">
+        @if (patron.patron.libraries && patron.patron.libraries.length > 0) {
           <dt class="col-1 text-right"><i class="fa fa-university"></i></dt>
           <dt class="col-3" translate>Affiliation libraries</dt>
           <ul class="col-8">
@@ -152,30 +166,34 @@ <h1>
               {{ library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
             </li>
           </ul>
-        </ng-container>
-        <ng-container *ngIf="patron.source">
+        }
+        @if (patron.source) {
           <dt class="col-3 offset-1" translate>Source</dt>
           <dd class="col-8">{{ patron.source }}</dd>
-        </ng-container>
-        <ng-container *ngIf="patron.local_codes">
+        }
+        @if (patron.local_codes) {
           <dt class="col-3 offset-1" translate>Local code</dt>
           <dd class="col-8">{{ patron.local_codes | join: ',' }}</dd>
-        </ng-container>
-        <ng-container *ngIf="patron.second_address">
+        }
+        @if (patron.second_address) {
           <dt class="col-1 text-right"><i class="fa fa-home"></i> </dt>
           <dt class="col-3" translate>Second address</dt>
           <dd class="col-8">
-            <ng-container *ngIf="patron.second_address.street">{{ patron.second_address.street }}<br/></ng-container>
-            <ng-container *ngIf="patron.second_address.postal_code or patron.second_address.city">
+            @if (patron.second_address.street) {
+              {{ patron.second_address.street }}<br/>
+            }
+            @if (patron.second_address.postal_code || patron.second_address.city) {
               {{ patron.second_address.postal_code }} {{ patron.second_address.city }}<br/>
-            </ng-container>
-            <ng-container *ngIf="patron.second_address.country">{{ 'country_' + patron.second_address.country | translate }}</ng-container>
+            }
+            @if (patron.second_address.country) {
+              {{ 'country_' + patron.second_address.country | translate }}
+            }
           </dd>
-        </ng-container>
+        }
       </dl>
-    </ng-container>
-    <!-- LIBRARIAN INFORMATIONS SECTION ======================================== -->
-    <ng-container *ngIf="patron.libraries?.length > 0">
+    }
+    <!-- LIBRARIAN INFORMATION'S SECTION ======================================== -->
+    @if (patron.libraries?.length > 0) {
       <div class="card-header">
         <button type="button" class="btn-show-more"
                 [ngClass]="{'btn-expanded': !sectionCollapsed.librarian, 'btn-collapsed': sectionCollapsed.librarian}"
@@ -188,15 +206,17 @@ <h1>
         <dt class="col-1 text-right"><i class="fa fa-university"></i></dt>
         <dt class="col-3" translate>{{ patron.libraries.length | i18nPlural: {'=1': 'Library', 'other': 'Libraries'} }}</dt>
         <ul class="col-8">
-          <li *ngFor="let library of patron.libraries">
-            {{ library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
-          </li>
+          @for (library of patron.libraries; track library) {
+            <li>
+              {{ library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
+            </li>
+          }
         </ul>
       </dl>
-    </ng-container>
+    }
 
     <!-- PERMISSIONS ======================================== -->
-    <ng-container *ngIf="canAccessDisplayPermissions">
+    @if (canAccessDisplayPermissions) {
       <div class="card-header">
         <button type="button" class="btn-show-more"
                 [ngClass]="{'btn-expanded': !sectionCollapsed.permissions, 'btn-collapsed': sectionCollapsed.permissions}"
@@ -208,11 +228,11 @@ <h1>
       <div class="card-body" [hidden]="sectionCollapsed.permissions">
         <admin-patron-permissions [hidden]="sectionCollapsed.permissions" [pid]="patron.pid"></admin-patron-permissions>
       </div>
-    </ng-container>
+    }
   </section>
 
   <!-- OPERATION LOGS-->
-  <admin-operation-logs *ngIf="isEnabledOperationLog" resourceType="patrons" [resourcePid]="patron.pid">
-  </admin-operation-logs>
-
-</ng-container>
+  @if (isEnabledOperationLog) {
+    <admin-operation-logs resourceType="patrons" [resourcePid]="patron.pid"></admin-operation-logs>
+  }
+}
diff --git a/projects/admin/src/app/record/detail-view/patron-detail-view/patron-detail-view.component.ts b/projects/admin/src/app/record/detail-view/patron-detail-view/patron-detail-view.component.ts
index 5bf210a94..5dbf4f241 100644
--- a/projects/admin/src/app/record/detail-view/patron-detail-view/patron-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/patron-detail-view/patron-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -58,34 +58,34 @@ export class PatronDetailViewComponent implements OnInit, DetailRecord, OnDestro
   };
 
   /** Subscription to (un)follow the record$ Observable */
-  private _subscription$ = new Subscription();
+  private subscription$ = new Subscription();
 
   // GETTER AND SETTER ========================================================
   /** Is operation log enabled */
   get isEnabledOperationLog(): boolean {
-    return this._operationLogsService.isLogVisible('patrons');
+    return this.operationLogsService.isLogVisible('patrons');
   }
 
   permissions: IPermissions = PERMISSIONS;
 
   get canAccessDisplayPermissions(): boolean {
-    return this._permissionsService.canAccess(PERMISSIONS.PERM_MANAGEMENT);
+    return this.permissionsService.canAccess(PERMISSIONS.PERM_MANAGEMENT);
   }
 
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor.
-   * @param _operationLogsService - OperationLogsService
-   * @param _permissionsService - PermissionsService
+   * @param operationLogsService - OperationLogsService
+   * @param permissionsService - PermissionsService
    */
   constructor(
-    private _operationLogsService: OperationLogsService,
-    private _permissionsService: PermissionsService
+    private operationLogsService: OperationLogsService,
+    private permissionsService: PermissionsService
   ) {}
 
   /** OnInit hook */
   ngOnInit() {
-    this._subscription$ = this.record$.subscribe((record) => {
+    this.subscription$ = this.record$.subscribe((record) => {
       this.record = record;
       this.patron = record.metadata;
       this.phones = this.processPhones(record.metadata);
@@ -94,7 +94,7 @@ export class PatronDetailViewComponent implements OnInit, DetailRecord, OnDestro
 
   /** OnDestroy hook */
   ngOnDestroy() {
-    this._subscription$.unsubscribe();
+    this.subscription$.unsubscribe();
   }
 
   // COMPONENTS FUNCTIONS =====================================================
diff --git a/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permission/patron-permission.component.html b/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permission/patron-permission.component.html
index 123902203..d8e83d62b 100644
--- a/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permission/patron-permission.component.html
+++ b/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permission/patron-permission.component.html
@@ -1,7 +1,7 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2022 RERO
-  Copyright (C) 2019-2022 UCLouvain
+  Copyright (C) 2019-2024 RERO
+  Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -28,19 +28,20 @@
   </div>
   <div id="reasons" class="col my-1 ml-5" [hidden]="isCollapsed">
     <ul class="list-unstyled mb-0">
-      <li *ngFor="let role of permission.reasons | keyvalue">
-        <div class="row">
-          <div class="col-6">{{ role.key | translate }}</div>
-          <div class="col">
-            <i class="fa fa-square" [ngClass]="{
-               'text-success': role.value === true,
-               'text-danger': role.value === false,
-               'text-secondary': role.value === null
-            }">
-          </i>
+      @for (role of permission.reasons | keyvalue; track role) {
+        <li>
+          <div class="row">
+            <div class="col-6">{{ role.key | translate }}</div>
+            <div class="col">
+              <i class="fa fa-square" [ngClass]="{
+                 'text-success': role.value === true,
+                 'text-danger': role.value === false,
+                 'text-secondary': role.value === null
+              }"></i>
+            </div>
           </div>
-        </div>
-      </li>
+        </li>
+      }
     </ul>
   </div>
 </div>
diff --git a/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permissions.component.html b/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permissions.component.html
index 6a77a553c..af35a9a93 100644
--- a/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permissions.component.html
+++ b/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permissions.component.html
@@ -1,7 +1,7 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2022 RERO
-  Copyright (C) 2019-2022 UCLouvain
+  Copyright (C) 2019-2024 RERO
+  Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div *ngIf="permissions.length > 0; else loading">
+@defer (when permissions.length > 0) {
   <div class="my-2">
     <label for="filter" translate>Filter permission list</label>
     <input id="filter" class="form-control" #search (keyup)="filterPermissions(search.value)" />
@@ -26,10 +26,10 @@
     <div class="col-2 font-weight-bold text-center text-uppercase" translate>Access</div>
   </div>
   <div>
-    <admin-patron-permission *ngFor="let permission of filteredPermissions; let index = index" [permission]="permission" [index]="index"></admin-patron-permission>
+    @for (permission of filteredPermissions; track permission; let index = $index) {
+      <admin-patron-permission [permission]="permission" [index]="index"></admin-patron-permission>
+    }
   </div>
-</div>
-
-<ng-template #loading>
+} @placeholder {
   <i class="fa fa-spinner"></i> {{ 'loading in progress...' | translate }}
-</ng-template>
+}
diff --git a/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permissions.component.ts b/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permissions.component.ts
index 0df61cdce..86acab0d0 100644
--- a/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permissions.component.ts
+++ b/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permissions.component.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
- * Copyright (C) 2019-2022 UCLouvain
+ * Copyright (C) 2019-2024 RERO
+ * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -38,16 +38,14 @@ export class PatronPermissionsComponent implements OnChanges {
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _permissionApiService - PermissionApiService
+   * @param permissionApiService - PermissionApiService
    */
-  constructor(
-    private _permissionApiService: PermissionApiService
-  ) { }
+  constructor(private permissionApiService: PermissionApiService) {}
 
   /** OnChanges hook */
   ngOnChanges(changes: SimpleChanges): void {
-    if (!changes.hidden.currentValue && 0 === this.permissions.length) {
-      this._permissionApiService
+    if (!changes.hidden.currentValue && this.permissions.length === 0) {
+      this.permissionApiService
         .getUserPermissions(this.pid)
         .subscribe((permissions: IPatronPermission[]) => {
           this.permissions = permissions;
diff --git a/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.html b/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.html
index ef4844ea0..fa07ebba7 100644
--- a/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,106 +14,120 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record$ | async as record">
+@if (record$ | async; as record) {
   <h1 class="mb-3">{{ record.metadata.name }}</h1>
   <dl class="row">
     <!-- CODE -->
-    <ng-container *ngIf="record.metadata.code">
+    @if (record.metadata.code) {
       <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Code</dt>
       <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.code }}</dd>
-    </ng-container>
-    <!-- DESCRIPTIION -->
-    <ng-container *ngIf="record.metadata.description">
+    }
+    <!-- DESCRIPTION -->
+    @if (record.metadata.description) {
       <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Description</dt>
       <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.description }}</dd>
-    </ng-container>
+
+    }
     <!-- YEARLY SUBSCRIPTION -->
     <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Yearly subscription</dt>
     <dd class="col-sm-7 col-md-8 mb-0">
-      <ng-container *ngIf="record.metadata.subscription_amount > 0; else noSubscription">
+      @if (record.metadata.subscription_amount > 0) {
         <i class="fa fa-check" style="color:green;" aria-hidden="true"></i>
-      </ng-container>
-      <ng-template #noSubscription>
+      } @else {
         <i class="fa fa-times" style="color:red;" aria-hidden="true"></i>
-      </ng-template>
+      }
     </dd>
     <!-- SUBSCRIPTION AMOUNT -->
-    <ng-container *ngIf="record.metadata.subscription_amount">
+    @if (record.metadata.subscription_amount) {
       <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Subscription amount</dt>
       <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.subscription_amount | currency: organisation.default_currency }}</dd>
-    </ng-container>
+    }
 
     <!-- Limits -->
-    <section *ngIf="record.metadata.limits" class="container">
-      <h2 class="mt-4" translate>Limits</h2>
-      <div class="card">
-        <!-- Checkout limits -->
-        <div class="card-header">
-          <i class="fa" [ngClass]="{
-            'fa-circle text-success': record.metadata.limits.checkout_limits,
-            'fa-circle-thin': !record.metadata.limits.checkout_limits
-          }"></i>
-          <span class="pl-3" translate>Limit by checkouts</span>
-        </div>
-        <div class="card-body" *ngIf="record.metadata.limits.checkout_limits">
-          <dl class="row m-0">
-            <dt class="offset-1 col-lg-2 col-sm-4 label-title" translate>General limit</dt>
-            <dd class="col">{{ record.metadata.limits.checkout_limits.global_limit }}</dd>
-            <dd class="w-100 m-0"></dd>
-            <ng-container *ngIf="record.metadata.limits.checkout_limits.library_limit">
-              <dt class="offset-1 col-lg-2 col-sm-4 label-title" translate>Library limit</dt>
-              <dd class="col">{{ record.metadata.limits.checkout_limits.library_limit }}</dd>
-              <dd class="w-100 m-0"></dd>
-            </ng-container>
-            <ng-container *ngIf="record.metadata.limits.checkout_limits.library_exceptions">
-              <dt class="offset-1 col-11 label-title" translate>Exceptions</dt>
-              <ng-container *ngFor="let exception of record.metadata.limits.checkout_limits.library_exceptions">
-                <dd class="offset-2 col-lg-6 col-sm-9">
-                  <i class="fa fa-university pr-2"></i>
-                  {{ exception.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
-                </dd>
-                <dd class="col-lg-4 col-sm-1">{{ exception.value }}</dd>
-              </ng-container>
-            </ng-container>
-          </dl>
-        </div>
-        <!-- Fee amount limits -->
-        <div class="card-header">
-          <i class="fa" [ngClass]="{
-            'fa-circle text-success': record.metadata.limits.fee_amount_limits,
-            'fa-circle-thin': !record.metadata.limits.fee_amount_limits
-          }"></i>
-          <span class="pl-3" translate>Limit by fee amount</span>
-        </div>
-        <div class="card-body" *ngIf="record.metadata.limits.fee_amount_limits">
-          <dl class="row m-0">
-            <dt class="offset-1 col-lg-2 col-sm-4 label-title" translate>Limit</dt>
-            <dd class="col">{{ record.metadata.limits.fee_amount_limits.default_value | currency: organisation.default_currency }}</dd>
-          </dl>
-        </div>
-        <!-- overdue items restrictions -->
-        <div class="card-header">
-          <i class="fa" [ngClass]="{
-            'fa-circle text-success': record.metadata.limits.overdue_items_limits,
-            'fa-circle-thin': !record.metadata.limits.overdue_items_limits
-          }"></i>
-          <span class="pl-3" translate>Limit by overdue items</span>
-        </div>
-        <div class="card-body" *ngIf="record.metadata.limits.overdue_items_limits">
-          <dl class="row m-0">
-            <dt class="offset-1 col-lg-2 col-sm-4 label-title" translate>Limit</dt>
-            <dd class="col">{{ record.metadata.limits.overdue_items_limits.default_value }}</dd>
-          </dl>
-        </div>
-        <!-- unpaid subscription restriction -->
-        <div class="card-header">
-          <i class="fa" [ngClass]="{
-            'fa-circle text-success': record.metadata.limits.unpaid_subscription,
-            'fa-circle-thin': !record.metadata.limits.unpaid_subscription
-          }"></i>
-          <span class="pl-3" translate>Limit to unpaid subscription</span>
+    @if (record.metadata.limits) {
+      <section class="container">
+        <h2 class="mt-4" translate>Limits</h2>
+        <div class="card">
+          <!-- Checkout limits -->
+          <div class="card-header">
+            <i class="fa" [ngClass]="{
+              'fa-circle text-success': record.metadata.limits.checkout_limits,
+              'fa-circle-thin': !record.metadata.limits.checkout_limits
+            }"></i>
+            <span class="pl-3" translate>Limit by checkouts</span>
+          </div>
+          @if (record.metadata.limits.checkout_limits) {
+            <div class="card-body">
+              <dl class="row m-0">
+                <dt class="col-lg-3 col-sm-4 label-title" translate>General limit</dt>
+                <dd class="col">{{ record.metadata.limits.checkout_limits.global_limit }}</dd>
+                <dd class="w-100 m-0"></dd>
+                @if (record.metadata.limits.checkout_limits.library_limit) {
+                  <dt class="col-lg-3 col-sm-4 label-title" translate>Library limit</dt>
+                  <dd class="col">{{ record.metadata.limits.checkout_limits.library_limit }}</dd>
+                  <dd class="w-100 m-0"></dd>
+                }
+                @if (record.metadata.limits.checkout_limits.library_exceptions) {
+                  <dt class="col-lg-3 col-sm-4 label-title" translate>Exceptions</dt>
+                  <dd class="col">
+                    <ul class="list-unstyled">
+                      @for (exception of record.metadata.limits.checkout_limits.library_exceptions; track exception) {
+                        <li class="row">
+                          <div class="col-lg-10 col-sm-9">
+                            <i class="fa fa-university pr-2"></i>
+                            {{ exception.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
+                          </div>
+                          <dd class="col-lg-2 col-sm-1">{{ exception.value }}</dd>
+                        </li>
+                      }
+                    </ul>
+                  </dd>
+                }
+              </dl>
+            </div>
+          }
+          <!-- Fee amount limits -->
+          <div class="card-header">
+            <i class="fa" [ngClass]="{
+              'fa-circle text-success': record.metadata.limits.fee_amount_limits,
+              'fa-circle-thin': !record.metadata.limits.fee_amount_limits
+            }"></i>
+            <span class="pl-3" translate>Limit by fee amount</span>
+          </div>
+          @if (record.metadata.limits.fee_amount_limits) {
+            <div class="card-body">
+              <dl class="row m-0">
+                <dt class="col-lg-3 col-sm-4 label-title" translate>Limit</dt>
+                <dd class="col">{{ record.metadata.limits.fee_amount_limits.default_value | currency: organisation.default_currency }}</dd>
+              </dl>
+            </div>
+          }
+          <!-- overdue items restrictions -->
+          <div class="card-header">
+            <i class="fa" [ngClass]="{
+              'fa-circle text-success': record.metadata.limits.overdue_items_limits,
+              'fa-circle-thin': !record.metadata.limits.overdue_items_limits
+            }"></i>
+            <span class="pl-3" translate>Limit by overdue items</span>
+          </div>
+          @if (record.metadata.limits.overdue_items_limits) {
+            <div class="card-body">
+              <dl class="row m-0">
+                <dt class="col-lg-3 col-sm-4 label-title" translate>Limit</dt>
+                <dd class="col">{{ record.metadata.limits.overdue_items_limits.default_value }}</dd>
+              </dl>
+            </div>
+          }
+          <!-- unpaid subscription restriction -->
+          <div class="card-header">
+            <i class="fa" [ngClass]="{
+              'fa-circle text-success': record.metadata.limits.unpaid_subscription,
+              'fa-circle-thin': !record.metadata.limits.unpaid_subscription
+            }"></i>
+            <span class="pl-3" translate>Limit to unpaid subscription</span>
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+    }
   </dl>
-</ng-container>
+}
diff --git a/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.ts b/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.ts
index 4002dbecb..c65630c10 100644
--- a/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.ts
@@ -1,3 +1,19 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2019-2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 import { Component } from '@angular/core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { Observable } from 'rxjs';
@@ -16,15 +32,15 @@ export class PatronTypesDetailViewComponent implements DetailRecord {
   type: string;
 
   /** Constructor
-   * @param _organisationService: OrganisationService
+   * @param organisationService: OrganisationService
    */
-  constructor(private _organisationService: OrganisationService) { }
+  constructor(private organisationService: OrganisationService) { }
 
   /** Get current organisation
    *  @return: current organisation
    */
   get organisation() {
-    return this._organisationService.organisation;
+    return this.organisationService.organisation;
   }
 
 }
diff --git a/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.html b/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.html
index f8925248f..f6fddbc1a 100644
--- a/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.html
@@ -1,7 +1,7 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2022 RERO
-  Copyright (C) 2022 UCLouvain
+  Copyright (C) 2022-2024 RERO
+  Copyright (C) 2022-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,47 +15,50 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="container" *ngIf="globalPermissions">
-  <h1 translate>Permissions matrix</h1>
-    <div class="my-3">
-      <label for="filter" translate>Filter permission list</label>
-      <input id="filter" class="form-control" #search (keyup)="filterPermissions(search.value)" />
-      <small class="form-text text-muted" translate>Enter a part of the permission name to filter the list.</small>
-    </div>
-    <ng-container *ngIf="filteredPermissionNames.length >0; else noResult">
-      <table class="table table-header-rotated table-striped">
-        <thead>
-          <tr>
-            <th class="vertical-header">&nbsp;</th>
-            <th *ngFor="let role of roles"
-                class="vertical-header"
-                [ngClass]="'type-'+role.type.replace('_', '-')" >
-              <span>{{ role.name| translate }}</span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-            <tr *ngFor="let permissionName of filteredPermissionNames">
-              <td class="permission">{{ permissionName }}</td>
-              <td *ngFor="let role of roles"
-                  class="access text-center"
-                  [ngClass]="'type-'+role.type.replace('_', '-')">
-                <span title="{{ role.name | translate }}">
-                  <i
-                    class="fa fa-square"
-                    [ngClass]="{
-                      'text-success': true === globalPermissions[role.name].actions[permissionName],
-                      'text-danger': false === globalPermissions[role.name].actions[permissionName],
-                      'text-secondary': null === globalPermissions[role.name].actions[permissionName]
-                    }">
-                  </i>
-                </span>
-              </td>
+@if (globalPermissions) {
+  <div class="container">
+    <h1 translate>Permissions matrix</h1>
+      <div class="my-3">
+        <label for="filter" translate>Filter permission list</label>
+        <input id="filter" class="form-control" #search (keyup)="filterPermissions(search.value)" />
+        <small class="form-text text-muted" translate>Enter a part of the permission name to filter the list.</small>
+      </div>
+      @if (filteredPermissionNames.length >0) {
+        <table class="table table-header-rotated table-striped">
+          <thead>
+            <tr>
+              <th class="vertical-header">&nbsp;</th>
+              @for (role of roles; track role) {
+                <th class="vertical-header" [ngClass]="'type-'+role.type.replace('_', '-')">
+                  <span>{{ role.name | translate }}</span>
+                </th>
+              }
             </tr>
-        </tbody>
-      </table>
-    </ng-container>
-    <ng-template #noResult>
-      <h4 class="text-center text-uppercase font-weight-bold mt-4" translate>No Result</h4>
-    </ng-template>
-</div>
+          </thead>
+          <tbody>
+            @for (permissionName of filteredPermissionNames; track permissionName) {
+              <tr>
+                <td class="permission">{{ permissionName }}</td>
+                @for (role of roles; track role) {
+                  <td class="access text-center" [ngClass]="'type-'+role.type.replace('_', '-')">
+                    <span title="{{ role.name | translate }}">
+                      <i
+                        class="fa fa-square"
+                        [ngClass]="{
+                          'text-success': true === globalPermissions[role.name].actions[permissionName],
+                          'text-danger': false === globalPermissions[role.name].actions[permissionName],
+                          'text-secondary': null === globalPermissions[role.name].actions[permissionName]
+                        }">
+                      </i>
+                    </span>
+                  </td>
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
+      } @else {
+        <h4 class="text-center text-uppercase font-weight-bold mt-4" translate>No Result</h4>
+      }
+  </div>
+}
diff --git a/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.scss b/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.scss
index 3ac3a4fc1..1aaa90df9 100644
--- a/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.scss
+++ b/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.scss
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
- * Copyright (C) 2022 UCLouvain
+ * Copyright (C) 2022-2024 RERO
+ * Copyright (C) 2022-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -37,13 +37,13 @@ table {
   }
 
   .vertical-header {
-    text-align: center;
+    text-align: left;
   }
 
   .vertical-header span {
     writing-mode: vertical-rl;
     transform: rotate(180deg);
-    text-align: center;
+    text-align: left;
     max-height: 200px;
   }
 
diff --git a/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.ts b/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.ts
index 8016a6335..8012e189a 100644
--- a/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
- * Copyright (C) 2019-2022 UCLouvain
+ * Copyright (C) 2019-2024 RERO
+ * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -38,15 +38,15 @@ export class PermissionDetailViewComponent implements OnInit {
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _permissionApiService - PermissionApiService
+   * @param permissionApiService - PermissionApiService
    */
   constructor(
-    private _permissionApiService: PermissionApiService
+    private permissionApiService: PermissionApiService
   ) { }
 
   /** OnInit hook */
   ngOnInit(): void {
-    this._permissionApiService
+    this.permissionApiService
       .getAllPermissionsByRole()
       .subscribe((permissions: IRolePermission) => {
         this.roles = [];  // reset the roles;
diff --git a/projects/admin/src/app/record/detail-view/record-masked/record-masked.component.ts b/projects/admin/src/app/record/detail-view/record-masked/record-masked.component.ts
index a7748ea21..640654e04 100644
--- a/projects/admin/src/app/record/detail-view/record-masked/record-masked.component.ts
+++ b/projects/admin/src/app/record/detail-view/record-masked/record-masked.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -19,38 +19,44 @@ import { Component, Input } from '@angular/core';
 @Component({
   selector: 'admin-record-masked',
   template: `
-  <container-element [ngSwitch]="context">
-    <some-element *ngSwitchCase="'eye'">
-      <ng-container *ngIf="record.metadata | keyExists:'_masked'; else noEyeMasked">
+  @switch (context) {
+    @case ('eye') {
+      @if (record.metadata | keyExists:'_masked') {
         <i
           class="fa"
           aria-hidden="true"
           title="{{ (record.metadata._masked ? 'Masked' : 'No masked') | translate }}"
           [ngClass]="{ 'fa-eye-slash text-danger': record.metadata._masked, 'fa-eye text-success': !record.metadata._masked }"
         ></i>
-        <label class="ml-1" *ngIf="withLabel">{{ (record.metadata._masked ? 'Masked' : 'No masked') | translate }}</label>
-      </ng-container>
-      <ng-template #noEyeMasked>
+        @if (withLabel) {
+          <label class="ml-1">{{ (record.metadata._masked ? 'Masked' : 'No masked') | translate }}</label>
+        }
+      } @else {
         <i class="fa fa-eye text-success" title="No masked" aria-hidden="true"></i>
-        <label class="ml-1" *ngIf="withLabel" translate>No masked</label>
-      </ng-template>
-    </some-element>
-    <some-element *ngSwitchCase="'bullet'">
-      <ng-container *ngIf="record.metadata | keyExists:'_masked'; else noBulletMasked">
+        @if (withLabel) {
+          <label class="ml-1" translate>No masked</label>
+        }
+      }
+    }
+    @case ('bullet') {
+      @if (record.metadata | keyExists:'_masked') {
         <i
           class="fa fa-circle"
           title="{{ (record.metadata._masked ? 'Masked' : 'No masked') | translate }}"
           [ngClass]="{'text-danger': !record.metadata._masked, 'text-success': record.metadata._masked }"
           aria-hidden="true"
         ></i>
-        <label class="ml-1" *ngIf="withLabel">{{ (record.metadata._masked ? 'Masked' : 'No masked') | translate }}</label>
-      </ng-container>
-      <ng-template #noBulletMasked>
+        @if (withLabel) {
+          <label class="ml-1">{{ (record.metadata._masked ? 'Masked' : 'No masked') | translate }}</label>
+        }
+      } @else {
         <i class="fa fa-circle text-danger mr-1" title="No masked" aria-hidden="true"></i>
-        <label class="ml-1" *ngIf="withLabel" translate>No masked</label>
-      </ng-template>
-    </some-element>
-  </container-element>
+        @if (withLabel) {
+          <label class="ml-1" translate>No masked</label>
+        }
+      }
+    }
+  }
   `
 })
 export class RecordMaskedComponent {
diff --git a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/report-data/report-data.component.html b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/report-data/report-data.component.html
index c41b7ef8e..7a5c95b38 100644
--- a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/report-data/report-data.component.html
+++ b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/report-data/report-data.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2023 RERO
+  Copyright (C) 2023-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,14 +15,15 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<p-table *ngIf="data && data.length > 0; else noResult" [value]="data" [tableStyle]="{ 'min-width': '50rem' }">
-  <ng-template pTemplate="body" let-line>
-    <tr>
-      <td *ngFor="let value of line">{{ value }}</td>
-    </tr>
-  </ng-template>
-</p-table>
-
-<ng-template #noResult>
+@if (data && data.length > 0) {
+  <p-table [value]="data" [tableStyle]="{ 'min-width': '50rem' }">
+    <ng-template pTemplate="body" let-line>
+      <tr>
+        <td *ngFor="let value of line">{{ value }}</td>
+      </tr>
+    </ng-template>
+  </p-table>
+} @else {
   <p class="m-0 px-4 py-2 text-muted" translate>No result</p>
-</ng-template>
+}
+
diff --git a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.html b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.html
index 7fd092514..0567d8d8a 100644
--- a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.html
+++ b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2023 RERO
+  Copyright (C) 2023-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,23 +15,24 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<table *ngIf="reports?.length; else noResult" class="mt-4 table table-striped">
-  <tbody>
-      <tr *ngFor="let report of reports">
-        <th>
-            <a class="pl-2" target="_blank" [href]="getReportUrl(report.metadata.pid)">
-            {{ report.created | dateTranslate: 'longDate' }}
-            <i class="pl-1 fa fa-external-link"></i>
-          </a>
-        </th>
-        <td class="text-right">
-          <a class="btn btn-link btn-outline-primary" [href]="getReportUrl(report.metadata.pid)+'?format=csv'">
-            <i class="fa fa-download"></i>
-          </a>
-        </td>
-      </tr>
-  </tbody>
-</table>
-<ng-template #noResult>
+@if (reports?.length) {
+  <table class="mt-4 table table-striped">
+    <tbody>
+        <tr *ngFor="let report of reports">
+          <th>
+              <a class="pl-2" target="_blank" [href]="getReportUrl(report.metadata.pid)">
+              {{ report.created | dateTranslate: 'longDate' }}
+              <i class="pl-1 fa fa-external-link"></i>
+            </a>
+          </th>
+          <td class="text-right">
+            <a class="btn btn-link btn-outline-primary" [href]="getReportUrl(report.metadata.pid)+'?format=csv'">
+              <i class="fa fa-download"></i>
+            </a>
+          </td>
+        </tr>
+    </tbody>
+  </table>
+} @else {
   <p class="m-0 px-4 py-2 text-muted" translate>No result</p>
-</ng-template>
+}
diff --git a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.ts b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.ts
index 7b96c6e11..0dc03c14d 100644
--- a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.ts
+++ b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2023 RERO
+ * Copyright (C) 2023-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -32,12 +32,12 @@ export class ReportsListComponent implements OnInit {
 
   /**
    * Constructor
-   * @param _recordService - RecordService
-   * @param _apiService - ApiService
+   * @param recordService - RecordService
+   * @param apiService - ApiService
    */
   constructor(
-    private _recordService: RecordService,
-    private _apiService: ApiService
+    private recordService: RecordService,
+    private apiService: ApiService
   ) {}
 
   /**
@@ -47,16 +47,16 @@ export class ReportsListComponent implements OnInit {
    * @returns the URL as string.
    */
   getReportUrl(pid: string): string {
-    return `${this._apiService.getEndpointByType("stats")}/${pid}`;
+    return `${this.apiService.getEndpointByType("stats")}/${pid}`;
   }
 
   /** OnInit hook */
   ngOnInit(): void {
-    this._recordService
+    this.recordService
       .getRecords("stats", `config.pid:${this.pid}`, 1, 100)
       .pipe(
         map((result: Record) =>
-          this._recordService.totalHits(result.hits.total) === 0
+          this.recordService.totalHits(result.hits.total) === 0
             ? []
             : result.hits.hits
         )
diff --git a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.html b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.html
index 32e2283f1..4ff8cc849 100644
--- a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2023 RERO
+  Copyright (C) 2023-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<ng-container *ngIf="record">
+@if (record) {
   <header class="mb-2">
     <h1>{{ record.metadata.name }}</h1>
     <span [innerHTML]="record.metadata.description | nl2br"></span>
@@ -34,14 +34,14 @@ <h1>{{ record.metadata.name }}</h1>
       </dd>
       <dt class="col-3 label-title" translate>Frequency</dt>
       <dd class="col-9">{{ record.metadata.frequency | translate }}</dd>
-      <ng-container *ngIf="record.metadata.filter_by_libraries?.length > 0">
+      @if (record.metadata.filter_by_libraries?.length > 0) {
         <dt class="col-3 label-title" translate>Filter numbers by libraries</dt>
         <dd class="col-9">
           <div *ngFor="let lib of record.metadata.filter_by_libraries">
             {{ lib.$ref| getRecord: 'libraries' : 'field' : 'name' | async }}
           </div>
         </dd>
-      </ng-container>
+      }
     </dl>
 
     <div class="card mt-3">
@@ -55,35 +55,34 @@ <h5 class="card-header" translate>Configuration</h5>
           <dt class="col-3 label-title" translate>Indicator</dt>
           <dd class="col-9">{{ record.metadata.category.indicator.type | translate }}</dd>
 
-          <ng-container *ngIf="record.metadata.category.indicator.period">
+          @if (record.metadata.category.indicator.period) {
             <dt class="col-3 label-title" translate>Period</dt>
             <dd class="col-9">{{ record.metadata.category.indicator.period | translate }}</dd>
-          </ng-container>
+          }
 
-          <ng-container *ngIf="record.metadata.category.indicator.distributions">
+          @if (record.metadata.category.indicator.distributions) {
             <dt class="col-3 label-title" translate>Distributions</dt>
             <dd class="col-9">
               <ul class="list-inline mb-0">
-                <li
-                  *ngFor="let dist of record.metadata.category.indicator.distributions; let last = last"
-                  class="list-inline-item"
-                >{{ dist | translate }}{{ last ? '' : ' / ' }}</li>
+                @for (dist of record.metadata.category.indicator.distributions; track dist; let last = $last) {
+                  <li class="list-inline-item">{{ dist | translate }}{{ last ? '' : ' / ' }}</li>
+                }
               </ul>
             </dd>
-          </ng-container>
+          }
 
-          <ng-container *ngIf="record.metadata.category.indicator.filter">
+          @if (record.metadata.category.indicator.filter) {
             <dt class="col-3 label-title" translate>Filter</dt>
             <dd class="col-9">{{ record.metadata.category.indicator.filter }}</dd>
-          </ng-container>
-          <ng-container *ngIf="record.created">
+          }
+          @if (record.created) {
             <dt class="col-3 label-title" translate>Created at</dt>
             <dd class="col-9">{{ record.created | dateTranslate: 'medium' }}</dd>
-          </ng-container>
-          <ng-container *ngIf="record.updated">
+          }
+          @if (record.updated) {
             <dt class="col-3 label-title" translate>Updated at</dt>
             <dd class="col-9">{{ record.updated | dateTranslate: 'medium' }}</dd>
-          </ng-container>
+          }
         </dl>
       </div>
     </div>
@@ -91,16 +90,17 @@ <h5 class="card-header" translate>Configuration</h5>
   <tabset>
     <tab>
       <ng-template tabHeading>
-       <span translate>Reports</span>
+        <span translate>Reports</span>
       </ng-template>
         <admin-reports-list [pid]="record.metadata.pid"></admin-reports-list>
     </tab>
     <tab (selectTab)="getLiveValues()">
       <ng-template tabHeading>
-       {{ 'Live Values' | translate }}
+        {{ 'Live Values' | translate }}
       </ng-template>
-        <admin-report-data *ngIf="liveData" [data]="liveData"></admin-report-data>
+      @if (liveData) {
+        <admin-report-data [data]="liveData"></admin-report-data>
+      }
     </tab>
   </tabset>
-
-</ng-container>
+  }
diff --git a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.ts b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.ts
index 958da8f59..d8201685f 100644
--- a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2023 RERO
+ * Copyright (C) 2023-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -41,26 +41,26 @@ export class StatisticsCfgDetailViewComponent
   liveData: any = null;
 
   /** Subscription to (un)follow the record$ Observable */
-  private _subscriptions = new Subscription();
+  private subscriptions = new Subscription();
 
   /**
    * Constructor
    *
-   * @param _http - HttpClient
-   * @param _apiService = ApiService
+   * @param http - HttpClient
+   * @param apiService = ApiService
    */
-  constructor(private _http: HttpClient, private _apiService: ApiService) {}
+  constructor(private http: HttpClient, private apiService: ApiService) {}
 
   /** OnInit hook */
   ngOnInit() {
-    this._subscriptions = this.record$.subscribe((record) => {
+    this.subscriptions = this.record$.subscribe((record) => {
       this.record = record;
     });
   }
 
   /** onDestroy hook */
   ngOnDestroy(): void {
-    this._subscriptions.unsubscribe();
+    this.subscriptions.unsubscribe();
   }
 
   /** Preview values corresponding to the current configuration. */
@@ -69,9 +69,9 @@ export class StatisticsCfgDetailViewComponent
     if (this.liveData != null) {
       return;
     }
-    const pid = this.record.metadata.pid;
-    const baseUrl = this._apiService.endpointPrefix;
-    this._http
+    const { pid } = this.record.metadata;
+    const baseUrl = this.apiService.endpointPrefix;
+    this.http
       .get(`${baseUrl}/stats_cfg/live/${pid}`)
       .subscribe((res) => (this.liveData = res));
   }
diff --git a/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.html b/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.html
index 6beacea9a..7aaec93de 100644
--- a/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,36 +14,36 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-
-<ng-container *ngIf="record">
-  <h2 id="template-name" class="pl-0" *ngIf="record.metadata.name">
-    {{ record.metadata.name }} <ng-container *ngIf="record.metadata.visibility && record.metadata.visibility === 'private'">
-      <i class="fa fa-lock text-secondary" aria-hidden="true"></i>
-    </ng-container>
+@if (record) {
+  <h2 id="template-name" class="pl-0">
+    {{ record.metadata.name }}
+    @if (record.metadata.visibility && record.metadata.visibility === 'private') {
+      <i class="fa fa-lock text-secondary ml-2" aria-hidden="true"></i>
+    }
   </h2>
   <dl class="row mb-0">
     <!-- DESCRIPTION -->
-    <ng-container *ngIf="record.metadata.description">
+    @if (record.metadata.description) {
       <dt [ngClass]="dtCssClass">
         <span class="label-title" translate>
           Description
         </span>
       </dt>
       <dd id="template-description" [ngClass]="ddCssClass" [innerHTML]="record.metadata.description | nl2br"></dd>
-    </ng-container>
+    }
     <!-- CREATOR -->
-    <ng-container *ngIf="record.metadata.creator.pid | getRecord: 'patrons' | async as creator">
+    @if (record.metadata.creator.pid | getRecord: 'patrons' | async; as creator) {
       <dt [ngClass]="dtCssClass">
         <span class="label-title" translate>
           Creator
         </span>
       </dt>
       <dd id="template-creator" [ngClass]="ddCssClass">
-        {{ creator.metadata.first_name }} {{ creator.metadata.last_name }}
+        {{ $any(creator).metadata.first_name }} {{ $any(creator).metadata.last_name }}
       </dd>
-    </ng-container>
+    }
     <!-- TYPE -->
-    <ng-container *ngIf="record.metadata.template_type">
+    @if (record.metadata.template_type) {
       <dt [ngClass]="dtCssClass">
         <span class="label-title" translate>
           Type
@@ -52,6 +52,6 @@ <h2 id="template-name" class="pl-0" *ngIf="record.metadata.name">
       <dd id="template-type" [ngClass]="ddCssClass">
         {{ record.metadata.template_type }}
       </dd>
-    </ng-container>
+    }
   </dl>
-</ng-container>
+}
diff --git a/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.ts b/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.ts
index df6fa2adc..06678b19d 100644
--- a/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -44,30 +44,30 @@ export class TemplateDetailViewComponent implements OnInit, OnDestroy {
   dtCssClass = 'col-sm-3';
 
   /** Record subscription */
-  private _recordSubscription: Subscription;
+  private recordSubscription: Subscription;
 
   /** External identifier for imported record. */
   get pid() {
-    return this._router.snapshot.params.pid;
+    return this.router.snapshot.params.pid;
   }
 
   /** constructor
-   * @param _router - ActivatedRoute to get url parameters.
-   * @param _recordService - RecordService to the MARC version for the record.
+   * @param router - ActivatedRoute to get url parameters.
+   * @param recordService - RecordService to the MARC version for the record.
    */
   constructor(
-    private _router: ActivatedRoute,
-    private _recordService: RecordService
+    private router: ActivatedRoute,
+    private recordService: RecordService
   ) { }
 
   /** On init hook */
   ngOnInit(): void {
-    this._recordSubscription = this.record$.subscribe((record: any) => {
+    this.recordSubscription = this.record$.subscribe((record: any) => {
       this.record = record;
       // only for imported record
       if (record != null && record.metadata != null && this.record.metadata.pid == null) {
-        this.marc$ = this._recordService.getRecord(
-          this._router.snapshot.params.type, this.pid, 0, {
+        this.marc$ = this.recordService.getRecord(
+          this.router.snapshot.params.type, this.pid, 0, {
           Accept: 'application/marc+json, application/json'
         });
       } else {
@@ -78,6 +78,6 @@ export class TemplateDetailViewComponent implements OnInit, OnDestroy {
 
   /** On destroy hook */
   ngOnDestroy(): void {
-    this._recordSubscription.unsubscribe();
+    this.recordSubscription.unsubscribe();
   }
 }
diff --git a/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.html b/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.html
index 9584a7fa4..11794b1b1 100644
--- a/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,81 +14,66 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record$ | async as record">
+@if (record$ | async; as record) {
   <h1 class="mb-3">{{ record.metadata.name }}</h1>
   <article>
     <section class="m-2 p-2">
       <dl class="row mb-0">
         <!-- WEBSITE -->
-        <ng-container *ngIf="record.metadata.website">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
-            Website
-          </dt>
+        @if (record.metadata.website) {
+          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Website</dt>
           <dd class="col-sm-7 col-md-8 mb-0">
             <a target="_blank" href="{{ record.metadata.website }}">{{ record.metadata.website }}</a>
           </dd>
-        </ng-container>
+        }
         <!-- COMMUNICATION_LANGUAGE -->
-        <ng-container *ngIf="record.metadata.communication_language && record.metadata.communication_language.length > 0">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
-            Communication language
-          </dt>
+        @if (record.metadata.communication_language && record.metadata.communication_language.length > 0) {
+          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Communication language</dt>
           <dd class="col-sm-7 col-md-8 mb-0">
             {{ record.metadata.communication_language | translateLanguage:currentLanguage }}
           </dd>
-        </ng-container>
+        }
         <!-- CURRENCY -->
-        <ng-container *ngIf="record.metadata.currency">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
-            Currency
-          </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ record.metadata.currency }}
-          </dd>
-        </ng-container>
+        @if (record.metadata.currency) {
+          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Currency</dt>
+          <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.currency }}</dd>
+        }
         <!-- VAT RATE -->
-        <ng-container *ngIf="record.metadata.tva_rate">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
-           VAT
-          </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ record.metadata.tva_rate }}
-          </dd>
-        </ng-container>
+        @if (record.metadata.tva_rate) {
+          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>VAT</dt>
+          <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.tva_rate }}</dd>
+        }
         <!-- NOTE -->
-        <ng-container *ngIf="record.metadata.note">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
-            Note
-          </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ record.metadata.note }}
-          </dd>
-        </ng-container>
+        @if (record.metadata.note) {
+          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Note</dt>
+          <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.note }}</dd>
+        }
       </dl>
     </section>
 
     <section class="m-2 p-2">
       <tabset>
         <!-- DEFAULT CONTACT -->
-        <ng-container *ngIf="filterContact(record.metadata.contacts, 'default') as defaultContact">
+        @if (filterContact(record.metadata.contacts, 'default'); as defaultContact) {
           <tab heading="{{ 'Default contact details' | translate }}" id="default_address">
             <admin-address-type [addressType]="defaultContact"></admin-address-type>
           </tab>
-        </ng-container>
+        }
         <!-- ORDER CONTACT -->
-        <ng-container *ngIf="filterContact(record.metadata.contacts, 'order') as orderContact">
+        @if (filterContact(record.metadata.contacts, 'order'); as orderContact) {
           <tab heading="{{ 'Order contact details' | translate }}" id="order_address">
             <admin-address-type [addressType]="orderContact"></admin-address-type>
           </tab>
-        </ng-container>
+        }
       </tabset>
     </section>
 
     <!-- OPERATION LOGS-->
-    <admin-operation-logs
-      *ngIf="isEnabledOperationLog"
-      resourceType="vendors"
-      [resourcePid]="record.metadata.pid"
-    ></admin-operation-logs>
+    @if (isEnabledOperationLog) {
+      <admin-operation-logs
+        resourceType="vendors"
+        [resourcePid]="record.metadata.pid"
+      ></admin-operation-logs>
+    }
   </article>
-</ng-container>
+}
diff --git a/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.ts b/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.ts
index 3d9bab3c6..497a9e28f 100644
--- a/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -42,7 +42,7 @@ export class VendorDetailViewComponent implements DetailRecord {
    * @return boolean
    */
   get isEnabledOperationLog(): boolean {
-    return this._operationLogsService.isLogVisible('vendors');
+    return this.operationLogsService.isLogVisible('vendors');
   }
 
   /**
@@ -50,17 +50,17 @@ export class VendorDetailViewComponent implements DetailRecord {
    * @return string - language
    */
   get currentLanguage() {
-    return this._translateService.currentLang;
+    return this.translateService.currentLang;
   }
 
   /**
    * Constructor
-   * @param _translateService - TranslateService
-   * @param _operationLogsService - OperationLogsService
+   * @param translateService - TranslateService
+   * @param operationLogsService - OperationLogsService
    */
   constructor(
-    private _translateService: TranslateService,
-    private _operationLogsService: OperationLogsService
+    private translateService: TranslateService,
+    private operationLogsService: OperationLogsService
   ) {}
 
     filterContact(contacts: any[], type: string): any {
diff --git a/projects/admin/src/app/record/editor/type/field-custom.type.ts b/projects/admin/src/app/record/editor/type/field-custom.type.ts
index 0bf7203ae..5cfb664f9 100644
--- a/projects/admin/src/app/record/editor/type/field-custom.type.ts
+++ b/projects/admin/src/app/record/editor/type/field-custom.type.ts
@@ -22,15 +22,24 @@ import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
   template: `
     <div class="form-group m-0 d-flex align-items-start">
       <!-- label -->
-      <label [attr.for]="id" class="mr-2 col-form-label" *ngIf="to.label && to.hideLabel !== true" [tooltip]="to.description">
-        {{ to.label }}<ng-container *ngIf="to.required && to.hideRequiredMarker !== true">&nbsp;*</ng-container>
-      </label>
+      @if (props.label && props.hideLabel !== true) {
+        <label [attr.for]="id" class="mr-2 col-form-label" [tooltip]="props.description">
+          {{ props.label }}
+          @if (props.required && props.hideRequiredMarker !== true) {
+            &nbsp;*
+          }
+        </label>
+      }
       <!-- field -->
       <div class="flex-grow-1">
-        <ng-container [ngSwitch]="field.type">
-          <formly-field *ngSwitchCase="'input'" [field]="field"></formly-field>
-          <formly-field *ngSwitchCase="'select'" [field]="field"></formly-field>
-        </ng-container>
+        @switch (field.type) {
+          @case ('input') {
+            <formly-field [field]="field"></formly-field>
+          }
+          @case ('select') {
+            <formly-field [field]="field"></formly-field>
+          }
+        }
       </div>
     </div>
   `,
diff --git a/projects/admin/src/app/record/editor/type/repeat-section.type.ts b/projects/admin/src/app/record/editor/type/repeat-section.type.ts
index 8951371e9..39a1b5de4 100644
--- a/projects/admin/src/app/record/editor/type/repeat-section.type.ts
+++ b/projects/admin/src/app/record/editor/type/repeat-section.type.ts
@@ -20,19 +20,21 @@ import { FieldArrayType } from '@ngx-formly/core';
 @Component({
   selector: 'admin-repeat-section',
   template: `
-    <div *ngFor="let field of field.fieldGroup; let i = index;" class="row">
-      <div class="col-11">
-        <formly-field [field]="field"></formly-field>
+    @for (field of field.fieldGroup; track field; let i = $index) {
+      <div class="row">
+        <div class="col-11">
+          <formly-field [field]="field"></formly-field>
+        </div>
+        <div class="col-1 my-0 pt-2 pl-0 d-flex">
+          @if (field.parent.fieldGroup.length > props.minItems) {
+            <i (click)="remove(i)" class="mt-3 pl-3 fa fa-lg fa-trash text-danger" aria-hidden="true"></i>
+          }
+          @if (field.parent.props.maxItems > field.parent.fieldGroup.length && field.parent.fieldGroup.length -1 === i) {
+            <i (click)="add()" class="mt-3 pl-3 fa fa-lg fa-plus-circle text-primary" aria-hidden="true"></i>
+          }
+        </div>
       </div>
-      <div class="col-1 my-0 pt-2 pl-0 d-flex">
-        <ng-container
-          *ngIf="field.parent.fieldGroup.length > to.minItems"
-        ><i (click)="remove(i)" class="mt-3 pl-3 fa fa-lg fa-trash text-danger" aria-hidden="true"></i></ng-container>
-        <ng-container
-          *ngIf="field.parent.props.maxItems > field.parent.fieldGroup.length && field.parent.fieldGroup.length -1 === i"
-        ><i (click)="add()" class="mt-3 pl-3 fa fa-lg fa-plus-circle text-primary" aria-hidden="true"></i></ng-container>
-      </div>
-    </div>
+    }
   `,
 })
 export class RepeatTypeComponent extends FieldArrayType { }
diff --git a/projects/admin/src/app/record/editor/wrappers/identifiedby-value.component.ts b/projects/admin/src/app/record/editor/wrappers/identifiedby-value.component.ts
index 08a630b23..65e0cffab 100644
--- a/projects/admin/src/app/record/editor/wrappers/identifiedby-value.component.ts
+++ b/projects/admin/src/app/record/editor/wrappers/identifiedby-value.component.ts
@@ -28,15 +28,19 @@ import { IdentifierTypes } from '../../../classes/identifiers';
   selector: 'admin-identifiedby-value',
   template: `
     <ng-container #fieldComponent></ng-container>
-    <div *ngIf="message$ | async as message" class="invalid-feedback text-danger d-block">
-      {{ message | translate }}
-    </div>
-    <div *ngIf="asyncRecord$ | async as record" class="invalid-feedback text-info d-block">
-      {{ 'A document already exists under this reference' | translate }}:
-      <a [routerLink]="['/records', 'documents', 'detail', record.pid]" target="_blank">
-        {{ 'Show' | translate }}
-      </a>
-    </div>
+    @if (message$ | async; as message) {
+      <div class="invalid-feedback text-danger d-block">
+        {{ message | translate }}
+      </div>
+    }
+    @if (asyncRecord$ | async; as record) {
+      <div class="invalid-feedback text-info d-block">
+        {{ 'A document already exists under this reference' | translate }}:
+        <a [routerLink]="['/records', 'documents', 'detail', $any(record).pid]" target="_blank">
+          {{ 'Show' | translate }}
+        </a>
+      </div>
+    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
diff --git a/projects/admin/src/app/record/editor/wrappers/user-id/user-id.component.html b/projects/admin/src/app/record/editor/wrappers/user-id/user-id.component.html
index 8124d2f4e..0b89f6c1f 100644
--- a/projects/admin/src/app/record/editor/wrappers/user-id/user-id.component.html
+++ b/projects/admin/src/app/record/editor/wrappers/user-id/user-id.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,17 +14,18 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="user$ | async as user; else create">
+@if (user$ | async; as user) {
   <strong>
-    {{ user.metadata.last_name }}, {{ user.metadata.first_name }} <span *ngIf="user.metadata.city">({{ user.metadata.city }})</span>
+    {{ $any(user).metadata.last_name }}, {{ $any(user).metadata.first_name }}
+    @if (user.metadata.city) {
+      ({{ user.metadata.city }})
+    }
   </strong>
   <button type="button" class="btn btn-outline-primary btn-sm align-baseline ml-2" (click)="openModal()" translate>
     Edit
   </button>
-</ng-container>
-
-<ng-template #create>
-    <button type="button" class="btn btn-outline-primary btn-sm align-baseline ml-2" (click)="openModal()" translate>
-      Edit
-    </button>
-</ng-template>
+} @else {
+  <button type="button" class="btn btn-outline-primary btn-sm align-baseline ml-2" (click)="openModal()" translate>
+    Create
+  </button>
+}
diff --git a/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/cipo-patron-type-item-type.component.html b/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/cipo-patron-type-item-type.component.html
index 3cd15e45d..ce6247e77 100644
--- a/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/cipo-patron-type-item-type.component.html
+++ b/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/cipo-patron-type-item-type.component.html
@@ -1,6 +1,6 @@
  <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,7 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="settings">
+@if (settings) {
   <div class="table-responsive-sm">
     <table class="table table-sm table-striped table-hover">
       <thead>
@@ -26,19 +26,23 @@
         </tr>
       </thead>
       <tbody>
-        <tr scope="row" *ngFor="let itemType of settings; let index = index">
-          <td>{{ itemType.label }}</td>
-          <td *ngFor="let patronType of itemType.patronTypes" class="text-center">
-            <input
-              type="checkbox"
-              [checked]="patronType.checked"
-              [disabled]="patronType.disabled"
-              [indeterminate]="patronType.disabled"
-              (click)="onClick($event.target.checked, itemType.pid, patronType.pid)"
-            >
-          </td>
-        </tr>
+        @for (itemType of settings; track itemType; let index = $index) {
+          <tr scope="row">
+            <td>{{ itemType.label }}</td>
+            @for (patronType of itemType.patronTypes; track patronType) {
+              <td class="text-center">
+                <input
+                  type="checkbox"
+                  [checked]="patronType.checked"
+                  [disabled]="patronType.disabled"
+                  [indeterminate]="patronType.disabled"
+                  (click)="onClick($event.target.checked, itemType.pid, patronType.pid)"
+                >
+              </td>
+            }
+          </tr>
+        }
       </tbody>
     </table>
   </div>
-</ng-container>
+}
diff --git a/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/cipo-patron-type-item-type.component.ts b/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/cipo-patron-type-item-type.component.ts
index 8ac8d58c4..2cc3972cd 100644
--- a/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/cipo-patron-type-item-type.component.ts
+++ b/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/cipo-patron-type-item-type.component.ts
@@ -37,11 +37,11 @@ export class CipoPatronTypeItemTypeComponent extends FieldArrayType implements O
   settings: any;
 
   /** Item types / Circulation category */
-  private _itemTypes = [];
+  private itemTypes = [];
   /** already known circulation policies */
-  private _circPolicies = [];
+  private circPolicies = [];
   /** previous appliedTo libraries */
-  private _prevSelectedLibraries = [];
+  private prevSelectedLibraries = [];
 
    // GETTER & SETTER ==========================================================
   /** Section title */
@@ -75,7 +75,7 @@ export class CipoPatronTypeItemTypeComponent extends FieldArrayType implements O
   /** OnInit hook */
   ngOnInit() {
     const appliedLibraries = this.field.parent.model.libraries || [];
-    this._prevSelectedLibraries = this._getLibrariesRef(appliedLibraries);
+    this.prevSelectedLibraries = this._getLibrariesRef(appliedLibraries);
 
     forkJoin([
       this.patronTypeApiService.getAll(),
@@ -83,8 +83,8 @@ export class CipoPatronTypeItemTypeComponent extends FieldArrayType implements O
       this.circulationPolicyApiService.getAll(this.field.parent.model.pid)
     ]).subscribe(([patronTypes, itemTypes, circPolicies]) => {
       this.patronTypes = patronTypes;
-      this._itemTypes = itemTypes;
-      this._circPolicies = circPolicies;
+      this.itemTypes = itemTypes;
+      this.circPolicies = circPolicies;
       this._loadSettings();
     });
 
@@ -92,8 +92,8 @@ export class CipoPatronTypeItemTypeComponent extends FieldArrayType implements O
     // to rebuild the settings table according to selected libraries.
     this.form.valueChanges.subscribe((changes) => {
       const formLibraries = changes.hasOwnProperty('libraries') ? this._getLibrariesRef(changes.libraries) : [];
-      if (JSON.stringify(formLibraries) !== JSON.stringify(this._prevSelectedLibraries)) {
-        this._prevSelectedLibraries = formLibraries;
+      if (JSON.stringify(formLibraries) !== JSON.stringify(this.prevSelectedLibraries)) {
+        this.prevSelectedLibraries = formLibraries;
         this._loadSettings(); // Rebuild the settings
       }
     });
@@ -142,7 +142,7 @@ export class CipoPatronTypeItemTypeComponent extends FieldArrayType implements O
     const settings = new Settings(this.apiService);
     this.settings = settings
       .setCirculationPolicy(this.form.value)
-      .createStructure(this._itemTypes, this.patronTypes, this._circPolicies, this._prevSelectedLibraries)
+      .createStructure(this.itemTypes, this.patronTypes, this.circPolicies, this.prevSelectedLibraries)
       .getStructure();
     this.ref.detectChanges();
   }
diff --git a/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/class/settings.ts b/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/class/settings.ts
index 8bd2eaec3..cf1273d12 100644
--- a/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/class/settings.ts
+++ b/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/class/settings.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -32,9 +32,9 @@ export class Settings {
 
   /**
    * Constructor
-   * @param _apiService - ApiService
+   * @param apiService - ApiService
    */
-  constructor(private _apiService: ApiService) {}
+  constructor(private apiService: ApiService) {}
 
   /**
    * Set Circulation policy
@@ -64,7 +64,7 @@ export class Settings {
       const item = {
         pid: itemType.metadata.pid,
         label: itemType.metadata.name,
-        value: this._apiService.getRefEndpoint('item_types', itemType.metadata.pid),
+        value: this.apiService.getRefEndpoint('item_types', itemType.metadata.pid),
         patronTypes: []
       };
       patronTypes.forEach(patronType => {
@@ -72,7 +72,7 @@ export class Settings {
         item.patronTypes.push({
           pid: patronType.metadata.pid,
           label: patronType.metadata.name,
-          value: this._apiService.getRefEndpoint('patron_types', patronType.metadata.pid),
+          value: this.apiService.getRefEndpoint('patron_types', patronType.metadata.pid),
           checked: this.circulationMatching.some(e => e === key),
           disabled: this.matching.some(e => e === key)
         });
diff --git a/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local-form/add-entity-local-form.component.html b/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local-form/add-entity-local-form.component.html
index 4a230e26c..4ab4348d0 100644
--- a/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local-form/add-entity-local-form.component.html
+++ b/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local-form/add-entity-local-form.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,28 +15,30 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<form [formGroup]="form" (ngSubmit)="submit()" *ngIf="schema">
-  <div class="modal show d-block" role="dialog">
-    <div class="modal-dialog modal-xl modal-dialog-centered">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" translate>Add local entity</h5>
-          <div class="d-flex">
-            <button type="button" id="user-editor-delete-button" class="btn btn-outline-danger btn-sm mr-1"
-              (click)="closeModal()">
-              <i class="fa fa-times"></i>
-              {{ 'Cancel' | translate }}
-            </button>
-            <button type="submit" id="user-editor-save-button" class="btn btn-primary btn-sm">
-              <i class="fa fa-save"></i>
-              {{ 'Save' | translate }}
-            </button>
+@if (schema) {
+  <form [formGroup]="form" (ngSubmit)="submit()">
+    <div class="modal show d-block" role="dialog">
+      <div class="modal-dialog modal-xl modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" translate>Add local entity</h5>
+            <div class="d-flex">
+              <button type="button" id="user-editor-delete-button" class="btn btn-outline-danger btn-sm mr-1"
+                (click)="closeModal()">
+                <i class="fa fa-times"></i>
+                {{ 'Cancel' | translate }}
+              </button>
+              <button type="submit" id="user-editor-save-button" class="btn btn-primary btn-sm">
+                <i class="fa fa-save"></i>
+                {{ 'Save' | translate }}
+              </button>
+            </div>
+          </div>
+          <div class="modal-body">
+            <formly-form [model]="model" [fields]="fields" [form]="form"></formly-form>
           </div>
-        </div>
-        <div class="modal-body">
-          <formly-form [model]="model" [fields]="fields" [form]="form"></formly-form>
         </div>
       </div>
     </div>
-  </div>
-</form>
+  </form>
+}
diff --git a/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local-form/add-entity-local-form.component.ts b/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local-form/add-entity-local-form.component.ts
index bc70818b1..be91db470 100644
--- a/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local-form/add-entity-local-form.component.ts
+++ b/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local-form/add-entity-local-form.component.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
  * Copyright (C) 2019-2024 RERO
- * Copyright (C) 2019-2024 UCLouvain
+ * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
diff --git a/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local.component.ts b/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local.component.ts
index f8c2cbe8e..3ff88b394 100644
--- a/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local.component.ts
+++ b/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -27,10 +27,12 @@ import { EntityTypeFilter } from './entity-typeahead.interface';
 @Component({
   selector: 'admin-add-entity-local',
   template: `
-  <button class="btn btn-sm btn-primary mt-2" *ngIf="canAdd" (click)="addEntity()">
-    <i class="fa fa-plus-square-o" aria-hidden="true"></i>
-    {{ 'Add local entity' | translate }}
-  </button>
+  @if (canAdd) {
+    <button class="btn btn-sm btn-primary mt-2" (click)="addEntity()">
+      <i class="fa fa-plus-square-o" aria-hidden="true"></i>
+      {{ 'Add local entity' | translate }}
+    </button>
+  }
   `
 })
 export class AddEntityLocalComponent {
diff --git a/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.html b/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.html
index 1e1ce0425..6471847b1 100644
--- a/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.html
+++ b/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,75 +15,86 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div *ngIf="!formControl.value; else metadataTemplate" class="input-group w-100">
-  <!-- Entity type filter selection ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-  <div *ngIf="entityTypeFilters" class="input-group-prepend">
-    <select class="form-control input-group-text" (change)="selectEntityType($event.target.value)">
-      <option *ngFor="let option of entityTypeFilters"
-              [value]="option.value"
-              [selected]="option.selected"
-      >{{ option.label | translate }}</option>
-    </select>
-  </div>
-  <!-- autocomplete/typeahead ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-  <input [(ngModel)]="searchTerm"
-         [typeahead]="suggestion$"
-         [typeaheadAsync]="true"
-         [typeaheadMinLength]="2"
-         [typeaheadWaitMs]="250"
-         [typeaheadLatinize]="true"
-         [optionsListTemplate]="customListTemplate"
-         (typeaheadLoading)="isSuggestionsLoading = $event"
-         (typeaheadOnSelect)="typeaheadOnSelect($event)"
-         class="form-control"/>
-  <!-- Icon ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-  <div class="input-group-append">
-    <span class="input-group-text">
-      <i class="fa fa-search" class="fa" [ngClass]="{
-        'fa-search': !isSuggestionsLoading,
-        'fa-spinner fa-spin': isSuggestionsLoading
-      }"></i>
-    </span>
+@if (!formControl.value) {
+  <div class="input-group w-100">
+    <!-- Entity type filter selection ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
+    @if (entityTypeFilters) {
+      <div class="input-group-prepend">
+        <select class="form-control input-group-text" (change)="selectEntityType($event.target.value)">
+          @for (option of entityTypeFilters; track option) {
+            <option [value]="option.value"
+                    [selected]="option.selected"
+            >{{ option.label | translate }}</option>
+          }
+        </select>
+      </div>
+    }
+    <!-- autocomplete/typeahead ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
+    <input [(ngModel)]="searchTerm"
+           [typeahead]="suggestion$"
+           [typeaheadAsync]="true"
+           [typeaheadMinLength]="2"
+           [typeaheadWaitMs]="250"
+           [typeaheadLatinize]="true"
+           [optionsListTemplate]="customListTemplate"
+           (typeaheadLoading)="isSuggestionsLoading = $event"
+           (typeaheadOnSelect)="typeaheadOnSelect($event)"
+           class="form-control"/>
+    <!-- Icon ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
+    <div class="input-group-append">
+      <span class="input-group-text">
+        <i class="fa fa-search" class="fa" [ngClass]="{
+          'fa-search': !isSuggestionsLoading,
+          'fa-spinner fa-spin': isSuggestionsLoading
+        }"></i>
+      </span>
+    </div>
   </div>
-</div>
-
+} @else {
+  @if (valueAsHTML$ | async; as valueAsHTML) {
+    <div class="py-1">
+      <span [innerHTML]="valueAsHTML"></span>
+      <button class="btn btn-link text-secondary btn-sm" type="button" (click)="clear()">
+        <i class="fa fa-trash"></i>
+      </button>
+    </div>
+  }
+}
 
 <ng-template #customListTemplate let-matches="matches" let-query="query" let-typeaheadTemplateMethods>
   <div class="d-flex">
-    <div *ngFor="let section of suggestionSections; let idx=index" class="dropdown-column" [style]="{order: idx}">
-      <div *ngFor="let suggestion of section"
-           class="dropdown-item d-flex flex-row"
-           [class.suggestionGroupHeader]="suggestion.isHeader()"
-      >
-        <div (click)="typeaheadTemplateMethods.selectMatch(suggestion, $event)" class="dropdown-item-content">
-          <label>{{ suggestion.value }}</label>
-          <span class="dropdown-item-content-description" *ngIf="suggestion.item.description">{{ suggestion.item.description }}</span>
-        </div>
-        <span class="dropdown-item-actions">
-          <a *ngIf="suggestion.item.externalLink" target="_blank" [href]="suggestion.item.externalLink">
-            <i class="fa fa-external-link"></i>
-          </a>
-        </span>
+    @for (section of suggestionSections; track section; let idx=$index) {
+      <div class="dropdown-column" [style]="{order: idx}">
+        @for (suggestion of section; track suggestion) {
+          <div  class="dropdown-item d-flex flex-row"
+               [class.suggestionGroupHeader]="suggestion.isHeader()"
+          >
+            <div (click)="typeaheadTemplateMethods.selectMatch(suggestion, $event)" class="dropdown-item-content">
+              <label>{{ suggestion.value }}</label>
+              @if (suggestion.item.description) {
+                <span class="dropdown-item-content-description">{{ suggestion.item.description }}</span>
+              }
+            </div>
+            <span class="dropdown-item-actions">
+              @if (suggestion.item.externalLink) {
+                <a target="_blank" [href]="suggestion.item.externalLink">
+                  <i class="fa fa-external-link"></i>
+                </a>
+              }
+            </span>
+          </div>
+        }
+        <!-- idx 1: local entity -->
+        @if (idx === 1) {
+          <admin-add-entity-local
+            class="ml-2 w-100"
+            [entityTypeFilters]="entityTypeFilters"
+            [searchTerm]="searchTerm"
+            (recordCreate)="typeaheadTemplateMethods.selectMatch($event)"
+          ></admin-add-entity-local>
+        }
       </div>
-      <!-- idx 1: local entity -->
-      <admin-add-entity-local
-        *ngIf="idx === 1"
-        class="ml-2 w-100"
-        [entityTypeFilters]="entityTypeFilters"
-        [searchTerm]="searchTerm"
-        (recordCreate)="typeaheadTemplateMethods.selectMatch($event)"
-      ></admin-add-entity-local>
-    </div>
-  </div>
-</ng-template>
-
-
-<ng-template #metadataTemplate>
-  <div class="py-1" *ngIf="valueAsHTML$ | async as valueAsHTML">
-    <span [innerHTML]="valueAsHTML"></span>
-    <button class="btn btn-link text-secondary btn-sm" type="button" (click)="clear()">
-      <i class="fa fa-trash"></i>
-    </button>
+    }
   </div>
 </ng-template>
 
diff --git a/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.ts b/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.ts
index 221e77d34..2eb00626a 100644
--- a/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.ts
+++ b/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
  * Copyright (C) 2019-2024 RERO
- * Copyright (C) 2019-2024 UCLouvain
+ * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
diff --git a/projects/admin/src/app/record/operation-logs/operation-logs.component.html b/projects/admin/src/app/record/operation-logs/operation-logs.component.html
index 2df220d07..42b2ac93a 100644
--- a/projects/admin/src/app/record/operation-logs/operation-logs.component.html
+++ b/projects/admin/src/app/record/operation-logs/operation-logs.component.html
@@ -25,28 +25,35 @@ <h5 class="modal-title" translate>Operation history</h5>
         </button>
       </div>
       <div class="modal-body container">
-        <ng-container *ngIf="loadedRecord; else loaded">
-          <ng-container *ngIf="createRecord || records.length > 0; else noRecord">
-            <ng-container *ngIf="createRecord"
-                          [ngTemplateOutlet]="operationLog"
-                          [ngTemplateOutletContext]="{data: createRecord.metadata}">
-            </ng-container>
-            <ng-container *ngIf="recordTotals > 0">
-              <ng-container *ngFor="let record of records"
-                            [ngTemplateOutlet]="operationLog"
-                            [ngTemplateOutletContext]="{data: record.metadata}">
+        @if (loadedRecord) {
+          @if (createRecord || records.length > 0) {
+            @if (createRecord) {
+              <ng-container [ngTemplateOutlet]="operationLog"
+                            [ngTemplateOutletContext]="{data: createRecord.metadata}">
               </ng-container>
-              <ng-container *ngIf="isLinkShowMore">
+            }
+            @if (recordTotals > 0) {
+              @for (record of records; track record) {
+                <ng-container [ngTemplateOutlet]="operationLog"
+                              [ngTemplateOutletContext]="{data: record.metadata}">
+                </ng-container>
+              }
+              @if (isLinkShowMore) {
                 <button type="button" class="btn btn-link pl-1" (click)="showMore()">
                   <i class="fa fa-arrow-circle-o-down"></i> {{ 'Show more' | translate }}
                 </button>
-                <small *ngIf="isLinkShowMore">({{ hiddenOperationLogs }})</small>
-              </ng-container>
-            </ng-container>
-          </ng-container>
-          <ng-template #noRecord>{{ 'No history for this item' | translate }}</ng-template>
-        </ng-container>
-        <ng-template #loaded><i class="fa fa-spinner fa-pulse"></i></ng-template>
+                @if (isLinkShowMore) {
+                  <small>({{ hiddenOperationLogs }})</small>
+                }
+              }
+            }
+          } @else {
+            {{ 'No history for this item' | translate }}
+          }
+
+        } @else {
+          <i class="fa fa-spinner fa-pulse"></i>
+        }
       </div>
     </div>
   </div>
@@ -60,7 +67,9 @@ <h5 class="modal-title" translate>Operation history</h5>
     <div class="col-2 operation">{{ metadata.operation | translate }}</div>
     <div class="col">
       {{ metadata.user_name }}
-      <ng-container *ngIf="metadata.library">- {{ metadata.library.name }}</ng-container>
+      @if (metadata.library) {
+        - {{ metadata.library.name }}
+      }
     </div>
   </div>
 </ng-template>
diff --git a/projects/admin/src/app/record/operation-logs/operation-logs.component.ts b/projects/admin/src/app/record/operation-logs/operation-logs.component.ts
index 66853b77a..1a5325348 100644
--- a/projects/admin/src/app/record/operation-logs/operation-logs.component.ts
+++ b/projects/admin/src/app/record/operation-logs/operation-logs.component.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
  * Copyright (C) 2021-2024 RERO
- * Copyright (C) 2021-2024 UCLouvain
+ * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
diff --git a/projects/admin/src/app/record/search-view/document-advanced-search-form/document-advanced-search-form.component.html b/projects/admin/src/app/record/search-view/document-advanced-search-form/document-advanced-search-form.component.html
index 5f9f9dfae..b65996ef0 100644
--- a/projects/admin/src/app/record/search-view/document-advanced-search-form/document-advanced-search-form.component.html
+++ b/projects/admin/src/app/record/search-view/document-advanced-search-form/document-advanced-search-form.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2021-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -16,18 +16,20 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<div class="card" *ngIf="configurationLoaded">
-  <div class="card-header">
-    {{ 'Build advanced query' | translate }}
-    <i class="fa fa-times float-right mt-1" aria-hidden="true" (click)="close()"></i>
+@if (configurationLoaded) {
+  <div class="card">
+    <div class="card-header">
+      {{ 'Build advanced query' | translate }}
+      <i class="fa fa-times float-right mt-1" aria-hidden="true" (click)="close()"></i>
+    </div>
+    <div class="card-body">
+      <form [formGroup]="form" (ngSubmit)="submit()">
+        <formly-form [model]="model" [fields]="fieldsConfig" [options]="options" [form]="form"></formly-form>
+        <button type="submit" class="btn btn-sm btn-primary submit-button float-right" [disabled]="!form.valid" translate>
+          Search
+        </button>
+        <a class="btn btn-sm btn-outline-primary float-right mr-2" (click)="clear()" translate>Clear</a>
+      </form>
+    </div>
   </div>
-  <div class="card-body">
-    <form [formGroup]="form" (ngSubmit)="submit()">
-      <formly-form [model]="model" [fields]="fieldsConfig" [options]="options" [form]="form"></formly-form>
-      <button type="submit" class="btn btn-sm btn-primary submit-button float-right" [disabled]="!form.valid" translate>
-        Search
-      </button>
-      <a class="btn btn-sm btn-outline-primary float-right mr-2" (click)="clear()" translate>Clear</a>
-    </form>
-  </div>
-</div>
+}
diff --git a/projects/admin/src/app/record/search-view/document-advanced-search-form/document-advanced-search-form.component.ts b/projects/admin/src/app/record/search-view/document-advanced-search-form/document-advanced-search-form.component.ts
index dea4eab44..285dae1e1 100644
--- a/projects/admin/src/app/record/search-view/document-advanced-search-form/document-advanced-search-form.component.ts
+++ b/projects/admin/src/app/record/search-view/document-advanced-search-form/document-advanced-search-form.component.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
  * Copyright (C) 2019-2024 RERO
- * Copyright (C) 2021-2024 UCLouvain
+ * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
diff --git a/projects/admin/src/app/record/search-view/document-advanced-search.component.ts b/projects/admin/src/app/record/search-view/document-advanced-search.component.ts
index 19d7eb75e..9f28a9d72 100644
--- a/projects/admin/src/app/record/search-view/document-advanced-search.component.ts
+++ b/projects/admin/src/app/record/search-view/document-advanced-search.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -24,10 +24,12 @@ import { DocumentAdvancedSearchFormComponent } from './document-advanced-search-
 @Component({
   selector: 'admin-document-advanced-search',
   template: `
-    <button *ngIf="!simple" type="button" class="btn btn-outline-primary mt-2" (click)="openModalBox()">
-      {{ 'Build advanced query' | translate }}
-      <i class="fa fa-search ml-1" aria-hidden="true"></i>
-    </button>
+    @if (!simple) {
+      <button type="button" class="btn btn-outline-primary mt-2" (click)="openModalBox()">
+        {{ 'Build advanced query' | translate }}
+        <i class="fa fa-search ml-1" aria-hidden="true"></i>
+      </button>
+    }
   `
 })
 export class DocumentAdvancedSearchComponent implements OnInit, OnDestroy {
diff --git a/projects/admin/src/app/record/search-view/document-record-search/document-record-search.component.html b/projects/admin/src/app/record/search-view/document-record-search/document-record-search.component.html
index c447a53fa..1abeb0016 100644
--- a/projects/admin/src/app/record/search-view/document-record-search/document-record-search.component.html
+++ b/projects/admin/src/app/record/search-view/document-record-search/document-record-search.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2021-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -29,13 +29,16 @@
   (parametersChanged)="updateUrl($event)"
   (recordsSearched)="recordsSearched($event)"
 >
-  <div class="my-4" *ngIf="currentType === 'documents' && showLink">
-    <a href="#" (click)="linkToGlobalDocuments($event)" translate>
-      Expand to all organisations
-    </a>
-  </div>
-  <admin-document-advanced-search afterInputSearch
-    *ngIf="isAdvancedSearchEnable"
-    (queryString)="changedQueryString($event)"
-  ></admin-document-advanced-search>
+  @if (currentType === 'documents' && showLink) {
+    <div class="my-4">
+      <a href="#" (click)="linkToGlobalDocuments($event)" translate>
+        Expand to all organisations
+      </a>
+    </div>
+  }
+  @if (isAdvancedSearchEnable) {
+    <admin-document-advanced-search afterInputSearch
+      (queryString)="changedQueryString($event)"
+    ></admin-document-advanced-search>
+  }
 </ng-core-record-search>
diff --git a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/payments-data.component.html b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/payments-data.component.html
index facfe7cfa..54bcd5425 100644
--- a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/payments-data.component.html
+++ b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/payments-data.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2022 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2022 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,18 +15,24 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="card mb-2" *ngIf="data.total > 0">
-  <div class="card-header p-0 d-flex">
-    <h5 class="mb-0 btn btn-link text-decoration-none" translate>Amount received</h5>
-    <button class="btn btn-link ml-auto" (click)="updateMode($event)">
-      <i class="fa" [ngClass]="{'fa-list': mode === 'pie', 'fa-pie-chart': mode === 'table'}"></i>
-    </button>
+@if (data.total > 0) {
+  <div class="card mb-2">
+    <div class="card-header p-0 d-flex">
+      <h5 class="mb-0 btn btn-link text-decoration-none" translate>Amount received</h5>
+      <button class="btn btn-link ml-auto" (click)="updateMode($event)">
+        <i class="fa" [ngClass]="{'fa-list': mode === 'pie', 'fa-pie-chart': mode === 'table'}"></i>
+      </button>
+    </div>
+    <div class="card-body p-0">
+      @switch (mode) {
+        @case ('table') {
+          <admin-payments-data-table [data]="data"></admin-payments-data-table>
+        }
+        @case ('pie') {
+          <admin-payments-data-pie [data]="data" class="text-center"></admin-payments-data-pie>
+        }
+      }
+    </div>
   </div>
-  <div class="card-body p-0">
-    <ng-container [ngSwitch]="mode">
-      <admin-payments-data-table *ngSwitchCase="'table'" [data]="data"></admin-payments-data-table>
-      <admin-payments-data-pie *ngSwitchCase="'pie'" [data]="data" class="text-center"></admin-payments-data-pie>
-    </ng-container>
-  </div>
-</div>
+}
 
diff --git a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/pie/payment-data-pie.component.ts b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/pie/payment-data-pie.component.ts
index 2793e795e..d37db473d 100644
--- a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/pie/payment-data-pie.component.ts
+++ b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/pie/payment-data-pie.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2022 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -46,25 +46,25 @@ export class PaymentDataPieComponent implements OnInit {
   // GETTER & SETTER ==========================================================
   /** Organisation currency */
   get org_currency() {
-    return this._organisationService.organisation.default_currency;
+    return this.organisationService.organisation.default_currency;
   }
 
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _organisationService: OrganisationService
-   * @param _translateService: TranslateService
+   * @param organisationService: OrganisationService
+   * @param translateService: TranslateService
    */
   constructor(
-    private _organisationService: OrganisationService,
-    private _translateService: TranslateService
+    private organisationService: OrganisationService,
+    private translateService: TranslateService
   ) {}
 
   /** OnInit hook */
   ngOnInit() {
     if (this.data.subtypes) {
       this.data.subtypes.map(subtype => this.values.push({
-        name: this._translateService.instant(subtype.name),
+        name: this.translateService.instant(subtype.name),
         value: subtype.total
       }));
     }
diff --git a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/table/payments-data-table.component.html b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/table/payments-data-table.component.html
index ccb81247f..a2205e994 100644
--- a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/table/payments-data-table.component.html
+++ b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/table/payments-data-table.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2022 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2022 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -17,12 +17,14 @@
 -->
 
 <ul class="list-unstyled m-0">
-  <li *ngFor="let subtype of data.subtypes">
-    <div class="d-flex justify-content-between">
-      <span>{{ subtype.name | translate }}</span>
-      <span class="ml-auto amount">{{ subtype.total | currency: org_currency: 'symbol' }}</span>
-    </div>
-  </li>
+  @for (subtype of data.subtypes; track subtype) {
+    <li>
+      <div class="d-flex justify-content-between">
+        <span>{{ subtype.name | translate }}</span>
+        <span class="ml-auto amount">{{ subtype.total | currency: org_currency: 'symbol' }}</span>
+      </div>
+    </li>
+  }
   <li class="d-flex justify-content-between total">
     <span translate>Total</span>
     <span class="ml-auto amount">{{ data.total | currency: org_currency: 'symbol' }}</span>
diff --git a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/table/payments-data-table.component.ts b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/table/payments-data-table.component.ts
index 9753477cc..a710c62e8 100644
--- a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/table/payments-data-table.component.ts
+++ b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/table/payments-data-table.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2022 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -33,12 +33,10 @@ export class PaymentsDataTableComponent {
   // GETTER & SETTER ==========================================================
   /** Organisation currency */
   get org_currency() {
-    return this._organisationService.organisation.default_currency;
+    return this.organisationService.organisation.default_currency;
   }
 
   // CONSTRUCTOR & HOOKS ======================================================
-  constructor(
-    private _organisationService: OrganisationService
-  ) {}
+  constructor(private organisationService: OrganisationService) {}
 
 }
diff --git a/projects/admin/src/app/routes/templates-route.ts b/projects/admin/src/app/routes/templates-route.ts
index 9866f52f2..789dae996 100644
--- a/projects/admin/src/app/routes/templates-route.ts
+++ b/projects/admin/src/app/routes/templates-route.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
  * Copyright (C) 2020-2024 RERO
- * Copyright (C) 2020-2024 UCLouvain
+ * Copyright (C) 2020-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
diff --git a/projects/admin/src/app/scss/styles.scss b/projects/admin/src/app/scss/styles.scss
index d0573dd01..25dc5bf3a 100644
--- a/projects/admin/src/app/scss/styles.scss
+++ b/projects/admin/src/app/scss/styles.scss
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -39,6 +39,12 @@ header {
   content: "*";
 }
 
+// ADJUST BOOTSTRAP / PRIMENG -------------------
+.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 // BUTTONS & BUTTON-LINKS -----------------------
 button:disabled:hover {
   cursor: not-allowed;
diff --git a/projects/admin/src/app/shared/preview-email/component/preview-email/preview-email.component.html b/projects/admin/src/app/shared/preview-email/component/preview-email/preview-email.component.html
index c10186e1d..d570844c6 100644
--- a/projects/admin/src/app/shared/preview-email/component/preview-email/preview-email.component.html
+++ b/projects/admin/src/app/shared/preview-email/component/preview-email/preview-email.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2023 RERO
+  Copyright (C) 2023-2024 RERO
   Copyright (C) 2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -25,29 +25,36 @@ <h4 class="modal-title pull-left" [noContent]="noTitle"><ng-content select="[tit
 <div class="modal-body">
   <!-- PREVIEW TOP -->
   <ng-content select="[headerMessage]"></ng-content>
-  <ng-container *ngIf="previewPosition === 'top'">
+  @if (previewPosition === 'top') {
     <h5 translate>Message</h5>
     <ng-content select="[previewMessage]"></ng-content>
     <pre [innerHTML]="preview.trim() | nl2br"></pre>
-  </ng-container>
+  }
 
   <h5 translate>Who do you want to send the message to?</h5>
 
   <!-- SUGGESTED EMAILS -->
-  <div *ngIf="emails.length > 0" class="card">
-    <div class="card-header">
-      <ng-container *ngIf="emails.length < 2; else multipleEmails" translate>Suggested email address</ng-container>
-      <ng-template #multipleEmails translate>Suggested email addresses</ng-template>
-      <small class="ml-1">(<span class="font-italic" translate>Drag and drop</span>)</small>
-    </div>
-    <div class="card-body py-2">
-      <ul class="list-inline mb-1">
-        <li *ngFor="let email of emails" class="list-inline-item mt-2">
-          <p-tag pDraggable="emails" (onDragStart)="dragStart(email)" (onDragEnd)="dragEnd()" icon="pi pi-user" [value]="email"></p-tag>
-        </li>
-      </ul>
+  @if (emails.length > 0) {
+    <div class="card">
+      <div class="card-header">
+        @if (emails.length < 2) {
+          {{ 'Suggested email address' | translate }}
+        } @else {
+          {{ 'Suggested email addresses' | translate }}
+        }
+        <small class="ml-1">(<span class="font-italic" translate>Drag and drop</span>)</small>
+      </div>
+      <div class="card-body py-2">
+        <ul class="list-inline mb-1">
+          @for (email of emails; track email) {
+            <li class="list-inline-item mt-2">
+              <p-tag pDraggable="emails" (onDragStart)="dragStart(email)" (onDragEnd)="dragEnd()" icon="pi pi-user" [value]="email"></p-tag>
+            </li>
+          }
+        </ul>
+      </div>
     </div>
-  </div>
+  }
 
   <!-- RECIPIENTS -->
   <div class="card mt-2">
@@ -56,24 +63,24 @@ <h5 translate>Who do you want to send the message to?</h5>
     </div>
     <div class="card-body py-2 container">
       <div class="row">
-        <ng-container *ngFor="let type of emailTypes">
+        @for (type of emailTypes; track type) {
           <div class="col-2 pt-3 label-title mb-2" [class.field-required]="mandatoryEmailTypes.includes(type)">
             {{ ('email_' + type) | translate }}
           </div>
           <div class="col-10 mb-2">
             <p-chips class="p-fluid" [inputId]="type" pDroppable="emails" (onDrop)="drop($event)" [(ngModel)]="recipients[type]" [addOnBlur]="true"></p-chips>
           </div>
-        </ng-container>
+        }
       </div>
     </div>
   </div>
 
   <!-- PREVIEW BOTTOM -->
-  <ng-container *ngIf="previewPosition === 'bottom'">
+  @if (previewPosition === 'bottom') {
     <h5 translate>Message</h5>
     <ng-content select="[previewBottomMessage]"></ng-content>
     <pre [innerHTML]="preview.trim() | nl2br"></pre>
-  </ng-container>
+  }
 </div>
 <div class="modal-footer">
   <button class="btn btn-outline-danger btn-sm" (click)="close()" aria-label="Close" translate>Cancel</button>
diff --git a/projects/admin/src/app/widgets/custom-shortcut-help/custom-shortcut-help.component.html b/projects/admin/src/app/widgets/custom-shortcut-help/custom-shortcut-help.component.html
index 0f814e0f3..7b30e2441 100644
--- a/projects/admin/src/app/widgets/custom-shortcut-help/custom-shortcut-help.component.html
+++ b/projects/admin/src/app/widgets/custom-shortcut-help/custom-shortcut-help.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020 RERO
+  Copyright (C) 2020-2024 RERO
   Copyright (C) 2020 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,7 +15,7 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="title">
+@if (title) {
   <div class="modal-header">
     <h5 class="modal-title">{{ title }}</h5>
     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -23,20 +23,22 @@ <h5 class="modal-title">{{ title }}</h5>
     </button>
   </div>
   <div class="modal-body">
-    <table class="hotkeys-table-help" cellspacing="0" width="100%" *ngFor="let hotkeyGroup of hotkeys">
-      <thead *ngIf="hotkeyGroup.group">
-        <tr>
-          <th class="hotkeys-table-help-group" colspan="2">{{ hotkeyGroup.group }}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr class="hotkeys-table-help-shortcut" *ngFor="let hotkey of hotkeyGroup.hotkeys">
-          <td class="hotkeys-table-help-shortcut-description" width="75%">{{ hotkey.description }}</td>
-          <td class="hotkeys-table-help-shortcut-keys" width="25%">
-            <kbd [innerHTML]="hotkey.keys | hotkeysShortcut"></kbd>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    @for (hotkeyGroup of hotkeys; track hotkeyGroup) {
+      <table class="hotkeys-table-help" cellspacing="0" width="100%">
+        <thead *ngIf="hotkeyGroup.group">
+          <tr>
+            <th class="hotkeys-table-help-group" colspan="2">{{ hotkeyGroup.group }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="hotkeys-table-help-shortcut" *ngFor="let hotkey of hotkeyGroup.hotkeys">
+            <td class="hotkeys-table-help-shortcut-description" width="75%">{{ hotkey.description }}</td>
+            <td class="hotkeys-table-help-shortcut-keys" width="25%">
+              <kbd [innerHTML]="hotkey.keys | hotkeysShortcut"></kbd>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    }
   </div>
-</ng-container>
+}
diff --git a/projects/admin/src/app/widgets/custom-shortcut-help/custom-shortcut-help.component.ts b/projects/admin/src/app/widgets/custom-shortcut-help/custom-shortcut-help.component.ts
index f718914ce..a088bdaf5 100644
--- a/projects/admin/src/app/widgets/custom-shortcut-help/custom-shortcut-help.component.ts
+++ b/projects/admin/src/app/widgets/custom-shortcut-help/custom-shortcut-help.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  * Copyright (C) 2020 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { HotkeysService } from '@ngneat/hotkeys';
 import { TranslateService } from '@ngx-translate/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
@@ -29,27 +29,27 @@ import { BsModalRef } from 'ngx-bootstrap/modal';
 export class CustomShortcutHelpComponent {
 
   /** the title of the modal window */
-  @Input() title = this._translateService.instant('Available Shortcuts');
+  @Input() title = this.translateService.instant('Available Shortcuts');
   /** the list of implemented shortcuts */
-  hotkeys = this._hotKeysService.getShortcuts();
+  hotkeys = this.hotKeysService.getShortcuts();
 
   /**
    * Constructor
-   * @param _hotKeysService - HotkeysService
-   * @param _bsModalRef - BsModalRef
-   * @param _translateService - TranslateService
+   * @param hotKeysService - HotkeysService
+   * @param bsModalRef - BsModalRef
+   * @param translateService - TranslateService
    */
   constructor(
-    private _hotKeysService: HotkeysService,
-    protected _bsModalRef: BsModalRef,
-    private _translateService: TranslateService
+    private hotKeysService: HotkeysService,
+    protected bsModalRef: BsModalRef,
+    private translateService: TranslateService
   ) {}
 
   /**
    * Close the modal
    */
   closeModal() {
-    this._bsModalRef.hide();
+    this.bsModalRef.hide();
   }
 
 }
diff --git a/projects/public-holdings-items/src/app/app.module.ts b/projects/public-holdings-items/src/app/app.module.ts
index d4b832f54..b83998a3e 100644
--- a/projects/public-holdings-items/src/app/app.module.ts
+++ b/projects/public-holdings-items/src/app/app.module.ts
@@ -47,12 +47,12 @@ export function appInitFactory(appInitializerService: AppInitializerService) {
 
 @NgModule({
     declarations: [
+        HoldingComponent,
         HoldingsComponent,
         ItemComponent,
         ItemsComponent,
-        HoldingComponent,
-        RequestComponent,
-        PickupLocationComponent
+        PickupLocationComponent,
+        RequestComponent
     ],
     imports: [
         BrowserModule,
diff --git a/projects/public-search/src/app/collection-brief/collection-brief.component.html b/projects/public-search/src/app/collection-brief/collection-brief.component.html
index 6e68ab4bf..ca7bbea4c 100644
--- a/projects/public-search/src/app/collection-brief/collection-brief.component.html
+++ b/projects/public-search/src/app/collection-brief/collection-brief.component.html
@@ -1,7 +1,7 @@
 
  <!--
   RERO ILS UI
-  Copyright (C) 2020 RERO
+  Copyright (C) 2020-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,26 +15,24 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-
-<ng-container *ngIf="record">
+@if (record) {
   <h5 class="mb-0 card-title">
     <a id="collection-link" [href]="detailUrl.link">{{ record.metadata.title }}</a>
     ({{ record.metadata.collection_id }})
   </h5>
   <div class="card-text">
-    <div id="collection-teacher" *ngIf="record.metadata.teachers">
-      <ng-container *ngFor="let teacher of record.metadata.teachers; let last = last">
-      {{ teacher.name }}
-      {{ last ? '' : ', ' }}
-      </ng-container>
-    </div>
-    <div
-      id="collection-start-end-date"
-      *ngIf="record.metadata.description"
-      [innerHtml]="record.metadata.description | nl2br"
-    >
-    </div>
+    @if (record.metadata.teachers) {
+      <div id="collection-teacher">
+        @for (teacher of record.metadata.teachers; track teacher; let last = $last) {
+          {{ teacher.name }}
+          {{ last ? '' : ', ' }}
+        }
+      </div>
+    }
+    @if (record.metadata.description) {
+      <div id="collection-start-end-date" [innerHtml]="record.metadata.description | nl2br"></div>
+    }
     {{ record.metadata.start_date | dateTranslate: 'mediumDate' }}
     - {{ record.metadata.end_date | dateTranslate: 'mediumDate' }}
   </div>
-</ng-container>
+}
diff --git a/projects/public-search/src/app/document-brief/document-brief.component.html b/projects/public-search/src/app/document-brief/document-brief.component.html
index 9d7daa87d..5ff1028ff 100644
--- a/projects/public-search/src/app/document-brief/document-brief.component.html
+++ b/projects/public-search/src/app/document-brief/document-brief.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,43 +15,49 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<article *ngIf="record" class="row">
-  <shared-thumbnail [record]="record" [isSmall]="true" class="col-sm-12 col-md-4 col-lg-2"></shared-thumbnail>
-  <div class="col-sm-12 col-md-8 col-lg-10">
-    <!-- document title -->
-    <h4 class="mb-1">
-      <a target="_self" [href]="detailUrl.link | safeUrl">{{ record.metadata.title | mainTitle }}</a>
-    </h4>
-    <!-- contributions -->
-    <shared-contribution [contributions]="record.metadata?.contribution" [view]="viewcode"></shared-contribution>
-    <!-- provision activity publications -->
-    <ul class="list-unstyled" *ngIf="provisionActivityPublications.length > 0">
-      <li *ngFor="let publication of provisionActivityPublications">{{ publication.value }}</li>
-    </ul>
-    <!-- explanation -->
-    <div *ngIf="record.explanation">
-      <a class="badge badge-info collapsed"
-         data-toggle="collapse" href="#{{ 'score' + record.metadata.pid }}"
-         aria-expanded="false">
-         score: {{ record.explanation.value }}
-      </a>
-      <pre class="collapse border border-secondary mt-1" id="{{ 'score' + record.metadata.pid }}">
-        {{ record.explanation | json }}
-      </pre>
+@if (record) {
+  <article class="row">
+    <shared-thumbnail [record]="record" [isSmall]="true" class="col-sm-12 col-md-4 col-lg-2"></shared-thumbnail>
+    <div class="col-sm-12 col-md-8 col-lg-10">
+      <!-- document title -->
+      <h4 class="mb-1">
+        <a target="_self" [href]="detailUrl.link | safeUrl">{{ record.metadata.title | mainTitle }}</a>
+      </h4>
+      <!-- contributions -->
+      <shared-contribution [contributions]="record.metadata?.contribution" [view]="viewcode"></shared-contribution>
+      <!-- provision activity publications -->
+      @if (provisionActivityPublications.length > 0) {
+        <ul class="list-unstyled">
+          @for (publication of provisionActivityPublications; track publication) {
+            <li>{{ publication.value }}</li>
+          }
+        </ul>
+      }
+      <!-- explanation -->
+      @if (record.explanation) {
+        <a class="badge badge-info collapsed"
+            data-toggle="collapse" href="#{{ 'score' + record.metadata.pid }}"
+            aria-expanded="false">
+            score: {{ record.explanation.value }}
+        </a>
+        <pre class="collapse border border-secondary mt-1" id="{{ 'score' + record.metadata.pid }}">
+          {{ record.explanation | json }}
+        </pre>
+      }
+      <!-- part of -->
+      <shared-part-of [record]="record" [viewcode]="viewcode" [isPublicView]="true"></shared-part-of>
+      <!-- edition statement -->
+      @if (record.metadata.editionStatement) {
+        <ul class="list-unstyled mb-0">
+          @for (edition of record.metadata.editionStatement; track edition) {
+            <li>{{ edition._text[0].value }}</li>
+          }
+        </ul>
+      }
+      <!-- availability -->
+      @if (record.metadata.type !== 'ebook') {
+        <shared-availability recordType="document" [record]="record" [apiService]="documentApiService"></shared-availability>
+      }
     </div>
-    <!-- part of -->
-    <shared-part-of [record]="record" [viewcode]="viewcode" [isPublicView]="true"></shared-part-of>
-    <!-- edition statement -->
-    <ul class="list-unstyled mb-0" *ngIf="record.metadata.editionStatement">
-      <li *ngFor="let edition of record.metadata.editionStatement">{{ edition._text[0].value }}</li>
-    </ul>
-    <!-- availability -->
-    <div *ngIf="record.metadata.type !== 'ebook'">
-      <shared-availability
-        recordType="document"
-        [record]="record"
-        [apiService]="documentApiService"
-      ></shared-availability>
-    </div>
-  </div>
-</article>
+  </article>
+}
diff --git a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.html b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.html
index 93195ac90..d09edbe13 100644
--- a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.html
+++ b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -37,69 +37,68 @@
     </div>
     <div id="holding-available-{{ holding.metadata.pid }}" class="col-sm-12 col-md-3">
       <span [hidden]="!collapsed">
-        <ng-container *ngIf="holding.metadata.holdings_type === 'serial'; else available">
-          <i class="fa fa-circle text-warning"></i>
-          {{ 'see collections and items' | translate }}
-        </ng-container>
-        <ng-template #available>
-          <shared-availability
-            recordType="holding"
-            [record]="holding"
-            [apiService]="holdingApiService"
-          ></shared-availability>
-        </ng-template>
+        @if (holding.metadata.holdings_type === 'serial') {
+            <i class="fa fa-circle text-warning"></i>
+            {{ 'see collections and items' | translate }}
+        } @else {
+          <shared-availability recordType="holding" [record]="holding" [apiService]="holdingApiService"></shared-availability>
+        }
       </span>
     </div>
   </div>
-  <!-- SERIAL HOLDING INFORMATIONS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-  <dl class="row ml-1 pt-3" *ngIf="holding.metadata.holdings_type === 'serial'">
-    <!-- CALL NUMBER -->
-    <ng-container *ngIf="holding.metadata.call_number">
-      <dt class="col-lg-3 col-sm-4 label-title mb-0" translate>Call number</dt>
-      <dd id="holding-call-number-{{ holding.metadata.pid }}" class="col-lg-9 col-sm-8 mb-0">
-        {{ holding.metadata.call_number }}
-        <ng-container *ngIf="holding.metadata.second_call_number">
-        | {{ holding.metadata.second_call_number }}
-      </ng-container>
-      </dd>
-    </ng-container>
-    <!-- ENUMERATION AND CHRONOLOGY -->
-    <ng-container *ngIf="holding.metadata.enumerationAndChronology">
-      <dt class="col-lg-3 col-sm-4 label-title mb-0" translate>Available collection</dt>
-      <dd id="holding-enum-chro-{{ holding.metadata.pid }}"
-          class="col-lg-9 col-sm-8 mb-0"
-          [innerHTML]="holding.metadata.enumerationAndChronology | nl2br">
-      </dd>
-    </ng-container>
-    <!-- SUPPLEMENTARY CONTENT -->
-    <ng-container *ngIf="holding.metadata.supplementaryContent">
-      <dt class="col-lg-3 col-sm-4 label-title mb-0" translate>Supplementary content</dt>
-      <dd id="holding-sup-content-{{ holding.metadata.pid }}" class="col-lg-9 col-sm-8 mb-0">{{ holding.metadata.supplementaryContent }}</dd>
-    </ng-container>
-    <!-- INDEX -->
-    <ng-container *ngIf="holding.metadata.index">
-      <dt class="col-lg-3 col-sm-4 label-title mb-0" translate>Indexes</dt>
-      <dd id="holding-index-{{ holding.metadata.pid }}" class="col-lg-9 col-sm-8 mb-0">{{ holding.metadata.index }}</dd>
-    </ng-container>
-    <!-- MISSING ISSUES -->
-    <ng-container *ngIf="holding.metadata.missing_issues">
-      <dt class="col-lg-3 col-sm-4 label-title mb-0" translate>Missing issues</dt>
-      <dd id="holding-missing-issues-{{ holding.metadata.pid }}" class="col-lg-9 col-sm-8 mb-0">{{ holding.metadata.missing_issues }}</dd>
-    </ng-container>
-    <!-- NOTE -->
-    <ng-container *ngIf="holding.metadata.notes">
-      <ng-container *ngFor="let note of holding.metadata.notes | notesFilter : noteAuthorizedTypes">
-        <dt class="col-sm-4 col-lg-3 label-title mb-0">
-          <i class="fa fa-sticky-note-o pr-2"></i>
-          {{ note.type | translate }}
-        </dt>
-        <dd class="col-sm-8 col-lg-9 mb-0" [innerHTML]="note.content | nl2br"></dd>
-      </ng-container>
-    </ng-container>
-  </dl>
+  <!-- SERIAL HOLDING INFORMATION'S -->
+  @if (holding.metadata.holdings_type === 'serial') {
+    <dl class="row ml-1 pt-3">
+      <!-- CALL NUMBER -->
+      @if (holding.metadata.call_number) {
+        <dt class="col-lg-3 col-sm-4 label-title mb-0" translate>Call number</dt>
+        <dd id="holding-call-number-{{ holding.metadata.pid }}" class="col-lg-9 col-sm-8 mb-0">
+          {{ holding.metadata.call_number }}
+          @if (holding.metadata.second_call_number) {
+            | {{ holding.metadata.second_call_number }}
+          }
+        </dd>
+      }
+      <!-- ENUMERATION AND CHRONOLOGY -->
+      @if (holding.metadata.enumerationAndChronology) {
+        <dt class="col-lg-3 col-sm-4 label-title mb-0" translate>Available collection</dt>
+        <dd id="holding-enum-chro-{{ holding.metadata.pid }}"
+            class="col-lg-9 col-sm-8 mb-0"
+            [innerHTML]="holding.metadata.enumerationAndChronology | nl2br">
+        </dd>
+      }
+      <!-- SUPPLEMENTARY CONTENT -->
+      @if (holding.metadata.supplementaryContent) {
+        <dt class="col-lg-3 col-sm-4 label-title mb-0" translate>Supplementary content</dt>
+        <dd id="holding-sup-content-{{ holding.metadata.pid }}" class="col-lg-9 col-sm-8 mb-0">{{ holding.metadata.supplementaryContent }}</dd>
+      }
+      <!-- INDEX -->
+      @if (holding.metadata.index) {
+        <dt class="col-lg-3 col-sm-4 label-title mb-0" translate>Indexes</dt>
+        <dd id="holding-index-{{ holding.metadata.pid }}" class="col-lg-9 col-sm-8 mb-0">{{ holding.metadata.index }}</dd>
+      }
+      <!-- MISSING ISSUES -->
+      @if (holding.metadata.missing_issues) {
+        <dt class="col-lg-3 col-sm-4 label-title mb-0" translate>Missing issues</dt>
+        <dd id="holding-missing-issues-{{ holding.metadata.pid }}" class="col-lg-9 col-sm-8 mb-0">{{ holding.metadata.missing_issues }}</dd>
+      }
+      <!-- NOTE -->
+      @if (holding.metadata.notes) {
+        @for (note of holding.metadata.notes | notesFilter : noteAuthorizedTypes; track note) {
+          <dt class="col-sm-4 col-lg-3 label-title mb-0">
+            <i class="fa fa-sticky-note-o pr-2"></i>
+            {{ note.type | translate }}
+          </dt>
+          <dd class="col-sm-8 col-lg-9 mb-0" [innerHTML]="note.content | nl2br"></dd>
+        }
+      }
+    </dl>
+  }
 </div>
-<ng-container *ngIf="!collapsed">
-  <public-search-items *ngIf="holding.metadata.public_items_count > 0" [holding]="holding" [viewcode]="viewcode"></public-search-items>
+@if (!collapsed) {
+  @if (holding.metadata.public_items_count > 0) {
+    <public-search-items [holding]="holding" [viewcode]="viewcode"></public-search-items>
+  }
   <public-search-request
     [record]="holding"
     recordType="holding"
@@ -108,4 +107,4 @@
     class="w-100"
     [ngClass]="{'mt-2': holding.metadata.public_items_count === 0}"
   ></public-search-request>
-</ng-container>
+}
diff --git a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts
index aab62d91d..3b174389f 100644
--- a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts
+++ b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts
@@ -46,17 +46,17 @@ export class HoldingComponent {
   // GETTER & SETTER ==========================================================
   /** Current interface language */
   get language() {
-    return this._translateService.currentLang;
+    return this.translateService.currentLang;
   }
 
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _translateService - TranslateService
+   * @param translateService - TranslateService
    * @param holdingApiService: HoldingsApiService
    */
   constructor(
-    private _translateService: TranslateService,
+    private translateService: TranslateService,
     public holdingApiService: HoldingsApiService
   ) {}
 }
diff --git a/projects/public-search/src/app/document-detail/holdings/holdings.component.html b/projects/public-search/src/app/document-detail/holdings/holdings.component.html
index 2bb312248..63abf3294 100644
--- a/projects/public-search/src/app/document-detail/holdings/holdings.component.html
+++ b/projects/public-search/src/app/document-detail/holdings/holdings.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,18 +15,19 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <ngx-loading-bar [includeSpinner]="false" height="3px"></ngx-loading-bar>
-<ng-container *ngIf="holdings.length > 0">
-  <public-search-holding *ngFor="let holding of holdings"
-                         [holding]="holding"
-                         [viewcode]="viewcode"
-                         [collapsed]="holdingsTotal > 1"
-                         [attr.id]="holding.metadata.pid | idAttribute : {prefix: 'holding'}"
-                         class="card mt-2 w-100">
-  </public-search-holding>
-  <ng-container *ngIf="isLinkShowMore">
+@if (holdings.length > 0) {
+  @for (holding of holdings; track holding) {
+    <public-search-holding [holding]="holding"
+                            [viewcode]="viewcode"
+                            [collapsed]="holdingsTotal > 1"
+                            [attr.id]="holding.metadata.pid | idAttribute : {prefix: 'holding'}"
+                            class="card mt-2 w-100">
+    </public-search-holding>
+  }
+  @if (isLinkShowMore) {
     <button class="btn btn-link p-0 pr-1 show-more-holdings" (click)="showMore($event)">
       <i class="fa fa-plus-square-o"></i> {{ 'Show more' | translate }}
     </button>
     <small>({{ hiddenHoldings }})</small>
-  </ng-container>
-</ng-container>
+  }
+}
diff --git a/projects/public-search/src/app/document-detail/holdings/holdings.component.ts b/projects/public-search/src/app/document-detail/holdings/holdings.component.ts
index 7387c9c18..574b7d798 100644
--- a/projects/public-search/src/app/document-detail/holdings/holdings.component.ts
+++ b/projects/public-search/src/app/document-detail/holdings/holdings.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -65,26 +65,26 @@ export class HoldingsComponent implements OnInit {
     const linkText = (count > 1)
       ? _('{{ counter }} hidden holdings')
       : _('{{ counter }} hidden holding');
-    return this._translateService.instant(linkText, { counter: count });
+    return this.translateService.instant(linkText, { counter: count });
   }
 
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _holdingsApiService - HoldingsApiService
-   * @param _translateService - TranslateService
-   * @param _appSettingsService - AppSettingsService
+   * @param holdingsApiService - HoldingsApiService
+   * @param translateService - TranslateService
+   * @param appSettingsService - AppSettingsService
    */
   constructor(
-    private _holdingsApiService: HoldingsApiService,
-    private _translateService: TranslateService,
-    private _appSettingsService: AppSettingsService
+    private holdingsApiService: HoldingsApiService,
+    private translateService: TranslateService,
+    private appSettingsService: AppSettingsService
   ) { }
 
   /** OnInit hook */
   ngOnInit(): void {
     // Set view code to app settings
-    this._appSettingsService.currentViewCode = this.viewcode;
+    this.appSettingsService.currentViewCode = this.viewcode;
     this._holdingsQuery(1).subscribe((response: QueryResponse) => {
       this.holdingsTotal = response.total.value;
       this.holdings = response.hits;
@@ -105,7 +105,7 @@ export class HoldingsComponent implements OnInit {
    * @return Observable
    */
   private _holdingsQuery(page: number): Observable<QueryResponse> {
-    return this._holdingsApiService
+    return this.holdingsApiService
       .getHoldingsByDocumentPidAndViewcode(this.documentpid, this.viewcode, page, this.holdingsPerPage);
   }
 }
diff --git a/projects/public-search/src/app/document-detail/holdings/items/items.component.html b/projects/public-search/src/app/document-detail/holdings/items/items.component.html
index 66c4bb85c..b5f156b8f 100644
--- a/projects/public-search/src/app/document-detail/holdings/items/items.component.html
+++ b/projects/public-search/src/app/document-detail/holdings/items/items.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2023 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -16,23 +16,22 @@
 -->
 
 <div class="card-body p-2">
-    <ng-container *ngIf="items.length > 0; else noItems">
+  @if (items.length > 0) {
+    @for (item of items; track item; let index = $index) {
       <public-search-item
-        *ngFor="let item of items; let index = index"
         context="holding"
         [item]="item"
         [viewcode]="viewcode"
         [index]="index"
       ></public-search-item>
-      <ng-container *ngIf="isLinkShowMore">
-        <button type="button" class="btn btn-link pr-1" (click)="showMore()">
-          <i class="fa fa-plus-square-o"></i> {{ 'Show more' | translate }}
-        </button>
-        <small>({{ hiddenItems }})</small>
-      </ng-container>
-    </ng-container>
+    }
+    @if (isLinkShowMore) {
+      <button type="button" class="btn btn-link pr-1" (click)="showMore()">
+        <i class="fa fa-plus-square-o"></i> {{ 'Show more' | translate }}
+      </button>
+      <small>({{ hiddenItems }})</small>
+    }
+  } @else {
+    <div class="card-body pl-4" translate>No item received.</div>
+  }
 </div>
-
-<ng-template #noItems>
-  <div class="card-body pl-4" translate>No item received.</div>
-</ng-template>
diff --git a/projects/public-search/src/app/document-detail/holdings/items/items.component.ts b/projects/public-search/src/app/document-detail/holdings/items/items.component.ts
index 5d8d615e9..9ad0a6fe3 100644
--- a/projects/public-search/src/app/document-detail/holdings/items/items.component.ts
+++ b/projects/public-search/src/app/document-detail/holdings/items/items.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -64,33 +64,33 @@ export class ItemsComponent implements OnInit {
     const linkText = (count > 1)
       ? _('{{ counter }} hidden items')
       : _('{{ counter }} hidden item');
-    return this._translateService.instant(linkText, { counter: count });
+    return this.translateService.instant(linkText, { counter: count });
   }
 
   // CONSTRUCTOR & HOOKS ====================================================
   /**
    * Constructor
-   * @param _itemApiService - ItemApiService
-   * @param _translateService - TranslateService
+   * @param itemApiService - ItemApiService
+   * @param translateService - TranslateService
    */
   constructor(
-    private _itemApiService: ItemApiService,
-    private _translateService: TranslateService
+    private itemApiService: ItemApiService,
+    private translateService: TranslateService
   ) { }
 
   ngOnInit(): void {
-    this._loadItems();
+    this.loadItems();
   }
 
   // COMPONENT FUNCTIONS ==================================================
   /** Handler when 'show more items' link is clicked. */
   showMore() {
     this.page++;
-    this._loadItems();
+    this.loadItems();
   }
 
-  private _loadItems(): void {
-    this._itemApiService.getItemsByHoldingsAndViewcode(
+  private loadItems(): void {
+    this.itemApiService.getItemsByHoldingsAndViewcode(
       this.holding,
       this.viewcode,
       this.page,
diff --git a/projects/public-search/src/app/document-detail/item/item.component.html b/projects/public-search/src/app/document-detail/item/item.component.html
index be9765dde..7c2fde0c0 100644
--- a/projects/public-search/src/app/document-detail/item/item.component.html
+++ b/projects/public-search/src/app/document-detail/item/item.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2023 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -20,85 +20,78 @@
      [class]="{'bg-light': index % 2 === 0}">
   <dl class="m-0 py-2 row">
     <!-- LIBRARY AND LOCATION -->
-    <ng-container *ngIf="context === 'book'">
+    @if (context === 'book') {
       <dt class="mb-0 col-3 label-title" translate>Location</dt>
       <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-location'}" class="mb-0 col-9">
         {{ item.metadata.library.name }}: {{ item.metadata.location.name }}
       </dd>
-    </ng-container>
+    }
     <!-- CALL NUMBER -->
-    <ng-container *ngIf="item.metadata.call_number">
+    @if (item.metadata.call_number) {
       <dt class="mb-0 col-3 label-title" translate>Call number</dt>
       <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-call-number'}" class="mb-0 col-9">
         {{ item.metadata.call_number }}
-        <ng-container *ngIf="item.metadata.second_call_number">
+        @if (item.metadata.second_call_number) {
           | {{ item.metadata.second_call_number }}
-        </ng-container>
+        }
       </dd>
-    </ng-container>
+    }
     <!-- ITEM IN COLLECTION -->
-    <ng-container *ngIf="item.metadata.in_collection; else temporaryLocation">
+    @if (item.metadata.in_collection) {
       <dt class="mb-0 col-3 label-title" translate>Temporary location</dt>
       <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-location-temporary'}" class="mb-0 col-9">
-        <ng-container *ngFor="let collection of item.metadata.in_collection; let last = last">
+        @for (collection of item.metadata.in_collection; track collection; let last = $last) {
           <a href="/{{ collection.viewcode }}/collections/{{ collection.pid }}">{{ collection.title }}</a>
           {{ last ? '' : '; ' }}
-        </ng-container>
+        }
       </dd>
-    </ng-container>
-    <!-- ITEM TEMPORARY LOCATION -->
-    <ng-template #temporaryLocation>
-      <ng-container *ngIf="item.metadata.temporary_location">
+    } @else {
+      @if (item.metadata.temporary_location) {
         <dt class="mb-0 col-3 label-title" translate>Temporary location</dt>
         <dd class="mb-0 col-9">
           <i class="fa fa-exclamation-triangle text-warning" aria-hidden="true"></i>
           {{ item.metadata.temporary_location.name }}
         </dd>
-      </ng-container>
-    </ng-template>
+      }
+    }
     <!-- ITEM CIRCULATION INFORMATION -->
-    <ng-container *ngIf="circulationInformation">
+    @if (circulationInformation) {
       <dt class="mb-0 col-3 label-title" translate>Circulation information</dt>
       <dd class="mb-0 col-9">
         <i class="fa fa-exclamation-triangle text-warning" aria-hidden="true"></i>
         {{ circulationInformation }}
       </dd>
-    </ng-container>
-
+    }
     <!-- ENUMERATION AND CHRONOLOGY -->
-    <ng-container *ngIf="item.metadata.enumerationAndChronology">
+    @if (item.metadata.enumerationAndChronology) {
       <dt class="mb-0 col-3 label-title" translate>Unit</dt>
       <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-enum-chrono'}" class="mb-0 col-9">
         {{ item.metadata.enumerationAndChronology }}
       </dd>
-    </ng-container>
+    }
     <!-- BARCODE -->
     <dt class="mb-0 col-3 label-title" translate>Barcode</dt>
     <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-barcode'}" class="mb-0 col-9">
       {{ item.metadata.barcode }}
     </dd>
     <!-- NOTES -->
-    <ng-container *ngIf="item.metadata.notes && item.metadata.notes.length > 0">
-      <ng-container *ngFor="let note of item.metadata.notes | notesFilter : noteAuthorizedTypes">
+    @if (item.metadata.notes && item.metadata.notes.length > 0) {
+      @for (note of item.metadata.notes | notesFilter : noteAuthorizedTypes; track note) {
         <dt class="mb-0 col-3 label-title">{{ note.type | translate }}</dt>
         <dd class="mb-0 col-9" [innerHTML]="note.content | nl2br"></dd>
-      </ng-container>
-    </ng-container>
+      }
+    }
     <!-- URL -->
-    <ng-container *ngIf="item.metadata.url">
+    @if (item.metadata.url) {
       <dt class="mb-0 col-3 label-title" translate>URL</dt>
       <dd class="mb-0 col-9">
         <a target="_blank" [href]="item.metadata.url | safeUrl">{{ item.metadata.url }}</a>
       </dd>
-    </ng-container>
+    }
     <!-- STATUS -->
     <dt class="mb-0 col-3 label-title" translate>Status</dt>
     <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-status'}" class="mb-0 col-9">
-      <shared-availability
-        recordType="item"
-        [record]="item"
-        [apiService]="itemApiService"
-      ></shared-availability>
+      <shared-availability recordType="item" [record]="item" [apiService]="itemApiService"></shared-availability>
     </dd>
   </dl>
 
diff --git a/projects/public-search/src/app/document-detail/item/item.component.ts b/projects/public-search/src/app/document-detail/item/item.component.ts
index fd16cae00..145185d61 100644
--- a/projects/public-search/src/app/document-detail/item/item.component.ts
+++ b/projects/public-search/src/app/document-detail/item/item.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -36,7 +36,7 @@ export class ItemComponent {
     this._item = item;
     const { circulation_information } = item.metadata.item_type;
     if (circulation_information) {
-      const information = circulation_information.find((obj: any) => obj.language === this._translateService.currentLang);
+      const information = circulation_information.find((obj: any) => obj.language === this.translateService.currentLang);
       if (information) {
         this.circulationInformation = information.label;
       }
@@ -63,7 +63,7 @@ export class ItemComponent {
 
   /** Current interface language */
   get language() {
-    return this._translateService.currentLang;
+    return this.translateService.currentLang;
   }
 
   /** Get item record */
@@ -73,11 +73,11 @@ export class ItemComponent {
 
   /**
    * Constructor
-   * @param _translateService - TranslateService
+   * @param translateService - TranslateService
    * @param itemApiService - ItemApiService
    */
   constructor(
-    private _translateService: TranslateService,
+    private translateService: TranslateService,
     public itemApiService: ItemApiService
   ) {}
 }
diff --git a/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.html b/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.html
index 0e36d2bd9..7c9b2e3d6 100644
--- a/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.html
+++ b/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,37 +14,39 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="fields.length > 0 && showForm">
+@if (fields.length > 0 && showForm) {
   <div id="pickup-location-{{ record.metadata.pid }}" class="row pl-4" [ngClass]="{'mb-4': recordType === 'holding' }">
     <div class="col-12 pl-0">
       <dd class="mb-0 pl-0">
-        <ng-container *ngIf="recordType === 'holding' && itemCount > 0">
+        @if (recordType === 'holding' && itemCount > 0) {
           <div class="alert alert-warning my-4" translate>Please make sure that your requested issue is not listed above.</div>
-        </ng-container>
+
+        }
         <form class="my-2 w-100" [formGroup]="form" (ngSubmit)="submit()">
           <formly-form [model]="model" [fields]="fields" [form]="form"></formly-form>
-          <button
-            id="pickup-location-{{ record.metadata.pid }}-cancel-button"
-            *ngIf="!requestInProgress"
-            class="btn btn-sm btn-outline-secondary mr-2"
-            (click)="closeDialog()"
-            translate
-          >Cancel</button>
+          @if (!requestInProgress) {
+            <button
+              id="pickup-location-{{ record.metadata.pid }}-cancel-button"
+              class="btn btn-sm btn-outline-secondary mr-2"
+              (click)="closeDialog()"
+              translate
+            >Cancel</button>
+          }
           <button id="pickup-location-{{ record.metadata.pid }}-confirm-button" type="submit" class="btn btn-sm btn-primary" [disabled]="!form.valid || requestInProgress">
-            <ng-container *ngIf="!requestInProgress; else inProcess">
+            @if (!requestInProgress) {
               {{ 'Confirm your request' | translate }}
-            </ng-container>
+            } @else {
+              <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
+              {{ 'Request in progress' | translate }}
+            }
           </button>
-          <ng-template #inProcess>
-            <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
-            {{ 'Request in progress' | translate }}
-          </ng-template>
         </form>
       </dd>
     </div>
   </div>
-</ng-container>
-<ng-container *ngIf="requested && !showForm">
+}
+
+@if (requested && !showForm) {
   <div class="row pl-4" [ngClass]="{'mb-4': recordType === 'holding' }">
     <div class="col-12 mpl-0">
       <dd class="mb-0 pl-0">
@@ -54,4 +56,4 @@
       </dd>
     </div>
   </div>
-</ng-container>
+}
diff --git a/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.ts b/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.ts
index 20128e3f7..ecc1a9c24 100644
--- a/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.ts
+++ b/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.ts
@@ -68,22 +68,22 @@ export class PickupLocationComponent implements OnInit {
   };
 
   /**
-   * Construtor
-   * @param _locationApiService - LocationApiService
-   * @param _itemApiService - ItemApiService
-   * @param _holdingsApiService - HoldingsApiService
-   * @param _translateService - TranslateService
+   * Constructor
+   * @param locationApiService - LocationApiService
+   * @param itemApiService - ItemApiService
+   * @param holdingsApiService - HoldingsApiService
+   * @param translateService - TranslateService
    */
   constructor(
-    private _locationApiService: LocationApiService,
-    private _itemApiService: ItemApiService,
-    private _holdingsApiService: HoldingsApiService,
-    private _translateService: TranslateService
+    private locationApiService: LocationApiService,
+    private itemApiService: ItemApiService,
+    private holdingsApiService: HoldingsApiService,
+    private translateService: TranslateService
   ) { }
 
   /** OnInit hook */
   ngOnInit(): void {
-    this._locationApiService
+    this.locationApiService
       .getPickupLocationsByRecordId(this.recordType, this.record.metadata.pid)
       .subscribe((pickups: any) => {
         const options = [];
@@ -96,8 +96,8 @@ export class PickupLocationComponent implements OnInit {
             key: 'description',
             type: 'textarea',
             props: {
-              label: this._translateService.instant('Collection or item year, volume, number, pages'),
-              placeholder: this._translateService.instant('Year / Volume / Number / Pages'),
+              label: this.translateService.instant('Collection or item year, volume, number, pages'),
+              placeholder: this.translateService.instant('Year / Volume / Number / Pages'),
               maxLength: 100,
               required: true,
             }
@@ -108,7 +108,7 @@ export class PickupLocationComponent implements OnInit {
           key: `pickup`,
           type: 'select',
           props: {
-            label: this._translateService.instant('Pickup location'),
+            label: this.translateService.instant('Pickup location'),
             required: true,
             options
           }
@@ -125,13 +125,13 @@ export class PickupLocationComponent implements OnInit {
   submit() {
     this.requestInProgress = true;
     if (this.recordType === 'holding') {
-      this.apiRequest = this._holdingsApiService.request({
+      this.apiRequest = this.holdingsApiService.request({
         holding_pid: this.record.metadata.pid,
         pickup_location_pid: this.model.pickup,
         description: this.model.description,
       });
     } else if (this.recordType === 'item') {
-      this.apiRequest = this._itemApiService.request({
+      this.apiRequest = this.itemApiService.request({
         item_pid: this.record.metadata.pid,
         pickup_location_pid: this.model.pickup,
       });
@@ -146,13 +146,13 @@ export class PickupLocationComponent implements OnInit {
       () => {
         this.requestMessage = {
           success: true,
-          message: this._translateService.instant('Your request has been placed.')
+          message: this.translateService.instant('Your request has been placed.')
         };
       },
       () => {
         this.requestMessage = {
           success: false,
-          message: this._translateService.instant('Error on this request.')
+          message: this.translateService.instant('Error on this request.')
         };
       }
     );
diff --git a/projects/public-search/src/app/document-detail/request/request.component.html b/projects/public-search/src/app/document-detail/request/request.component.html
index 35dff30b3..892869f37 100644
--- a/projects/public-search/src/app/document-detail/request/request.component.html
+++ b/projects/public-search/src/app/document-detail/request/request.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,37 +14,36 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="patron">
-  <ng-container *ngIf="!requestDialog; else requestPickupDialog">
-    <ng-container *ngIf="canRequest">
-      <dl *ngIf="canRequest.can" id="record-request-{{ record.metadata.pid }}" class="row" [ngClass]="{'row pl-4': recordType === 'item', 'mb-3': recordType === 'holding'}">
-        <dt *ngIf="recordType !== 'holding'" class="mt-2 mb-3 col-lg-2 col-sm-3">&nbsp;</dt>
-        <dd class="mt-2 mb-3 col-lg-9 col-sm-8">
-          <button
-            id="record-{{ record.metadata.pid }}-request-button"
-            class="btn btn-sm"
-            [ngClass]="{'btn-primary': recordType === 'item', 'btn-outline-primary': recordType === 'holding'}"
-            (click)="showRequestDialog()"
-          >
-            <ng-container *ngIf="recordType === 'item'; else holdingsButton">
-              {{ 'Request' | translate }}
-            </ng-container>
-            <ng-template #holdingsButton>
-              <ng-container *ngIf="holdingsItemsCount > 0; else holdingsNoItems">
-                {{ 'Request another issue' | translate }}
-              </ng-container>
-              <ng-template #holdingsNoItems>
-                {{ 'Request an issue' | translate }}
-              </ng-template>
-            </ng-template>
-          </button>
-        </dd>
-      </dl>
-    </ng-container>
-  </ng-container>
-  <ng-template #requestPickupDialog>
+@if (patron) {
+  @if (!requestDialog) {
+    <dl id="record-request-{{ record.metadata.pid }}" class="row" [ngClass]="{'row pl-4': recordType === 'item', 'mb-3': recordType === 'holding'}">
+      @if (recordType !== 'holding') {
+        <dt class="mt-2 mb-3 col-lg-2 col-sm-3">&nbsp;</dt>
+      }
+      <dd class="mt-2 mb-3 col-lg-9 col-sm-8">
+        <button
+          id="record-{{ record.metadata.pid }}-request-button"
+          class="btn btn-sm"
+          [ngClass]="{'btn-primary': recordType === 'item', 'btn-outline-primary': recordType === 'holding'}"
+          (click)="showRequestDialog()"
+        >
+          @if (recordType === 'item') {
+            {{ 'Request' | translate }}
+          } @else {
+            @if (holdingsItemsCount > 0) {
+              {{ 'Request another issue' | translate }}
+            } @else {
+              {{ 'Request an issue' | translate }}
+            }
+          }
+        </button>
+      </dd>
+    </dl>
+  } @else {
     <dl class="m-0 ml-4 py-2 row">
-      <dt *ngIf="recordType !== 'holding'" class="my-2 col-lg-2 col-sm-3">&nbsp;</dt>
+      @if (recordType !== 'holding') {
+        <dt class="my-2 col-lg-2 col-sm-3">&nbsp;</dt>
+      }
       <dd class="pl-0 mt-0 mb-3" [ngClass]="{'col-lg-10 col-sm-9': recordType !== 'holding', 'col-lg-12': recordType === 'holding' }">
         <public-search-pickup-location
           [record]="record"
@@ -56,5 +55,5 @@
         ></public-search-pickup-location>
       </dd>
     </dl>
-  </ng-template>
-</ng-container>
+  }
+}
diff --git a/projects/public-search/src/app/document-detail/request/request.component.ts b/projects/public-search/src/app/document-detail/request/request.component.ts
index 80edf60fc..56c111edb 100644
--- a/projects/public-search/src/app/document-detail/request/request.component.ts
+++ b/projects/public-search/src/app/document-detail/request/request.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -59,37 +59,35 @@ export class RequestComponent implements OnInit {
 
   /**
    * Constructor
-   * @param _itemApiService - ItemApiService
-   * @param _holdingsApiService: HoldingsApiService
-   * @param _userService - UserService
+   * @param itemApiService - ItemApiService
+   * @param holdingsApiService: HoldingsApiService
+   * @param userService - UserService
    */
   constructor(
-    private _itemApiService: ItemApiService,
-    private _holdingsApiService: HoldingsApiService,
-    private _userService: UserService,
+    private itemApiService: ItemApiService,
+    private holdingsApiService: HoldingsApiService,
+    private userService: UserService,
   ) { }
 
   /** OnInit hook */
   ngOnInit(): void {
     let apiRequest = null;
     switch (this.recordType) {
-        case 'holding': { apiRequest = this._holdingsApiService; break; }
-        case 'item': { apiRequest = this._itemApiService; break; }
+        case 'holding': { apiRequest = this.holdingsApiService; break; }
+        case 'item': { apiRequest = this.itemApiService; break; }
         default: throw new TypeError(`${this.recordType} isn't supported`);
     }
 
-    if (this._userService.user) {
-      if (this.record) {
-        this._patron = this._userService.user.getPatronByOrganisationPid(
-          this.record.metadata.organisation.pid
-        );
-        if (this._patron?.patron) {
-          apiRequest.canRequest(
-            this.record.metadata.pid,
-            this.record.metadata.library.pid,
-            this._patron.patron.barcode[0],
-          ).subscribe((can: any) => this.canRequest = can);
-        }
+    if (this.userService.user && this.record) {
+      this._patron = this.userService.user.getPatronByOrganisationPid(
+        this.record.metadata.organisation.pid
+      );
+      if (this._patron?.patron) {
+        apiRequest.canRequest(
+          this.record.metadata.pid,
+          this.record.metadata.library.pid,
+          this._patron.patron.barcode[0],
+        ).subscribe((can: any) => this.canRequest = can);
       }
     }
   }
diff --git a/projects/public-search/src/app/document-record-search/document-record-search.component.html b/projects/public-search/src/app/document-record-search/document-record-search.component.html
index e4edaf6e3..970b13a81 100644
--- a/projects/public-search/src/app/document-record-search/document-record-search.component.html
+++ b/projects/public-search/src/app/document-record-search/document-record-search.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020-2023 RERO
+  Copyright (C) 2020-2024 RERO
   Copyright (C) 2020-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -20,7 +20,9 @@
   [showSearchInput]="showSearchInput" [q]="q" [page]="page" [size]="size" [sort]="sort"
   (parametersChanged)="updateUrl($event)" (recordsSearched)="recordsSearched($event)"
 >
-  <div class="my-4" *ngIf="currentType === 'documents' && showLink">
-    <a href="{{ uriGlobalView }}" translate>Expand to all RERO ILS</a>
-  </div>
+  @if (currentType === 'documents' && showLink) {
+    <div class="my-4">
+      <a href="{{ uriGlobalView }}" translate>Expand to all RERO ILS</a>
+    </div>
+  }
 </ng-core-record-search>
diff --git a/projects/public-search/src/app/error/error-page.component.ts b/projects/public-search/src/app/error/error-page.component.ts
index 14e7d7de8..f4f99c6e6 100644
--- a/projects/public-search/src/app/error/error-page.component.ts
+++ b/projects/public-search/src/app/error/error-page.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -29,7 +29,9 @@ export function _(str: string) {
   template: `
     <div class="alert alert-{{ messages[statusCode].level || 'danger' }}">
       <h1 class="alert-heading mb-4">{{ statusCode }} - {{ messages[statusCode].title }}</h1>
-      <pre *ngFor="let text of messages[statusCode].description || []">{{ text }}</pre>
+      @for (text of messages[statusCode].description || []; track text) {
+        <pre>{{ text }}</pre>
+      }
       <hr>
       <p>For any information please contact system administrator</p>
     </div>
@@ -40,11 +42,11 @@ export class ErrorPageComponent implements OnInit {
 
   /** the status code to display. By default 404 : Page not found */
   statusCode = 404;
-  /** All messages ablt to be managed by this component. Availables for each error are :
+  /** All messages alt to be managed by this component. Available for each error are :
    *   - title : the error title
    *   - description : A human readable description of this error as Array<string>. Each array
    *                   element will be a separate line.
-   *   - level: the boostrap alert look-and-feel level to use for the error. 'danger' by default.
+   *   - level: the bootstrap alert look-and-feel level to use for the error. 'danger' by default.
    */
   messages = {
     401: {
@@ -71,7 +73,7 @@ export class ErrorPageComponent implements OnInit {
     },
     500: {
       title: _('Internal server error'),
-      desctiption: [_('Oops, Something went wrong !')]
+      description: [_('Oops, Something went wrong !')]
     }
   };
 
@@ -79,10 +81,10 @@ export class ErrorPageComponent implements OnInit {
    * Constructor
    * @param _route - ActivatedRoute
    */
-  constructor(private _route: ActivatedRoute) { }
+  constructor(private route: ActivatedRoute) { }
 
   ngOnInit() {
-    this._route.params.pipe(
+    this.route.params.pipe(
       map(params => params.status_code || 404),  // check for status_code parameter from ActivatedRoute
       map(code => /^\d+$/.test(code) ? parseInt(code, 10) : 404),  // try to parse status code to integer
       map(code => code in this.messages ? code : 404)  // check if http code definition exists
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.html b/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.html
index 755c1c172..cb9e95248 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2023 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,25 +14,26 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-
-<ng-container *ngIf="document">
+@if (document) {
   <a href="/{{ viewcode }}/documents/{{ record.metadata.document.pid }}" class="d-block">
     {{ record.metadata.document.title | mainTitle }}
   </a>
   <shared-contribution [contributions]="document?.contribution" [view]="viewcode" [limitRecord]="3"></shared-contribution>
-  <div class="container mt-2 pl-0" *ngIf="record.metadata" [collapse]="!showAdditionalInformation" [isAnimated]="isAnimated">
-    <dl class="row">
-      <!-- CALL NUMBER -->
-      <ng-container *ngIf="callNumbers as formattedCallNumbers">
-        <dt class="col-sm-6 col-md-4 col-lg-3 label-title" translate>Call number</dt>
-        <dd class="col-sm-6 col-md-8 col-lg-9">{{ formattedCallNumbers }}</dd>
-      </ng-container>
-      <!-- ENUMERATION AND CHRONOLOGY -->
-      <ng-container *ngIf="record.metadata.item.enumerationAndChronology">
-        <dt class="col-sm-6 col-md-4 col-lg-3 label-title" translate>Unit</dt>
-        <dd class="col-sm-6 col-md-8 col-lg-9">{{ record.metadata.item.enumerationAndChronology }}</dd>
-      </ng-container>
-    </dl>
-    <ng-content select="[additional-metadata]"></ng-content>
-  </div>
-</ng-container>
+  @if (record.metadata) {
+    <div class="container mt-2 pl-0" [collapse]="!showAdditionalInformation" [isAnimated]="isAnimated">
+      <dl class="row">
+        <!-- CALL NUMBER -->
+        @if (callNumbers; as formattedCallNumbers) {
+          <dt class="col-sm-6 col-md-4 col-lg-3 label-title" translate>Call number</dt>
+          <dd class="col-sm-6 col-md-8 col-lg-9">{{ formattedCallNumbers }}</dd>
+        }
+        <!-- ENUMERATION AND CHRONOLOGY -->
+        @if (record.metadata.item.enumerationAndChronology) {
+          <dt class="col-sm-6 col-md-4 col-lg-3 label-title" translate>Unit</dt>
+          <dd class="col-sm-6 col-md-8 col-lg-9">{{ record.metadata.item.enumerationAndChronology }}</dd>
+        }
+      </dl>
+      <ng-content select="[additional-metadata]"></ng-content>
+    </div>
+  }
+}
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.ts
index 1b0a7ff8a..09e6243b7 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.ts
@@ -36,7 +36,7 @@ export class PatronProfileDocumentComponent implements OnInit {
   // GETTER & SETTER ==========================================================
   /** Get current viewcode */
   get viewcode(): string {
-    return this._patronProfileMenuService.currentPatron.organisation.code;
+    return this.patronProfileMenuService.currentPatron.organisation.code;
   }
 
   /** Get the formatted call numbers for the related item */
@@ -50,17 +50,17 @@ export class PatronProfileDocumentComponent implements OnInit {
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _patronProfileMenuService - PatronProfileMenuService
-   * @param _recordService - RecordService
+   * @param patronProfileMenuService - PatronProfileMenuService
+   * @param recordService - RecordService
    */
   constructor(
-    private _patronProfileMenuService: PatronProfileMenuService,
-    private _recordService: RecordService
+    private patronProfileMenuService: PatronProfileMenuService,
+    private recordService: RecordService
   ) {}
 
   /** OnInit hook */
   ngOnInit(): void {
-    this._recordService
+    this.recordService
       .getRecord('documents', this.record.metadata.document.pid, 1, {Accept: 'application/rero+json, application/json'})
       .subscribe(document => this.document = document.metadata);
   }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.html b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.html
index 046d3a48b..69066ca6f 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,94 +15,103 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<div class="d-flex container p-2" *ngIf="record">
-  <button type="button" class="btn-show-more"
-          [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
-          (click)="isCollapsed = !isCollapsed"
-          [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
-  </button>
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-3 pl-0">{{ record.metadata.creation_date | dateTranslate: 'short' }}</div>
-      <div class="col-6">{{ record.metadata.type | translate }}</div>
-      <div class="col-3 text-lg-right">{{ record.metadata.total_amount | currency:organisation.currency:'symbol' }}</div>
-      <!-- FEE DETAILS & EVENTS =========================================== -->
-      <div id="fee-event-{{ record.metadata.pid }}" class="col-lg-12 pl-3"
-           [collapse]="isCollapsed" (expanded)="expanded(record.metadata.pid)" [isAnimated]="true">
-        <div class="mt-2">
-          <!-- NOTE -->
-          <section id="fee-note-{{ record.metadata.pid }}" *ngIf="record.metadata.note">
-            <h5 class="mt-3" translate>Note</h5>
-            {{ record.metadata.note }}
-          </section>
-          <!-- DOCUMENT METADATA -->
-          <section id="fee-{{ record.metadata.pid }}-document" *ngIf="record.metadata.document as document">
-            <h5 class="mt-3" translate>Document</h5>
-            <dl class="container row">
-              <!-- TITLE -->
-              <dt class="col-2 label-title" translate>Title</dt>
-              <dd class="col-10">
-                <a href="/{{ organisation.code }}/documents/{{ document.pid }}">{{ document.title | mainTitle }}</a>
-              </dd>
-              <!-- CALL NUMBER -->
-              <ng-container *ngIf="record.metadata.loan.item.call_number">
-                <dt class="col-2 label-title" translate>Call number</dt>
-                <dd class="col-10">{{ record.metadata.loan.item.call_number }}</dd>
-              </ng-container>
-              <!-- LOAN DATE -->
-              <dt class="col-2 label-title" translate>Loan started at</dt>
-              <dd class="col-10">{{ record.metadata.loan.transaction_date | dateTranslate: 'short' }}</dd>
-            </dl>
-          </section>
+@if (record) {
+  <div class="d-flex container p-2">
+    <button type="button" class="btn-show-more"
+            [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
+            (click)="isCollapsed = !isCollapsed"
+            [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
+    </button>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-3 pl-0">{{ record.metadata.creation_date | dateTranslate: 'short' }}</div>
+        <div class="col-6">{{ record.metadata.type | translate }}</div>
+        <div class="col-3 text-lg-right">{{ record.metadata.total_amount | currency:organisation.currency:'symbol' }}</div>
+        <!-- FEE DETAILS & EVENTS =========================================== -->
+        <div id="fee-event-{{ record.metadata.pid }}" class="col-lg-12 pl-3"
+             [collapse]="isCollapsed" (expanded)="expanded(record.metadata.pid)" [isAnimated]="true">
+          <div class="mt-2">
+            <!-- NOTE -->
+            @if (record.metadata.note) {
+              <section id="fee-note-{{ record.metadata.pid }}">
+                <h5 class="mt-3" translate>Note</h5>
+                {{ record.metadata.note }}
+              </section>
+            }
+            <!-- DOCUMENT METADATA -->
+            @if (record.metadata.document; as document) {
+              <section id="fee-{{ record.metadata.pid }}-document">
+                <h5 class="mt-3" translate>Document</h5>
+                <dl class="container row">
+                  <!-- TITLE -->
+                  <dt class="col-2 label-title" translate>Title</dt>
+                  <dd class="col-10">
+                    <a href="/{{ organisation.code }}/documents/{{ document.pid }}">{{ document.title | mainTitle }}</a>
+                  </dd>
+                  <!-- CALL NUMBER -->
+                  @if (record.metadata.loan.item.call_number) {
+                    <dt class="col-2 label-title" translate>Call number</dt>
+                    <dd class="col-10">{{ record.metadata.loan.item.call_number }}</dd>
+                  }
+                  <!-- LOAN DATE -->
+                  <dt class="col-2 label-title" translate>Loan started at</dt>
+                  <dd class="col-10">{{ record.metadata.loan.transaction_date | dateTranslate: 'short' }}</dd>
+                </dl>
+              </section>
+            }
 
-          <!-- TRANSACTIONS HISTORY -->
-          <h5 class="mt-3" translate>Transactions history</h5>
-          <section id="fee-{{ record.metadata.pid }}-transaction" class="row">
-            <div *ngFor="let event of events" class="col-12 events-timeline">
-              <div class="row pl-2 pr-2 align-items-start timeline-event">
-                <div class="col-3 pr-4 event-timestamp">
-                  <i class="fa fa-calendar-o"></i>
-                  {{ event.metadata.creation_date | dateTranslate: 'shortDate' }}
-                  <i class="fa fa-clock-o pl-1"></i>
-                  {{ event.metadata.creation_date | dateTranslate: 'HH:mm' }}
-                </div>
-                <div class="col-9 event-content">
-                  <div class="row" [ngClass]="{ 'event-highlight': (event.metadata.type === 'dispute'), '': !(event.metadata.type === 'dispute') }">
-                    <div class="col-10 d-inline-block text-truncate label">
-                      {{ event.metadata.type | translate }}
-                      <ng-container *ngIf="event.metadata.subtype">
-                        [{{ event.metadata.subtype | translate }}]
-                      </ng-container>
-                    </div>
-                    <div class="col-2 amount">
-                      <ng-container *ngIf="event.metadata.amount; else noAmount">
-                        <span class="badge" [ngClass]="{ 'badge-success': (event.type === 'payment'), 'badge-danger': (event.type !== 'payment') }">
-                        {{ event.metadata.amount | currency:organisation.currency:'symbol' }}
-                        </span>
-                      </ng-container>
-                      <ng-template #noAmount>&nbsp;</ng-template>
+            <!-- TRANSACTIONS HISTORY -->
+            <h5 class="mt-3" translate>Transactions history</h5>
+            <section id="fee-{{ record.metadata.pid }}-transaction" class="row">
+              @for (event of events; track event) {
+                <div class="col-12 events-timeline">
+                  <div class="row pl-2 pr-2 align-items-start timeline-event">
+                    <div class="col-3 pr-4 event-timestamp">
+                      <i class="fa fa-calendar-o"></i>
+                      {{ event.metadata.creation_date | dateTranslate: 'shortDate' }}
+                      <i class="fa fa-clock-o pl-1"></i>
+                      {{ event.metadata.creation_date | dateTranslate: 'HH:mm' }}
                     </div>
-                    <ng-container *ngIf="event.metadata.note">
-                      <div class="col-3 label-title mt-2">
-                        <i class="fa fa-comment-o pr-1" title="{{ 'Note' | translate }}"></i>
-                        {{ 'Note' | translate }}
+                    <div class="col-9 event-content">
+                      <div class="row" [ngClass]="{ 'event-highlight': (event.metadata.type === 'dispute'), '': !(event.metadata.type === 'dispute') }">
+                        <div class="col-10 d-inline-block text-truncate label">
+                          {{ event.metadata.type | translate }}
+                          @if (event.metadata.subtype) {
+                            [{{ event.metadata.subtype | translate }}]
+                          }
+                        </div>
+                        <div class="col-2 amount">
+                          @if (event.metadata.amount) {
+                            <span class="badge" [ngClass]="{ 'badge-success': (event.type === 'payment'), 'badge-danger': (event.type !== 'payment') }">
+                              {{ event.metadata.amount | currency:organisation.currency:'symbol' }}
+                              </span>
+                          } @else {
+                            &nbsp;
+                          }
+                        </div>
+                        @if (event.metadata.note) {
+                          <div class="col-3 label-title mt-2">
+                            <i class="fa fa-comment-o pr-1" title="{{ 'Note' | translate }}"></i>
+                            {{ 'Note' | translate }}
+                          </div>
+                          <blockquote class="col-9 mt-2">{{ event.metadata.note }}</blockquote>
+                        }
+                        @if (event.metadata.library) {
+                          <div class="col-3 label-title mt-2">
+                            <i class="fa fa-map-marker pr-1" title="{{ 'Library' | translate }}"></i>
+                            {{ 'Library' | translate }}
+                          </div>
+                          <div class="col-9 mt-2">{{ event.metadata.library.name }}</div>
+                        }
                       </div>
-                      <blockquote class="col-9 mt-2">{{ event.metadata.note }}</blockquote>
-                    </ng-container>
-                    <ng-container *ngIf="event.metadata.library">
-                      <div class="col-3 label-title mt-2">
-                        <i class="fa fa-map-marker pr-1" title="{{ 'Library' | translate }}"></i>
-                        {{ 'Library' | translate }}
-                      </div>
-                      <div class="col-9 mt-2">{{ event.metadata.library.name }}</div>
-                    </ng-container>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>
-          </section>
+              }
+            </section>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+}
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.ts
index b1d582fb2..a3a5de581 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -37,20 +37,20 @@ export class PatronProfileFeeComponent {
   events = [];
 
   /** loaded */
-  private _loaded = false;
+  private loaded = false;
 
   get organisation(): IOrganisation {
-    return this._patronProfileMenuService.currentPatron.organisation;
+    return this.patronProfileMenuService.currentPatron.organisation;
   }
 
   /**
    * Constructor
-   * @param _patronTransactionEventApiService - PatronTransactionEventApiService
-   * @param _patronProfileMenuService - PatronProfileMenuService
+   * @param patronTransactionEventApiService - PatronTransactionEventApiService
+   * @param patronProfileMenuService - PatronProfileMenuService
    */
   constructor(
-    private _patronTransactionEventApiService: PatronTransactionEventApiService,
-    private _patronProfileMenuService: PatronProfileMenuService
+    private patronTransactionEventApiService: PatronTransactionEventApiService,
+    private patronProfileMenuService: PatronProfileMenuService
   ) {}
 
   /**
@@ -58,10 +58,10 @@ export class PatronProfileFeeComponent {
    * @param feePid - string
    */
   expanded(feePid: string): void {
-    if (!this._loaded) {
-      this._patronTransactionEventApiService
+    if (!this.loaded) {
+      this.patronTransactionEventApiService
         .getEvents(feePid).subscribe((response: Record) => {
-          this._loaded = true;
+          this.loaded = true;
           this.events = response.hits.hits;
         });
     }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.html b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.html
index 71e39dd41..26f8f28b0 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -27,31 +27,30 @@
     </div>
   </div>
 
-  <ng-container *ngIf="!loaded; else display">
+  @if (!loaded) {
     <div class="row">
       <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
     </div>
-  </ng-container>
-
-  <ng-template #display>
-    <div class="row border" *ngIf="paginator.getRecordsCount() > 0; else noRecord">
-      <div class="container-fluid">
-        <div id="fees-data">
-          <public-search-patron-profile-fee
-            *ngFor="let record of records"
-            [record]="record"
-            id="fee-{{ record.metadata.pid }}"
-            class="row border-bottom">
-          </public-search-patron-profile-fee>
-          <shared-search-show-more-pager id="show-more-fees" [paginator]="paginator"></shared-search-show-more-pager>
+  } @else {
+    @if (paginator.getRecordsCount() > 0) {
+      <div class="row border">
+        <div class="container-fluid">
+          <div id="fees-data">
+            @for (record of records; track record) {
+              <public-search-patron-profile-fee
+                [record]="record"
+                id="fee-{{ record.metadata.pid }}"
+                class="row border-bottom">
+              </public-search-patron-profile-fee>
+            }
+            <shared-search-show-more-pager id="show-more-fees" [paginator]="paginator"></shared-search-show-more-pager>
+          </div>
         </div>
       </div>
-    </div>
-
-    <ng-template #noRecord>
+    } @else {
       <div class="row">
         <div class="col mt-2 font-weight-bold" translate>No fee</div>
       </div>
-    </ng-template>
-  </ng-template>
+    }
+  }
 </section>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.ts
index eafb4a917..4b3ce44a9 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -39,55 +39,50 @@ export class PatronProfileFeesComponent implements OnInit, OnDestroy {
   records = [];
 
   /** Records paginator */
-  private _paginator: Paginator;
+  paginator: Paginator;
 
   /** Observable subscription */
-  private _subscription = new Subscription();
-
-  /** Get paginator */
-  get paginator(): Paginator {
-    return this._paginator;
-  }
+  private subscription = new Subscription();
 
   get currency() {
-    return this._patronProfileMenuService.currentPatron.organisation.currency;
+    return this.patronProfileMenuService.currentPatron.organisation.currency;
   }
 
   /**
-   * Constuctor
-   * @param _patronTransactionApiService - PatronTransactionApiService
-   * @param _patronProfileService - PatronProfileService
-   * @param _patronProfileMenuService - PatronProfileMenuService
+   * Constructor
+   * @param patronTransactionApiService - PatronTransactionApiService
+   * @param patronProfileService - PatronProfileService
+   * @param patronProfileMenuService - PatronProfileMenuService
    */
   constructor(
-    private _patronTransactionApiService: PatronTransactionApiService,
-    private _patronProfileService: PatronProfileService,
-    private _patronProfileMenuService: PatronProfileMenuService
+    private patronTransactionApiService: PatronTransactionApiService,
+    private patronProfileService: PatronProfileService,
+    private patronProfileMenuService: PatronProfileMenuService
   ) {}
 
   /** OnInit hook */
   ngOnInit(): void {
-    this._paginator = new Paginator();
-    this._paginator
+    this.paginator = new Paginator();
+    this.paginator
       .setHiddenInfo(
         _('({{ count }} hidden fee)'),
         _('({{ count }} hidden fees)')
       );
-    this._subscription.add(
-      this._paginator.more$.subscribe((page: number) => {
+    this.subscription.add(
+      this.paginator.more$.subscribe((page: number) => {
         this._queryFee(page).subscribe((response: Record) => {
           this.records = this.records.concat(response.hits.hits);
         });
       })
     );
-    this._subscription.add(
-      this._patronProfileService.tabsEvent$.subscribe((event: ITabEvent) => {
+    this.subscription.add(
+      this.patronProfileService.tabsEvent$.subscribe((event: ITabEvent) => {
         if (event.name === 'fee') {
           if (event.count === 0) {
             this.loaded = true;
           } else {
             this._queryFee(1).subscribe((response: Record) => {
-              this._paginator.setRecordsCount(response.hits.total.value);
+              this.paginator.setRecordsCount(response.hits.total.value);
               this.records = response.hits.hits;
               this.loaded = true;
             });
@@ -96,8 +91,8 @@ export class PatronProfileFeesComponent implements OnInit, OnDestroy {
       })
     );
     /** Cleaning up after the change of organization */
-    this._subscription.add(
-      this._patronProfileMenuService.onChange$.subscribe(() => {
+    this.subscription.add(
+      this.patronProfileMenuService.onChange$.subscribe(() => {
         this.paginator.setRecordsCount(0);
         this.records = [];
         this.loaded = false;
@@ -107,7 +102,7 @@ export class PatronProfileFeesComponent implements OnInit, OnDestroy {
 
   /** OnDestroy hook */
   ngOnDestroy(): void {
-    this._subscription.unsubscribe();
+    this.subscription.unsubscribe();
   }
 
   /**
@@ -117,8 +112,8 @@ export class PatronProfileFeesComponent implements OnInit, OnDestroy {
    * @return Observable
    */
   private _queryFee(page: number, status: string = 'open'): Observable<Record | Error> {
-    const patronPid = this._patronProfileMenuService.currentPatron.pid;
-    return this._patronTransactionApiService
-      .getFees(patronPid, status, page, this._paginator.getRecordsPerPage());
+    const patronPid = this.patronProfileMenuService.currentPatron.pid;
+    return this.patronTransactionApiService
+      .getFees(patronPid, status, page, this.paginator.getRecordsPerPage());
   }
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.html b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.html
index f4646fe6f..19892a5a3 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,33 +14,33 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<!-- header -->
 <section id="histories-section" class="container my-2">
   <div class="d-none d-lg-flex row p-2 bg-dark rounded text-light">
     <div class="col-10" translate>Document</div>
     <div class="col-2" translate>Return date</div>
   </div>
 
-  <div class="row" *ngIf="!loaded; else display">
-    <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
-  </div>
-  <ng-template #display>
-    <ng-container *ngIf="paginator.getRecordsCount() > 0; else noRecord">
+  @defer (when loaded) {
+    @if (paginator.getRecordsCount() > 0) {
       <div class="row border">
         <div class="container">
-          <public-search-patron-profile-history
-            *ngFor="let loan of records"
-            [record]="loan"
-            id="history-{{ loan.metadata.pid }}" class="row border-bottom">
-          </public-search-patron-profile-history>
+          @for (loan of records; track loan) {
+            <public-search-patron-profile-history
+              [record]="loan"
+              id="history-{{ loan.metadata.pid }}" class="row border-bottom">
+            </public-search-patron-profile-history>
+          }
         </div>
       </div>
       <shared-search-show-more-pager id="show-more-loans" [paginator]="paginator" class="row"></shared-search-show-more-pager>
-    </ng-container>
-    <ng-template #noRecord>
+    } @else {
       <div class="row">
         <span class="col mt-2 font-weight-bold" translate>No history</span>
       </div>
-    </ng-template>
-  </ng-template>
+    }
+  } @placeholder {
+    <div class="row">
+      <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
+    </div>
+  }
 </section>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.ts
index 6b287ea7e..1ad29a41b 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -38,51 +38,46 @@ export class PatronProfileHistoriesComponent implements OnInit, OnDestroy {
   isCollapsed = true;
 
   /** Records paginator */
-  private _paginator: Paginator;
+  paginator: Paginator;
 
   /** Observable subscription */
-  private _subscription = new Subscription();
-
-  /** Get paginator */
-  get paginator(): Paginator {
-    return this._paginator;
-  }
+  private subscription = new Subscription();
 
   /**
    * Constructor
-   * @param _operationLogsApiService - OperationLogsApiService
-   * @param _patronProfileService - PatronProfileService
-   * @param _patronProfileMenuService - PatronProfileMenuService
+   * @param operationLogsApiService - OperationLogsApiService
+   * @param patronProfileService - PatronProfileService
+   * @param patronProfileMenuService - PatronProfileMenuService
    */
   constructor(
-    private _operationLogsApiService: OperationLogsApiService,
-    private _patronProfileService: PatronProfileService,
-    private _patronProfileMenuService: PatronProfileMenuService
+    private operationLogsApiService: OperationLogsApiService,
+    private patronProfileService: PatronProfileService,
+    private patronProfileMenuService: PatronProfileMenuService
   ) {}
 
   /** OnInit hook */
   ngOnInit(): void {
-    this._paginator = new Paginator();
-    this._paginator
+    this.paginator = new Paginator();
+    this.paginator
       .setHiddenInfo(
         _('({{ count }} hidden history)'),
         _('({{ count }} hidden histories)')
       );
-    this._subscription.add(
-      this._paginator.more$.subscribe((page: number) => {
+    this.subscription.add(
+      this.paginator.more$.subscribe((page: number) => {
         this._historyQuery(page).subscribe((response: Record) => {
           this.records = this.records.concat(response.hits.hits);
         });
       })
     );
-    this._subscription.add(
-      this._patronProfileService.tabsEvent$.subscribe((event: ITabEvent) => {
+    this.subscription.add(
+      this.patronProfileService.tabsEvent$.subscribe((event: ITabEvent) => {
         if (event.name === 'history') {
           if (event.count === 0) {
             this.loaded = true;
           } else {
             this._historyQuery(1).subscribe((response: Record) => {
-              this._paginator.setRecordsCount(response.hits.total.value);
+              this.paginator.setRecordsCount(response.hits.total.value);
               this.records = response.hits.hits;
               this.loaded = true;
             });
@@ -91,15 +86,15 @@ export class PatronProfileHistoriesComponent implements OnInit, OnDestroy {
       })
     );
     /** Reset content of history tab if cancel request */
-    this._subscription.add(
-      this._patronProfileService.cancelRequestEvent$.subscribe(() => {
+    this.subscription.add(
+      this.patronProfileService.cancelRequestEvent$.subscribe(() => {
         this.records = [];
-        this._paginator.setRecordsCount(0);
+        this.paginator.setRecordsCount(0);
       })
     );
     /** Cleaning up after the change of organization */
-    this._subscription.add(
-      this._patronProfileMenuService.onChange$.subscribe(() => {
+    this.subscription.add(
+      this.patronProfileMenuService.onChange$.subscribe(() => {
         this.paginator.setRecordsCount(0);
         this.records = [];
         this.loaded = false;
@@ -109,7 +104,7 @@ export class PatronProfileHistoriesComponent implements OnInit, OnDestroy {
 
   /** OnDestroy hook */
   ngOnDestroy(): void {
-    this._subscription.unsubscribe();
+    this.subscription.unsubscribe();
   }
 
   /**
@@ -118,8 +113,8 @@ export class PatronProfileHistoriesComponent implements OnInit, OnDestroy {
    * @return Observable
    */
   private _historyQuery(page: number): Observable<Record | Error> {
-    const patronPid = this._patronProfileMenuService.currentPatron.pid;
-    return this._operationLogsApiService
-      .getHistory(patronPid, page, this._paginator.getRecordsPerPage());
+    const patronPid = this.patronProfileMenuService.currentPatron.pid;
+    return this.operationLogsApiService
+      .getHistory(patronPid, page, this.paginator.getRecordsPerPage());
   }
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.html b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.html
index 8eeed3939..4a403d969 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2023 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,21 +15,27 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<div class="container p-2" *ngIf="record">
-  <div class="row">
-    <!-- DOCUMENT & ADDITIONAL DATA ===================================== -->
-    <div *ngVar="record.metadata.loan.item.document.pid | getRecord:'documents':'object':'':{ Accept:'application/rero+json' } | async as document"
-         class="col-sm-12 col-lg-10">
-      <a *ngIf="document; else nodocument" href="/{{ viewcode }}/documents/{{ record.metadata.loan.item.document.pid }}">
+@if (record) {
+  <div class="container p-2">
+    <div class="row">
+      <!-- DOCUMENT & ADDITIONAL DATA -->
+      <div *ngVar="record.metadata.loan.item.document.pid | getRecord:'documents':'object':'':{ Accept:'application/rero+json' } | async as document" class="col-sm-12 col-lg-10">
+        @if (document) {
+          <a href="/{{ viewcode }}/documents/{{ record.metadata.loan.item.document.pid }}">
+            {{ record.metadata.loan.item.document.title }}
+          </a>
+        } @else {
         {{ record.metadata.loan.item.document.title }}
-      </a>
-      <ng-template #nodocument>{{ record.metadata.loan.item.document.title }}</ng-template>
-      <shared-contribution *ngIf="document" [contributions]="document.metadata?.contribution" [view]="viewcode"></shared-contribution>
-    </div>
-    <!-- DUE DATE  ====================================================== -->
-    <div class="col-sm-12 col-lg-2">
-      <span class="d-inline d-lg-none label-title font-weight-bold" translate>Return date</span>
-      {{ record.metadata.date | dateTranslate: 'shortDate' }}
+        }
+        @if (document) {
+          <shared-contribution [contributions]="document.metadata?.contribution" [view]="viewcode"></shared-contribution>
+        }
+      </div>
+      <!-- DUE DATE -->
+      <div class="col-sm-12 col-lg-2">
+        <span class="d-inline d-lg-none label-title font-weight-bold" translate>Return date</span>
+        {{ record.metadata.date | dateTranslate: 'shortDate' }}
+      </div>
     </div>
   </div>
-</div>
+}
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.ts
index 588fa976b..4a30cfaa5 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -32,14 +32,12 @@ export class PatronProfileHistoryComponent {
 
   /** Get current viewcode */
   get viewcode(): string {
-    return this._patronProfileMenuService.currentPatron.organisation.code;
+    return this.patronProfileMenuService.currentPatron.organisation.code;
   }
 
   /**
    * Constructor
-   * @param _patronProfileMenuService - PatronProfileMenuService
+   * @param patronProfileMenuService - PatronProfileMenuService
    */
-  constructor(
-    private _patronProfileMenuService: PatronProfileMenuService
-  ) {}
+  constructor(private patronProfileMenuService: PatronProfileMenuService) {}
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.html b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.html
index dd10a13b3..e452af8fc 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -22,91 +22,94 @@
           [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
   </button>
   <div class="container-fluid">
-    <!-- ILL DOCUMENT & STATUS ============================================ -->
+    <!-- ILL DOCUMENT & STATUS -->
     <div class="row">
       <div class="col-lg-10 col-8 pl-0">
         <div>{{ record.metadata.document.title }}</div>
         <div class="small">{{ record.metadata.document.authors }}</div>
       </div>
       <div class="col-lg-2 col-4 text-right pr-0">
-        <span *ngIf="record.metadata.status !== 'validated' else notValidated"
-              class="badge px-2 py-1 mr-1 font-weight-normal"
-              [ngClass]="record.metadata.status | statusBadge">
-          {{ record.metadata.status | translate }}
-        </span>
-        <ng-template #notValidated>
-          <span *ngIf="record.metadata.loan_status"
-                class="badge px-2 py-1 mr-1 font-weight-normal badge-secondary"
-                [ngClass]="record.metadata.loan_status | loanStatusBadge">
-            {{ record.metadata.loan_status | translate }}
+        @if (record.metadata.status !== 'validated') {
+          <span class="badge px-2 py-1 mr-1 font-weight-normal"
+            [ngClass]="record.metadata.status | statusBadge">
+            {{ record.metadata.status | translate }}
           </span>
-        </ng-template>
+        } @else {
+          @if (record.metadata.loan_status) {
+            <span class="badge px-2 py-1 mr-1 font-weight-normal badge-secondary"
+              [ngClass]="record.metadata.loan_status | loanStatusBadge">
+              {{ record.metadata.loan_status | translate }}
+            </span>
+          }
+        }
       </div>
     </div>
-    <!-- ILL DETAIL ======================================================= -->
+    <!-- ILL DETAIL -->
     <section id="ill-detail-{{ record.metadata.pid }}" [collapse]="isCollapsed" [isAnimated]="true" class="col-12 p-0">
       <dl class="row mt-2">
         <!-- PUBLISHER -->
-        <ng-container *ngIf="record.metadata.document.publisher">
+        @if (record.metadata.document.publisher) {
           <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Publisher</dt>
           <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">{{ record.metadata.document.publisher }}</dd>
-        </ng-container>
+        }
         <!-- YEAR -->
-        <ng-container *ngIf="record.metadata.document.year">
+        @if (record.metadata.document.year) {
           <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Year</dt>
           <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">{{ record.metadata.document.year }}</dd>
-        </ng-container>
+        }
         <!-- IDENTIFIER -->
-        <ng-container *ngIf="record.metadata.document.identifier">
+        @if (record.metadata.document.identifier) {
           <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Identifier</dt>
           <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">{{ record.metadata.document.identifier }}</dd>
-        </ng-container>
+        }
         <!-- SOURCE -->
-        <ng-container *ngIf="record.metadata.document.source">
+        @if (record.metadata.document.source) {
           <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Source</dt>
           <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">
-            <ng-container *ngIf="record.metadata.document.source.volume || record.metadata.document.source.number">
+            @if (record.metadata.document.source.volume || record.metadata.document.source.number) {
               {{ record.metadata.document.source | journalVolume }}
-            </ng-container>
+            }
           </dd>
-        </ng-container>
+        }
         <!-- PICKUP LOCATION -->
         <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Pickup location</dt>
         <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">{{ record.metadata.pickup_location.name }}</dd>
         <!-- SCOPE -->
         <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Scope</dt>
         <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">
-          <ng-container *ngIf="record.metadata.copy; else scopeLoan">{{ 'Copy' | translate }}</ng-container>
-          <ng-template #scopeLoan>{{ 'Loan' | translate }}</ng-template>
+          @if (record.metadata.copy) {
+            {{ 'Copy' | translate }}
+          } @else {
+            {{ 'Loan' | translate }}
+          }
         </dd>
         <!-- PAGES -->
-        <ng-container *ngIf="record.metadata.copy && record.metadata.pages">
+        @if (record.metadata.copy && record.metadata.pages) {
           <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Pages</dt>
           <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">{{ record.metadata.pages }}</dd>
-        </ng-container>
+        }
         <!-- FOUND IN -->
-        <ng-container *ngIf="record.metadata.found_in">
+        @if (record.metadata.found_in) {
           <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Found in</dt>
           <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">
             <a href="{{ record.metadata.found_in.url }}">{{ record.metadata.found_in.url }}</a>
             <span class="badge badge-light px-2 py-1 ml-2">{{ record.metadata.found_in.source }}</span>
           </dd>
-        </ng-container>
+        }
         <!-- NOTES -->
-        <ng-container *ngIf="record.metadata.notes && record.metadata.notes.length > 0">
+        @if (record.metadata.notes && record.metadata.notes.length > 0) {
           <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Note</dt>
           <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">
             <blockquote>
               <ul class="list-unstyled">
-                <li *ngFor="let note of record.metadata.notes | notesFilter:['public_note']"
-                    [innerHTML]="note.content | nl2br"></li>
+                @for (note of record.metadata.notes | notesFilter:['public_note']; track note) {
+                  <li [innerHTML]="note.content | nl2br"></li>
+                }
               </ul>
             </blockquote>
           </dd>
-        </ng-container>
+        }
       </dl>
     </section>
   </div>
 </div>
-
-<!-- Detail -->
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.html b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.html
index 0b91d4c74..8b751db36 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,6 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<!-- header -->
 <section id="ill-request-section" class="container my-2">
   <div class="d-none d-lg-block">
     <div class="row bg-dark rounded text-light p-2">
@@ -23,32 +22,28 @@
     </div>
   </div>
 
-
-  <ng-container *ngIf="!loaded; else display">
-    <div class="row">
-      <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
-    </div>
-  </ng-container>
-
-  <ng-template #display>
-    <ng-container *ngIf="paginator.getRecordsCount() > 0; else noRecord">
+  @defer (when loaded) {
+    @if (paginator.getRecordsCount() > 0) {
       <div class="row border">
         <div class="container-fluid">
-          <public-search-patron-profile-ill-request
-            *ngFor="let record of records"
-            [record]="record"
-            id="ill-request-{{ record.metadata.pid }}"
-            class="row border-bottom">
-          </public-search-patron-profile-ill-request>
+          @for (record of records; track record) {
+            <public-search-patron-profile-ill-request
+              [record]="record"
+              id="ill-request-{{ record.metadata.pid }}"
+              class="row border-bottom">
+            </public-search-patron-profile-ill-request>
+          }
           <shared-search-show-more-pager id="show-more-ill-requests" [paginator]="paginator"></shared-search-show-more-pager>
         </div>
       </div>
-    </ng-container>
-
-    <ng-template #noRecord>
+    } @else {
       <div class="row">
         <div class="col mt-2 font-weight-bold" translate>No ill request</div>
       </div>
-    </ng-template>
-  </ng-template>
+    }
+  } @placeholder {
+    <div class="row">
+      <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
+    </div>
+  }
 </section>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.ts
index ab6a4d097..3c4496e3f 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -36,51 +36,46 @@ export class PatronProfileIllRequestsComponent implements OnInit, OnDestroy {
   records = [];
 
   /** Records paginator */
-  private _paginator: Paginator;
+  paginator: Paginator;
 
   /** Observable subscription */
   private _subscription = new Subscription();
 
-  /** Get paginator */
-  get paginator(): Paginator {
-    return this._paginator;
-  }
-
   /**
    * Constructor
-   * @param _illRequestApiService - IllRequestApiService
-   * @param _patronProfileService - PatronProfileService
-   * @param _patronProfileMenuService - PatronProfileMenuService
+   * @param illRequestApiService - IllRequestApiService
+   * @param patronProfileService - PatronProfileService
+   * @param patronProfileMenuService - PatronProfileMenuService
    */
   constructor(
-    private _illRequestApiService: IllRequestApiService,
-    private _patronProfileService: PatronProfileService,
-    private _patronProfileMenuService: PatronProfileMenuService
+    private illRequestApiService: IllRequestApiService,
+    private patronProfileService: PatronProfileService,
+    private patronProfileMenuService: PatronProfileMenuService
   ) {}
 
   /** OnInit hook */
   ngOnInit(): void {
-    this._paginator = new Paginator();
-    this._paginator
+    this.paginator = new Paginator();
+    this.paginator
       .setHiddenInfo(
         _('({{ count }} hidden ill request)'),
         _('({{ count }} hidden ill requests)')
       );
     this._subscription.add(
-      this._paginator.more$.subscribe((page: number) => {
+      this.paginator.more$.subscribe((page: number) => {
         this._illRequestQuery(page).subscribe((response: Record) => {
           this.records = this.records.concat(response.hits.hits);
         });
       })
     );
     this._subscription.add(
-      this._patronProfileService.tabsEvent$.subscribe((event: ITabEvent) => {
+      this.patronProfileService.tabsEvent$.subscribe((event: ITabEvent) => {
         if (event.name === 'illRequest') {
           if (event.count === 0) {
             this.loaded = true;
           } else {
             this._illRequestQuery(1).subscribe((response: Record) => {
-              this._paginator.setRecordsCount(response.hits.total.value);
+              this.paginator.setRecordsCount(response.hits.total.value);
               this.records = response.hits.hits;
               this.loaded = true;
             });
@@ -90,7 +85,7 @@ export class PatronProfileIllRequestsComponent implements OnInit, OnDestroy {
     );
     /** Cleaning up after the change of organization */
     this._subscription.add(
-      this._patronProfileMenuService.onChange$.subscribe(() => {
+      this.patronProfileMenuService.onChange$.subscribe(() => {
         this.paginator.setRecordsCount(0);
         this.records = [];
         this.loaded = false;
@@ -109,8 +104,8 @@ export class PatronProfileIllRequestsComponent implements OnInit, OnDestroy {
    * @return Observable
    */
   private _illRequestQuery(page: number): Observable<Record | Error> {
-    const patronPid = this._patronProfileMenuService.currentPatron.pid;
-    return this._illRequestApiService
-      .getPublicIllRequest(patronPid, page, this._paginator.getRecordsPerPage());
+    const patronPid = this.patronProfileMenuService.currentPatron.pid;
+    return this.illRequestApiService
+      .getPublicIllRequest(patronPid, page, this.paginator.getRecordsPerPage());
   }
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.html b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.html
index 8812172c4..bb6765fd5 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2023 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -23,7 +23,7 @@
   </button>
   <div class="container-fluid">
     <div class="row">
-      <!-- DOCUMENT & ADDITIONAL DATA ===================================== -->
+      <!-- DOCUMENT & ADDITIONAL DATA -->
       <public-search-patron-profile-document
           [record]="record"
           [showAdditionalInformation]="!isCollapsed"
@@ -35,7 +35,7 @@
           <dd class="col-sm-6 col-md-8 col-lg-9">{{ record.metadata.library.name }}</dd>
         </dl>
       </public-search-patron-profile-document>
-      <!-- DUE DATE & BADGES ============================================== -->
+      <!-- DUE DATE & BADGES -->
       <div class="col-lg-2 col-md-6 col-sm-6 pl-0">
         <div>
           <span class="d-inline d-lg-none label-title font-weight-bold" translate>Due date</span>
@@ -43,38 +43,48 @@
             {{ record.metadata.end_date | dateTranslate :'shortDate' }}
           </span>
         </div>
-        <div *ngIf="record.metadata.extension_count && record.metadata.extension_count > 0" class="badge badge-secondary font-weight-normal">
-          {{ record.metadata.extension_count }}
-          {{ record.metadata.extension_count | i18nPlural: {'=1': 'renewal', 'other': 'renewals'} | translate }}
-        </div>
-        <div *ngIf="record.metadata.overdue">
-          <span class="badge badge-warning font-weight-normal" translate>overdue</span>
-          <span *ngIf="fees > 0" title="{{ 'Fees to date' | translate }}">
-            {{ fees | currency:organisation.currency:'symbol' }}
-          </span>
-        </div>
-        <div *ngIf="isDueSoon" class="badge badge-secondary font-weight-normal" translate>approching due date</div>
+        @if (record.metadata.extension_count && record.metadata.extension_count > 0) {
+          <div class="badge badge-secondary font-weight-normal">
+            {{ record.metadata.extension_count }}
+            {{ record.metadata.extension_count | i18nPlural: {'=1': 'renewal', 'other': 'renewals'} | translate }}
+          </div>
+        }
+        @if (record.metadata.overdue) {
+          <div>
+            <span class="badge badge-warning font-weight-normal" translate>overdue</span>
+            @if (fees > 0) {
+              <span title="{{ 'Fees to date' | translate }}">
+                {{ fees | currency:organisation.currency:'symbol' }}
+              </span>
+            }
+          </div>
+        }
+        @if (isDueSoon) {
+          <div class="badge badge-secondary font-weight-normal" translate>approaching due date</div>
+        }
       </div>
-      <!-- ACTION BUTTONS COLUMN ========================================== -->
+      <!-- ACTION BUTTONS COLUMN -->
       <div class="col-lg-2 col-md-6 col-sm-6 text-right pr-0">
-        <button
-          *ngIf="canExtend.can; else expendDisabled"
-          type="button"
-          class="btn btn-sm btn-primary"
-          (click)="renew()"
-          [disabled]="renewInProgress || actionDone"
-        >
-          <span *ngIf="renewInProgress" class="spinner-border spinner-border-sm mr-1" role="status"></span>
-          {{ 'Renew' | translate }}
-        </button>
-        <ng-template #expendDisabled>
+        @if (canExtend.can) {
+          <button
+            type="button"
+            class="btn btn-sm btn-primary"
+            (click)="renew()"
+            [disabled]="renewInProgress || actionDone"
+          >
+            @if (renewInProgress) {
+              <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
+            }
+            {{ 'Renew' | translate }}
+          </button>
+        } @else {
           <button
             type="button"
             class="btn btn-sm btn-primary disabled"
             tooltip="{{ canExtend.reasons | arrayTranslate | join:' / '}}"
             translate
           >Renew</button>
-        </ng-template>
+        }
       </div>
     </div>
   </div>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.ts
index 23f804a4a..deed03880 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -55,12 +55,12 @@ export class PatronProfileLoanComponent implements OnInit {
   // GETTER & SETTER ==========================================================
   /** Get organisation for current patron */
   get organisation(): IOrganisation {
-    return this._patronProfileMenuService.currentPatron.organisation;
+    return this.patronProfileMenuService.currentPatron.organisation;
   }
 
   /** Get current viewcode */
   get viewcode(): string {
-    return this._patronProfileMenuService.currentPatron.organisation.code;
+    return this.patronProfileMenuService.currentPatron.organisation.code;
   }
   /** Check if the loan should be returned in very few days */
   get isDueSoon(): boolean {
@@ -72,31 +72,31 @@ export class PatronProfileLoanComponent implements OnInit {
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _loanApiService - LoanApiService
-   * @param _translateService - TranslateService
-   * @param _toastService - ToastrService
-   * @param _patronProfileMenuService - PatronProfileMenuService
-   * @param _patronProfileService - PatronProfileService
+   * @param loanApiService - LoanApiService
+   * @param translateService - TranslateService
+   * @param toastService - ToastrService
+   * @param patronProfileMenuService - PatronProfileMenuService
+   * @param patronProfileService - PatronProfileService
    */
   constructor(
-    private _loanApiService: LoanApiService,
-    private _translateService: TranslateService,
-    private _toastService: ToastrService,
-    private _patronProfileMenuService: PatronProfileMenuService,
-    private _patronProfileService: PatronProfileService
+    private loanApiService: LoanApiService,
+    private translateService: TranslateService,
+    private toastService: ToastrService,
+    private patronProfileMenuService: PatronProfileMenuService,
+    private patronProfileService: PatronProfileService
   ) {}
 
   /** OnInit hook */
   ngOnInit(): void {
-    this._loanApiService
+    this.loanApiService
       .canExtend(this.record.metadata.pid)
       .subscribe((response: CanExtend) => this.canExtend = response);
     if (this.record.metadata.overdue) {
-      this._loanApiService
+      this.loanApiService
         .getPreviewOverdue(this.record.metadata.pid)
         .subscribe((response: LoanOverduePreview) => {
           this.fees = +response.total.toFixed(2);
-          this._patronProfileService.loanFees(this.fees);
+          this.patronProfileService.loanFees(this.fees);
         });
     }
   }
@@ -104,9 +104,9 @@ export class PatronProfileLoanComponent implements OnInit {
   // COMPONENTS FUNCTIONS =====================================================
   /** Renew the current loan */
   renew(): void {
-    const patronPid = this._patronProfileMenuService.currentPatron.pid;
+    const patronPid = this.patronProfileMenuService.currentPatron.pid;
     this.renewInProgress = true;
-    this._loanApiService.renew({
+    this.loanApiService.renew({
       pid: this.record.metadata.pid,
       item_pid: this.record.metadata.item.pid,
       transaction_location_pid: this.record.metadata.item.location.pid,
@@ -122,14 +122,14 @@ export class PatronProfileLoanComponent implements OnInit {
         if ('overdue' in this.record.metadata) {
           delete this.record.metadata.overdue;
         }
-        this._toastService.success(
-          this._translateService.instant('The item has been renewed.'),
-          this._translateService.instant('Success')
+        this.toastService.success(
+          this.translateService.instant('The item has been renewed.'),
+          this.translateService.instant('Success')
         );
       } else {
-        this._toastService.error(
-          this._translateService.instant('Error during the renewal of the item.'),
-          this._translateService.instant('Error')
+        this.toastService.error(
+          this.translateService.instant('Error during the renewal of the item.'),
+          this.translateService.instant('Error')
         );
       }
     });
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.html b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.html
index 01d3e546c..e52da1efd 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,20 +15,22 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <!-- Due date dropdown menu -->
-<section class="container pt-1" *ngIf="paginator.getRecordsCount() > 0">
-  <div class="row">
-    <div class="col-xs-12 col-md-7 col-lg-9"></div>
-    <ng-core-sort-list
-      class="col-xs-12 col-md-5 col-lg-3 pr-0"
-      [options]="[
-        {value:'duedate', label:'Due date (earliest)' | translate, icon:'fa-sort-numeric-asc'},
-        {value:'-duedate', label:'Due date (latest)' | translate, icon:'fa-sort-numeric-desc'}
-      ]"
-      [useIcon]="true"
-      (selectChange)="selectingSortCriteria($event)">
-    </ng-core-sort-list>
-  </div>
-</section>
+@if (paginator.getRecordsCount() > 0) {
+  <section class="container pt-1">
+    <div class="row">
+      <div class="col-xs-12 col-md-7 col-lg-9"></div>
+      <ng-core-sort-list
+        class="col-xs-12 col-md-5 col-lg-3 pr-0"
+        [options]="[
+          {value:'duedate', label:'Due date (earliest)' | translate, icon:'fa-sort-numeric-asc'},
+          {value:'-duedate', label:'Due date (latest)' | translate, icon:'fa-sort-numeric-desc'}
+        ]"
+        [useIcon]="true"
+        (selectChange)="selectingSortCriteria($event)">
+      </ng-core-sort-list>
+    </div>
+  </section>
+}
 
 <!-- header -->
 <section id="loans-section" class="container my-2">
@@ -40,29 +42,28 @@
     </div>
   </div>
 
-  <ng-container *ngIf="!loaded; else display">
-    <div class="row">
-      <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
-    </div>
-  </ng-container>
-  <ng-template #display>
-    <ng-container *ngIf="paginator.getRecordsCount() > 0; else noRecord">
+  @defer (when loaded) {
+    @if (paginator.getRecordsCount() > 0) {
       <div class="row border">
         <div class="container-fluid">
-          <public-search-patron-profile-loan
-            *ngFor="let loan of records"
-            [record]="loan"
-            id="loan-{{ loan.metadata.pid }}"
-            class="row border-bottom">
-          </public-search-patron-profile-loan>
+          @for (loan of records; track loan) {
+            <public-search-patron-profile-loan
+              [record]="loan"
+              id="loan-{{ loan.metadata.pid }}"
+              class="row border-bottom">
+            </public-search-patron-profile-loan>
+          }
         </div>
       </div>
       <shared-search-show-more-pager id="show-more-loans" [paginator]="paginator" class="row"></shared-search-show-more-pager>
-    </ng-container>
-    <ng-template #noRecord>
+    } @else {
       <div class="row">
         <div class="col mt-2 font-weight-bold" translate>No loan</div>
       </div>
-    </ng-template>
-  </ng-template>
+    }
+  } @placeholder {
+    <div class="row">
+      <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
+    </div>
+  }
 </section>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.ts
index df9aa2128..ee2b98783 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -47,26 +47,21 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
   nRecords = 20;
 
   /** Records paginator */
-  private _paginator: Paginator;
-
-  /** Get paginator */
-  get paginator(): Paginator {
-    return this._paginator;
-  }
+  paginator: Paginator;
 
   /**
    * Constructor
-   * @param _loanApiService - LoanApiService
-   * @param _patronProfileMenuService - PatronProfileMenuService
+   * @param loanApiService - LoanApiService
+   * @param patronProfileMenuService - PatronProfileMenuService
    */
   constructor(
-    private _loanApiService: LoanApiService,
-    private _patronProfileMenuService: PatronProfileMenuService
+    private loanApiService: LoanApiService,
+    private patronProfileMenuService: PatronProfileMenuService
   ) {}
 
   /** OnInit hook */
   ngOnInit(): void {
-    this._initialisePaginatorAndSubscription();
+    this._initializePaginatorAndSubscription();
     this._initialLoad();
   }
 
@@ -75,10 +70,10 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
     this._subscription.unsubscribe();
   }
 
-  /** Initialise paginator and subscription */
-  private _initialisePaginatorAndSubscription(): void {
-    this._paginator = new Paginator();
-    this._paginator
+  /** Initialize paginator and subscription */
+  private _initializePaginatorAndSubscription(): void {
+    this.paginator = new Paginator();
+    this.paginator
       .setRecordsPerPage(this.nRecords)
       .setHiddenInfo(
         _('({{ count }} hidden loan)'),
@@ -87,7 +82,7 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
 
     this._subscription = new Subscription();
     this._subscription.add(
-      this._paginator.more$.subscribe((page: number) => {
+      this.paginator.more$.subscribe((page: number) => {
         this._loanQuery(page).subscribe((response: Record) => {
           this.records = this.records.concat(response.hits.hits);
           this.page = page;
@@ -95,7 +90,7 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
       })
     );
     this._subscription.add(
-      this._patronProfileMenuService.onChange$.subscribe(() => {
+      this.patronProfileMenuService.onChange$.subscribe(() => {
         this._resetPaginator();
       })
     );
@@ -104,7 +99,7 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
   /** Initial records load */
   private _initialLoad(): void {
     this._loanQuery(1).subscribe((response: Record) => {
-      this._paginator.setRecordsCount(response.hits.total.value);
+      this.paginator.setRecordsCount(response.hits.total.value);
       this.records = response.hits.hits;
       this.loaded = true;
     });
@@ -116,15 +111,15 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
    * @return Observable
    */
   private _loanQuery(page: number): Observable<Record | Error> {
-    const patronPid = this._patronProfileMenuService.currentPatron.pid;
-    return this._loanApiService
-      .getOnLoan(patronPid, page, this._paginator.getRecordsPerPage(), undefined, this.sortCriteria);
+    const patronPid = this.patronProfileMenuService.currentPatron.pid;
+    return this.loanApiService
+      .getOnLoan(patronPid, page, this.paginator.getRecordsPerPage(), undefined, this.sortCriteria);
   }
 
   /** Reset paginator when patron profile menu has changed */
   private _resetPaginator(){
     this._loanQuery(1).subscribe((response: Record) => {
-      this._paginator
+      this.paginator
         .setPage(1)
         .setRecordsCount(response.hits.total.value);
 
@@ -140,11 +135,11 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
     */
   selectingSortCriteria(sortCriteria: string) {
     this.sortCriteria = sortCriteria;
-    this._paginator.setRecordsPerPage(this.page * this.nRecords);
+    this.paginator.setRecordsPerPage(this.page * this.nRecords);
 
     this._loanQuery(1).subscribe((response: Record) => {
       this.records = response.hits.hits;
-      this._paginator.setRecordsPerPage(this.nRecords);
+      this.paginator.setRecordsPerPage(this.nRecords);
       this.loaded = true;
     });
   }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.html b/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.html
index 4281f3613..76def9f15 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,10 +14,14 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<form *ngIf="isVisible">
-    <select class="form-control form-select form-select-sm ml-1 col-6" (change)="onChange($event.target.value)">
-      <option class="form-control" *ngFor="let option of menuOptions" [value]="option.value" [selected]="option.selected">
-        {{ option.name }}
-      </option>
-    </select>
-</form>
+@defer (when isVisible) {
+  <form>
+      <select class="form-control form-select form-select-sm ml-1 col-6" (change)="onChange($event.target.value)">
+        @for (option of menuOptions; track option) {
+          <option class="form-control" [value]="option.value" [selected]="option.selected">
+            {{ option.name }}
+          </option>
+        }
+      </select>
+  </form>
+}
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.ts
index c102d446b..3b4a020d8 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -30,7 +30,7 @@ export class PatronProfileMenuComponent {
    * @return boolean
    */
   get isVisible(): boolean {
-    return this._patronProfileMenuService.isMultiOrganisation;
+    return this.patronProfileMenuService.isMultiOrganisation;
   }
 
   /**
@@ -38,24 +38,22 @@ export class PatronProfileMenuComponent {
    * @return array
    */
   get menuOptions(): IMenu[] {
-    const menuSelected = this._patronProfileMenuService.menu
+    const menuSelected = this.patronProfileMenuService.menu
       .find((menu: any) => menu.value === this.patronPid);
     if (menuSelected) {
       menuSelected.selected = true;
     }
-    return this._patronProfileMenuService.menu;
+    return this.patronProfileMenuService.menu;
   }
 
   /**
    * Constructor
    * @param _patronProfileMenuService - PatronProfileMenuService
    */
-  constructor(
-    private _patronProfileMenuService: PatronProfileMenuService
-  ) {}
+  constructor(private patronProfileMenuService: PatronProfileMenuService) {}
 
   /** on change */
   onChange(patronPid: string): void {
-    this._patronProfileMenuService.change(patronPid);
+    this.patronProfileMenuService.change(patronPid);
   }
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-message/patron-profile-message.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-message/patron-profile-message.component.ts
index 12e0c8116..6432f9d46 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-message/patron-profile-message.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-message/patron-profile-message.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -21,11 +21,13 @@ import { PatronProfileMenuService } from '../patron-profile-menu.service';
 
 @Component({
   selector: 'public-search-patron-profile-message',
-  template: `<div
-    *ngFor="let message of messages"
-    class="alert alert-{{ message.type }} mb-2"
-    [innerHTML]="message.content | nl2br"
-  ></div>`
+  template: `
+    @for (message of messages; track message) {
+      <div
+        class="alert alert-{{ message.type }} mb-2"
+        [innerHTML]="message.content | nl2br"
+      ></div>
+    }`
 })
 export class PatronProfileMessageComponent implements OnInit, OnDestroy {
 
@@ -37,18 +39,19 @@ export class PatronProfileMessageComponent implements OnInit, OnDestroy {
 
   /**
    * Constructor
-   * @param _patronProfileMenuService - PatronProfileMenuService
+   * @param patronApiService - PatronApiService
+   * @param patronProfileMenuService - PatronProfileMenuService
    */
   constructor(
-    private _patronApiService: PatronApiService,
-    private _patronProfileMenuService: PatronProfileMenuService
+    private patronApiService: PatronApiService,
+    private patronProfileMenuService: PatronProfileMenuService
   ) {}
 
   /** OnInit hook */
   ngOnInit(): void {
     this._loanMessage();
     this._subscription.add(
-      this._patronProfileMenuService.onChange$.subscribe(() => {
+      this.patronProfileMenuService.onChange$.subscribe(() => {
         this._loanMessage();
       })
     );
@@ -61,8 +64,8 @@ export class PatronProfileMessageComponent implements OnInit, OnDestroy {
 
   /** load message */
   private _loanMessage(): void {
-    const patronPid = this._patronProfileMenuService.currentPatron.pid;
-    this._patronApiService.getMessages(patronPid)
+    const patronPid = this.patronProfileMenuService.currentPatron.pid;
+    this.patronApiService.getMessages(patronPid)
       .subscribe((messages: Message[]) => this.messages = messages);
   }
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.ts
index 2ff4f4bcc..700c18705 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.ts
@@ -103,39 +103,39 @@ export class PatronProfilePasswordComponent {
   }];
 
   /** Matching fields between invenio and Angular */
-  private _fieldsMatching = {
+  private fieldsMatching = {
     password: 'password',
     new_password: 'newPassword',
     new_password_confirm: 'confirmPassword'
   };
 
   /** Error message for password validator */
-  private _validatePasswordMessage: string = '';
+  private validatePasswordMessage: string = '';
 
   /**
    * Constructor
    *
-   * @param _toastrService - ToastrService
-   * @param _translateService - TranslateService
-   * @param _userApiService - UserApiService
-   * @param _appSettingsService - AppSettingsService
-   * @param _el - ElementRef
+   * @param toastrService - ToastrService
+   * @param translateService - TranslateService
+   * @param userApiService - UserApiService
+   * @param appSettingsService - AppSettingsService
+   * @param el - ElementRef
    */
   constructor(
-    private _toastrService: ToastrService,
-    private _translateService: TranslateService,
-    private _userApiService: UserApiService,
-    private _appSettingsService: AppSettingsService,
-    private _el: ElementRef,
-    @Inject(DOCUMENT) private _document: Document
+    private toastrService: ToastrService,
+    private translateService: TranslateService,
+    private userApiService: UserApiService,
+    private appSettingsService: AppSettingsService,
+    private el: ElementRef,
+    @Inject(DOCUMENT) private document: Document
   ) { }
 
   /** Submit form */
   submit() {
     this.form.updateValueAndValidity();
     if (this.form.valid === false) {
-      this._toastrService.error(
-        this._translateService.instant('The form contains errors.')
+      this.toastrService.error(
+        this.translateService.instant('The form contains errors.')
       );
       return;
     }
@@ -146,21 +146,21 @@ export class PatronProfilePasswordComponent {
       new_password_confirm: this.model.confirmPassword
     };
 
-    this._userApiService.updatePassword(data).pipe(
+    this.userApiService.updatePassword(data).pipe(
       catchError((err: any) =>  of({ success: false, message: err.message, error: err.error.errors[0] }))
     ).subscribe((response: IPasswordResponse) => {
       if (!('success' in response)) {
-        this._toastrService.success(
-          this._translateService.instant(response.message)
+        this.toastrService.success(
+          this.translateService.instant(response.message)
         );
         // Close password form and show personal data
         this._redirect();
       } else {
         // Set error on field
-        const formField = this._fieldsMatching[response.error.field];
+        const formField = this.fieldsMatching[response.error.field];
         this.form.get(formField).setErrors({ invalid: { message: response.error.message } });
         // Make focus on error field
-        this._el.nativeElement.querySelector(`#${formField}`).focus();
+        this.el.nativeElement.querySelector(`#${formField}`).focus();
       }
     });
   }
@@ -173,16 +173,16 @@ export class PatronProfilePasswordComponent {
         if (value == null || value.length === 0) {
           return of(true);
         }
-        return this._userApiService.validatePassword(value).pipe(
+        return this.userApiService.validatePassword(value).pipe(
           debounceTime(500),
           map(() => of(true)),
           catchError((response) => {
-            this._validatePasswordMessage = response.error.message;
+            this.validatePasswordMessage = response.error.message;
             return of(false);
           })
         );
       },
-      message: () => this._translateService.instant(this._validatePasswordMessage)
+      message: () => this.translateService.instant(this.validatePasswordMessage)
     };
   }
 
@@ -193,9 +193,7 @@ export class PatronProfilePasswordComponent {
 
   /** Redirect to external project */
   private _redirect(): void {
-    this._document.location.href = this.referer
-      ? this.referer
-      : this._appSettingsService.baseUrl;
+    this.document.location.href = this.referer || this.appSettingsService.baseUrl;
   }
 }
 
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.html b/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.html
index d49a6a27e..b5570b5eb 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2022 RERO
+  Copyright (C) 2022-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,17 +14,19 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div *ngIf="model" class="container pl-3 mt-3">
-  <form [formGroup]="form" (ngSubmit)="submit()">
-    <formly-form class="mb-0" [model]="model" [fields]="fields" [form]="form"></formly-form>
-    <div class="float-right">
-      <button type="button" id="editor-delete-button" class="btn btn-outline-danger btn-sm mr-1"
-        (click)="cancel()">
-        <i class="fa fa-times"></i> {{ 'Cancel' | translate }}
-      </button>
-      <button type="submit" id="editor-save-button" class="btn btn-primary btn-sm" [disabled]="!form.valid">
-        <i class="fa fa-save"></i> {{ 'Save' | translate }}
-      </button>
-    </div>
-  </form>
-</div>
+@if (model) {
+  <div class="container pl-3 mt-3">
+    <form [formGroup]="form" (ngSubmit)="submit()">
+      <formly-form class="mb-0" [model]="model" [fields]="fields" [form]="form"></formly-form>
+      <div class="float-right">
+        <button type="button" id="editor-delete-button" class="btn btn-outline-danger btn-sm mr-1"
+          (click)="cancel()">
+          <i class="fa fa-times"></i> {{ 'Cancel' | translate }}
+        </button>
+        <button type="submit" id="editor-save-button" class="btn btn-primary btn-sm" [disabled]="!form.valid">
+          <i class="fa fa-save"></i> {{ 'Save' | translate }}
+        </button>
+      </div>
+    </form>
+  </div>
+}
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.ts
index 0a8872608..7dea03303 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.ts
@@ -21,10 +21,10 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { FormlyJsonschema } from '@ngx-formly/core/json-schema';
 import { TranslateService } from '@ngx-translate/core';
-import { orderedJsonSchema, RecordService, removeEmptyValues } from '@rero/ng-core';
+import { RecordService, orderedJsonSchema, removeEmptyValues } from '@rero/ng-core';
 import { AppSettingsService, UserService } from '@rero/shared';
 import { ToastrService } from 'ngx-toastr';
-import { forkJoin, of, Subscription } from 'rxjs';
+import { Subscription, forkJoin, of } from 'rxjs';
 import { debounceTime, map, tap } from 'rxjs/operators';
 
 @Component({
@@ -63,32 +63,32 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
   /**
    * Constructor
    *
-   * @param _recordService - RecordService
-   * @param _formlyJsonschema - FormlyJsonschema
-   * @param _toastrService - ToastrService
-   * @param _translateService - TranslateService
-   * @param _appSettingsService - AppSettingsService
-   * @param _userService - UserService
-   * @param _document - Document
+   * @param recordService - RecordService
+   * @param formlyJsonschema - FormlyJsonschema
+   * @param toastrService - ToastrService
+   * @param translateService - TranslateService
+   * @param appSettingsService - AppSettingsService
+   * @param userService - UserService
+   * @param document - Document
    */
   constructor(
-    private _recordService: RecordService,
-    private _formlyJsonschema: FormlyJsonschema,
-    private _toastrService: ToastrService,
-    private _translateService: TranslateService,
-    private _appSettingsService: AppSettingsService,
-    private _userService: UserService,
-    @Inject(DOCUMENT) private _document: Document
+    private recordService: RecordService,
+    private formlyJsonschema: FormlyJsonschema,
+    private toastrService: ToastrService,
+    private translateService: TranslateService,
+    private appSettingsService: AppSettingsService,
+    private userService: UserService,
+    @Inject(DOCUMENT) private document: Document
   ) { }
 
   /** Init hook */
   ngOnInit(): void {
-    const schemaForm = this._recordService.getSchemaForm('users').pipe(
+    const schemaForm = this.recordService.getSchemaForm('users').pipe(
       tap(schema => {
         if (schema) {
-          const disabledFields = this._appSettingsService.settings.userProfile.readOnlyFields;
+          const disabledFields = this.appSettingsService.settings.userProfile.readOnlyFields;
           this.fields = [
-            this._formlyJsonschema.toFieldConfig(orderedJsonSchema(schema.schema), {
+            this.formlyJsonschema.toFieldConfig(orderedJsonSchema(schema.schema), {
 
               // post process JSONSchema7 to FormlyFieldConfig conversion
               map: (field: FormlyFieldConfig, jsonSchema: any) => {
@@ -107,7 +107,7 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
                   ? this._cssConfig[fkey]
                   : this._cssConfig.default;
                 // Deactivation of the fields if we have a patron record
-                if ((this._userService.user.roles.length > 0) && (field.key !== undefined && disabledFields.includes(fkey))) {
+                if ((this.userService.user.roles.length > 0) && (field.key !== undefined && disabledFields.includes(fkey))) {
                   field.props.readonly = true;
                 }
                 // Hide password field
@@ -117,13 +117,13 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
                 }
                 if (fkey === 'country') {
                   field.props.options.forEach((option: any) => {
-                    option.label = this._translateService.instant('country_' + option.value);
+                    option.label = this.translateService.instant('country_' + option.value);
                   });
                 }
                 // Translate validator message
                 if ('validation' in field  && 'messages' in field.validation) {
                   Object.keys(jsonSchema.widget.formlyConfig.validation.messages).forEach((key: string) => {
-                    field.validation.messages[key] = this._translateService.instant(String(field.validation.messages[key]));
+                    field.validation.messages[key] = this.translateService.instant(String(field.validation.messages[key]));
                   });
                 }
 
@@ -133,7 +133,7 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
                     if (field.asyncValidators == null) {
                       field.asyncValidators = {};
                     }
-                    field.asyncValidators.uniqueEmail = this._getUniqueValidator(
+                    field.asyncValidators.uniqueEmail = this.getUniqueValidator(
                       'email',
                       jsonSchema.widget.formlyConfig.validation.messages.uniqueEmailMessage
                     );
@@ -142,7 +142,7 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
                     if (field.asyncValidators == null) {
                       field.asyncValidators = {};
                     }
-                    field.asyncValidators.uniqueUsername = this._getUniqueValidator(
+                    field.asyncValidators.uniqueUsername = this.getUniqueValidator(
                       'username',
                       jsonSchema.widget.formlyConfig.validation.messages.uniqueUsernameMessage
                     );
@@ -167,7 +167,7 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
       })
     );
 
-    const userQuery = this._recordService.getRecord('users', this._userService.user.id.toString());
+    const userQuery = this.recordService.getRecord('users', this.userService.user.id.toString());
 
     this._subscriptions.add(
       forkJoin([schemaForm, userQuery]).subscribe(([schema, user]: [any, any]) => {
@@ -186,19 +186,19 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
   submit() {
     this.form.updateValueAndValidity();
     if (this.form.valid === false) {
-      this._toastrService.error(
-        this._translateService.instant('The form contains errors.')
+      this.toastrService.error(
+        this.translateService.instant('The form contains errors.')
       );
       return;
     }
     const data = removeEmptyValues(this.form.value);
     // Update user record and reload logged user
-    this._recordService
-      .update('users', this._userService.user.id.toString(), data)
+    this.recordService
+      .update('users', this.userService.user.id.toString(), data)
       .subscribe(
         () => {
-          this._toastrService.success(this._translateService.instant('Your personal data has been updated.'));
-          this._redirect();
+          this.toastrService.success(this.translateService.instant('Your personal data has been updated.'));
+          this.redirect();
         },
         (error) => this.formError = error.title
       );
@@ -207,14 +207,14 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
   // PRIVATE COMPONENT FUNCTIONS ==============================================
   /** Cancel edition */
   cancel(): void {
-    this._redirect();
+    this.redirect();
   }
 
   /** Redirect to external project */
-  private _redirect(): void {
-    this._document.location.href = this.referer
+  private redirect(): void {
+    this.document.location.href = this.referer
       ? this.referer
-      : this._appSettingsService.baseUrl;
+      : this.appSettingsService.baseUrl;
   }
 
   /**
@@ -224,21 +224,21 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
    *                    or username.
    * @returns boolean, true if find a value boolean.
    */
-  private _getUniqueValidator(fieldName: string, message: string) {
+  private getUniqueValidator(fieldName: string, message: string) {
     return {
       expression: (control: UntypedFormControl) => {
-        const value = control.value;
+        const { value } = control;
         return (value == null || value.length === 0)
           ? of(true)
-          : this._recordService.getRecords('users', `${fieldName}:${value}`).pipe(
+          : this.recordService.getRecords('users', `${fieldName}:${value}`).pipe(
               debounceTime(1000),
               map((res: any) => {
                 return (res.hits.hits.length === 0) ||
-                  (res.hits.hits.length === 1 && res.hits.hits[0].id === this._userService.user.id);
+                  (res.hits.hits.length === 1 && res.hits.hits[0].id === this.userService.user.id);
               })
             );
       },
-      message: this._translateService.instant(message)
+      message: this.translateService.instant(message)
     };
   }
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.html b/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.html
index 290f012a1..4c5ec46ba 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -25,94 +25,95 @@
 <section id="personal-data" class="px-3 mt-4">
   <dl class="container row">
     <!-- GENDER -->
-    <ng-container *ngIf="user.gender">
+    @if (user.gender) {
       <dt class="col-lg-3 col-sm-6 label-title" translate>Gender</dt>
       <dd class="col-lg-9 col-sm-6">{{ user.gender | translate }}</dd>
-    </ng-container>
+    }
     <!-- USERNAME -->
-    <ng-container *ngIf="user.username">
+    @if (user.username) {
       <dt class="col-lg-3 col-sm-6 label-title" translate>Username</dt>
       <dd class="col-lg-9 col-sm-6">{{ user.username }}</dd>
-    </ng-container>
+    }
     <!-- PRIMARY ADDRESS -->
-    <ng-container *ngIf="user.street || user.city || user.country">
+    @if (user.street || user.city || user.country) {
       <dt class="col-lg-3 col-sm-6 label-title" translate>Primary address</dt>
       <dd class="col-lg-9 col-sm-6">
-        <ng-container *ngIf="user.street">
+        @if (user.street) {
           {{ user.street }}<br>
-        </ng-container>
-        <ng-container *ngIf="user.city">
+        }
+        @if (user.city) {
           {{ user.postal_code }} {{ user.city }}<br>
-        </ng-container>
-        <ng-container *ngIf="user.country">
+        }
+        @if (user.country) {
           {{ ('country_' + user.country) | translate }}
-        </ng-container>
+        }
       </dd>
-    </ng-container>
+    }
     <!-- SECONDARY ADDRESS -->
-    <ng-container *ngIf="patron.second_address">
+    @if (patron.second_address) {
       <dt class="col-lg-3 col-sm-6 label-title" translate>Secondary address</dt>
       <dd class="col-lg-9 col-sm-6">
-        <ng-container *ngIf="patron.second_address.street">
+        @if (patron.second_address.street) {
           {{ patron.second_address.street }}<br>
-        </ng-container>
-        <ng-container *ngIf="patron.second_address.city">
+        }
+        @if (patron.second_address.city) {
           {{ patron.second_address.postal_code }} {{ patron.second_address.city }}<br>
-        </ng-container>
-        <ng-container *ngIf="patron.second_address.country">
+        }
+        @if (patron.second_address.country) {
           {{ ('country_' + patron.second_address.country) | translate }}
-        </ng-container>
+        }
       </dd>
-    </ng-container>
+    }
     <!-- HOME PHONE -->
-    <ng-container *ngIf="user.home_phone">
+    @if (user.home_phone) {
       <dt class="col-lg-3 col-sm-6 label-title" translate>Home phone</dt>
       <dd class="col-lg-9 col-sm-6">{{ user.home_phone }}</dd>
-    </ng-container>
+    }
     <!-- BUSINESS PHONE -->
-    <ng-container *ngIf="user.business_phone">
+    @if (user.business_phone) {
       <dt class="col-lg-3 col-sm-6 label-title" translate>Business phone</dt>
       <dd class="col-lg-9 col-sm-6">{{ user.business_phone }}</dd>
-    </ng-container>
+    }
     <!-- MOBILE PHONE -->
-    <ng-container *ngIf="user.mobile_phone">
+    @if (user.mobile_phone) {
       <dt class="col-lg-3 col-sm-6 label-title" translate>Mobile phone</dt>
       <dd class="col-lg-9 col-sm-6">{{ user.mobile_phone }}</dd>
-    </ng-container>
+    }
     <!-- OTHER PHONE -->
-    <ng-container *ngIf="user.other_phone">
+    @if (user.other_phone) {
       <dt class="col-lg-3 col-sm-6 label-title" translate>Other phone</dt>
       <dd class="col-lg-9 col-sm-6">{{ user.other_phone }}</dd>
-    </ng-container>
+    }
     <!-- EMAIL -->
-    <ng-container *ngIf="user.email">
+    @if (user.email) {
       <dt class="col-lg-3 col-sm-6 label-title" translate>Email</dt>
       <dd class="col-lg-9 col-sm-6">{{ user.email }}</dd>
-    </ng-container>
+    }
     <!-- PATRON BARCODE -->
-    <ng-container *ngIf="patron.patron.barcode">
+    @if (patron.patron.barcode) {
       <dt class="col-lg-3 col-sm-6 label-title" translate>Patron number</dt>
       <dd class="col-lg-9 col-sm-6">{{ patron.patron.barcode | join : ', ' }}</dd>
-    </ng-container>
+    }
     <!-- PATRON BARCODE -->
-    <ng-container *ngIf="patron.patron.expiration_date">
+    @if (patron.patron.expiration_date) {
       <dt class="col-lg-3 col-sm-6 label-title" translate>Account expiration</dt>
       <dd class="col-lg-9 col-sm-6">{{ patron.patron.expiration_date | dateTranslate: 'shortDate' }}</dd>
-    </ng-container>
+    }
     <!-- KEEP HISTORY -->
     <dt class="col-lg-3 col-sm-6 label-title" translate>Keep history</dt>
     <dd class="col-lg-9 col-sm-6">
       <i class="fa fa-circle" [ngClass]="{'text-success': user.keep_history, 'text-danger': !user.keep_history}"></i>
-      <ng-container *ngIf="!user.keep_history; else keep">
-        {{ 'The loan history is not saved.' | translate }}
-      </ng-container>
-      <ng-template #keep>
+      @if (user.keep_history) {
         {{ 'The loan history is saved for a maximum of six months. It is visible to you and the library staff.' | translate }}
-      </ng-template>
+      } @else {
+        {{ 'The loan history is not saved.' | translate }}
+      }
     </dd>
   </dl>
-  <div *ngIf="diabledButtonOnReadyOnly" class="mt-3 pl-3">
-    <a id="profile-edit" class="btn btn-sm btn-primary" href="/{{ viewcode }}/user/profile" translate>Edit</a>
-    <a id="profile-password-change" class="btn btn-sm btn-primary ml-2" href="/{{ viewcode }}/user/password" translate>Change my password</a>
-  </div>
+  @if (disabledButtonOnReadyOnly) {
+    <div class="mt-3 pl-3">
+      <a id="profile-edit" class="btn btn-sm btn-primary" href="/{{ viewcode }}/user/profile" translate>Edit</a>
+      <a id="profile-password-change" class="btn btn-sm btn-primary ml-2" href="/{{ viewcode }}/user/password" translate>Change my password</a>
+    </div>
+  }
 </section>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.ts
index 5e74acd77..0c8d8e719 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -38,14 +38,14 @@ export class PatronProfilePersonalComponent {
    *
    * @returns true if the user settings is read only.
    */
-  get diabledButtonOnReadyOnly(): boolean {
-    return !this._appSettingsService.settings.userProfile.readOnly;
+  get disabledButtonOnReadyOnly(): boolean {
+    return !this.appSettingsService.settings.userProfile.readOnly;
   }
 
   /**
    * Constructor
    *
-   * @param _appSettingsService - AppSettingsService
+   * @param appSettingsService - AppSettingsService
    */
-  constructor(private _appSettingsService: AppSettingsService) {}
+  constructor(private appSettingsService: AppSettingsService) {}
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.html b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.html
index 906cd351b..9adf33330 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,74 +15,74 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<div class="d-flex container p-2"
-     *ngIf="record"
-     [ngClass]="{'callout callout-success': record.metadata.state === 'ITEM_AT_DESK' }">
-  <button type="button" class="btn-show-more"
-          [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
-          (click)="isCollapsed = !isCollapsed"
-          [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
-  </button>
-  <div class="container-fluid">
-    <div class="row">
-      <!-- DOCUMENT & ADDITIONAL DATA ===================================== -->
-      <div class="col-lg-8 col-12 pl-0">
-        <public-search-patron-profile-document
-          [record]="record"
-          [showAdditionalInformation]="!isCollapsed"
-          [isAnimated]="true">
-        </public-search-patron-profile-document>
-        <dl class="row mt-2">
-          <dt class="col-sm-6 col-md-4 col-lg-3 label-title" translate>Pickup location</dt>
-          <dd class="col-sm-6 col-md-8 col-lg-9">{{ record.metadata.pickup_name }}</dd>
+@if (record) {
+  <div class="d-flex container p-2" [ngClass]="{'callout callout-success': record.metadata.state === 'ITEM_AT_DESK' }">
+    <button type="button" class="btn-show-more"
+            [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
+            (click)="isCollapsed = !isCollapsed"
+            [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
+    </button>
+    <div class="container-fluid">
+      <div class="row">
+        <!-- DOCUMENT & ADDITIONAL DATA ===================================== -->
+        <div class="col-lg-8 col-12 pl-0">
+          <public-search-patron-profile-document
+            [record]="record"
+            [showAdditionalInformation]="!isCollapsed"
+            [isAnimated]="true">
+          </public-search-patron-profile-document>
+          <dl class="row mt-2">
+            <dt class="col-sm-6 col-md-4 col-lg-3 label-title" translate>Pickup location</dt>
+            <dd class="col-sm-6 col-md-8 col-lg-9">{{ record.metadata.pickup_name }}</dd>
+          </dl>
+        </div>
+        <!-- STATUS ========================================================= -->
+        <dl class="col-lg-2 col-12 p-0 row">
+          <dt class="col-sm-6 col-md-4 d-inline d-lg-none label-title">Status</dt>
+          <dd class="col">
+            <!-- ITEM AT DESK -->
+            @if (record.metadata.state === 'ITEM_AT_DESK') {
+              <i class="fa fa-check text-success"  title="{{ 'item at desk' | translate }}" aria-hidden="true"></i>
+              {{ 'to pick up' | translate }}
+              @if (record.metadata.request_expire_date) {
+                {{ 'until' | translate }} {{ record.metadata.request_expire_date | dateTranslate: 'shortDate'}}
+              }
+            }
+            <!-- PENDING OR ITEM IN TRANSIT FOR PICKUP -->
+            @if (record.metadata.state === 'PENDING' || record.metadata.state === 'ITEM_IN_TRANSIT_FOR_PICKUP') {
+              <i class="fa fa-ellipsis-h pr-1"  title="{{ 'pending' | translate }}" aria-hidden="true"></i>
+              <!-- TODO: Add expired date and remove "waiting" text
+              expected availability 00.00.0000  -->
+              {{ 'waiting' | translate }}
+            }
+            <!-- PENDING -->
+            @if (record.metadata.state === 'PENDING' && record.metadata.rank && record.metadata.rank > 0) {
+              <div [translate]="'(position {{ rank }} in waiting list)'" [translateParams]="{ rank: record.metadata.rank }"></div>
+            }
+          </dd>
         </dl>
-      </div>
-      <!-- STATUS ========================================================= -->
-      <dl class="col-lg-2 col-12 p-0 row">
-        <dt class="col-sm-6 col-md-4 d-inline d-lg-none label-title">Status</dt>
-        <dd class="col">
-          <!-- ITEM AT DESK -->
-          <ng-container *ngIf="record.metadata.state === 'ITEM_AT_DESK'">
-            <i class="fa fa-check text-success"  title="{{ 'item at desk' | translate }}" aria-hidden="true"></i>
-            {{ 'to pick up' | translate }}
-            <ng-container *ngIf="record.metadata.request_expire_date">
-              {{ 'until' | translate }} {{ record.metadata.request_expire_date | dateTranslate: 'shortDate'}}
-            </ng-container>
-          </ng-container>
-          <!-- PENDING OR ITEM IN TRANSIT FOR PICKUP -->
-          <ng-container *ngIf="record.metadata.state === 'PENDING' || record.metadata.state === 'ITEM_IN_TRANSIT_FOR_PICKUP'">
-            <i class="fa fa-ellipsis-h pr-1"  title="{{ 'pending' | translate }}" aria-hidden="true"></i>
-            <!-- TODO: Add expired date and remove "waiting" text
-            expected availability 00.00.0000  -->
-            {{ 'waiting' | translate }}
-          </ng-container>
-          <!-- PENDING -->
-          <ng-container *ngIf="record.metadata.state === 'PENDING' && record.metadata.rank && record.metadata.rank > 0">
-            <div [translate]="'(position {{ rank }} in waiting list)'" [translateParams]="{ rank: record.metadata.rank }"></div>
-          </ng-container>
-        </dd>
-      </dl>
-      <!-- ACTION BUTTONS ================================================= -->
-      <div class="col-lg-2 col-12 text-right">
-        <ng-container *ngIf="record.metadata.state === 'PENDING' || record.metadata.state === 'ITEM_IN_TRANSIT_FOR_PICKUP'; else noAction">
-          <button
-            id="request-cancel-{{ record.metadata.pid }}"
-            type="button"
-            class="btn btn-sm btn-primary"
-            (click)="cancel()"
-            [disabled]="cancelInProgress"
-          >
-            <ng-container *ngIf="!cancelInProgress || actionDone; else inProcess">
-              {{ 'Cancel' | translate }}
-            </ng-container>
-            <ng-template #inProcess>
-              <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
-              {{ 'Cancel' | translate }}
-            </ng-template>
-          </button>
-        </ng-container>
-        <ng-template #noAction>&nbsp;</ng-template>
+        <!-- ACTION BUTTONS ================================================= -->
+        <div class="col-lg-2 col-12 text-right">
+          @if (record.metadata.state === 'PENDING' || record.metadata.state === 'ITEM_IN_TRANSIT_FOR_PICKUP') {
+            <button
+              id="request-cancel-{{ record.metadata.pid }}"
+              type="button"
+              class="btn btn-sm btn-primary"
+              (click)="cancel()"
+              [disabled]="cancelInProgress"
+            >
+              @if (!cancelInProgress || actionDone) {
+                {{ 'Cancel' | translate }}
+              } @else {
+                <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
+                {{ 'Cancel' | translate }}
+              }
+            </button>
+          } @else {
+            &nbsp;
+          }
+        </div>
       </div>
     </div>
   </div>
-</div>
+}
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.ts
index 2fa3b0062..46bbad49a 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -45,46 +45,46 @@ export class PatronProfileRequestComponent {
 
   /** Get current viewcode */
   get viewcode(): string {
-    return this._patronProfileMenuService.currentPatron.organisation.code;
+    return this.patronProfileMenuService.currentPatron.organisation.code;
   }
 
   /**
    * Constructor
-   * @param _loanApiService - LoanApiService
-   * @param _translateService - TranslateService
-   * @param _toastService - ToastrService
-   * @param _patronProfileService - PatronProfileService
-   * @param _patronProfileMenuService - PatronProfileMenuService
+   * @param loanApiService - LoanApiService
+   * @param translateService - TranslateService
+   * @param toastService - ToastrService
+   * @param patronProfileService - PatronProfileService
+   * @param patronProfileMenuService - PatronProfileMenuService
    */
   constructor(
-    private _loanApiService: LoanApiService,
-    private _translateService: TranslateService,
-    private _toastService: ToastrService,
-    private _patronProfileService: PatronProfileService,
-    private _patronProfileMenuService: PatronProfileMenuService
+    private loanApiService: LoanApiService,
+    private translateService: TranslateService,
+    private toastService: ToastrService,
+    private patronProfileService: PatronProfileService,
+    private patronProfileMenuService: PatronProfileMenuService
   ) {}
 
   /** Cancel a request */
   cancel(): void {
-    const patronPid = this._patronProfileMenuService.currentPatron.pid;
+    const patronPid = this.patronProfileMenuService.currentPatron.pid;
     this.cancelInProgress = true;
-    this._loanApiService.cancel({
+    this.loanApiService.cancel({
       pid: this.record.metadata.pid,
       transaction_location_pid: this.record.metadata.item.location.pid,
       transaction_user_pid: patronPid
     }).subscribe((cancelLoan: any) => {
       if (cancelLoan !== undefined) {
-        this._patronProfileService.cancelRequest(this.record.metadata.pid);
+        this.patronProfileService.cancelRequest(this.record.metadata.pid);
         this.actionDone = true;
-        this._toastService.success(
-          this._translateService.instant('The request has been cancelled.'),
-          this._translateService.instant('Success')
+        this.toastService.success(
+          this.translateService.instant('The request has been cancelled.'),
+          this.translateService.instant('Success')
         );
       } else {
         this.cancelInProgress = false;
-        this._toastService.error(
-          this._translateService.instant('Error during the cancellation of the request.'),
-          this._translateService.instant('Error')
+        this.toastService.error(
+          this.translateService.instant('Error during the cancellation of the request.'),
+          this.translateService.instant('Error')
         );
       }
     });
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.html b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.html
index dac8cf0d0..b744fbb98 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -23,30 +23,28 @@
     </div>
   </div>
 
-  <ng-container *ngIf="!loaded; else display">
-    <div class="row">
-      <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
-    </div>
-  </ng-container>
-
-  <ng-template #display>
-    <div class="row border" *ngIf="paginator.getRecordsCount() > 0; else noRecord">
-      <div class="container-fluid">
-        <public-search-patron-profile-request
-          *ngFor="let request of records"
-          [record]="request"
-          id="request-{{ request.metadata.pid }}"
-          class="row border-bottom">
-        </public-search-patron-profile-request>
-        <shared-search-show-more-pager id="show-more-requests" [paginator]="paginator"></shared-search-show-more-pager>
+  @defer (when loaded) {
+    @if (paginator.getRecordsCount() > 0) {
+      <div class="row border">
+        <div class="container-fluid">
+          @for (request of records; track request) {
+            <public-search-patron-profile-request
+              [record]="request"
+              id="request-{{ request.metadata.pid }}"
+              class="row border-bottom">
+            </public-search-patron-profile-request>
+          }
+          <shared-search-show-more-pager id="show-more-requests" [paginator]="paginator"></shared-search-show-more-pager>
+        </div>
       </div>
-    </div>
-
-    <ng-template #noRecord>
+    } @else {
       <div class="row">
         <div class="col mt-2 font-weight-bold" translate>No request</div>
       </div>
-    </ng-template>
-
-  </ng-template>
+    }
+  } @placeholder {
+    <div class="row">
+      <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
+    </div>
+  }
 </section>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.ts
index c7ea8d11a..ef10c69ba 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -28,9 +28,6 @@ import { ITabEvent, PatronProfileService } from '../patron-profile.service';
 })
 export class PatronProfileRequestsComponent implements OnInit, OnDestroy {
 
-  /** Observable subscription */
-  private _subscription = new Subscription();
-
   /** First call of get record */
   loaded = false;
 
@@ -38,48 +35,46 @@ export class PatronProfileRequestsComponent implements OnInit, OnDestroy {
   records = [];
 
   /** Records paginator */
-  private _paginator: Paginator;
+  paginator: Paginator;
 
-  /** Get paginator */
-  get paginator(): Paginator {
-    return this._paginator;
-  }
+  /** Observable subscription */
+  private subscription = new Subscription();
 
   /**
    * Constructor
-   * @param _loanApiService - LoanApiService
-   * @param _patronProfileService - PatronProfileService
-   * @param _patronProfileMenuService - PatronProfileMenuService
+   * @param loanApiService - LoanApiService
+   * @param patronProfileService - PatronProfileService
+   * @param patronProfileMenuService - PatronProfileMenuService
    */
   constructor(
-    private _loanApiService: LoanApiService,
-    private _patronProfileService: PatronProfileService,
-    private _patronProfileMenuService: PatronProfileMenuService
+    private loanApiService: LoanApiService,
+    private patronProfileService: PatronProfileService,
+    private patronProfileMenuService: PatronProfileMenuService
   ) {}
 
   /** OnInit hook */
   ngOnInit(): void {
-    this._paginator = new Paginator();
-    this._paginator
+    this.paginator = new Paginator();
+    this.paginator
       .setHiddenInfo(
         _('({{ count }} hidden request)'),
         _('({{ count }} hidden requests)')
       );
-    this._subscription.add(
-      this._paginator.more$.subscribe((page: number) => {
+    this.subscription.add(
+      this.paginator.more$.subscribe((page: number) => {
         this._requestQuery(page).subscribe((response: Record) => {
           this.records = this.records.concat(response.hits.hits);
         });
       })
     );
-    this._subscription.add(
-      this._patronProfileService.tabsEvent$.subscribe((event: ITabEvent) => {
+    this.subscription.add(
+      this.patronProfileService.tabsEvent$.subscribe((event: ITabEvent) => {
         if (event.name === 'request') {
           if (event.count === 0) {
             this.loaded = true;
           } else {
             this._requestQuery(1).subscribe((response: Record) => {
-              this._paginator.setRecordsCount(response.hits.total.value);
+              this.paginator.setRecordsCount(response.hits.total.value);
               this.records = response.hits.hits;
               this.loaded = true;
             });
@@ -87,15 +82,15 @@ export class PatronProfileRequestsComponent implements OnInit, OnDestroy {
         }
       })
     );
-    this._subscription.add(
-      this._patronProfileService.cancelRequestEvent$.subscribe((requestPid: string) => {
+    this.subscription.add(
+      this.patronProfileService.cancelRequestEvent$.subscribe((requestPid: string) => {
         this.records = this.records.filter(record => record.metadata.pid !== requestPid);
-        this._paginator.setRecordsCount(this.records.length);
+        this.paginator.setRecordsCount(this.records.length);
       })
     );
     /** Cleaning up after the change of organization */
-    this._subscription.add(
-      this._patronProfileMenuService.onChange$.subscribe(() => {
+    this.subscription.add(
+      this.patronProfileMenuService.onChange$.subscribe(() => {
         this.paginator.setRecordsCount(0);
         this.records = [];
         this.loaded = false;
@@ -105,7 +100,7 @@ export class PatronProfileRequestsComponent implements OnInit, OnDestroy {
 
   /** OnDestroy hook */
   ngOnDestroy(): void {
-    this._subscription.unsubscribe();
+    this.subscription.unsubscribe();
   }
 
   /**
@@ -114,8 +109,8 @@ export class PatronProfileRequestsComponent implements OnInit, OnDestroy {
    * @return Observable
    */
   private _requestQuery(page: number): Observable<Record | Error> {
-    const patronPid = this._patronProfileMenuService.currentPatron.pid;
-    return this._loanApiService
-      .getRequest(patronPid, page, this._paginator.getRecordsPerPage());
+    const patronPid = this.patronProfileMenuService.currentPatron.pid;
+    return this.loanApiService
+      .getRequest(patronPid, page, this.paginator.getRecordsPerPage());
   }
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile.component.html b/projects/public-search/src/app/patron-profile/patron-profile.component.html
index 0a99abcf4..bfc28a0d7 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,8 +15,8 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <ngx-loading-bar [includeSpinner]="false" height="3px"></ngx-loading-bar>
-<ng-container *ngIf="user">
-  <ng-container *ngIf="user.isAuthenticated && user.isPatron; else noAuthenticated">
+@if (user) {
+  @if (user.isAuthenticated && user.isPatron) {
     <header>
       <h3>{{ fullname }}</h3>
     </header>
@@ -32,9 +32,11 @@ <h3>{{ fullname }}</h3>
           <ng-template tabHeading>
             {{ 'Loans' | translate }}
             <span class="badge badge-info">{{ tabs.loan.count }}</span>
-            <span class="badge badge-warning font-weight-normal ml-1" *ngIf="loansFeesTotal > 0" title="{{ 'Fees to date' | translate }}">
-              {{ loansFeesTotal | currency:patron.organisation.currency:'symbol' }}
-            </span>
+            @if (loansFeesTotal > 0) {
+              <span class="badge badge-warning font-weight-normal ml-1" title="{{ 'Fees to date' | translate }}">
+                {{ loansFeesTotal | currency:patron.organisation.currency:'symbol' }}
+              </span>
+            }
           </ng-template>
           <public-search-patron-profile-loans [count]="tabs.loan.count"></public-search-patron-profile-loans>
         </tab>
@@ -73,11 +75,10 @@ <h3>{{ fullname }}</h3>
         </tab>
       </tabset>
     </section>
-  </ng-container>
-</ng-container>
-<ng-template #noAuthenticated>
-  <div class="text-center">
-    <h3 class="mt-4 mb-4" translate>Access denied</h3>
-    {{ 'You are not identified as a patron.' | translate }}
-  </div>
-</ng-template>
+  } @else {
+    <div class="text-center">
+      <h3 class="mt-4 mb-4" translate>Access denied</h3>
+      {{ 'You are not identified as a patron.' | translate }}
+    </div>
+  }
+}
diff --git a/projects/public-search/src/app/patron-profile/patron-profile.component.ts b/projects/public-search/src/app/patron-profile/patron-profile.component.ts
index 00a63b394..9c5184852 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -18,7 +18,7 @@ import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
 import { IPatron, UserService } from '@rero/shared';
 import { TabsetComponent } from 'ngx-bootstrap/tabs';
-import { forkJoin, Subscription } from 'rxjs';
+import { Subscription, forkJoin } from 'rxjs';
 import { IllRequestApiService } from '../api/ill-request-api.service';
 import { LoanApiService } from '../api/loan-api.service';
 import { OperationLogsApiService } from '../api/operation-logs-api.service';
@@ -42,7 +42,7 @@ export class PatronProfileComponent implements OnInit, OnDestroy {
   @Input() viewcode: string;
 
   /** Observable subscription */
-  private _subscription = new Subscription();
+  private subscription = new Subscription();
 
   /** Fees on loans */
   loansFeesTotal = 0;
@@ -86,43 +86,43 @@ export class PatronProfileComponent implements OnInit, OnDestroy {
    * @return IPatron
    */
   get patron(): IPatron {
-    return this._patronProfileMenuService.currentPatron;
+    return this.patronProfileMenuService.currentPatron;
   }
 
   /**
    * Constructor
-   * @param _patronTransactionApiService - PatronTransactionApiService
-   * @param _recordService - RecordService
-   * @param _loanApiService - LoanApiService
-   * @param _illRequestApiService - IllRequestApiService
-   * @param _patronProfileService - PatronProfileService
-   * @param _userService - UserService
-   * @param _patronProfileMenuService - PatronProfileMenuService
-   * @param _operationLogsService - OperationLogsService
+   * @param patronTransactionApiService - PatronTransactionApiService
+   * @param recordService - RecordService
+   * @param loanApiService - LoanApiService
+   * @param illRequestApiService - IllRequestApiService
+   * @param patronProfileService - PatronProfileService
+   * @param userService - UserService
+   * @param patronProfileMenuService - PatronProfileMenuService
+   * @param operationLogsService - OperationLogsService
    */
   constructor(
-    private _patronTransactionApiService: PatronTransactionApiService,
-    private _recordService: RecordService,
-    private _loanApiService: LoanApiService,
-    private _illRequestApiService: IllRequestApiService,
-    private _patronProfileService: PatronProfileService,
-    private _userService: UserService,
-    private _patronProfileMenuService: PatronProfileMenuService,
-    private _operationLogsApiService: OperationLogsApiService
+    private patronTransactionApiService: PatronTransactionApiService,
+    private recordService: RecordService,
+    private loanApiService: LoanApiService,
+    private illRequestApiService: IllRequestApiService,
+    private patronProfileService: PatronProfileService,
+    private userService: UserService,
+    private patronProfileMenuService: PatronProfileMenuService,
+    private operationLogsApiService: OperationLogsApiService
   ) { }
 
   /** OnInit hook */
   ngOnInit(): void {
     this.feeTotal = 0;
-    this._subscription.add(
-      this._patronProfileService.loanFeesEvent$.subscribe((fees: number) =>
+    this.subscription.add(
+      this.patronProfileService.loanFeesEvent$.subscribe((fees: number) =>
         this.loansFeesTotal = +((this.loansFeesTotal + fees).toFixed(2))
       )
     );
-    this.user = this._userService.user;
+    this.user = this.userService.user;
     if (this.user.isAuthenticated && this.user.isPatron) {
-      this._subscription.add(
-        this._patronProfileMenuService.onChange$.subscribe((menu: IMenu) => {
+      this.subscription.add(
+        this.patronProfileMenuService.onChange$.subscribe((menu: IMenu) => {
           this._resetTabs();
           // When the component is initialized, the staticTabs is undefined.
           // After initialization, the staticTabs variable is available.
@@ -131,45 +131,45 @@ export class PatronProfileComponent implements OnInit, OnDestroy {
             this.staticTabs.tabs[0].active = true;
           }
           this._patronPid = menu.value;
-          const loanQuery = this._loanApiService.getOnLoan(this._patronPid, 1, 1, undefined);
-          const requestQuery = this._loanApiService.getRequest(this._patronPid, 1, 1, undefined);
-          const feeQuery = this._patronTransactionApiService.getFees(this._patronPid, 'open', 1, 1, undefined);
-          const historyQuery = this._operationLogsApiService.getHistory(this._patronPid, 1, 1);
-          const illRequestQuery = this._illRequestApiService.getPublicIllRequest(this._patronPid, 1, 1, undefined);
+          const loanQuery = this.loanApiService.getOnLoan(this._patronPid, 1, 1, undefined);
+          const requestQuery = this.loanApiService.getRequest(this._patronPid, 1, 1, undefined);
+          const feeQuery = this.patronTransactionApiService.getFees(this._patronPid, 'open', 1, 1, undefined);
+          const historyQuery = this.operationLogsApiService.getHistory(this._patronPid, 1, 1);
+          const illRequestQuery = this.illRequestApiService.getPublicIllRequest(this._patronPid, 1, 1, undefined);
           forkJoin([loanQuery, requestQuery, feeQuery, historyQuery, illRequestQuery])
             .subscribe((
               [loanResponse, requestResponse, feeResponse, historyResponse, illRequestResponse]:
                 [Record, Record, Record, Record, Record]
             ) => {
-              this.tabs.loan = { loaded: true, count: this._recordService.totalHits(loanResponse.hits.total) };
-              this.tabs.request.count = this._recordService.totalHits(requestResponse.hits.total);
-              this.tabs.fee.count = this._recordService.totalHits(feeResponse.hits.total);
+              this.tabs.loan = { loaded: true, count: this.recordService.totalHits(loanResponse.hits.total) };
+              this.tabs.request.count = this.recordService.totalHits(requestResponse.hits.total);
+              this.tabs.fee.count = this.recordService.totalHits(feeResponse.hits.total);
               this.feeTotal = feeResponse.aggregations.total.value;
-              this.tabs.history.count = this._recordService.totalHits(historyResponse.hits.total);
-              this.tabs.illRequest.count = this._recordService.totalHits(illRequestResponse.hits.total);
+              this.tabs.history.count = this.recordService.totalHits(historyResponse.hits.total);
+              this.tabs.illRequest.count = this.recordService.totalHits(illRequestResponse.hits.total);
             });
         })
       );
       /** Update tab history if cancel a request */
-      this._subscription.add(
-        this._patronProfileService.cancelRequestEvent$.subscribe(() => {
+      this.subscription.add(
+        this.patronProfileService.cancelRequestEvent$.subscribe(() => {
           this.tabs.request.count--;
           this.tabs.history.loaded = false;
-          this._operationLogsApiService.getHistory(this._patronPid, 1, 1).subscribe((historyResponse: Record) => {
+          this.operationLogsApiService.getHistory(this._patronPid, 1, 1).subscribe((historyResponse: Record) => {
             this.tabs.history = {
               loaded: false,
-              count: this._recordService.totalHits(historyResponse.hits.total)
+              count: this.recordService.totalHits(historyResponse.hits.total)
             };
           });
         })
       );
-      this._patronProfileMenuService.change(this._currentPatronPid(this.viewcode));
+      this.patronProfileMenuService.change(this._currentPatronPid(this.viewcode));
     }
   }
 
   /** OnDestroy hook */
   ngOnDestroy(): void {
-    this._subscription.unsubscribe();
+    this.subscription.unsubscribe();
   }
 
   /**
@@ -179,7 +179,7 @@ export class PatronProfileComponent implements OnInit, OnDestroy {
   selectTab(name: string): void {
     if ((name in this.tabs) && !this.tabs[name].loaded) {
       this.tabs[name].loaded = true;
-      this._patronProfileService.changeTab(
+      this.patronProfileService.changeTab(
         { name, count: this.tabs[name].count }
       );
     }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile.service.ts b/projects/public-search/src/app/patron-profile/patron-profile.service.ts
index f22f944e3..c20ed2ae4 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile.service.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -23,42 +23,42 @@ import { Observable, Subject } from 'rxjs';
 export class PatronProfileService {
 
   /** Tabs event */
-  private _tabsEvent = new Subject<ITabEvent>();
+  private tabsEvent = new Subject<ITabEvent>();
 
   /** Cancel event */
-  private _cancelRequestEvent = new Subject<string>();
+  private cancelRequestEvent = new Subject<string>();
 
   /** Fees event */
-  private _loanFeesEvent = new Subject<number>();
+  private loanFeesEvent = new Subject<number>();
 
   /** Get tab event observable */
   get tabsEvent$(): Observable<ITabEvent> {
-    return this._tabsEvent.asObservable();
+    return this.tabsEvent.asObservable();
   }
 
   /** Change tab */
   changeTab(tab: ITabEvent): void {
-    this._tabsEvent.next(tab);
+    this.tabsEvent.next(tab);
   }
 
   /** Cancel Request event observable */
   get cancelRequestEvent$(): Subject<string> {
-    return this._cancelRequestEvent;
+    return this.cancelRequestEvent;
   }
 
   /** @returns Observable of the loan fees event */
   get loanFeesEvent$(): Observable<number> {
-    return this._loanFeesEvent.asObservable();
+    return this.loanFeesEvent.asObservable();
   }
 
   /** Cancel request */
   cancelRequest(loanPid: string): void {
-    this._cancelRequestEvent.next(loanPid);
+    this.cancelRequestEvent.next(loanPid);
   }
 
   /** Emit the loan fees */
   loanFees(fees: number): void {
-    this._loanFeesEvent.next(fees);
+    this.loanFeesEvent.next(fees);
   }
 }
 
diff --git a/projects/public-search/src/app/pipe/array-translate.pipe.ts b/projects/public-search/src/app/pipe/array-translate.pipe.ts
index f3fbaa8f7..40842b619 100644
--- a/projects/public-search/src/app/pipe/array-translate.pipe.ts
+++ b/projects/public-search/src/app/pipe/array-translate.pipe.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -24,9 +24,9 @@ export class ArrayTranslatePipe implements PipeTransform {
 
   /**
    * Constructor
-   * @param _translateService - TranslateService
+   * @param translateService - TranslateService
    */
-  constructor(private _translateService: TranslateService) {}
+  constructor(private translateService: TranslateService) {}
 
   /**
    * Translate all elements
@@ -37,7 +37,7 @@ export class ArrayTranslatePipe implements PipeTransform {
     const translated = [];
     if (values) {
       values.forEach((element: string) => {
-        translated.push(this._translateService.instant(element));
+        translated.push(this.translateService.instant(element));
       });
     }
     return translated;
diff --git a/projects/public-search/src/app/pipe/journal-volume.pipe.ts b/projects/public-search/src/app/pipe/journal-volume.pipe.ts
index 9a5ce7d5a..c800d49e4 100644
--- a/projects/public-search/src/app/pipe/journal-volume.pipe.ts
+++ b/projects/public-search/src/app/pipe/journal-volume.pipe.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -24,9 +24,9 @@ export class JournalVolumePipe implements PipeTransform {
 
   /**
    * Constructor
-   * @param _translateService - TranslateService
+   * @param translateService - TranslateService
    */
-  public constructor(private _translateService: TranslateService) {}
+  public constructor(private translateService: TranslateService) {}
 
   /**
    * Transform
@@ -37,12 +37,12 @@ export class JournalVolumePipe implements PipeTransform {
   transform(journal: { journal_title?: string, volume?: string, number?: string }, separator: string = ' — '): string {
     const data = [];
     if ('volume' in journal) {
-      data.push(this._translateService.instant(
+      data.push(this.translateService.instant(
         'Vol. {{ volume }}', { volume: journal.volume }
       ));
     }
     if ('number' in journal) {
-      data.push(this._translateService.instant(
+      data.push(this.translateService.instant(
         'n°. {{ number }}', { number: journal.number }
       ));
     }
diff --git a/projects/public-search/src/app/scss/styles.scss b/projects/public-search/src/app/scss/styles.scss
index a0a5752ea..314f86689 100644
--- a/projects/public-search/src/app/scss/styles.scss
+++ b/projects/public-search/src/app/scss/styles.scss
@@ -21,6 +21,12 @@
 @import 'bootstrap/scss/mixins';
 @import 'ngx-toastr/toastr-bs4-alert';
 
+// ADJUST BOOTSTRAP / PRIMENG -------------------
+.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 // FIELDS FORMAT -----------------------
 ng-core-formly-field-primeng-input > input,
 formly-field > input {
diff --git a/projects/public-search/src/app/search-bar/search-bar.component.ts b/projects/public-search/src/app/search-bar/search-bar.component.ts
index 0668a94a6..9a57a57d7 100644
--- a/projects/public-search/src/app/search-bar/search-bar.component.ts
+++ b/projects/public-search/src/app/search-bar/search-bar.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -38,7 +38,7 @@ export class SearchBarComponent implements OnInit {
   }
 
   get typeaheadOptionsLimit(): number {
-    return this._searchBarConfigService.typeaheadOptionsLimit;
+    return this.searchBarConfigService.typeaheadOptionsLimit;
   }
 
   /** Array types config */
@@ -46,22 +46,22 @@ export class SearchBarComponent implements OnInit {
 
   /**
    * Constructor
-   * @param _translateService - TranslateService
-   * @param _searchBarConfigService - SearchBarConfigService
+   * @param translateService - TranslateService
+   * @param searchBarConfigService - SearchBarConfigService
    */
   constructor(
-    private _translateService: TranslateService,
-    private _searchBarConfigService: SearchBarConfigService
+    private translateService: TranslateService,
+    private searchBarConfigService: SearchBarConfigService
   ) {
-    this.placeholder = this._translateService.instant('Search');
+    this.placeholder = this.translateService.instant('Search');
   }
 
   /** OnInit hook */
   ngOnInit(): void {
     if (this.language) {
-      this._translateService.use(this.language);
+      this.translateService.use(this.language);
     }
-    this.recordTypes = this._searchBarConfigService.getConfig(
+    this.recordTypes = this.searchBarConfigService.getConfig(
       false, this, this.viewcode, this.maxLengthSuggestion
     );
   }
diff --git a/projects/shared/src/lib/api/user-api.service.ts b/projects/shared/src/lib/api/user-api.service.ts
index 1e3006d21..fccdb8613 100644
--- a/projects/shared/src/lib/api/user-api.service.ts
+++ b/projects/shared/src/lib/api/user-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -31,13 +31,14 @@ export class UserApiService {
 
   /**
    * Constructor
-   * @param _httpClient - HttpClient
+   * @param httpClient - HttpClient
+   * @param apiService - ApiService
    */
   constructor(
-    private _httpClient: HttpClient,
-    private _apiService: ApiService
+    private httpClient: HttpClient,
+    private apiService: ApiService
   ) {
-    this._apiPrefix = this._apiService.endpointPrefix;
+    this._apiPrefix = this.apiService.endpointPrefix;
   }
 
   /**
@@ -45,7 +46,7 @@ export class UserApiService {
    * @return Observable
    */
   getLoggedUser(): Observable<any> {
-    return this._httpClient.get<any>(User.LOGGED_URL);
+    return this.httpClient.get<any>(User.LOGGED_URL);
   }
 
   /**
@@ -62,6 +63,6 @@ export class UserApiService {
       new_password_confirm: password
     };
     const url = `${this._apiPrefix}/change-password`;
-    return this._httpClient.post<any>(url, data);
+    return this.httpClient.post<any>(url, data);
   }
 }
diff --git a/projects/shared/src/lib/class/user.spec.ts b/projects/shared/src/lib/class/user.spec.ts
index a24335f6a..d4ca0147f 100644
--- a/projects/shared/src/lib/class/user.spec.ts
+++ b/projects/shared/src/lib/class/user.spec.ts
@@ -69,7 +69,7 @@ describe('User', () => {
     expect(user.currentLibrary).toEqual('2');
   });
 
-  it('Should return the current organistion', () => {
+  it('Should return the current organisation', () => {
     expect(user.currentOrganisation).toBeUndefined();
     user.currentOrganisation = '1';
     expect(user.currentOrganisation).toEqual('1');
diff --git a/projects/shared/src/lib/component/action-button/action-button.component.ts b/projects/shared/src/lib/component/action-button/action-button.component.ts
index aa6850a6e..a7c86470c 100644
--- a/projects/shared/src/lib/component/action-button/action-button.component.ts
+++ b/projects/shared/src/lib/component/action-button/action-button.component.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 UCLouvain
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
+ * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -20,25 +20,23 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 @Component({
   selector: 'shared-action-button',
   template: `
-    <ng-container *ngIf="!disabled; else disabledInfo">
-      <ng-container *ngIf="url && url.length > 0; else clickButton">
+    @if (!disabled) {
+      @if (url && url.length > 0) {
         <button type="button" class="btn btn-sm {{ class }}" [title]="title" [routerLink]="url" [queryParams]="queryParams">
           <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
         </button>
-      </ng-container>
-      <ng-template #clickButton>
+      } @else {
         <button type="button" class="btn btn-sm {{ class }}" [title]="title" (click)="onClick($event)">
           <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
         </button>
-      </ng-template>
-    </ng-container>
-    <ng-template #disabledInfo>
+      }
+    } @else {
       <button type="button" class="btn btn-sm disabled {{ class }}"
               [title]="title" [popover]="tolTemplate" triggers="mouseenter:mouseleave">
         <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
       </button>
       <ng-template #tolTemplate><div [innerHtml]="message | nl2br"></div></ng-template>
-    </ng-template>
+    }
     <ng-template #contentTpl><ng-content></ng-content></ng-template>
   `
 })
diff --git a/projects/shared/src/lib/component/core/brief-view/brief-view.component.html b/projects/shared/src/lib/component/core/brief-view/brief-view.component.html
index 7922042c1..789f6f7e9 100644
--- a/projects/shared/src/lib/component/core/brief-view/brief-view.component.html
+++ b/projects/shared/src/lib/component/core/brief-view/brief-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -17,42 +17,47 @@
 -->
 
 <div class="brief-view">
-  <div class="brief-view-icon" *ngIf="iconTemplate">
-    <ng-container *ngTemplateOutlet="iconTemplate"></ng-container>
-  </div>
+  @if (iconTemplate) {
+    <div class="brief-view-icon">
+      <ng-container *ngTemplateOutlet="iconTemplate"></ng-container>
+    </div>
+  }
+
   <div class="brief-view-body">
     <div class="brief-view-title">
-      <ng-container *ngIf="titleTemplate; else defaultTitle">
+      @if (titleTemplate) {
         <ng-container *ngTemplateOutlet="titleTemplate; context: { title:title, link:link }"></ng-container>
-      </ng-container>
-    </div>
-    <div class="brief-view-content" *ngIf="contentTemplate">
-      <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+      } @else {
+        <h5>
+          @if (link) {
+            @if (link | isArray) {
+              <a [routerLink]="link">{{ title }}</a>
+            } @else {
+              <a [href]="link">{{ title }}</a>
+            }
+          } @else {
+            {{ title }}
+          }
+        </h5>
+      }
     </div>
+    @if (contentTemplate) {
+      <div class="brief-view-content">
+        <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+      </div>
+    }
     <div class="brief-view-tags">
-      <ng-container *ngIf="tagsTemplate; else defaultTags">
+      @if (tagsTemplate) {
         <ng-container *ngTemplateOutlet="tagsTemplate; context: { $implicit: tags }"></ng-container>
-      </ng-container>
+      } @else {
+        @if (tags) {
+          <ul>
+            @for (tag of tags; track tag) {
+              <li>{{ tag.label }}</li>
+            }
+          </ul>
+        }
+      }
     </div>
   </div>
 </div>
-
-
-<ng-template #defaultTitle>
-  <h5>
-    <ng-container *ngIf="link; else noLink">
-      <a *ngIf="link | isArray; else externalLink" [routerLink]="link">{{ title }}</a>
-      <ng-template #externalLink>
-        <a [href]="link">{{ title }}</a>
-      </ng-template>
-    </ng-container>
-    <ng-template #noLink>{{ title }}</ng-template>
-  </h5>
-</ng-template>
-
-
-<ng-template #defaultTags>
-  <ul *ngIf="tags">
-    <li *ngFor="let tag of tags">{{ tag.label }}</li>
-  </ul>
-</ng-template>
diff --git a/projects/shared/src/lib/component/core/brief-view/brief-view.component.ts b/projects/shared/src/lib/component/core/brief-view/brief-view.component.ts
index 2c5930a5d..0bd440e84 100644
--- a/projects/shared/src/lib/component/core/brief-view/brief-view.component.ts
+++ b/projects/shared/src/lib/component/core/brief-view/brief-view.component.ts
@@ -1,3 +1,20 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2019-2024 RERO
+ * Copyright (C) 2019-2023 UCLouvain
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 import { AfterContentInit, Component, ContentChildren, Input, QueryList, TemplateRef } from '@angular/core';
 import { ReroTemplateDirective } from '../../../directive/rero-template.directive';
 
@@ -25,8 +42,6 @@ export class BriefViewComponent implements AfterContentInit {
   contentTemplate: TemplateRef<any> | null;
   tagsTemplate: TemplateRef<any> | null;
 
-  constructor() { }
-
   ngAfterContentInit() {
     this.templates.forEach((item) => {
       switch (item.getType()) {
@@ -45,5 +60,4 @@ export class BriefViewComponent implements AfterContentInit {
       }
     });
   }
-
 }
diff --git a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.scss b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.scss
index fb746aa64..7f55d090a 100644
--- a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.scss
+++ b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.scss
@@ -42,7 +42,6 @@
 }
 
 ::ng-deep .brief-view-content {
-  @extend .ml-3;
   font-style: italic;
 
   p {
diff --git a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.ts b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.ts
index b2fe16465..029a847b9 100644
--- a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.ts
+++ b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -38,7 +38,9 @@ import { EntityBriefViewRemotePersonComponent } from './entity-brief-view.person
       </ng-template>
       <ng-template rTemplate="tags" let-tags>
         <ul>
-          <li *ngFor="let tag of tags" class="tag-{{ tag?.type }}">{{ tag.label }}</li>
+          @for (tag of tags; track tag) {
+            <li class="tag-{{ tag?.type }}">{{ tag.label }}</li>
+          }
         </ul>
       </ng-template>
     </shared-brief-view>
@@ -74,9 +76,7 @@ export class EntityBriefViewComponent implements ResultItem, OnInit, AfterViewIn
    * Constructor
    * @param extractedSourceFieldPipe: ExtractSourceFieldPipe
    */
-  constructor(
-    private extractedSourceFieldPipe: ExtractSourceFieldPipe
-  ) { }
+  constructor(private extractedSourceFieldPipe: ExtractSourceFieldPipe) { }
 
   /** OnInit hook */
   ngOnInit(): void {
diff --git a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.organisation.ts b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.organisation.ts
index d4c0ee2bd..3ac9f7d21 100644
--- a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.organisation.ts
+++ b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.organisation.ts
@@ -1,9 +1,30 @@
-import { Component, Inject, Input, OnInit } from '@angular/core';
+/*
+ * RERO ILS UI
+ * Copyright (C) 2019-2024 RERO
+ * Copyright (C) 2019-2024 UCLouvain
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Component, Input, OnInit } from '@angular/core';
 import { ExtractSourceFieldPipe } from '../../../pipe/extract-source-field.pipe';
 
 @Component({
   selector: 'shared-remote-organisation-entity-brief-view',
-  template: `<p *ngIf="dates">{{ dates | join : ' - ' }}</p>`,
+  template: `
+    @if (dates) {
+      <p>{{ dates | join : ' - ' }}</p>
+    }
+  `,
   providers: [ExtractSourceFieldPipe],
 })
 export class EntityBriefViewRemoteOrganisationComponent implements OnInit {
@@ -12,7 +33,11 @@ export class EntityBriefViewRemoteOrganisationComponent implements OnInit {
 
   dates: Array<string> = [];
 
-  constructor(private pipe: ExtractSourceFieldPipe) { }
+  /**
+   * Constructor
+   * @param pipe - ExtractSourceFieldPipe
+   */
+  constructor(private pipe: ExtractSourceFieldPipe) {}
 
   ngOnInit(): void {
     this.dates = [
diff --git a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.person.ts b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.person.ts
index f724a3e09..cf5845070 100644
--- a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.person.ts
+++ b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.person.ts
@@ -1,11 +1,32 @@
-import { Component, Inject, Input, OnInit } from '@angular/core';
+/*
+ * RERO ILS UI
+ * Copyright (C) 2019-2024 RERO
+ * Copyright (C) 2019-2024 UCLouvain
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Component, Input, OnInit } from '@angular/core';
 import { ExtractSourceFieldPipe } from '../../../pipe/extract-source-field.pipe';
 
 @Component({
   selector: 'shared-remote-person-entity-brief-view',
   template: `
-    <p *ngIf="dates">{{ dates | join : ' - ' }}</p>
-    <p *ngIf="bibliographicInformation" [innerHTML]="bibliographicInformation | urlActive:'_blank' | nl2br"></p>
+    @if (dates) {
+      <p>{{ dates | join : ' - ' }}</p>
+    }
+    @if (bibliographicInformation) {
+      <p [innerHTML]="bibliographicInformation | urlActive:'_blank' | nl2br"></p>
+    }
   `,
   providers: [ExtractSourceFieldPipe],
 })
@@ -16,7 +37,11 @@ export class EntityBriefViewRemotePersonComponent implements OnInit {
   dates: Array<string> = [];
   bibliographicInformation: string = null;
 
-  constructor(private pipe: ExtractSourceFieldPipe) { }
+  /**
+   * Constructor
+   * @param pipe - ExtractSourceFieldPipe
+   */
+  constructor(private pipe: ExtractSourceFieldPipe) {}
 
   ngOnInit(): void {
     this.dates = [
diff --git a/projects/shared/src/lib/directive/link-permissions.directive.ts b/projects/shared/src/lib/directive/link-permissions.directive.ts
index 637473680..29a0517b9 100644
--- a/projects/shared/src/lib/directive/link-permissions.directive.ts
+++ b/projects/shared/src/lib/directive/link-permissions.directive.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
- * Copyright (C) 2019-2022 UCLouvain
+ * Copyright (C) 2019-2024 RERO
+ * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -48,23 +48,23 @@ export class LinkPermissionsDirective implements AfterViewInit {
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _el - ElementRef
-   * @param _renderer - Renderer2
-   * @param _permissionsService - PermissionsService
+   * @param el - ElementRef
+   * @param renderer - Renderer2
+   * @param permissionsService - PermissionsService
    */
   constructor(
-    private _el: ElementRef,
-    private _renderer: Renderer2,
-    private _permissionsService: PermissionsService,
+    private el: ElementRef,
+    private renderer: Renderer2,
+    private permissionsService: PermissionsService,
   ) { }
 
   /** AfterViewInit hook */
   ngAfterViewInit(): void {
-    if (!this._permissionsService.canAccess(this._permissions, this._operator)) {
-      const el : HTMLElement = this._el.nativeElement;
+    if (!this.permissionsService.canAccess(this._permissions, this._operator)) {
+      const el : HTMLElement = this.el.nativeElement;
       const parent = el.parentNode;
-      this._renderer.removeChild(parent, el);
-      parent.append(this._el.nativeElement.textContent);
+      this.renderer.removeChild(parent, el);
+      parent.append(this.el.nativeElement.textContent);
     }
   }
 }
diff --git a/projects/shared/src/lib/directive/permissions.directive.ts b/projects/shared/src/lib/directive/permissions.directive.ts
index 5259ed409..aaea11156 100644
--- a/projects/shared/src/lib/directive/permissions.directive.ts
+++ b/projects/shared/src/lib/directive/permissions.directive.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
- * Copyright (C) 2019-2022 UCLouvain
+ * Copyright (C) 2019-2024 RERO
+ * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -48,19 +48,19 @@ export class PermissionsDirective implements AfterViewInit {
   // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
-   * @param _el - ElementRef
-   * @param _permissionsService - PermissionsService
+   * @param el - ElementRef
+   * @param permissionsService - PermissionsService
    */
   constructor(
-    private _el: ElementRef,
-    private _permissionsService: PermissionsService
+    private el: ElementRef,
+    private permissionsService: PermissionsService
   ) { }
 
   /** AfterViewInit hook */
   ngAfterViewInit(): void {
     // Remove element if not allowed
-    if (!this._permissionsService.canAccess(this._permissions, this._operator)) {
-      this._el.nativeElement.remove();
+    if (!this.permissionsService.canAccess(this._permissions, this._operator)) {
+      this.el.nativeElement.remove();
     }
   }
 }
diff --git a/projects/shared/src/lib/paginator/paginator.ts b/projects/shared/src/lib/paginator/paginator.ts
index a4bb84dd3..e99bf5a6c 100644
--- a/projects/shared/src/lib/paginator/paginator.ts
+++ b/projects/shared/src/lib/paginator/paginator.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -19,28 +19,28 @@ import { Subject } from 'rxjs';
 export class Paginator {
 
   /** Event on more */
-  private _more = new Subject<number>();
+  private more = new Subject<number>();
 
   /** Records count */
-  private _recordsCount = 0;
+  private recordsCount = 0;
 
   /** Hidden info (after show more link) */
-  private _hiddenInfo: { singular: string, plurial: string } = undefined;
+  private hiddenInfo: { singular: string, plurial: string } = undefined;
 
   /** Hidden records count */
-  private _hiddenCount = 0;
+  private hiddenCount = 0;
 
   /** More event */
   get more$() {
-    return this._more.asObservable();
+    return this.more.asObservable();
   }
 
   /**
    * Constructor
-   * @param _page - number (default: 1)
-   * @param _recordsPerPage - number (default: 10)
+   * @param page - number (default: 1)
+   * @param recordsPerPage - number (default: 10)
    */
-  constructor(private _page: number = 1, private _recordsPerPage: number = 10) {}
+  constructor(private page: number = 1, private recordsPerPage: number = 10) {}
 
   /**
    * Set Page
@@ -48,7 +48,7 @@ export class Paginator {
    * @return Paginator
    */
   setPage(page: number): Paginator {
-    this._page = page;
+    this.page = page;
     return this;
   }
 
@@ -57,7 +57,7 @@ export class Paginator {
    * @return number
    */
   getPage(): number {
-    return this._page;
+    return this.page;
   }
 
   /**
@@ -66,7 +66,7 @@ export class Paginator {
    * @return Paginator
    */
   setRecordsPerPage(recordsPerPage: number): Paginator {
-    this._recordsPerPage = recordsPerPage;
+    this.recordsPerPage = recordsPerPage;
     return this;
   }
 
@@ -75,7 +75,7 @@ export class Paginator {
    * @return number
    */
   getRecordsPerPage(): number {
-    return this._recordsPerPage;
+    return this.recordsPerPage;
   }
 
   /**
@@ -84,7 +84,7 @@ export class Paginator {
    * @return Paginator
    */
   setRecordsCount(recordsCount: number): Paginator {
-    this._recordsCount = recordsCount;
+    this.recordsCount = recordsCount;
     return this;
   }
 
@@ -93,7 +93,7 @@ export class Paginator {
    * @return number
    */
   getRecordsCount(): number {
-    return this._recordsCount;
+    return this.recordsCount;
   }
 
   /**
@@ -103,7 +103,7 @@ export class Paginator {
    * @return Paginator
    */
   setHiddenInfo(singular: string, plurial: string): Paginator {
-    this._hiddenInfo = { singular, plurial };
+    this.hiddenInfo = { singular, plurial };
     return this;
   }
 
@@ -112,12 +112,12 @@ export class Paginator {
    * @return string
    */
   getHiddenInfo(): string {
-    if (this._hiddenInfo) {
-      this._hiddenCount = this._recordsCount - (this._page * this._recordsPerPage);
-      if (this._hiddenCount < 0) { this._hiddenCount = 0; }
-      return (this._hiddenCount > 1)
-        ? this._hiddenInfo.plurial
-        : this._hiddenInfo.singular;
+    if (this.hiddenInfo) {
+      this.hiddenCount = this.recordsCount - (this.page * this.recordsPerPage);
+      this.hiddenCount = Math.max(this.hiddenCount, 0)
+      return (this.hiddenCount > 1)
+        ? this.hiddenInfo.plurial
+        : this.hiddenInfo.singular;
     }
   }
 
@@ -126,7 +126,7 @@ export class Paginator {
    * @return number
    */
   getHiddenCount(): number {
-    return this._hiddenCount;
+    return this.hiddenCount;
   }
 
   /**
@@ -134,8 +134,8 @@ export class Paginator {
    * @return boolean
    */
   isShowMore(): boolean {
-    return this._recordsCount > 0
-      && ((this._page * this._recordsPerPage) < this._recordsCount);
+    return this.recordsCount > 0
+      && ((this.page * this.recordsPerPage) < this.recordsCount);
   }
 
   /**
@@ -143,7 +143,7 @@ export class Paginator {
    * @param page - number
    */
   next(page?: number) {
-    this._page = (!page) ? this._page + 1 : page;
-    this._more.next(this._page);
+    this.page = (!page) ? this.page + 1 : page;
+    this.more.next(this.page);
   }
 }
diff --git a/projects/shared/src/lib/paginator/show-more-pager/show-more-pager.component.html b/projects/shared/src/lib/paginator/show-more-pager/show-more-pager.component.html
index ab2bb12ba..f6ceae92b 100644
--- a/projects/shared/src/lib/paginator/show-more-pager/show-more-pager.component.html
+++ b/projects/shared/src/lib/paginator/show-more-pager/show-more-pager.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,15 +14,16 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="paginator && paginator.getRecordsCount() > 0">
-  <ng-container *ngIf="paginator.isShowMore()">
-    <button type="button" [id]="id" class="btn btn-link pr-1 py-0" (click)="paginator.next()">
-      <i class="fa fa-plus-square-o"></i> {{ 'Show more' | translate }}
-    </button>
-    <small
-      *ngIf="paginator.getHiddenInfo()"
-      [translate]="paginator.getHiddenInfo()"
-      [translateParams]="{ count: paginator.getHiddenCount() }"
-    ></small>
-  </ng-container>
-</ng-container>
+@if (paginator && paginator.getRecordsCount() > 0) {
+    @if (paginator.isShowMore()) {
+      <button type="button" [id]="id" class="btn btn-link pr-1 py-0" (click)="paginator.next()">
+        <i class="fa fa-plus-square-o"></i> {{ 'Show more' | translate }}
+      </button>
+      @if(paginator.getHiddenInfo()) {
+        <small
+          [translate]="paginator.getHiddenInfo()"
+          [translateParams]="{ count: paginator.getHiddenCount() }"
+        ></small>
+      }
+    }
+}
diff --git a/projects/shared/src/lib/pipe/entity-label.pipe.ts b/projects/shared/src/lib/pipe/entity-label.pipe.ts
index 4a2880ea7..93dcf36a0 100644
--- a/projects/shared/src/lib/pipe/entity-label.pipe.ts
+++ b/projects/shared/src/lib/pipe/entity-label.pipe.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -17,7 +17,6 @@
  */
 import { Pipe, PipeTransform } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { AppSettingsService } from '../service/app-settings.service';
 
 /**
  * This pipe get the best possible label about a RERO `Entity` depending on the language used
@@ -50,7 +49,6 @@ import { AppSettingsService } from '../service/app-settings.service';
 })
 export class EntityLabelPipe implements PipeTransform {
 
-
   // PIPE ATTRIBUTES ==========================================================
   /** the basic key where to find the entity label */
   private _authorizedKey = 'authorized_access_point';
@@ -60,11 +58,9 @@ export class EntityLabelPipe implements PipeTransform {
   // PIPE CONSTRUCTOR =========================================================
   /**
    * Constructor
-   * @param _translateService - TranslateService
+   * @param translateService - TranslateService
    */
-  constructor(
-    private _translateService: TranslateService
-  ) { }
+  constructor(private translateService: TranslateService) {}
 
   // PIPE METHODS =============================================================
   /**
@@ -77,7 +73,7 @@ export class EntityLabelPipe implements PipeTransform {
    */
   transform(entity: any, partSeparator: string = this._defaultPartSeparator): string {
     const parts: Array<string> = []
-    const currentLangKey = `${this._authorizedKey}_${this._translateService.currentLang}`;
+    const currentLangKey = `${this._authorizedKey}_${this.translateService.currentLang}`;
     const fallbackLangKey = `${this._authorizedKey}_en`;
     parts.push(entity[currentLangKey] || entity[fallbackLangKey] || entity[this._authorizedKey]);
     if (entity?.subdivisions) {
diff --git a/projects/shared/src/lib/pipe/extract-source-field.pipe.ts b/projects/shared/src/lib/pipe/extract-source-field.pipe.ts
index 4553e37a5..53fd5c1da 100644
--- a/projects/shared/src/lib/pipe/extract-source-field.pipe.ts
+++ b/projects/shared/src/lib/pipe/extract-source-field.pipe.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -27,12 +27,12 @@ export class ExtractSourceFieldPipe implements PipeTransform {
 
   /**
    * Constructor
-   * @param _appSettingsService - AppSettingsService
-   * @param _translateService - TranslateService
+   * @param appSettingsService - AppSettingsService
+   * @param translateService - TranslateService
    */
   constructor(
-    private _appSettingsService: AppSettingsService,
-    private _translateService: TranslateService
+    private appSettingsService: AppSettingsService,
+    private translateService: TranslateService
   ) {}
 
   /**
@@ -42,8 +42,8 @@ export class ExtractSourceFieldPipe implements PipeTransform {
    * @return the requested field from metadata for the best possible source.
    */
   transform(metadata: any, field: string): any {
-    const contributionsLabel: any = this._appSettingsService.agentLabelOrder;
-    const language = this._translateService.currentLang;
+    const contributionsLabel: any = this.appSettingsService.agentLabelOrder;
+    const language = this.translateService.currentLang;
     const agentLabelOrder = (language in contributionsLabel)
       ? contributionsLabel[language]
       : contributionsLabel[contributionsLabel.fallback];
diff --git a/projects/shared/src/lib/pipe/get-translated-label.pipe.ts b/projects/shared/src/lib/pipe/get-translated-label.pipe.ts
index 78fa9dfdb..f99eba09d 100644
--- a/projects/shared/src/lib/pipe/get-translated-label.pipe.ts
+++ b/projects/shared/src/lib/pipe/get-translated-label.pipe.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -40,11 +40,9 @@ export class GetTranslatedLabelPipe implements PipeTransform {
 
   /**
    * constructor
-   * @param _translateService - TranslateService
+   * @param translateService - TranslateService
    */
-  constructor(
-    private _translateService: TranslateService
-  ){ }
+  constructor(private translateService: TranslateService) {}
 
   /**
    * get the best possible label
@@ -57,12 +55,12 @@ export class GetTranslatedLabelPipe implements PipeTransform {
     if (!Array.isArray(entries)) {
       return null;
     }
-    language = language || this._translateService.currentLang;
+    language = language || this.translateService.currentLang;
     const labels = entries.filter(entry => entry.language === language);
     if (labels.length > 0) {  // We find a correct entry ! Return the label
       return labels[0].label;
     } else if (entries.length > 0) {  // we didn't find any entry. Return the first label from the input entries.
-      return this._translateService.instant(entries[0].label);
+      return this.translateService.instant(entries[0].label);
     }
     return null;
   }
diff --git a/projects/shared/src/lib/pipe/item-holdings-call-number.pipe.ts b/projects/shared/src/lib/pipe/item-holdings-call-number.pipe.ts
index 2e117a3d5..fd0c806c3 100644
--- a/projects/shared/src/lib/pipe/item-holdings-call-number.pipe.ts
+++ b/projects/shared/src/lib/pipe/item-holdings-call-number.pipe.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -25,7 +25,11 @@ import { Observable, of } from 'rxjs';
 })
 export class ItemHoldingsCallNumberPipe implements PipeTransform {
 
-  constructor(private _recordService: RecordService) { }
+  /**
+   * Constructor
+   * @param recordService - RecordService
+   */
+  constructor(private recordService: RecordService) { }
 
   /**
    * Get item call numbers
@@ -47,7 +51,7 @@ export class ItemHoldingsCallNumberPipe implements PipeTransform {
         }
       });
     } else {
-      return this._recordService.getRecord('holdings', record.holding.pid, 1).pipe(map(data => {
+      return this.recordService.getRecord('holdings', record.holding.pid, 1).pipe(map(data => {
         if (data && data.metadata && 'call_number' in data.metadata) {
           return {
             first: {
diff --git a/projects/shared/src/lib/pipe/provision-activity.pipe.ts b/projects/shared/src/lib/pipe/provision-activity.pipe.ts
index 6d22ecc98..042c82898 100644
--- a/projects/shared/src/lib/pipe/provision-activity.pipe.ts
+++ b/projects/shared/src/lib/pipe/provision-activity.pipe.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -17,12 +17,10 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 export enum ProvisionActivityType {
-
   PUBLICATION = 'bf:Publication',
   MANUFACTURE = 'bf:Manufacture',
   PRODUCTION = 'bf:Production',
   DISTRIBUTION = 'bf:Distribution'
-
 }
 
 @Pipe({
diff --git a/projects/shared/src/lib/pipe/safe-url.pipe.ts b/projects/shared/src/lib/pipe/safe-url.pipe.ts
index 6dd6315d6..dcc9cd8d0 100644
--- a/projects/shared/src/lib/pipe/safe-url.pipe.ts
+++ b/projects/shared/src/lib/pipe/safe-url.pipe.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  * Copyright (C) 2022 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -23,7 +23,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 })
 export class SafeUrlPipe implements PipeTransform {
   constructor(private domSanitizer: DomSanitizer) {}
-  transform(url) {
+  transform(url: any) {
     return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
   }
 }
diff --git a/projects/shared/src/lib/service/app-settings.service.ts b/projects/shared/src/lib/service/app-settings.service.ts
index 785ab17ab..0dce2047d 100644
--- a/projects/shared/src/lib/service/app-settings.service.ts
+++ b/projects/shared/src/lib/service/app-settings.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2022 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -22,16 +22,16 @@ import { Injectable } from '@angular/core';
 export class AppSettingsService {
 
   /** Application settings */
-  private _settings: ISettings;
+  private appSettings: ISettings;
 
   /** Current view code */
-  private _currentViewCode: string;
+  private appCurrentViewCode: string;
 
   /**
    * Set settings
    */
   set settings(config: ISettings) {
-    this._settings = config;
+    this.appSettings = config;
   }
 
   /**
@@ -39,7 +39,7 @@ export class AppSettingsService {
    * @return ISettings
    */
   get settings(): ISettings {
-    return this._settings;
+    return this.appSettings;
   }
 
   /**
@@ -47,7 +47,7 @@ export class AppSettingsService {
    * @param viewcode - string
    */
   set currentViewCode(viewcode: string) {
-    this._currentViewCode = viewcode;
+    this.appCurrentViewCode = viewcode;
   }
 
   /**
@@ -55,7 +55,7 @@ export class AppSettingsService {
    * @return string or undefined
    */
   get currentViewCode(): string | undefined {
-    return this._currentViewCode;
+    return this.appCurrentViewCode;
   }
 
   /**
@@ -64,7 +64,7 @@ export class AppSettingsService {
    */
   get baseUrl(): string {
     this._checkSettings();
-    return this._settings.baseUrl;
+    return this.appSettings.baseUrl;
   }
 
   /**
@@ -73,7 +73,7 @@ export class AppSettingsService {
    */
   get agentSources(): string[] {
     this._checkSettings();
-    return this._settings.agentSources;
+    return this.appSettings.agentSources;
   }
 
   /**
@@ -82,7 +82,7 @@ export class AppSettingsService {
    */
   get agentAgentTypes(): any {
     this._checkSettings();
-    return this._settings.agentAgentTypes;
+    return this.appSettings.agentAgentTypes;
   }
 
   /**
@@ -91,7 +91,7 @@ export class AppSettingsService {
    */
   get agentLabelOrder(): any {
     this._checkSettings();
-    return this._settings.agentLabelOrder;
+    return this.appSettings.agentLabelOrder;
   }
 
   /**
@@ -100,7 +100,7 @@ export class AppSettingsService {
    */
   get globalViewCode(): string {
     this._checkSettings();
-    return this._settings.globalView;
+    return this.appSettings.globalView;
   }
 
   /**
@@ -109,7 +109,7 @@ export class AppSettingsService {
    */
   get currentLanguage(): string {
     this._checkSettings();
-    return this._settings.language;
+    return this.appSettings.language;
   }
 
   /**
@@ -118,7 +118,7 @@ export class AppSettingsService {
    */
   get operationLogs(): any {
     this._checkSettings();
-    return this._settings.operationLogs;
+    return this.appSettings.operationLogs;
   }
 
   /**
@@ -126,7 +126,7 @@ export class AppSettingsService {
    * @throw SettingsError
    */
   private _checkSettings(): void {
-    if (!this._settings) {
+    if (!this.appSettings) {
       throw new SettingsError('Set settings before call function.');
     }
   }
diff --git a/projects/shared/src/lib/service/permissions.service.ts b/projects/shared/src/lib/service/permissions.service.ts
index 21df84b27..4866ac224 100644
--- a/projects/shared/src/lib/service/permissions.service.ts
+++ b/projects/shared/src/lib/service/permissions.service.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
- * Copyright (C) 2022 UCLouvain
+ * Copyright (C) 2022-2024 RERO
+ * Copyright (C) 2022-2024 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -24,7 +24,7 @@ import { PERMISSIONS, PERMISSION_OPERATOR } from '../util/permissions';
 export class PermissionsService {
 
   /** Permissions set */
-  private _permissions = new Set<string>();
+  private permissions = new Set<string>();
 
   /**
    * Set all permissions in set
@@ -33,8 +33,8 @@ export class PermissionsService {
    */
   setPermissions(permissions: string[]): this {
     permissions.map((permission: string) => {
-      if (!this._permissions.has(permission)) {
-        this._permissions.add(permission);
+      if (!this.permissions.has(permission)) {
+        this.permissions.add(permission);
       }
     });
 
@@ -54,9 +54,9 @@ export class PermissionsService {
 
     switch(operator) {
       case PERMISSION_OPERATOR.OR:
-        return permission.some((perm: string) => this._permissions.has(perm));
+        return permission.some((perm: string) => this.permissions.has(perm));
       case PERMISSION_OPERATOR.AND:
-        return permission.every((perm: string) => this._permissions.has(perm))
+        return permission.every((perm: string) => this.permissions.has(perm))
       default:
         throw new Error(
           'Permission operator: The values for the operator is "and" or "or".'
@@ -69,6 +69,6 @@ export class PermissionsService {
    * @returns true if the permission is granted
    */
   canAccessDebugMode(): boolean {
-    return this._permissions.has(PERMISSIONS.DEBUG_MODE);
+    return this.permissions.has(PERMISSIONS.DEBUG_MODE);
   }
 }
diff --git a/projects/shared/src/lib/service/search-bar-config.service.ts b/projects/shared/src/lib/service/search-bar-config.service.ts
index 7ef51604f..6b8b705dc 100644
--- a/projects/shared/src/lib/service/search-bar-config.service.ts
+++ b/projects/shared/src/lib/service/search-bar-config.service.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
- * Copyright (C) 2019-2023 UCLouvain
+ * Copyright (C) 2019-2024 RERO
+ * Copyright (C) 2019-2024 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -52,16 +52,16 @@ export class SearchBarConfigService {
 
   /**
    * Constructor
-   * @param _translateService - TranslateService
-   * @param _mainTitlePipe - MainTitlePipe
-   * @param _appSettingsService - AppSettingsService
-   * @param _truncatePipe - TruncateTextPipe
+   * @param translateService - TranslateService
+   * @param mainTitlePipe - MainTitlePipe
+   * @param appSettingsService - AppSettingsService
+   * @param truncatePipe - TruncateTextPipe
    */
   constructor(
-    private _translateService: TranslateService,
-    private _mainTitlePipe: MainTitlePipe,
-    private _appSettingsService: AppSettingsService,
-    private _truncatePipe: TruncateTextPipe
+    private translateService: TranslateService,
+    private mainTitlePipe: MainTitlePipe,
+    private appSettingsService: AppSettingsService,
+    private truncatePipe: TruncateTextPipe
   ) {}
 
   /**
@@ -104,17 +104,17 @@ export class SearchBarConfigService {
   private getDocumentsSuggestions(query: string, documents: any): any[] {
     const values = [];
     documents.hits.hits.map((hit: any) => {
-      const title = this._mainTitlePipe.transform(hit.metadata.title);
+      const title = this.mainTitlePipe.transform(hit.metadata.title);
       let text = title;
       if (title.length > this._maxLengthSuggestion) {
-        text = this._truncatePipe.transform(title, this._maxLengthSuggestion);
+        text = this.truncatePipe.transform(title, this._maxLengthSuggestion);
       }
 
       values.push({
         text: this.highlightSearch(text, query),
         query: title.replace(/[:\-\[\]()/"]/g, ' ').replace(/\s\s+/g, ' '),
         index: 'documents',
-        category: this._translateService.instant('documents')
+        category: this.translateService.instant('documents')
       });
     });
     return values;
@@ -134,7 +134,7 @@ export class SearchBarConfigService {
         text: this.highlightSearch(text, query),
         index: 'entities',
         query: '',
-        category: this._translateService.instant('authors/subjects'),
+        category: this.translateService.instant('authors/subjects'),
         href: this.generateEntityLink(hit.metadata),
         iconCssClass: `fa ${Entity.getIcon(hit.metadata.type)}`
       });
@@ -187,8 +187,8 @@ export class SearchBarConfigService {
    */
   private _getContributionName(metadata: any): string {
     if (metadata.resource_type === 'remote') {
-      const language = this._translateService.currentLang;
-      const order: any = this._appSettingsService.agentLabelOrder;
+      const language = this.translateService.currentLang;
+      const order: any = this.appSettingsService.agentLabelOrder;
       const key = (language in order) ? language : 'fallback';
       const agentSources = (key === 'fallback')
         ? order[order[key]]
@@ -200,7 +200,7 @@ export class SearchBarConfigService {
         }
       }
     } else {
-      const key = `authorized_access_point_${this._translateService.currentLang}`;
+      const key = `authorized_access_point_${this.translateService.currentLang}`;
       const accessPointKey = Object.keys(metadata).includes(key) ? key : 'authorized_access_point';
       return metadata[accessPointKey];
     }
diff --git a/projects/shared/src/lib/service/user.service.ts b/projects/shared/src/lib/service/user.service.ts
index 0499152da..73b49ef7a 100644
--- a/projects/shared/src/lib/service/user.service.ts
+++ b/projects/shared/src/lib/service/user.service.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
- * Copyright (C) 2019-2022 UCLouvain
+ * Copyright (C) 2019-2024 RERO
+ * Copyright (C) 2019-2024 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -51,26 +51,26 @@ export class UserService {
   // CONSTRUCTOR ==============================================================
   /**
    * Constructor
-   * @param _userApiService - UserApiService
-   * @param _appSettingsService - AppSettingsService
-   * @param _permissionsService - PermissionsService
+   * @param userApiService - UserApiService
+   * @param appSettingsService - AppSettingsService
+   * @param permissionsService - PermissionsService
    */
   constructor(
-    private _userApiService: UserApiService,
-    private _appSettingsService: AppSettingsService,
-    private _permissionsService: PermissionsService
+    private userApiService: UserApiService,
+    private appSettingsService: AppSettingsService,
+    private permissionsService: PermissionsService
   ) { }
 
   /** load */
   load(): Observable<IUser> {
-    return this._userApiService
+    return this.userApiService
       .getLoggedUser()
       .pipe(
         map((loggedUser: any) => {
-          this._appSettingsService.settings = loggedUser.settings;
+          this.appSettingsService.settings = loggedUser.settings;
           delete loggedUser['settings'];
           if (loggedUser.permissions) {
-          this._permissionsService.setPermissions(loggedUser.permissions);
+          this.permissionsService.setPermissions(loggedUser.permissions);
         }
         this._user = new User(loggedUser);
         this._loaded.next(this._user);
diff --git a/projects/shared/src/lib/view/availability/availability.component.html b/projects/shared/src/lib/view/availability/availability.component.html
index 567645cb5..6124e9427 100644
--- a/projects/shared/src/lib/view/availability/availability.component.html
+++ b/projects/shared/src/lib/view/availability/availability.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,36 +15,30 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="availability; else loading">
-  <i
-    class="mr-1 fa fa-circle"
-    [ngClass]="{'text-success': availability.available,'text-danger': !availability.available}"
-  ></i>
-  <ng-container [ngSwitch]="recordType">
-    <ng-container *ngSwitchCase="'item'" [ngTemplateOutlet]="item" [ngTemplateOutletContext]="{availability}"></ng-container>
-    <ng-container *ngSwitchDefault [ngTemplateOutlet]="default" [ngTemplateOutletContext]="{availability}"></ng-container>
-  </ng-container>
-</ng-container>
-
-<ng-template #default let-availability=availability>
-  {{ (availability.available ? 'available' : 'not available') | translate }}
-</ng-template>
-
-<ng-template #item let-availability=availability>
-  <ng-container [ngSwitch]="availability.status">
-    <span *ngSwitchCase="'on_loan'">
-      {{ 'due until' | translate }}
-      {{ availability.due_date | dateTranslate :'shortDate' }}
-    </span>
-    <span *ngSwitchDefault>
-      {{ availability.circulation_message | getTranslatedLabel : language }}
-    </span>
-  </ng-container>
-  <ng-container *ngIf="availability.number_of_request > 0">
-    ({{ availability.number_of_request }} {{ (availability.number_of_request > 1 ? 'requests' : 'request') | translate }})
-  </ng-container>
-</ng-template>
-
-<ng-template #loading>
+@defer (when availability) {
+    <i
+      class="mr-1 fa fa-circle"
+      [ngClass]="{'text-success': availability.available,'text-danger': !availability.available}"
+    ></i>
+    @switch (recordType) {
+      @case('item') {
+        @switch(availability.status) {
+          @case('on_loan') {
+            {{ 'due until' | translate }}
+            {{ availability.due_date | dateTranslate :'shortDate' }}
+          }
+          @default {
+            {{ availability.circulation_message | getTranslatedLabel : language }}
+          }
+        }
+        @if (availability.number_of_request > 0) {
+          ({{ availability.number_of_request }} {{ (availability.number_of_request > 1 ? 'requests' : 'request') | translate }})
+        }
+      }
+      @default {
+        {{ (availability.available ? 'available' : 'not available') | translate }}
+      }
+    }
+} @loading {
   <i class="fa fa-spinner"></i>
-</ng-template>
+}
diff --git a/projects/shared/src/lib/view/brief/part-of/part-of.component.html b/projects/shared/src/lib/view/brief/part-of/part-of.component.html
index 1a7bebc5e..ec3b32bda 100644
--- a/projects/shared/src/lib/view/brief/part-of/part-of.component.html
+++ b/projects/shared/src/lib/view/brief/part-of/part-of.component.html
@@ -1,6 +1,6 @@
  <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,29 +14,33 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record && record.metadata.partOf">
-  <!-- part of -->
-  <ng-container *ngFor="let partOf of record.metadata.partOf; let i = index">
+@if (record && record.metadata.partOf) {
+  @for (partOf of record.metadata.partOf; track partOf; let i = $index) {
     <div class="mb-0">
       <b>{{ getPartOfLabel(record) }}</b>:
-      <ng-container *ngIf="isPublicView; else adminLink">
+      @if (isPublicView) {
         <a id="{{ 'doc-part-of-' + i }}" href="/{{ viewcode }}/documents/{{ partOf.document.pid }}">
           {{ partOf.document.title }}
         </a>
-      </ng-container>
-      <ng-template #adminLink>
+      } @else {
         <a id="{{ 'doc-part-of-' + i }}" [routerLink]="['/records', 'documents', 'detail', partOf.document.pid]">
           {{ partOf.document.title }}
         </a>
-      </ng-template>
-      <ng-container *ngIf="partOf.numbering">
-        <span>; </span>
-        <ng-container *ngFor="let numbering of partOf.numbering; let isLast = last">
-          <span class="list-inline-item" id="{{ 'doc-part-of-numbering-' + i }}" *ngIf="formatNumbering(numbering) as num">
-            {{ num }}<ng-container *ngIf="!isLast">, </ng-container>
-          </span>
-        </ng-container>
-      </ng-container>
+      }
+      @if (partOf.numbering) {
+          ;
+          @for(numbering of partOf.numbering; track numbering; let i = $index; let isLast = $last) {
+            @if (formatNumbering(numbering); as num) {
+              <span class="list-inline-item" id="{{ 'doc-part-of-numbering-' + i }}">
+                {{ num }}
+                @if (!isLast) {
+                  ,
+                }
+              </span>
+            }
+          }
+      }
     </div>
-  </ng-container>
-</ng-container>
+  }
+}
+
diff --git a/projects/shared/src/lib/view/brief/part-of/part-of.component.ts b/projects/shared/src/lib/view/brief/part-of/part-of.component.ts
index df97939d9..7062ffa4a 100644
--- a/projects/shared/src/lib/view/brief/part-of/part-of.component.ts
+++ b/projects/shared/src/lib/view/brief/part-of/part-of.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -40,23 +40,23 @@ export class PartOfComponent {
   ddCssClass = 'col-sm-6 col-md-8 mb-0';
 
   /** constructor
-   * @param _translateService - TranslateService to translate some strings.
+   * @param translateService - TranslateService to translate some strings.
    */
-  constructor(private _translateService: TranslateService) { }
+  constructor(private translateService: TranslateService) { }
 
   /**
    * Get "part of" label from host document type
    * @param hostDocument - host document
    * @return corresponding translated label
    */
-  getPartOfLabel(hostDocument: any) {
+  getPartOfLabel(hostDocument: any): string {
     switch (hostDocument.metadata.issuance.subtype) {
       case 'periodical':
-          return this._translateService.instant('Journal');
+          return this.translateService.instant('Journal');
       case 'monographicSeries':
-          return this._translateService.instant('Series');
+          return this.translateService.instant('Series');
       default:
-           return this._translateService.instant('Published in');
+           return this.translateService.instant('Published in');
     }
   }
 
@@ -66,21 +66,21 @@ export class PartOfComponent {
    * @param num: numbering to format
    * @return formatted numbering (example: 2020, vol. 2, nr. 3, p. 302)
    */
-  formatNumbering(num: any) {
+  formatNumbering(num: any): string {
     const numbering = [];
     if (num.year) {
       numbering.push(num.year);
     }
     if (num.volume) {
-      const volume = [this._translateService.instant('vol'), num.volume];
+      const volume = [this.translateService.instant('vol'), num.volume];
       numbering.push(volume.join('. '));
     }
     if (num.issue) {
-      const issue = [this._translateService.instant('nr'), num.issue];
+      const issue = [this.translateService.instant('nr'), num.issue];
       numbering.push(issue.join('. '));
     }
     if (num.pages) {
-      const pages = [this._translateService.instant('p'), num.pages];
+      const pages = [this.translateService.instant('p'), num.pages];
       numbering.push(pages.join('. '));
     }
     return numbering.join(', ');
diff --git a/projects/shared/src/lib/view/contribution/contribution.component.html b/projects/shared/src/lib/view/contribution/contribution.component.html
index 1fa2bd88f..17cc8d50c 100644
--- a/projects/shared/src/lib/view/contribution/contribution.component.html
+++ b/projects/shared/src/lib/view/contribution/contribution.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -16,49 +16,47 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<ul class="contributor-list-inline" *ngIf="contributions">
-  <li *ngFor="let contributor of contributions; last as isLast">
-    <ng-container [ngTemplateOutlet]="contributorTpl" [ngTemplateOutletContext]="{contributor}"></ng-container>
-  </li>
-  <li *ngIf="limit">…</li>
-</ul>
+@if (contributions) {
+  <ul class="contributor-list-inline">
+    @for (contributor of contributions; track contributor) {
+      <li>
+        <ng-container [ngTemplateOutlet]="contributorTpl" [ngTemplateOutletContext]="{contributor}"></ng-container>
+      </li>
+      @if (limit) {
+        …
+      }
+    }
+  </ul>
+}
 
 <ng-template #contributorTpl let-contributor='contributor'>
   <ng-container [ngTemplateOutlet]="entityTpl" [ngTemplateOutletContext]="{entity: contributor.entity}"></ng-container>
-  <ng-container *ngIf="withRoles && contributor.role && contributor.role.length > 0">
+  @if (withRoles && contributor.role && contributor.role.length > 0) {
     <ul class="contributor-roles">
       <li class="contributor-role" *ngFor="let role of contributor.role">{{ role | translate }}</li>
     </ul>
-  </ng-container>
+  }
 </ng-template>
 
 <ng-template #entityTpl let-entity=entity>
-  <ng-container *ngIf="(activateLink || withEntityLink) else entityNoLink">
-
-    <!-- ENTITY LINK -->
-    <ng-container *ngIf="withEntityLink && entity?.pid else searchLink">
+  @if (activateLink || withEntityLink) {
+    @if (withEntityLink && entity?.pid) {
       <a [routerLink]="['/records/', entity.resource_type+'_entities', 'detail', entity.pid]">{{ entity | entityLabel }}</a>
-    </ng-container>
-
-    <!-- SEARCH LINK -->
-    <ng-template #searchLink>
-      <ng-container *ngIf="view !== 'professional'; else professional">
+    } @else {
+      @if (view !== 'professional') {
         <shared-entity-link
         resourceName="contribution"
         [external]="true"
         [entity]="entity"
         [routerLinkParams]="['/', view, 'search', 'documents']"
       ></shared-entity-link>
-      </ng-container>
-      <ng-template #professional>
+      } @else {
         <shared-entity-link
-        resourceName="contribution"
-        [entity]="entity"
-      ></shared-entity-link>
-      </ng-template>
-    </ng-template>
-  </ng-container>
-
-  <!-- NO LINK -->
-  <ng-template #entityNoLink>{{ entity | entityLabel }}</ng-template>
-</ng-template>
+          resourceName="contribution"
+          [entity]="entity"
+        ></shared-entity-link>
+      }
+    }
+  } @else {
+    {{ entity | entityLabel }}
+  }
diff --git a/projects/shared/src/lib/view/entity-link.component.ts b/projects/shared/src/lib/view/entity-link.component.ts
index 32390b544..627e03272 100644
--- a/projects/shared/src/lib/view/entity-link.component.ts
+++ b/projects/shared/src/lib/view/entity-link.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -21,18 +21,18 @@ import { Entity } from '../class/entity';
 @Component({
   selector: 'shared-entity-link',
   template: `
-    <a
-      *ngIf="!external; else externalLink"
-      [class]="className"
-      [routerLink]="routerLinkParams"
-      [queryParams]="queryParams"
-    >{{ linkName }}</a>
-    <ng-template #externalLink>
-    <a
-      [class]="className"
-      [attr.href]="externalHrefLink"
-    >{{ linkName }}</a>
-    </ng-template>
+    @if (!external) {
+      <a
+        [class]="className"
+        [routerLink]="routerLinkParams"
+        [queryParams]="queryParams"
+      >{{ linkName }}</a>
+    } @else {
+      <a
+        [class]="className"
+        [attr.href]="externalHrefLink"
+      >{{ linkName }}</a>
+    }
   `
 })
 export class EntityLinkComponent implements OnInit {
diff --git a/projects/shared/src/lib/view/inherited-call-number/inherited-call-number.component.html b/projects/shared/src/lib/view/inherited-call-number/inherited-call-number.component.html
index ca8c5b7a3..3f9d7011e 100644
--- a/projects/shared/src/lib/view/inherited-call-number/inherited-call-number.component.html
+++ b/projects/shared/src/lib/view/inherited-call-number/inherited-call-number.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,29 +14,29 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="itemMetadata" [ngSwitch]="context">
-
-  <ng-container *ngSwitchCase="'first'">
-    <ng-container *ngIf="itemMetadata | itemHoldingsCallNumber | async as callNumber">
-      <ng-container *ngIf="callNumber.first.source === 'holding'">
-        <i class="fa fa-link text-warning" title="{{ 'inherited' | translate }}" aria-hidden="true"></i>
-      </ng-container>
-      {{ callNumber.first.value }}
-    </ng-container>
-  </ng-container>
-
-  <ng-container *ngSwitchDefault>
-    <ng-container *ngIf="itemMetadata | itemHoldingsCallNumber | async as callNumber">
-      <ng-container *ngIf="callNumber.first.value">
+@if (itemMetadata) {
+  @switch (context) {
+    @case ('first') {
+      @if (itemMetadata | itemHoldingsCallNumber | async; as callNumber) {
+        @if (callNumber.first.source === 'holding') {
+          <i class="fa fa-link text-warning" title="{{ 'inherited' | translate }}" aria-hidden="true"></i>
+        }
         {{ callNumber.first.value }}
-      </ng-container>
-      <ng-container *ngIf="callNumber.first.value && callNumber.second.value">
-        |
-      </ng-container>
-      <ng-container *ngIf="callNumber.second.value">
-        {{ callNumber.second.value }}
-      </ng-container>
-    </ng-container>
-  </ng-container>
 
-</ng-container>
+      }
+    }
+    @default {
+      @if (itemMetadata | itemHoldingsCallNumber | async; as callNumber) {
+        @if (callNumber.first.value) {
+          {{ callNumber.first.value }}
+        }
+        @if (callNumber.first.value && callNumber.second.value) {
+          |
+        }
+        @if (callNumber.second.value) {
+          {{ callNumber.second.value }}
+        }
+      }
+    }
+  }
+}
diff --git a/projects/shared/src/lib/view/thumbnail/thumbnail.component.html b/projects/shared/src/lib/view/thumbnail/thumbnail.component.html
index 664f7f73f..defa472ed 100644
--- a/projects/shared/src/lib/view/thumbnail/thumbnail.component.html
+++ b/projects/shared/src/lib/view/thumbnail/thumbnail.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 2019-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,20 +14,21 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-
-<ng-container *ngIf="record && record.metadata">
+@if (record) {
   <div class="align-self-start d-flex">
     <figure class="mb-0" [ngClass]="figureStyle">
-      <img *ngIf="svgImage" class="svg-image" [ngClass]="imageCssClass" [src]="coverUrl">
-      <img *ngIf="!svgImage" [ngClass]="imageCssClass" [src]="coverUrl">
-      <ng-container *ngFor="let type of record.metadata.type">
-        <ng-container *ngIf="type.subtype; else mainTypeBlock">
+      @if (svgImage) {
+        <img class="svg-image" [ngClass]="imageCssClass" [src]="coverUrl">
+      } @else {
+        <img [ngClass]="imageCssClass" [src]="coverUrl">
+      }
+      @for (type of record.metadata.type; track type) {
+        @if (type.subtype) {
           <figcaption class="figure-caption text-center font-weight-bold" translate>{{ type.subtype }}</figcaption>
-        </ng-container>
-        <ng-template #mainTypeBlock>
+        } @else {
           <figcaption class="figure-caption text-center font-weight-bold" translate>{{ type.main_type }}</figcaption>
-        </ng-template>
-      </ng-container>
+        }
+      }
     </figure>
   </div>
-</ng-container>
\ No newline at end of file
+}
diff --git a/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts b/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts
index 0921ae1ed..d2e94cb44 100644
--- a/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts
+++ b/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -51,18 +51,16 @@ export class ThumbnailComponent implements OnInit {
 
   /**
    * Constructor
-   * @param _httpClient - HttpClient
+   * @param httpClient - HttpClient
    */
-  constructor(
-    private _httpClient: HttpClient
-  ) { }
+  constructor(private httpClient: HttpClient) {}
 
   /**
    * Get cover url
    * @returns string - url of the cover if cover exists.
    */
   getCoverUrl() {
-    this._httpClient.get<any>(`/api/document/cover/${this.isbn}`).pipe(
+    this.httpClient.get<any>(`/api/document/cover/${this.isbn}`).pipe(
       catchError(e => {
         if (e.status === 404) {
           return of(null);