diff --git a/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html b/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html
index 6c748ca2e7..8c2b37adbd 100644
--- a/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html
+++ b/src/app/access-control/bulk-access/browse/bulk-access-browse.component.html
@@ -2,10 +2,10 @@
   <ngb-panel [id]="'browse'">
     <ng-template ngbPanelTitle>
       <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="acc.toggle('browse')"
-           data-test="browse">
+        data-test="browse">
         <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
-                [attr.aria-expanded]="acc.isExpanded('browse')"
-                aria-controls="bulk-access-browse-panel-content">
+          [attr.aria-expanded]="acc.isExpanded('browse')"
+          aria-controls="bulk-access-browse-panel-content">
           {{ 'admin.access-control.bulk-access-browse.header' | translate }}
         </button>
       </div>
@@ -18,9 +18,9 @@
             <ng-template ngbNavContent>
               <div class="bulk-access-search">
                 <ds-search [configuration]="'administrativeBulkAccess'"
-                                  [selectable]="true"
-                                  [selectionConfig]="{ repeatable: true, listId: listId }"
-                                  [showThumbnails]="false"></ds-search>
+                  [selectable]="true"
+                  [selectionConfig]="{ repeatable: true, listId: listId }"
+                [showThumbnails]="false"></ds-search>
               </div>
             </ng-template>
           </li>
@@ -36,21 +36,25 @@
                 [showPaginator]="false"
                 (prev)="pagePrev()"
                 (next)="pageNext()">
-              <ul *ngIf="(objectsSelected$|async)?.hasSucceeded" class="list-unstyled ms-4">
-                  <li *ngFor='let object of (objectsSelected$|async)?.payload?.page | paginate: { itemsPerPage: (paginationOptions$ | async).pageSize,
-                              currentPage: (paginationOptions$ | async).currentPage, totalItems: (objectsSelected$|async)?.payload?.page.length }; let i = index; let last = last '
-                      class="mt-4 mb-4 d-flex"
-                      [attr.data-test]="'list-object' | dsBrowserOnly">
-                    <ds-selectable-list-item-control [index]="i"
-                                                     [object]="object"
-                                                     [selectionConfig]="{ repeatable: true, listId: listId }"></ds-selectable-list-item-control>
-                    <ds-listable-object-component-loader [listID]="listId"
-                                                         [index]="i"
-                                                         [object]="object"
-                                                         [showThumbnails]="false"
-                                                         [viewMode]="'list'"></ds-listable-object-component-loader>
-                  </li>
-                </ul>
+                @if ((objectsSelected$|async)?.hasSucceeded) {
+                  <ul class="list-unstyled ms-4">
+                    @for (object of (objectsSelected$|async)?.payload?.page | paginate: { itemsPerPage: (paginationOptions$ | async).pageSize,
+                      currentPage: (paginationOptions$ | async).currentPage, totalItems: (objectsSelected$|async)?.payload?.page.length }; track object; let i = $index; let last = $last) {
+                      <li
+                        class="mt-4 mb-4 d-flex"
+                        [attr.data-test]="'list-object' | dsBrowserOnly">
+                        <ds-selectable-list-item-control [index]="i"
+                          [object]="object"
+                        [selectionConfig]="{ repeatable: true, listId: listId }"></ds-selectable-list-item-control>
+                        <ds-listable-object-component-loader [listID]="listId"
+                          [index]="i"
+                          [object]="object"
+                          [showThumbnails]="false"
+                        [viewMode]="'list'"></ds-listable-object-component-loader>
+                      </li>
+                    }
+                  </ul>
+                }
               </ds-pagination>
             </ng-template>
           </li>
diff --git a/src/app/access-control/epeople-registry/epeople-registry.component.html b/src/app/access-control/epeople-registry/epeople-registry.component.html
index 8c462daf6b..c054a5dd55 100644
--- a/src/app/access-control/epeople-registry/epeople-registry.component.html
+++ b/src/app/access-control/epeople-registry/epeople-registry.component.html
@@ -6,7 +6,7 @@
 
         <div>
           <button class="me-auto btn btn-success addEPerson-button"
-                  [routerLink]="'create'">
+            [routerLink]="'create'">
             <i class="fas fa-plus"></i>
             <span class="d-none d-sm-inline ms-1">{{labelPrefix + 'button.add' | translate}}</span>
           </button>
@@ -18,77 +18,84 @@
       </h2>
       <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
         <div>
-            <select name="scope" id="scope" formControlName="scope" class="form-select" aria-label="Search scope">
+          <select name="scope" id="scope" formControlName="scope" class="form-select" aria-label="Search scope">
             <option value="metadata">{{labelPrefix + 'search.scope.metadata' | translate}}</option>
             <option value="email">{{labelPrefix + 'search.scope.email' | translate}}</option>
           </select>
         </div>
-          <div class="flex-grow-1 me-3 ms-3">
-            <div class="mb-3 input-group">
+        <div class="flex-grow-1 me-3 ms-3">
+          <div class="mb-3 input-group">
             <input type="text" name="query" id="query" formControlName="query"
-                   class="form-control" [attr.aria-label]="labelPrefix + 'search.placeholder' | translate"
-                   [placeholder]="(labelPrefix + 'search.placeholder' | translate)">
-              <span class="input-group-append">
-                <button type="submit" class="search-button btn btn-primary">
-                  <i class="fas fa-search"></i> {{ labelPrefix + 'search.button' | translate }}
-                </button>
-              </span>
+              class="form-control" [attr.aria-label]="labelPrefix + 'search.placeholder' | translate"
+              [placeholder]="(labelPrefix + 'search.placeholder' | translate)">
+            <span class="input-group-append">
+              <button type="submit" class="search-button btn btn-primary">
+                <i class="fas fa-search"></i> {{ labelPrefix + 'search.button' | translate }}
+              </button>
+            </span>
           </div>
         </div>
         <div>
           <button (click)="clearFormAndResetResult();"
-                  class="search-button btn btn-secondary">{{labelPrefix + 'button.see-all' | translate}}</button>
+          class="search-button btn btn-secondary">{{labelPrefix + 'button.see-all' | translate}}</button>
         </div>
       </form>
 
-      <ds-loading *ngIf="searching$ | async"></ds-loading>
-      <ds-pagination
-        *ngIf="(pageInfoState$ | async)?.totalElements > 0 && (searching$ | async) !== true"
-        [paginationOptions]="config"
-        [collectionSize]="(pageInfoState$ | async)?.totalElements"
-        [hideGear]="true"
-        [hidePagerWhenSinglePage]="true">
-
-        <div class="table-responsive">
-          <table id="epeople" class="table table-striped table-hover table-bordered">
-            <thead>
-            <tr>
-              <th scope="col">{{labelPrefix + 'table.id' | translate}}</th>
-              <th scope="col">{{labelPrefix + 'table.name' | translate}}</th>
-              <th scope="col">{{labelPrefix + 'table.email' | translate}}</th>
-              <th>{{labelPrefix + 'table.edit' | translate}}</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr *ngFor="let epersonDto of (ePeopleDto$ | async)?.page"
-                [ngClass]="{'table-primary' : (activeEPerson$ | async) === epersonDto.eperson}">
-              <td>{{epersonDto.eperson.id}}</td>
-              <td>{{ dsoNameService.getName(epersonDto.eperson) }}</td>
-              <td>{{epersonDto.eperson.email}}</td>
-              <td>
-                <div class="btn-group edit-field">
-                  <button [routerLink]="getEditEPeoplePage(epersonDto.eperson.id)"
+      @if (searching$ | async) {
+        <ds-loading></ds-loading>
+      }
+      @if ((pageInfoState$ | async)?.totalElements > 0 && (searching$ | async) !== true) {
+        <ds-pagination
+          [paginationOptions]="config"
+          [collectionSize]="(pageInfoState$ | async)?.totalElements"
+          [hideGear]="true"
+          [hidePagerWhenSinglePage]="true">
+          <div class="table-responsive">
+            <table id="epeople" class="table table-striped table-hover table-bordered">
+              <thead>
+                <tr>
+                  <th scope="col">{{labelPrefix + 'table.id' | translate}}</th>
+                  <th scope="col">{{labelPrefix + 'table.name' | translate}}</th>
+                  <th scope="col">{{labelPrefix + 'table.email' | translate}}</th>
+                  <th>{{labelPrefix + 'table.edit' | translate}}</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (epersonDto of (ePeopleDto$ | async)?.page; track epersonDto) {
+                  <tr
+                    [ngClass]="{'table-primary' : (activeEPerson$ | async) === epersonDto.eperson}">
+                    <td>{{epersonDto.eperson.id}}</td>
+                    <td>{{ dsoNameService.getName(epersonDto.eperson) }}</td>
+                    <td>{{epersonDto.eperson.email}}</td>
+                    <td>
+                      <div class="btn-group edit-field">
+                        <button [routerLink]="getEditEPeoplePage(epersonDto.eperson.id)"
                           class="btn btn-outline-primary btn-sm access-control-editEPersonButton"
                           title="{{labelPrefix + 'table.edit.buttons.edit' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
-                    <i class="fas fa-edit fa-fw"></i>
-                  </button>
-                  <button *ngIf="epersonDto.ableToDelete" (click)="deleteEPerson(epersonDto.eperson)"
-                          class="delete-button btn btn-outline-danger btn-sm access-control-deleteEPersonButton"
-                          title="{{labelPrefix + 'table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
-                    <i class="fas fa-trash-alt fa-fw"></i>
-                  </button>
-                </div>
-              </td>
-            </tr>
-            </tbody>
-          </table>
+                          <i class="fas fa-edit fa-fw"></i>
+                        </button>
+                        @if (epersonDto.ableToDelete) {
+                          <button (click)="deleteEPerson(epersonDto.eperson)"
+                            class="delete-button btn btn-outline-danger btn-sm access-control-deleteEPersonButton"
+                            title="{{labelPrefix + 'table.edit.buttons.remove' | translate: { name: dsoNameService.getName(epersonDto.eperson) } }}">
+                            <i class="fas fa-trash-alt fa-fw"></i>
+                          </button>
+                        }
+                      </div>
+                    </td>
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </ds-pagination>
+      }
+
+      @if ((pageInfoState$ | async)?.totalElements === 0) {
+        <div class="alert alert-info w-100 mb-2" role="alert">
+          {{labelPrefix + 'no-items' | translate}}
         </div>
-
-      </ds-pagination>
-
-      <div *ngIf="(pageInfoState$ | async)?.totalElements === 0" class="alert alert-info w-100 mb-2" role="alert">
-        {{labelPrefix + 'no-items' | translate}}
-      </div>
+      }
     </div>
   </div>
 </div>
diff --git a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
index c6f3a915a9..9947d775a2 100644
--- a/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
+++ b/src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html
@@ -2,97 +2,111 @@
   <div class="group-form row">
     <div class="col-12">
 
-      <div *ngIf="activeEPerson$ | async; then editHeader; else createHeader"></div>
-
-      <ng-template #createHeader>
-        <h1 class="border-bottom pb-2">{{messagePrefix + '.create' | translate}}</h1>
-      </ng-template>
-
-      <ng-template #editHeader>
+      @if (activeEPerson$ | async) {
         <h1 class="border-bottom pb-2">{{messagePrefix + '.edit' | translate}}</h1>
-      </ng-template>
+      } @else {
+        <h1 class="border-bottom pb-2">{{messagePrefix + '.create' | translate}}</h1>
+      }
+
+
 
       <ds-form [formId]="formId"
-               [formModel]="formModel"
-               [formGroup]="formGroup"
-               [formLayout]="formLayout"
-               [displayCancel]="false"
-               [submitLabel]="submitLabel"
-               (submitForm)="onSubmit()">
+        [formModel]="formModel"
+        [formGroup]="formGroup"
+        [formLayout]="formLayout"
+        [displayCancel]="false"
+        [submitLabel]="submitLabel"
+        (submitForm)="onSubmit()">
         <div before class="btn-group">
           <button (click)="onCancel()" type="button" class="btn btn-outline-secondary">
             <i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}
           </button>
         </div>
-        <div *ngIf="displayResetPassword" between class="btn-group">
-          <button class="btn btn-primary" [dsBtnDisabled]="(canReset$ | async) !== true" type="button" (click)="resetPassword()">
-            <i class="fa fa-key"></i> {{'admin.access-control.epeople.actions.reset' | translate}}
+        @if (displayResetPassword) {
+          <div between class="btn-group">
+            <button class="btn btn-primary" [dsBtnDisabled]="(canReset$ | async) !== true" type="button" (click)="resetPassword()">
+              <i class="fa fa-key"></i> {{'admin.access-control.epeople.actions.reset' | translate}}
+            </button>
+          </div>
+        }
+        @if (canImpersonate$ | async) {
+          <div between class="btn-group ms-1">
+            @if (!isImpersonated) {
+              <button class="btn btn-primary" type="button" (click)="impersonate()">
+                <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.impersonate' | translate}}
+              </button>
+            }
+            @if (isImpersonated) {
+              <button class="btn btn-primary" type="button" (click)="stopImpersonating()">
+                <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.stop-impersonating' | translate}}
+              </button>
+            }
+          </div>
+        }
+        @if (canDelete$ | async) {
+          <button after class="btn btn-danger delete-button" type="button" (click)="delete()">
+            <i class="fas fa-trash"></i> {{'admin.access-control.epeople.actions.delete' | translate}}
           </button>
-        </div>
-        <div *ngIf="canImpersonate$ | async" between class="btn-group ms-1">
-          <button *ngIf="!isImpersonated" class="btn btn-primary" type="button" (click)="impersonate()">
-            <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.impersonate' | translate}}
-          </button>
-          <button *ngIf="isImpersonated" class="btn btn-primary" type="button" (click)="stopImpersonating()">
-            <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.stop-impersonating' | translate}}
-          </button>
-        </div>
-        <button *ngIf="canDelete$ | async" after class="btn btn-danger delete-button" type="button" (click)="delete()">
-          <i class="fas fa-trash"></i> {{'admin.access-control.epeople.actions.delete' | translate}}
-        </button>
+        }
       </ds-form>
 
-      <ds-loading [showMessage]="false" *ngIf="!formGroup"></ds-loading>
+      @if (!formGroup) {
+        <ds-loading [showMessage]="false"></ds-loading>
+      }
 
-      <div *ngIf="activeEPerson$ | async">
-        <h2>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h2>
-
-        <ds-loading [showMessage]="false" *ngIf="groups$ | async | dsHasNoValue"></ds-loading>
-
-        <ds-pagination
-          *ngIf="(groups$ | async)?.payload?.totalElements > 0"
-          [paginationOptions]="config"
-          [collectionSize]="(groups$ | async)?.payload?.totalElements"
-          [hideGear]="true"
-          [hidePagerWhenSinglePage]="true"
-          (pageChange)="onPageChange($event)">
-
-          <div class="table-responsive">
-            <table id="groups" class="table table-striped table-hover table-bordered">
-              <thead>
-              <tr>
-                <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
-                <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
-                <th scope="col" class="align-middle">{{messagePrefix + '.table.collectionOrCommunity' | translate}}</th>
-              </tr>
-              </thead>
-              <tbody>
-              <tr *ngFor="let group of (groups$ | async)?.payload?.page">
-                <td class="align-middle">{{group.id}}</td>
-                <td class="align-middle">
-                  <a (click)="groupsDataService.startEditingNewGroup(group)"
-                     [routerLink]="[groupsDataService.getGroupEditPageRouterLink(group)]">
-                    {{ dsoNameService.getName(group) }}
-                  </a>
-                </td>
-                <td class="align-middle">
-                  {{ dsoNameService.getName((group.object | async)?.payload) }}
-                </td>
-              </tr>
-              </tbody>
-            </table>
-          </div>
-
-        </ds-pagination>
-
-        <div *ngIf="(groups$ | async)?.payload?.totalElements === 0" class="alert alert-info w-100 mb-2" role="alert">
-          <div>{{messagePrefix + '.memberOfNoGroups' | translate}}</div>
-          <div>
-            <button [routerLink]="[groupsDataService.getGroupRegistryRouterLink()]"
-                    class="btn btn-primary">{{messagePrefix + '.goToGroups' | translate}}</button>
-          </div>
+      @if (activeEPerson$ | async) {
+        <div>
+          <h2>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h2>
+          @if (groups$ | async | dsHasNoValue) {
+            <ds-loading [showMessage]="false"></ds-loading>
+          }
+          @if ((groups$ | async)?.payload?.totalElements > 0) {
+            <ds-pagination
+              [paginationOptions]="config"
+              [collectionSize]="(groups$ | async)?.payload?.totalElements"
+              [hideGear]="true"
+              [hidePagerWhenSinglePage]="true"
+              (pageChange)="onPageChange($event)">
+              <div class="table-responsive">
+                <table id="groups" class="table table-striped table-hover table-bordered">
+                  <thead>
+                    <tr>
+                      <th scope="col" class="align-middle">{{messagePrefix + '.table.id' | translate}}</th>
+                      <th scope="col" class="align-middle">{{messagePrefix + '.table.name' | translate}}</th>
+                      <th scope="col" class="align-middle">{{messagePrefix + '.table.collectionOrCommunity' | translate}}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (group of (groups$ | async)?.payload?.page; track group) {
+                      <tr>
+                        <td class="align-middle">{{group.id}}</td>
+                        <td class="align-middle">
+                          <a (click)="groupsDataService.startEditingNewGroup(group)"
+                            [routerLink]="[groupsDataService.getGroupEditPageRouterLink(group)]">
+                            {{ dsoNameService.getName(group) }}
+                          </a>
+                        </td>
+                        <td class="align-middle">
+                          {{ dsoNameService.getName((group.object | async)?.payload) }}
+                        </td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              </div>
+            </ds-pagination>
+          }
+          @if ((groups$ | async)?.payload?.totalElements === 0) {
+            <div class="alert alert-info w-100 mb-2" role="alert">
+              <div>{{messagePrefix + '.memberOfNoGroups' | translate}}</div>
+              <div>
+                <button [routerLink]="[groupsDataService.getGroupRegistryRouterLink()]"
+                class="btn btn-primary">{{messagePrefix + '.goToGroups' | translate}}</button>
+              </div>
+            </div>
+          }
         </div>
-      </div>
+      }
     </div>
   </div>
 </div>
diff --git a/src/app/access-control/group-registry/groups-registry.component.html b/src/app/access-control/group-registry/groups-registry.component.html
index 8dd88e23fb..510a156476 100644
--- a/src/app/access-control/group-registry/groups-registry.component.html
+++ b/src/app/access-control/group-registry/groups-registry.component.html
@@ -5,7 +5,7 @@
         <h1 id="header" class="pb-2">{{messagePrefix + 'head' | translate}}</h1>
         <div>
           <button class="me-auto btn btn-success"
-                  [routerLink]="'create'">
+            [routerLink]="'create'">
             <i class="fas fa-plus"></i>
             <span class="d-none d-sm-inline ms-1">{{messagePrefix + 'button.add' | translate}}</span>
           </button>
@@ -17,8 +17,8 @@
         <div class="flex-grow-1 me-3">
           <div class="mb-3 input-group">
             <input type="text" name="query" id="query" formControlName="query"
-                   class="form-control" [attr.aria-label]="messagePrefix + 'search.placeholder' | translate"
-                   [placeholder]="(messagePrefix + 'search.placeholder' | translate)" >
+              class="form-control" [attr.aria-label]="messagePrefix + 'search.placeholder' | translate"
+              [placeholder]="(messagePrefix + 'search.placeholder' | translate)" >
             <span class="input-group-append">
               <button type="submit" class="search-button btn btn-primary">
                 <i class="fas fa-search"></i> {{ messagePrefix + 'search.button' | translate }}
@@ -33,66 +33,78 @@
         </div>
       </form>
 
-      <ds-loading *ngIf="loading$ | async"></ds-loading>
-      <ds-pagination
-        *ngIf="(pageInfoState$ | async)?.totalElements > 0 && (loading$ | async) !== true"
-        [paginationOptions]="config"
-        [collectionSize]="(pageInfoState$ | async)?.totalElements"
-        [hideGear]="true"
-        [hidePagerWhenSinglePage]="true">
+      @if (loading$ | async) {
+        <ds-loading></ds-loading>
+      }
+      @if ((pageInfoState$ | async)?.totalElements > 0 && (loading$ | async) !== true) {
+        <ds-pagination
+          [paginationOptions]="config"
+          [collectionSize]="(pageInfoState$ | async)?.totalElements"
+          [hideGear]="true"
+          [hidePagerWhenSinglePage]="true">
+          <div  class="table-responsive">
+            <table id="groups" class="table table-striped table-hover table-bordered">
+              <thead>
+                <tr>
+                  <th scope="col">{{messagePrefix + 'table.id' | translate}}</th>
+                  <th scope="col">{{messagePrefix + 'table.name' | translate}}</th>
+                  <th scope="col">{{messagePrefix + 'table.collectionOrCommunity' | translate}}</th>
+                  <th scope="col">{{messagePrefix + 'table.members' | translate}}</th>
+                  <th>{{messagePrefix + 'table.edit' | translate}}</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (groupDto of (groupsDto$ | async)?.page; track groupDto) {
+                  <tr>
+                    <td>{{groupDto.group.id}}</td>
+                    <td>{{ dsoNameService.getName(groupDto.group) }}</td>
+                    <td>{{ dsoNameService.getName((groupDto.group.object | async)?.payload) }}</td>
+                    <td>{{groupDto.epersons?.totalElements + groupDto.subgroups?.totalElements}}</td>
+                    <td>
+                      <div class="btn-group edit-field">
+                        @switch (groupDto.ableToEdit) {
+                          @case (true) {
+                            <button
+                              [routerLink]="groupService.getGroupEditPageRouterLink(groupDto.group)"
+                              class="btn btn-outline-primary btn-sm btn-edit"
+                              title="{{messagePrefix + 'table.edit.buttons.edit' | translate: {name: dsoNameService.getName(groupDto.group) } }}"
+                              >
+                              <i class="fas fa-edit fa-fw"></i>
+                            </button>
+                          }
+                          @case (false) {
+                            <button
+                              [dsBtnDisabled]="true"
+                              class="btn btn-outline-primary btn-sm btn-edit"
+                              placement="left"
+                              [ngbTooltip]="'admin.access-control.epeople.table.edit.buttons.edit-disabled' | translate"
+                              >
+                              <i class="fas fa-edit fa-fw"></i>
+                            </button>
+                          }
+                        }
+                        @if (!groupDto.group?.permanent && groupDto.ableToDelete) {
+                          <button
+                            (click)="deleteGroup(groupDto)" class="btn btn-outline-danger btn-sm btn-delete"
+                            title="{{messagePrefix + 'table.edit.buttons.remove' | translate: {name: dsoNameService.getName(groupDto.group) } }}">
+                            <i class="fas fa-trash-alt fa-fw"></i>
+                          </button>
+                        }
+                      </div>
+                    </td>
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </ds-pagination>
+      }
 
-        <div  class="table-responsive">
-          <table id="groups" class="table table-striped table-hover table-bordered">
-            <thead>
-            <tr>
-              <th scope="col">{{messagePrefix + 'table.id' | translate}}</th>
-              <th scope="col">{{messagePrefix + 'table.name' | translate}}</th>
-              <th scope="col">{{messagePrefix + 'table.collectionOrCommunity' | translate}}</th>
-              <th scope="col">{{messagePrefix + 'table.members' | translate}}</th>
-              <th>{{messagePrefix + 'table.edit' | translate}}</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr *ngFor="let groupDto of (groupsDto$ | async)?.page">
-              <td>{{groupDto.group.id}}</td>
-              <td>{{ dsoNameService.getName(groupDto.group) }}</td>
-              <td>{{ dsoNameService.getName((groupDto.group.object | async)?.payload) }}</td>
-              <td>{{groupDto.epersons?.totalElements + groupDto.subgroups?.totalElements}}</td>
-              <td>
-                <div class="btn-group edit-field">
-                  <ng-container [ngSwitch]="groupDto.ableToEdit">
-                    <button *ngSwitchCase="true"
-                      [routerLink]="groupService.getGroupEditPageRouterLink(groupDto.group)"
-                      class="btn btn-outline-primary btn-sm btn-edit"
-                      title="{{messagePrefix + 'table.edit.buttons.edit' | translate: {name: dsoNameService.getName(groupDto.group) } }}"
-                    >
-                      <i class="fas fa-edit fa-fw"></i>
-                    </button>
-                    <button *ngSwitchCase="false"
-                      [dsBtnDisabled]="true"
-                      class="btn btn-outline-primary btn-sm btn-edit"
-                      placement="left"
-                      [ngbTooltip]="'admin.access-control.epeople.table.edit.buttons.edit-disabled' | translate"
-                    >
-                      <i class="fas fa-edit fa-fw"></i>
-                    </button>
-                  </ng-container>
-                  <button *ngIf="!groupDto.group?.permanent && groupDto.ableToDelete"
-                          (click)="deleteGroup(groupDto)" class="btn btn-outline-danger btn-sm btn-delete"
-                          title="{{messagePrefix + 'table.edit.buttons.remove' | translate: {name: dsoNameService.getName(groupDto.group) } }}">
-                    <i class="fas fa-trash-alt fa-fw"></i>
-                  </button>
-                </div>
-              </td>
-            </tr>
-            </tbody>
-          </table>
+      @if ((pageInfoState$ | async)?.totalElements === 0) {
+        <div class="alert alert-info w-100 mb-2" role="alert">
+          {{messagePrefix + 'no-items' | translate}}
         </div>
-      </ds-pagination>
-
-      <div *ngIf="(pageInfoState$ | async)?.totalElements === 0" class="alert alert-info w-100 mb-2" role="alert">
-        {{messagePrefix + 'no-items' | translate}}
-      </div>
+      }
 
     </div>
   </div>
diff --git a/src/app/admin/admin-import-batch-page/batch-import-page.component.html b/src/app/admin/admin-import-batch-page/batch-import-page.component.html
index c321fb235d..38c6a1f349 100644
--- a/src/app/admin/admin-import-batch-page/batch-import-page.component.html
+++ b/src/app/admin/admin-import-batch-page/batch-import-page.component.html
@@ -1,10 +1,12 @@
 <div class="container">
   <h1 id="header">{{'admin.batch-import.page.header' | translate}}</h1>
   <p>{{'admin.batch-import.page.help' | translate}}</p>
-  <p *ngIf="dso">
-    selected collection: <b>{{getDspaceObjectName()}}</b>&nbsp;
-    <a href="javascript:void(0)" (click)="removeDspaceObject()">{{'admin.batch-import.page.remove' | translate}}</a>
-  </p>
+  @if (dso) {
+    <p>
+      selected collection: <b>{{getDspaceObjectName()}}</b>&nbsp;
+      <a href="javascript:void(0)" (click)="removeDspaceObject()">{{'admin.batch-import.page.remove' | translate}}</a>
+    </p>
+  }
   <p>
     <button class="btn btn-primary" (click)="this.selectCollection();">{{'admin.metadata-import.page.button.select-collection' | translate}}</button>
   </p>
@@ -21,32 +23,35 @@
   </div>
 
   <ui-switch color="#ebebeb"
-             [checkedLabel]="'admin.metadata-import.page.toggle.upload' | translate"
-             [uncheckedLabel]="'admin.metadata-import.page.toggle.url' | translate"
-             [checked]="isUpload"
-             (change)="toggleUpload()" ></ui-switch>
+    [checkedLabel]="'admin.metadata-import.page.toggle.upload' | translate"
+    [uncheckedLabel]="'admin.metadata-import.page.toggle.url' | translate"
+    [checked]="isUpload"
+  (change)="toggleUpload()" ></ui-switch>
   <small class="form-text text-muted d-block">
     {{'admin.batch-import.page.toggle.help' | translate}}
   </small>
 
 
-  <ds-file-dropzone-no-uploader
-    *ngIf="isUpload"
-    data-test="file-dropzone"
-    (onFileAdded)="setFile($event)"
-    [dropMessageLabel]="'admin.batch-import.page.dropMsg'"
-    [dropMessageLabelReplacement]="'admin.batch-import.page.dropMsgReplace'">
-  </ds-file-dropzone-no-uploader>
+  @if (isUpload) {
+    <ds-file-dropzone-no-uploader
+      data-test="file-dropzone"
+      (onFileAdded)="setFile($event)"
+      [dropMessageLabel]="'admin.batch-import.page.dropMsg'"
+      [dropMessageLabelReplacement]="'admin.batch-import.page.dropMsgReplace'">
+    </ds-file-dropzone-no-uploader>
+  }
 
-  <div class="mb-3 mt-2" *ngIf="!isUpload">
-    <input class="form-control" type="text" placeholder="{{'admin.metadata-import.page.urlMsg' | translate}}"
-           data-test="file-url-input" [(ngModel)]="fileURL">
-  </div>
+  @if (!isUpload) {
+    <div class="mb-3 mt-2">
+      <input class="form-control" type="text" placeholder="{{'admin.metadata-import.page.urlMsg' | translate}}"
+        data-test="file-url-input" [(ngModel)]="fileURL">
+    </div>
+  }
 
   <div class="space-children-mr">
     <button class="btn btn-secondary" id="backButton"
-            (click)="this.onReturn();">{{'admin.metadata-import.page.button.return' | translate}}</button>
+    (click)="this.onReturn();">{{'admin.metadata-import.page.button.return' | translate}}</button>
     <button class="btn btn-primary" id="proceedButton"
-            (click)="this.importMetadata();">{{'admin.metadata-import.page.button.proceed' | translate}}</button>
+    (click)="this.importMetadata();">{{'admin.metadata-import.page.button.proceed' | translate}}</button>
   </div>
 </div>
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html
index 3a42eb7825..eefc372ac8 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html
@@ -4,34 +4,38 @@
       <h1 class="flex-grow-1">{{ isNewService ? ('ldn-create-service.title' | translate) : ('ldn-edit-registered-service.title' | translate) }}</h1>
     </div>
     <!-- In the toggle section -->
-    <div class="toggle-switch-container" *ngIf="!isNewService">
-      <label class="status-label font-weight-bold" for="enabled">{{ 'ldn-service-status' | translate }}</label>
-      <div>
-        <input formControlName="enabled" hidden id="enabled" name="enabled" type="checkbox">
-        <div (click)="toggleEnabled()" [class.checked]="formModel.get('enabled').value" class="toggle-switch">
-          <div class="slider"></div>
+    @if (!isNewService) {
+      <div class="toggle-switch-container">
+        <label class="status-label font-weight-bold" for="enabled">{{ 'ldn-service-status' | translate }}</label>
+        <div>
+          <input formControlName="enabled" hidden id="enabled" name="enabled" type="checkbox">
+          <div (click)="toggleEnabled()" [class.checked]="formModel.get('enabled').value" class="toggle-switch">
+            <div class="slider"></div>
+          </div>
         </div>
       </div>
-    </div>
+    }
     <!-- In the Name section -->
     <div class="mb-5">
       <label for="name" class="font-weight-bold">{{ 'ldn-new-service.form.label.name' | translate }}</label>
       <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
-             [placeholder]="'ldn-new-service.form.placeholder.name' | translate" class="form-control"
-             formControlName="name"
-             id="name"
-             name="name"
-             type="text">
-      <div *ngIf="formModel.get('name').invalid && formModel.get('name').touched" class="error-text">
-        {{ 'ldn-new-service.form.error.name' | translate }}
-      </div>
+        [placeholder]="'ldn-new-service.form.placeholder.name' | translate" class="form-control"
+        formControlName="name"
+        id="name"
+        name="name"
+        type="text">
+      @if (formModel.get('name').invalid && formModel.get('name').touched) {
+        <div class="error-text">
+          {{ 'ldn-new-service.form.error.name' | translate }}
+        </div>
+      }
     </div>
 
     <!-- In the description section -->
     <div class="mb-5 mt-5 d-flex flex-column">
       <label for="description" class="font-weight-bold">{{ 'ldn-new-service.form.label.description' | translate }}</label>
       <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
-                class="form-control" formControlName="description" id="description" name="description"></textarea>
+      class="form-control" formControlName="description" id="description" name="description"></textarea>
     </div>
 
     <div class="mb-5 mt-5">
@@ -40,30 +44,34 @@
         <div class="d-flex flex-column w-50 me-2">
           <label for="url" class="font-weight-bold">{{ 'ldn-new-service.form.label.url' | translate }}</label>
           <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
-                 [placeholder]="'ldn-new-service.form.placeholder.url' | translate" class="form-control"
-                 formControlName="url"
-                 id="url"
-                 name="url"
-                 type="text">
-          <div *ngIf="formModel.get('url').invalid && formModel.get('url').touched" class="error-text">
-            {{ 'ldn-new-service.form.error.url' | translate }}
-          </div>
+            [placeholder]="'ldn-new-service.form.placeholder.url' | translate" class="form-control"
+            formControlName="url"
+            id="url"
+            name="url"
+            type="text">
+          @if (formModel.get('url').invalid && formModel.get('url').touched) {
+            <div class="error-text">
+              {{ 'ldn-new-service.form.error.url' | translate }}
+            </div>
+          }
         </div>
 
         <div class="d-flex flex-column w-50">
           <label for="score" class="font-weight-bold">{{ 'ldn-new-service.form.label.score' | translate }}</label>
           <input [class.invalid-field]="formModel.get('score').invalid && formModel.get('score').touched"
-                 [placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
-                 id="score"
-                 name="score"
-                 min="0"
-                 max="1"
-                 step=".01"
-                 class="form-control"
-                 type="number">
-          <div *ngIf="formModel.get('score').invalid && formModel.get('score').touched" class="error-text">
-            {{ 'ldn-new-service.form.error.score' | translate }}
-          </div>
+            [placeholder]="'ldn-new-service.form.placeholder.score' | translate" formControlName="score"
+            id="score"
+            name="score"
+            min="0"
+            max="1"
+            step=".01"
+            class="form-control"
+            type="number">
+          @if (formModel.get('score').invalid && formModel.get('score').touched) {
+            <div class="error-text">
+              {{ 'ldn-new-service.form.error.score' | translate }}
+            </div>
+          }
         </div>
       </div>
     </div>
@@ -73,21 +81,23 @@
       <label for="lowerIp" class="font-weight-bold">{{ 'ldn-new-service.form.label.ip-range' | translate }}</label>
       <div class="d-flex">
         <input [class.invalid-field]="formModel.get('lowerIp').invalid && formModel.get('lowerIp').touched"
-               [placeholder]="'ldn-new-service.form.placeholder.lowerIp' | translate" class="form-control me-2"
-               formControlName="lowerIp"
-               id="lowerIp"
-               name="lowerIp"
-               type="text">
+          [placeholder]="'ldn-new-service.form.placeholder.lowerIp' | translate" class="form-control me-2"
+          formControlName="lowerIp"
+          id="lowerIp"
+          name="lowerIp"
+          type="text">
         <input [class.invalid-field]="formModel.get('upperIp').invalid && formModel.get('upperIp').touched"
-               [placeholder]="'ldn-new-service.form.placeholder.upperIp' | translate" class="form-control"
-               formControlName="upperIp"
-               id="upperIp"
-               name="upperIp"
-               type="text">
-      </div>
-      <div *ngIf="(formModel.get('lowerIp').invalid && formModel.get('lowerIp').touched) || (formModel.get('upperIp').invalid && formModel.get('upperIp').touched)" class="error-text">
-        {{ 'ldn-new-service.form.error.ipRange' | translate }}
+          [placeholder]="'ldn-new-service.form.placeholder.upperIp' | translate" class="form-control"
+          formControlName="upperIp"
+          id="upperIp"
+          name="upperIp"
+          type="text">
       </div>
+      @if ((formModel.get('lowerIp').invalid && formModel.get('lowerIp').touched) || (formModel.get('upperIp').invalid && formModel.get('upperIp').touched)) {
+        <div class="error-text">
+          {{ 'ldn-new-service.form.error.ipRange' | translate }}
+        </div>
+      }
       <div class="text-muted">
         {{ 'ldn-new-service.form.hint.ipRange' | translate }}
       </div>
@@ -97,223 +107,242 @@
     <div class="mb-5 mt-5">
       <label for="ldnUrl" class="font-weight-bold">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
       <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
-             [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" class="form-control"
-             formControlName="ldnUrl"
-             id="ldnUrl"
-             name="ldnUrl"
-             type="text">
-      <div *ngIf="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched" >
-        <div *ngIf="formModel.get('ldnUrl').errors['required']" class="error-text">
-          {{ 'ldn-new-service.form.error.ldnurl' | translate }}
+        [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" class="form-control"
+        formControlName="ldnUrl"
+        id="ldnUrl"
+        name="ldnUrl"
+        type="text">
+      @if (formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched) {
+        <div >
+          @if (formModel.get('ldnUrl').errors['required']) {
+            <div class="error-text">
+              {{ 'ldn-new-service.form.error.ldnurl' | translate }}
+            </div>
+          }
+          @if (formModel.get('ldnUrl').errors['ldnUrlAlreadyAssociated']) {
+            <div class="error-text">
+              {{ 'ldn-new-service.form.error.ldnurl.ldnUrlAlreadyAssociated' | translate }}
+            </div>
+          }
         </div>
-        <div *ngIf="formModel.get('ldnUrl').errors['ldnUrlAlreadyAssociated']" class="error-text">
-          {{ 'ldn-new-service.form.error.ldnurl.ldnUrlAlreadyAssociated' | translate }}
-        </div>
-      </div>
+      }
     </div>
 
 
     <!-- In the Inbound Patterns Labels section -->
-    <div class="row mb-1 mt-5" *ngIf="areControlsInitialized">
-      <div class="col">
-        <label class="font-weight-bold">{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
-      </div>
-      <ng-container *ngIf="formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern">
+    @if (areControlsInitialized) {
+      <div class="row mb-1 mt-5">
         <div class="col">
-          <label class="font-weight-bold">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+          <label class="font-weight-bold">{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
         </div>
-        <div class="col-sm-1">
-          <label class="font-weight-bold">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+        @if (formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern) {
+          <div class="col">
+            <label class="font-weight-bold">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+          </div>
+          <div class="col-sm-1">
+            <label class="font-weight-bold">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+          </div>
+        }
+        <div class="col-sm-2">
         </div>
-      </ng-container>
-      <div class="col-sm-2">
       </div>
-    </div>
+    }
 
     <!-- In the Inbound Patterns section -->
-    <div *ngIf="areControlsInitialized">
-      <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
-           [class.marked-for-deletion]="markedForDeletionInboundPattern.includes(i)"
-           formGroupName="notifyServiceInboundPatterns">
-
-        <ng-container [formGroupName]="i">
-
-
-          <div class="row mb-1 align-items-center">
-            <div class="col">
-              <div #inboundPatternDropdown="ngbDropdown" class="w-80" display="dynamic"
-                   id="additionalInboundPattern{{i}}"
-                   ngbDropdown placement="top-start">
-                <div class="position-relative right-addon" role="combobox"  aria-expanded="false" aria-controls="inboundPatternDropdownButton">
-                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                     ngbDropdownToggle></i>
-                  <input
-                    (click)="inboundPatternDropdown.open();"
-                    [readonly]="true"
-                    [value]="selectedInboundPatterns"
-                    class="form-control w-80 scrollable-dropdown-input"
-                    formControlName="patternLabel"
-                    id="inboundPatternDropdownButton"
-                    ngbDropdownAnchor
-                    type="text"
-                    [attr.aria-label]="'ldn-service-input-inbound-pattern-dropdown' | translate"
-                  />
-                  <div aria-labelledby="inboundPatternDropdownButton"
-                       class="dropdown-menu dropdown-menu-top w-100 "
-                       ngbDropdownMenu>
-                    <div class="scrollable-menu" role="listbox">
-                      <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
-                              *ngFor="let pattern of inboundPatterns; let internalIndex = index"
+    @if (areControlsInitialized) {
+      <div>
+        @for (patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; track patternGroup; let i = $index) {
+          <div
+            [class.marked-for-deletion]="markedForDeletionInboundPattern.includes(i)"
+            formGroupName="notifyServiceInboundPatterns">
+            <ng-container [formGroupName]="i">
+              <div class="row mb-1 align-items-center">
+                <div class="col">
+                  <div #inboundPatternDropdown="ngbDropdown" class="w-80" display="dynamic"
+                    id="additionalInboundPattern{{i}}"
+                    ngbDropdown placement="top-start">
+                    <div class="position-relative right-addon" role="combobox"  aria-expanded="false" aria-controls="inboundPatternDropdownButton">
+                      <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                      ngbDropdownToggle></i>
+                      <input
+                        (click)="inboundPatternDropdown.open();"
+                        [readonly]="true"
+                        [value]="selectedInboundPatterns"
+                        class="form-control w-80 scrollable-dropdown-input"
+                        formControlName="patternLabel"
+                        id="inboundPatternDropdownButton"
+                        ngbDropdownAnchor
+                        type="text"
+                        [attr.aria-label]="'ldn-service-input-inbound-pattern-dropdown' | translate"
+                        />
+                      <div aria-labelledby="inboundPatternDropdownButton"
+                        class="dropdown-menu dropdown-menu-top w-100 "
+                        ngbDropdownMenu>
+                        <div class="scrollable-menu" role="listbox">
+                          @for (pattern of inboundPatterns; track pattern; let internalIndex = $index) {
+                            <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
                               [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
                               class="dropdown-item collection-item text-truncate w-100"
                               ngbDropdownItem
                               type="button">
-                        <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="col">
-              <ng-container
-                *ngIf="formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern">
-                <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
-                     placement="top-start">
-                  <div class="position-relative right-addon" aria-expanded="false" aria-controls="inboundItemfilterDropdown" role="combobox">
-                    <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
-                       ngbDropdownToggle></i>
-                    <input
-                      [readonly]="true"
-                      class="form-control d-none w-100 scrollable-dropdown-input"
-                      formControlName="constraint"
-                      id="inboundItemfilterDropdown"
-                      ngbDropdownAnchor
-                      type="text"
-                      [attr.aria-label]="'ldn-service-input-inbound-item-filter-dropdown' | translate"
-                    />
-                    <input
-                      (click)="inboundItemfilterDropdown.open();"
-                      [readonly]="true"
-                      class="form-control w-100 scrollable-dropdown-input"
-                      formControlName="constraintFormatted"
-                      id="inboundItemfilterDropdownPrettified"
-                      ngbDropdownAnchor
-                      type="text"
-                      [attr.aria-label]="'ldn-service-input-inbound-item-filter-dropdown' | translate"
-                    />
-                    <div aria-labelledby="inboundItemfilterDropdownButton"
-                         class="dropdown-menu scrollable-dropdown-menu w-100 "
-                         ngbDropdownMenu>
-                      <div class="scrollable-menu" role="listbox">
-                        <button (click)="selectInboundItemFilter('', i); $event.stopPropagation()"
-                                class="dropdown-item collection-item text-truncate w-100" ngbDropdownItem type="button">
-                          <span> {{'ldn-service.control-constaint-select-none' | translate}} </span>
-                        </button>
-                        <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
-                                *ngFor="let constraint of (itemFiltersRD$ | async)?.payload?.page; let internalIndex = index"
-                                class="dropdown-item collection-item text-truncate w-100"
-                                ngbDropdownItem
-                                type="button">
-                          <div>{{ constraint.id + '.label' | translate }}</div>
-                        </button>
+                              <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                            </button>
+                          }
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
-              </ng-container>
-            </div>
-
-            <div
-              [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern ? 'visible' : 'hidden'"
-              class="col-sm-1">
-              <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
-                     type="checkbox">
-              <div (click)="toggleAutomatic(i)"
-                   [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
-                   class="toggle-switch">
-                <div class="slider"></div>
-              </div>
-            </div>
-
-
-            <div class="col-sm-2">
-              <div class="btn-group">
-                <button (click)="markForInboundPatternDeletion(i)" class="btn btn-outline-dark trash-button"
-                        [title]="'ldn-service-button-mark-inbound-deletion' | translate"
-                        type="button">
-                  <i class="fas fa-trash"></i>
-                </button>
-
-
-                <button (click)="unmarkForInboundPatternDeletion(i)"
-                        *ngIf="markedForDeletionInboundPattern.includes(i)"
+                <div class="col">
+                  @if (formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern) {
+                    <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
+                      placement="top-start">
+                      <div class="position-relative right-addon" aria-expanded="false" aria-controls="inboundItemfilterDropdown" role="combobox">
+                        <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                        ngbDropdownToggle></i>
+                        <input
+                          [readonly]="true"
+                          class="form-control d-none w-100 scrollable-dropdown-input"
+                          formControlName="constraint"
+                          id="inboundItemfilterDropdown"
+                          ngbDropdownAnchor
+                          type="text"
+                          [attr.aria-label]="'ldn-service-input-inbound-item-filter-dropdown' | translate"
+                          />
+                        <input
+                          (click)="inboundItemfilterDropdown.open();"
+                          [readonly]="true"
+                          class="form-control w-100 scrollable-dropdown-input"
+                          formControlName="constraintFormatted"
+                          id="inboundItemfilterDropdownPrettified"
+                          ngbDropdownAnchor
+                          type="text"
+                          [attr.aria-label]="'ldn-service-input-inbound-item-filter-dropdown' | translate"
+                          />
+                        <div aria-labelledby="inboundItemfilterDropdownButton"
+                          class="dropdown-menu scrollable-dropdown-menu w-100 "
+                          ngbDropdownMenu>
+                          <div class="scrollable-menu" role="listbox">
+                            <button (click)="selectInboundItemFilter('', i); $event.stopPropagation()"
+                              class="dropdown-item collection-item text-truncate w-100" ngbDropdownItem type="button">
+                              <span> {{'ldn-service.control-constaint-select-none' | translate}} </span>
+                            </button>
+                            @for (constraint of (itemFiltersRD$ | async)?.payload?.page; track constraint; let internalIndex = $index) {
+                              <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                                class="dropdown-item collection-item text-truncate w-100"
+                                ngbDropdownItem
+                                type="button">
+                                <div>{{ constraint.id + '.label' | translate }}</div>
+                              </button>
+                            }
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  }
+                </div>
+                <div
+                  [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern ? 'visible' : 'hidden'"
+                  class="col-sm-1">
+                  <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
+                    type="checkbox">
+                  <div (click)="toggleAutomatic(i)"
+                    [class.checked]="formModel.get('notifyServiceInboundPatterns.' + i + '.automatic').value"
+                    class="toggle-switch">
+                    <div class="slider"></div>
+                  </div>
+                </div>
+                <div class="col-sm-2">
+                  <div class="btn-group">
+                    <button (click)="markForInboundPatternDeletion(i)" class="btn btn-outline-dark trash-button"
+                      [title]="'ldn-service-button-mark-inbound-deletion' | translate"
+                      type="button">
+                      <i class="fas fa-trash"></i>
+                    </button>
+                    @if (markedForDeletionInboundPattern.includes(i)) {
+                      <button (click)="unmarkForInboundPatternDeletion(i)"
                         [title]="'ldn-service-button-unmark-inbound-deletion' | translate"
                         class="btn btn-warning "
                         type="button">
-                  <i class="fas fa-undo"></i>
-                </button>
+                        <i class="fas fa-undo"></i>
+                      </button>
+                    }
+                  </div>
+                </div>
               </div>
-            </div>
+            </ng-container>
           </div>
-        </ng-container>
+        }
       </div>
-    </div>
+    }
 
     <span (click)="addInboundPattern()"
-          class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
+    class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
     <hr>
-    <div class="form-group row">
-      <div class="col text-right space-children-mr">
-        <ng-content select="[before]"></ng-content>
-        <button (click)="resetFormAndLeave()" class="btn btn-outline-secondary" type="button">
-          <span>&nbsp;{{ 'submission.general.back.submit' | translate }}</span>
-        </button>
-        <button class="btn btn-primary" type="submit">
-          <span><i class="fas fa-save"></i>&nbsp;{{ 'ldn-new-service.form.label.submit' | translate }}</span>
-        </button>
+      <div class="form-group row">
+        <div class="col text-right space-children-mr">
+          <ng-content select="[before]"></ng-content>
+          <button (click)="resetFormAndLeave()" class="btn btn-outline-secondary" type="button">
+            <span>&nbsp;{{ 'submission.general.back.submit' | translate }}</span>
+          </button>
+          <button class="btn btn-primary" type="submit">
+            <span><i class="fas fa-save"></i>&nbsp;{{ 'ldn-new-service.form.label.submit' | translate }}</span>
+          </button>
 
+        </div>
       </div>
-    </div>
-  </form>
-</div>
-<ng-template #confirmModal>
+    </form>
+  </div>
+  <ng-template #confirmModal>
     <div class="modal-header">
-      <h4 *ngIf="!isNewService">{{'service.overview.edit.modal' | translate }}</h4>
-      <h4 *ngIf="isNewService">{{'service.overview.create.modal' | translate }}</h4>
+      @if (!isNewService) {
+        <h4>{{'service.overview.edit.modal' | translate }}</h4>
+      }
+      @if (isNewService) {
+        <h4>{{'service.overview.create.modal' | translate }}</h4>
+      }
       <button (click)="closeModal()" aria-label="Close"
-              class="close" type="button">
+        class="close" type="button">
         <span aria-hidden="true">×</span>
       </button>
     </div>
 
     <div class="modal-body">
-      <div *ngIf="!isNewService">
-        {{ 'service.overview.edit.body' | translate }}
-      </div>
-      <span *ngIf="isNewService">
-        {{ 'service.overview.create.body' | translate }}
-      </span>
-    </div>
-      <div class="modal-footer">
-        <div *ngIf="!isNewService">
-          <button (click)="closeModal()" class="btn btn-outline-secondary me-2"
-                  id="delete-confirm-edit">{{ 'service.detail.return' | translate }}
-          </button>
-          <button *ngIf="!isNewService" (click)="patchService()"
-                  class="btn btn-primary">{{ 'service.detail.update' | translate }}
-          </button>
+      @if (!isNewService) {
+        <div>
+          {{ 'service.overview.edit.body' | translate }}
         </div>
-        <div *ngIf="isNewService">
+      }
+      @if (isNewService) {
+        <span>
+          {{ 'service.overview.create.body' | translate }}
+        </span>
+      }
+    </div>
+    <div class="modal-footer">
+      @if (!isNewService) {
+        <div>
+          <button (click)="closeModal()" class="btn btn-outline-secondary me-2"
+            id="delete-confirm-edit">{{ 'service.detail.return' | translate }}
+          </button>
+          @if (!isNewService) {
+            <button (click)="patchService()"
+              class="btn btn-primary">{{ 'service.detail.update' | translate }}
+            </button>
+          }
+        </div>
+      }
+      @if (isNewService) {
+        <div>
           <button (click)="closeModal()" class="btn btn-outline-secondary me-2 "
-                  id="delete-confirm-new">{{ 'service.refuse.create' | translate }}
+            id="delete-confirm-new">{{ 'service.refuse.create' | translate }}
           </button>
           <button (click)="createService()"
-                  class="btn btn-primary">{{ 'service.confirm.create' | translate }}
+            class="btn btn-primary">{{ 'service.confirm.create' | translate }}
           </button>
         </div>
-      </div>
-</ng-template>
+      }
+    </div>
+  </ng-template>
 
 
diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
index 1e43cfad5d..bd156cc0af 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
@@ -4,63 +4,67 @@
   </div>
   <div class="d-flex justify-content-end">
     <button class="btn btn-success" routerLink="/admin/ldn/services/new"><i
-      class="fas fa-plus pe-2"></i>{{ 'process.overview.new' | translate }}</button>
+    class="fas fa-plus pe-2"></i>{{ 'process.overview.new' | translate }}</button>
   </div>
-  <ds-pagination *ngIf="(ldnServicesRD$ | async)?.payload?.totalElements > 0"
-                 [collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements"
-                 [hideGear]="true"
-                 [hidePagerWhenSinglePage]="true"
-                 [paginationOptions]="pageConfig">
-    <div class="table-responsive">
-      <table class="table table-striped table-hover">
-        <thead>
-        <tr>
-          <th scope="col">{{ 'service.overview.table.name' | translate }}</th>
-          <th scope="col">{{ 'service.overview.table.description' | translate }}</th>
-          <th scope="col">{{ 'service.overview.table.status' | translate }}</th>
-          <th scope="col">{{ 'service.overview.table.actions' | translate }}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="let ldnService of (ldnServicesRD$ | async)?.payload?.page">
-          <td class="col-3">{{ ldnService.name }}</td>
-          <td>
-            <ds-truncatable [id]="ldnService.id">
-              <ds-truncatable-part [id]="ldnService.id" [minLines]="2">
-                <div>
-                  {{ ldnService.description }}
-                </div>
-              </ds-truncatable-part>
-            </ds-truncatable>
-          </td>
-          <td>
-                        <span (click)="toggleStatus(ldnService, ldnServicesService)"
-                              [ngClass]="{ 'status-enabled': ldnService.enabled, 'status-disabled': !ldnService.enabled }"
-                              [title]="ldnService.enabled ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)"
-                              class="status-indicator">
-                            {{ ldnService.enabled ? ('ldn-service.overview.table.enabled' | translate) : ('ldn-service.overview.table.disabled' | translate) }}
-                        </span>
-          </td>
-          <td>
-            <div class="btn-group">
-              <button
-                (click)="selectServiceToDelete(ldnService.id)"
-                [attr.aria-label]="'ldn-service-overview-select-delete' | translate"
-                class="btn btn-outline-danger">
-                <i class="fas fa-trash"></i>
-              </button>
-              <button [routerLink]="['/admin/ldn/services/edit/', ldnService.id]"
+  @if ((ldnServicesRD$ | async)?.payload?.totalElements > 0) {
+    <ds-pagination
+      [collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements"
+      [hideGear]="true"
+      [hidePagerWhenSinglePage]="true"
+      [paginationOptions]="pageConfig">
+      <div class="table-responsive">
+        <table class="table table-striped table-hover">
+          <thead>
+            <tr>
+              <th scope="col">{{ 'service.overview.table.name' | translate }}</th>
+              <th scope="col">{{ 'service.overview.table.description' | translate }}</th>
+              <th scope="col">{{ 'service.overview.table.status' | translate }}</th>
+              <th scope="col">{{ 'service.overview.table.actions' | translate }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (ldnService of (ldnServicesRD$ | async)?.payload?.page; track ldnService) {
+              <tr>
+                <td class="col-3">{{ ldnService.name }}</td>
+                <td>
+                  <ds-truncatable [id]="ldnService.id">
+                    <ds-truncatable-part [id]="ldnService.id" [minLines]="2">
+                      <div>
+                        {{ ldnService.description }}
+                      </div>
+                    </ds-truncatable-part>
+                  </ds-truncatable>
+                </td>
+                <td>
+                  <span (click)="toggleStatus(ldnService, ldnServicesService)"
+                    [ngClass]="{ 'status-enabled': ldnService.enabled, 'status-disabled': !ldnService.enabled }"
+                    [title]="ldnService.enabled ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)"
+                    class="status-indicator">
+                    {{ ldnService.enabled ? ('ldn-service.overview.table.enabled' | translate) : ('ldn-service.overview.table.disabled' | translate) }}
+                  </span>
+                </td>
+                <td>
+                  <div class="btn-group">
+                    <button
+                      (click)="selectServiceToDelete(ldnService.id)"
+                      [attr.aria-label]="'ldn-service-overview-select-delete' | translate"
+                      class="btn btn-outline-danger">
+                      <i class="fas fa-trash"></i>
+                    </button>
+                    <button [routerLink]="['/admin/ldn/services/edit/', ldnService.id]"
                       [attr.aria-label]="'ldn-service-overview-select-edit' | translate"
                       class="btn btn-outline-dark">
-                <i class="fas fa-edit"></i>
-              </button>
-            </div>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-    </div>
-  </ds-pagination>
+                      <i class="fas fa-edit"></i>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    </ds-pagination>
+  }
 </div>
 
 <ng-template #deleteModal>
@@ -72,8 +76,8 @@
         <h4>{{'service.overview.delete.header' | translate }}</h4>
       </div>
       <button (click)="closeModal()" aria-label="Close"
-              [attr.aria-label]="'ldn-service-overview-close-modal' | translate"
-              class="close" type="button">
+        [attr.aria-label]="'ldn-service-overview-close-modal' | translate"
+        class="close" type="button">
         <span aria-hidden="true">×</span>
       </button>
     </div>
@@ -84,12 +88,12 @@
       </div>
       <div class="mt-4 text-right">
         <button (click)="closeModal()"
-                [attr.aria-label]="'ldn-service-overview-close-modal' | translate"
-                class="btn btn-outline-secondary me-2">{{ 'service.detail.delete.cancel' | translate }}</button>
+          [attr.aria-label]="'ldn-service-overview-close-modal' | translate"
+        class="btn btn-outline-secondary me-2">{{ 'service.detail.delete.cancel' | translate }}</button>
         <button (click)="deleteSelected(this.selectedServiceId.toString(), ldnServicesService)"
-                class="btn btn-danger"
-                [attr.aria-label]="'ldn-service-overview-select-delete' | translate"
-                id="delete-confirm">{{ 'service.overview.delete' | translate }}
+          class="btn btn-danger"
+          [attr.aria-label]="'ldn-service-overview-select-delete' | translate"
+          id="delete-confirm">{{ 'service.overview.delete' | translate }}
         </button>
       </div>
     </div>
diff --git a/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html
index 48e2a42fe2..ce394175c3 100644
--- a/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html
+++ b/src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html
@@ -3,10 +3,12 @@
     <div class="col-12 col-md-3 text-left h4">{{((isInbound$ | async) ? 'admin.notify.dashboard.inbound'  : 'admin.notify.dashboard.outbound') | translate}}</div>
     <div class="col-md-9">
       <div class="h4">
-        <button (click)="resetDefaultConfiguration()" *ngIf="(selectedSearchConfig$ | async) !== defaultConfiguration" class="badge bg-primary me-1 mb-1">
-          {{ 'admin-notify-logs.' + (selectedSearchConfig$ | async) | translate}}
-          <span> ×</span>
-        </button>
+        @if ((selectedSearchConfig$ | async) !== defaultConfiguration) {
+          <button (click)="resetDefaultConfiguration()" class="badge bg-primary me-1 mb-1">
+            {{ 'admin-notify-logs.' + (selectedSearchConfig$ | async) | translate}}
+            <span> ×</span>
+          </button>
+        }
       </div>
       <ds-search-labels [inPlaceSearch]="true"></ds-search-labels>
     </div>
diff --git a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
index cc544476cc..c063384389 100644
--- a/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
+++ b/src/app/admin/admin-registries/bitstream-formats/bitstream-formats.component.html
@@ -8,51 +8,62 @@
       <p id="create-new" class="mb-2"><a [routerLink]="'add'" class="btn btn-success">{{'admin.registries.bitstream-formats.create.new' | translate}}</a></p>
 
 
-      <ds-pagination
-        *ngIf="(bitstreamFormats$ | async)?.payload?.totalElements > 0"
-        [paginationOptions]="pageConfig"
-        [collectionSize]="(bitstreamFormats$ | async)?.payload?.totalElements"
-        [hideGear]="false"
-        [hidePagerWhenSinglePage]="true">
-        <div class="table-responsive">
-          <table id="formats" class="table table-striped table-hover">
-            <thead>
-            <tr>
-              <th scope="col"><span class="sr-only">{{'admin.registries.bitstream-formats.table.selected' | translate}}</span></th>
-              <th scope="col">{{'admin.registries.bitstream-formats.table.id' | translate}}</th>
-              <th scope="col">{{'admin.registries.bitstream-formats.table.name' | translate}}</th>
-              <th scope="col">{{'admin.registries.bitstream-formats.table.mimetype' | translate}}</th>
-              <th scope="col">{{'admin.registries.bitstream-formats.table.supportLevel.head' | translate}}</th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr *ngFor="let bitstreamFormat of (bitstreamFormats$ | async)?.payload?.page">
-              <td>
-                <label class="form-label mb-0">
-                  <input type="checkbox"
-                         [attr.aria-label]="'admin.registries.bitstream-formats.select' | translate"
-                         [checked]="(selectedBitstreamFormatIDs$ | async)?.includes(bitstreamFormat.id)"
-                         (change)="selectBitStreamFormat(bitstreamFormat, $event)"
-                  >
-                  <span class="sr-only">{{'admin.registries.bitstream-formats.select' | translate}}&#125;</span>
-                </label>
-              </td>
-              <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.id}}</a></td>
-              <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.shortDescription}}</a></td>
-              <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.mimetype}} <span *ngIf="bitstreamFormat.internal">({{'admin.registries.bitstream-formats.table.internal' | translate}})</span></a></td>
-              <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{'admin.registries.bitstream-formats.table.supportLevel.'+bitstreamFormat.supportLevel | translate}}</a></td>
-            </tr>
-            </tbody>
-          </table>
+      @if ((bitstreamFormats$ | async)?.payload?.totalElements > 0) {
+        <ds-pagination
+          [paginationOptions]="pageConfig"
+          [collectionSize]="(bitstreamFormats$ | async)?.payload?.totalElements"
+          [hideGear]="false"
+          [hidePagerWhenSinglePage]="true">
+          <div class="table-responsive">
+            <table id="formats" class="table table-striped table-hover">
+              <thead>
+                <tr>
+                  <th scope="col"><span class="sr-only">{{'admin.registries.bitstream-formats.table.selected' | translate}}</span></th>
+                  <th scope="col">{{'admin.registries.bitstream-formats.table.id' | translate}}</th>
+                  <th scope="col">{{'admin.registries.bitstream-formats.table.name' | translate}}</th>
+                  <th scope="col">{{'admin.registries.bitstream-formats.table.mimetype' | translate}}</th>
+                  <th scope="col">{{'admin.registries.bitstream-formats.table.supportLevel.head' | translate}}</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (bitstreamFormat of (bitstreamFormats$ | async)?.payload?.page; track bitstreamFormat) {
+                  <tr>
+                    <td>
+                      <label class="form-label mb-0">
+                        <input type="checkbox"
+                          [attr.aria-label]="'admin.registries.bitstream-formats.select' | translate"
+                          [checked]="(selectedBitstreamFormatIDs$ | async)?.includes(bitstreamFormat.id)"
+                          (change)="selectBitStreamFormat(bitstreamFormat, $event)"
+                          >
+                        <span class="sr-only">{{'admin.registries.bitstream-formats.select' | translate}}&#125;</span>
+                      </label>
+                    </td>
+                    <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.id}}</a></td>
+                    <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.shortDescription}}</a></td>
+                    <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{bitstreamFormat.mimetype}} @if (bitstreamFormat.internal) {
+                      <span>({{'admin.registries.bitstream-formats.table.internal' | translate}})</span>
+                    }</a></td>
+                    <td><a [routerLink]="['/admin/registries/bitstream-formats', bitstreamFormat.id, 'edit']">{{'admin.registries.bitstream-formats.table.supportLevel.'+bitstreamFormat.supportLevel | translate}}</a></td>
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </ds-pagination>
+      }
+      @if ((bitstreamFormats$ | async)?.payload?.totalElements === 0) {
+        <div class="alert alert-info" role="alert">
+          {{'admin.registries.bitstream-formats.no-items' | translate}}
         </div>
-      </ds-pagination>
-      <div *ngIf="(bitstreamFormats$ | async)?.payload?.totalElements === 0" class="alert alert-info" role="alert">
-        {{'admin.registries.bitstream-formats.no-items' | translate}}
-      </div>
+      }
 
       <div>
-        <button *ngIf="(bitstreamFormats$ | async)?.payload?.page?.length > 0" class="btn btn-primary deselect" (click)="deselectAll()">{{'admin.registries.bitstream-formats.table.deselect-all' | translate}}</button>
-        <button *ngIf="(bitstreamFormats$ | async)?.payload?.page?.length > 0" type="submit" class="btn btn-danger float-end" (click)="deleteFormats()">{{'admin.registries.bitstream-formats.table.delete' | translate}}</button>
+        @if ((bitstreamFormats$ | async)?.payload?.page?.length > 0) {
+          <button class="btn btn-primary deselect" (click)="deselectAll()">{{'admin.registries.bitstream-formats.table.deselect-all' | translate}}</button>
+        }
+        @if ((bitstreamFormats$ | async)?.payload?.page?.length > 0) {
+          <button type="submit" class="btn btn-danger float-end" (click)="deleteFormats()">{{'admin.registries.bitstream-formats.table.delete' | translate}}</button>
+        }
       </div>
     </div>
   </div>
diff --git a/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html b/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html
index ff70c04d11..73072b6104 100644
--- a/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html
+++ b/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.html
@@ -1,60 +1,65 @@
 <div class="container">
-    <div class="metadata-registry row">
-        <div class="col-12">
+  <div class="metadata-registry row">
+    <div class="col-12">
 
-            <h1 id="header" class="border-bottom pb-2">{{'admin.registries.metadata.head' | translate}}</h1>
+      <h1 id="header" class="border-bottom pb-2">{{'admin.registries.metadata.head' | translate}}</h1>
 
-            <p id="description" class="pb-2">{{'admin.registries.metadata.description' | translate}}</p>
+      <p id="description" class="pb-2">{{'admin.registries.metadata.description' | translate}}</p>
 
-            <ds-metadata-schema-form (submitForm)="forceUpdateSchemas()"></ds-metadata-schema-form>
+      <ds-metadata-schema-form (submitForm)="forceUpdateSchemas()"></ds-metadata-schema-form>
 
-            <ds-pagination
-                    *ngIf="(metadataSchemas | async)?.payload?.totalElements > 0"
-                    [paginationOptions]="config"
-                    [collectionSize]="(metadataSchemas | async)?.payload?.totalElements"
-                    [hideGear]="true"
-                    [hidePagerWhenSinglePage]="true">
-
-                <div class="table-responsive">
-                    <table id="metadata-schemas" class="table table-striped table-hover">
-                        <thead>
-                        <tr>
-                            <th scope="col"><span class="sr-only">{{'admin.registries.metadata.schemas.table.selected' | translate}}</span></th>
-                            <th scope="col">{{'admin.registries.metadata.schemas.table.id' | translate}}</th>
-                            <th scope="col">{{'admin.registries.metadata.schemas.table.namespace' | translate}}</th>
-                            <th scope="col">{{'admin.registries.metadata.schemas.table.name' | translate}}</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        <tr *ngFor="let schema of (metadataSchemas | async)?.payload?.page"
-                            [ngClass]="{'table-primary' : (activeMetadataSchema$ | async)?.id === schema.id}">
-                            <td>
-                                <label class="form-label mb-0">
-                                    <input type="checkbox"
-                                           [checked]="(selectedMetadataSchemaIDs$ | async)?.includes(schema.id)"
-                                           (change)="selectMetadataSchema(schema, $event)"
-                                    >
-                                    <span class="sr-only">{{(((selectedMetadataSchemaIDs$ | async)?.includes(schema.id)) ? 'admin.registries.metadata.schemas.deselect' : 'admin.registries.metadata.schemas.select') | translate}}</span>
-                                </label>
-                            </td>
-                            <td class="selectable-row" (click)="editSchema(schema)"><a [routerLink]="[schema.prefix]">{{schema.id}}</a></td>
-                            <td class="selectable-row" (click)="editSchema(schema)"><a [routerLink]="[schema.prefix]">{{schema.namespace}}</a></td>
-                            <td class="selectable-row" (click)="editSchema(schema)"><a [routerLink]="[schema.prefix]">{{schema.prefix}}</a></td>
-                        </tr>
-                        </tbody>
-                    </table>
-                </div>
-
-            </ds-pagination>
-
-            <div *ngIf="(metadataSchemas | async)?.payload?.totalElements === 0" class="alert alert-info w-100 mb-2" role="alert">
-              {{'admin.registries.metadata.schemas.no-items' | translate}}
-            </div>
-
-            <div>
-              <button *ngIf="(metadataSchemas | async)?.payload?.page?.length > 0" type="submit" class="btn btn-danger float-end" (click)="deleteSchemas()">{{'admin.registries.metadata.schemas.table.delete' | translate}}</button>
-            </div>
+      @if ((metadataSchemas | async)?.payload?.totalElements > 0) {
+        <ds-pagination
+          [paginationOptions]="config"
+          [collectionSize]="(metadataSchemas | async)?.payload?.totalElements"
+          [hideGear]="true"
+          [hidePagerWhenSinglePage]="true">
+          <div class="table-responsive">
+            <table id="metadata-schemas" class="table table-striped table-hover">
+              <thead>
+                <tr>
+                  <th scope="col"><span class="sr-only">{{'admin.registries.metadata.schemas.table.selected' | translate}}</span></th>
+                  <th scope="col">{{'admin.registries.metadata.schemas.table.id' | translate}}</th>
+                  <th scope="col">{{'admin.registries.metadata.schemas.table.namespace' | translate}}</th>
+                  <th scope="col">{{'admin.registries.metadata.schemas.table.name' | translate}}</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (schema of (metadataSchemas | async)?.payload?.page; track schema) {
+                  <tr
+                    [ngClass]="{'table-primary' : (activeMetadataSchema$ | async)?.id === schema.id}">
+                    <td>
+                      <label class="form-label mb-0">
+                        <input type="checkbox"
+                          [checked]="(selectedMetadataSchemaIDs$ | async)?.includes(schema.id)"
+                          (change)="selectMetadataSchema(schema, $event)"
+                          >
+                        <span class="sr-only">{{(((selectedMetadataSchemaIDs$ | async)?.includes(schema.id)) ? 'admin.registries.metadata.schemas.deselect' : 'admin.registries.metadata.schemas.select') | translate}}</span>
+                      </label>
+                    </td>
+                    <td class="selectable-row" (click)="editSchema(schema)"><a [routerLink]="[schema.prefix]">{{schema.id}}</a></td>
+                    <td class="selectable-row" (click)="editSchema(schema)"><a [routerLink]="[schema.prefix]">{{schema.namespace}}</a></td>
+                    <td class="selectable-row" (click)="editSchema(schema)"><a [routerLink]="[schema.prefix]">{{schema.prefix}}</a></td>
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </ds-pagination>
+      }
 
+      @if ((metadataSchemas | async)?.payload?.totalElements === 0) {
+        <div class="alert alert-info w-100 mb-2" role="alert">
+          {{'admin.registries.metadata.schemas.no-items' | translate}}
         </div>
+      }
+
+      <div>
+        @if ((metadataSchemas | async)?.payload?.page?.length > 0) {
+          <button type="submit" class="btn btn-danger float-end" (click)="deleteSchemas()">{{'admin.registries.metadata.schemas.table.delete' | translate}}</button>
+        }
+      </div>
+
     </div>
+  </div>
 </div>
diff --git a/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html b/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
index 19c5370a9c..438b37d3aa 100644
--- a/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
+++ b/src/app/admin/admin-registries/metadata-schema/metadata-schema.component.html
@@ -8,52 +8,59 @@
 
       <ds-metadata-field-form
         [metadataSchema]="schema"
-        (submitForm)="forceUpdateFields()"></ds-metadata-field-form>
+      (submitForm)="forceUpdateFields()"></ds-metadata-field-form>
 
       <h2>{{'admin.registries.schema.fields.head' | translate}}</h2>
 
       <ng-container *ngVar="(metadataFields$ | async)?.payload as fields">
-        <ds-pagination
-          *ngIf="fields?.totalElements > 0"
-          [paginationOptions]="config"
-          [collectionSize]="fields?.totalElements"
-          [hideGear]="false"
-          [hidePagerWhenSinglePage]="true">
-          <div class="table-responsive">
-            <table id="metadata-fields" class="table table-striped table-hover">
-              <thead>
-              <tr>
-                <th><span class="sr-only">{{'admin.registries.schema.fields.table.selected' | translate}}</span></th>
-                <th scope="col">{{'admin.registries.schema.fields.table.id' | translate}}</th>
-                <th scope="col">{{'admin.registries.schema.fields.table.field' | translate}}</th>
-                <th scope="col">{{'admin.registries.schema.fields.table.scopenote' | translate}}</th>
-              </tr>
-              </thead>
-              <tbody>
-              <tr *ngFor="let field of fields?.page"
-                  [ngClass]="{'table-primary' : (activeField$ | async)?.id === field.id}">
-                <td *ngVar="(selectedMetadataFieldIDs$ | async)?.includes(field.id) as selected">
-                  <input type="checkbox"
-                         [attr.aria-label]="(selected ? 'admin.registries.schema.fields.deselect' : 'admin.registries.schema.fields.select') | translate"
-                         [checked]="selected"
-                         (change)="selectMetadataField(field, $event)">
-                </td>
-                <td class="selectable-row" (click)="editField(field)">{{field.id}}</td>
-                <td class="selectable-row" (click)="editField(field)">{{schema?.prefix}}.{{field.element}}{{field.qualifier ? '.' + field.qualifier : ''}}</td>
-                <td class="selectable-row" (click)="editField(field)">{{field.scopeNote}}</td>
-              </tr>
-              </tbody>
-            </table>
-          </div>
-        </ds-pagination>
+        @if (fields?.totalElements > 0) {
+          <ds-pagination
+            [paginationOptions]="config"
+            [collectionSize]="fields?.totalElements"
+            [hideGear]="false"
+            [hidePagerWhenSinglePage]="true">
+            <div class="table-responsive">
+              <table id="metadata-fields" class="table table-striped table-hover">
+                <thead>
+                  <tr>
+                    <th><span class="sr-only">{{'admin.registries.schema.fields.table.selected' | translate}}</span></th>
+                    <th scope="col">{{'admin.registries.schema.fields.table.id' | translate}}</th>
+                    <th scope="col">{{'admin.registries.schema.fields.table.field' | translate}}</th>
+                    <th scope="col">{{'admin.registries.schema.fields.table.scopenote' | translate}}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  @for (field of fields?.page; track field) {
+                    <tr
+                      [ngClass]="{'table-primary' : (activeField$ | async)?.id === field.id}">
+                      <td *ngVar="(selectedMetadataFieldIDs$ | async)?.includes(field.id) as selected">
+                        <input type="checkbox"
+                          [attr.aria-label]="(selected ? 'admin.registries.schema.fields.deselect' : 'admin.registries.schema.fields.select') | translate"
+                          [checked]="selected"
+                          (change)="selectMetadataField(field, $event)">
+                      </td>
+                      <td class="selectable-row" (click)="editField(field)">{{field.id}}</td>
+                      <td class="selectable-row" (click)="editField(field)">{{schema?.prefix}}.{{field.element}}{{field.qualifier ? '.' + field.qualifier : ''}}</td>
+                      <td class="selectable-row" (click)="editField(field)">{{field.scopeNote}}</td>
+                    </tr>
+                  }
+                </tbody>
+              </table>
+            </div>
+          </ds-pagination>
+        }
 
-        <div *ngIf="fields?.totalElements === 0" class="alert alert-info w-100 mb-2" role="alert">
-          {{'admin.registries.schema.fields.no-items' | translate}}
-        </div>
+        @if (fields?.totalElements === 0) {
+          <div class="alert alert-info w-100 mb-2" role="alert">
+            {{'admin.registries.schema.fields.no-items' | translate}}
+          </div>
+        }
 
         <div>
           <button [routerLink]="['/admin/registries/metadata']" class="btn btn-primary">{{'admin.registries.schema.return' | translate}}</button>
-          <button *ngIf="fields?.page?.length > 0" type="submit" class="btn btn-danger float-end" (click)="deleteFields()">{{'admin.registries.schema.fields.table.delete' | translate}}</button>
+          @if (fields?.page?.length > 0) {
+            <button type="submit" class="btn btn-danger float-end" (click)="deleteFields()">{{'admin.registries.schema.fields.table.delete' | translate}}</button>
+          }
         </div>
       </ng-container>
 
diff --git a/src/app/admin/admin-reports/filters-section/filters-section.component.html b/src/app/admin/admin-reports/filters-section/filters-section.component.html
index 2fa1a2f547..88e4335506 100644
--- a/src/app/admin/admin-reports/filters-section/filters-section.component.html
+++ b/src/app/admin/admin-reports/filters-section/filters-section.component.html
@@ -1,19 +1,23 @@
 <fieldset class="row row-cols-2">
-    <ng-container>
-        <span class="col-12">&nbsp;</span>
-        <span class="col-1">&nbsp;</span>
-        <button id="btnSelectAllFilters" class="btn btn-light mt-1 col-4" (click)="selectAll()">{{"admin.reports.commons.filters.select_all" | translate}}</button>
-        <span class="col-2">&nbsp;</span>
-        <button id="btnDeselectAllFilters" class="btn btn-light mt-1 col-4" (click)="deselectAll()">{{"admin.reports.commons.filters.deselect_all" | translate}}</button>
-        <span class="col-1">&nbsp;</span>
-        <span class="col-12">&nbsp;</span>
-    </ng-container>
+  <ng-container>
+    <span class="col-12">&nbsp;</span>
+    <span class="col-1">&nbsp;</span>
+    <button id="btnSelectAllFilters" class="btn btn-light mt-1 col-4" (click)="selectAll()">{{"admin.reports.commons.filters.select_all" | translate}}</button>
+    <span class="col-2">&nbsp;</span>
+    <button id="btnDeselectAllFilters" class="btn btn-light mt-1 col-4" (click)="deselectAll()">{{"admin.reports.commons.filters.deselect_all" | translate}}</button>
+    <span class="col-1">&nbsp;</span>
+    <span class="col-12">&nbsp;</span>
+  </ng-container>
 </fieldset>
-<fieldset class="row row-cols-2" *ngFor="let group of allFilters()">
+@for (group of allFilters(); track group) {
+  <fieldset class="row row-cols-2">
     <legend>{{group.key | translate}}</legend>
     <ng-container [formGroup]="filtersForm">
-        <div *ngFor="let filter of group.filters" class="col-6">
-            <input type="checkbox" id="flt-{{filter.id}}" value="{{filter.id}}" class="form-check-input col-1" formControlName="{{filter.id}}"><label for="flt-{{filter.id}}" class="col-11 align-middle" title="{{filter.tooltipKey | translate}}">{{filter.key | translate}}</label>
+      @for (filter of group.filters; track filter) {
+        <div class="col-6">
+          <input type="checkbox" id="flt-{{filter.id}}" value="{{filter.id}}" class="form-check-input col-1" formControlName="{{filter.id}}"><label for="flt-{{filter.id}}" class="col-11 align-middle" title="{{filter.tooltipKey | translate}}">{{filter.key | translate}}</label>
         </div>
+      }
     </ng-container>
-</fieldset>
+  </fieldset>
+}
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.html b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.html
index 200286e08f..150411ec40 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-group-selector/supervision-order-group-selector.component.html
@@ -1,43 +1,47 @@
 <div>
-    <div class="modal-header">{{'supervision-group-selector.header' | translate}}
-        <button type="button" class="btn-close" (click)="close()" aria-label="Close">
-        </button>
+  <div class="modal-header">{{'supervision-group-selector.header' | translate}}
+    <button type="button" class="btn-close" (click)="close()" aria-label="Close">
+    </button>
+  </div>
+  <div class="modal-body">
+    <div class="row">
+      <div class="control-group col-sm-12">
+        <label for="supervisionOrder" class="form-label">{{'supervision-group-selector.select.type-of-order.label' | translate}}</label>
+        <select name="supervisionOrder" id="supervisionOrder" class="form-select"
+          [(ngModel)]="selectedOrderType"
+          attr.aria-label="{{'supervision-group-selector.select.type-of-order.label' | translate}}">
+          <option value="EDITOR">{{'supervision-group-selector.select.type-of-order.option.editor' | translate}}</option>
+          <option value="OBSERVER">{{'supervision-group-selector.select.type-of-order.option.observer' | translate}}</option>
+        </select>
+        @if (isSubmitted && (!selectedOrderType || selectedOrderType === '')) {
+          <ds-error
+          message="{{'supervision-group-selector.select.type-of-order.error' | translate}}"></ds-error>
+        }
+      </div>
     </div>
-    <div class="modal-body">
-        <div class="row">
-            <div class="control-group col-sm-12">
-                <label for="supervisionOrder" class="form-label">{{'supervision-group-selector.select.type-of-order.label' | translate}}</label>
-                <select name="supervisionOrder" id="supervisionOrder" class="form-select"
-                        [(ngModel)]="selectedOrderType"
-                        attr.aria-label="{{'supervision-group-selector.select.type-of-order.label' | translate}}">
-                    <option value="EDITOR">{{'supervision-group-selector.select.type-of-order.option.editor' | translate}}</option>
-                    <option value="OBSERVER">{{'supervision-group-selector.select.type-of-order.option.observer' | translate}}</option>
-                </select>
-                <ds-error *ngIf="isSubmitted && (!selectedOrderType || selectedOrderType === '')"
-                          message="{{'supervision-group-selector.select.type-of-order.error' | translate}}"></ds-error>
-            </div>
-        </div>
-        <div class="row">
-            <div class="control-group col-sm-12">
-                <label for="supervisionGroup" class="form-label">{{'supervision-group-selector.select.group.label' | translate}}</label>
-                <ng-container class="mb-3">
-                    <input id="supervisionGroup" class="form-control" type="text" [value]="selectedGroup ? dsoNameService.getName(selectedGroup) : ''" disabled>
-                    <ds-error *ngIf="isSubmitted && !selectedGroup" message="{{'supervision-group-selector.select.group.error' | translate}}"></ds-error>
-                </ng-container>
-                <ds-eperson-group-list [isListOfEPerson]="false"
-                                       (select)="updateGroupObjectSelected($event)"></ds-eperson-group-list>
-            </div>
-        </div>
-<!--        <div class="d-flex flex-row-reverse m-2">          -->
-        <div class="modal-footer">
-          <button class="btn btn-outline-secondary"
-                  (click)="close()">
-            <i class="fas fa-times"></i> {{"supervision-group-selector.button.cancel" | translate}}
-          </button>
-          <button class="btn btn-primary save"
-                  (click)="save()">
-            <i class="fas fa-save"></i> {{"supervision-group-selector.button.save" | translate}}
-          </button>
-        </div>
+    <div class="row">
+      <div class="control-group col-sm-12">
+        <label for="supervisionGroup" class="form-label">{{'supervision-group-selector.select.group.label' | translate}}</label>
+        <ng-container class="mb-3">
+          <input id="supervisionGroup" class="form-control" type="text" [value]="selectedGroup ? dsoNameService.getName(selectedGroup) : ''" disabled>
+          @if (isSubmitted && !selectedGroup) {
+            <ds-error message="{{'supervision-group-selector.select.group.error' | translate}}"></ds-error>
+          }
+        </ng-container>
+        <ds-eperson-group-list [isListOfEPerson]="false"
+        (select)="updateGroupObjectSelected($event)"></ds-eperson-group-list>
+      </div>
     </div>
+    <!--        <div class="d-flex flex-row-reverse m-2">          -->
+    <div class="modal-footer">
+      <button class="btn btn-outline-secondary"
+        (click)="close()">
+        <i class="fas fa-times"></i> {{"supervision-group-selector.button.cancel" | translate}}
+      </button>
+      <button class="btn btn-primary save"
+        (click)="save()">
+        <i class="fas fa-save"></i> {{"supervision-group-selector.button.save" | translate}}
+      </button>
+    </div>
+  </div>
 </div>
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.html b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.html
index 75e10a10df..3d3e912f91 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/actions/workspace-item/supervision-order-status/supervision-order-status.component.html
@@ -1,15 +1,19 @@
 <ng-container *ngVar="(supervisionOrderEntries$ | async) as supervisionOrders">
-  <div class="item-list-supervision" *ngIf="supervisionOrders?.length > 0">
-    <div>
-      <span>{{'workflow-item.search.result.list.element.supervised-by' | translate}} </span>
+  @if (supervisionOrders?.length > 0) {
+    <div class="item-list-supervision">
+      <div>
+        <span>{{'workflow-item.search.result.list.element.supervised-by' | translate}} </span>
+      </div>
+      <div>
+        @for (supervisionOrder of supervisionOrders; track supervisionOrder) {
+          <a class="badge bg-primary me-1 mb-1 text-capitalize mw-100 text-truncate" data-test="soBadge"
+            [ngbTooltip]="'workflow-item.search.result.list.element.supervised.remove-tooltip' | translate"
+            (click)="$event.preventDefault(); $event.stopImmediatePropagation(); deleteSupervisionOrder(supervisionOrder)" aria-label="Close">
+            {{ dsoNameService.getName(supervisionOrder.group) }}
+            <span aria-hidden="true"> ×</span>
+          </a>
+        }
+      </div>
     </div>
-    <div>
-      <a class="badge bg-primary me-1 mb-1 text-capitalize mw-100 text-truncate" *ngFor="let supervisionOrder of supervisionOrders" data-test="soBadge"
-         [ngbTooltip]="'workflow-item.search.result.list.element.supervised.remove-tooltip' | translate"
-         (click)="$event.preventDefault(); $event.stopImmediatePropagation(); deleteSupervisionOrder(supervisionOrder)" aria-label="Close">
-        {{ dsoNameService.getName(supervisionOrder.group) }}
-        <span aria-hidden="true"> ×</span>
-      </a>
-    </div>
-  </div>
+  }
 </ng-container>
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.html b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.html
index 70fbc6f667..38703c3182 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-grid-element/workflow-item/workflow-item-search-result-admin-workflow-grid-element.component.html
@@ -1,12 +1,14 @@
 <ng-template dsDynamicComponentLoader>
 </ng-template>
 <div #badges class="position-absolute ms-1">
-    <div class="workflow-badge">
-        <span class="badge bg-info">{{ "admin.workflow.item.workflow" | translate }}</span>
-    </div>
+  <div class="workflow-badge">
+    <span class="badge bg-info">{{ "admin.workflow.item.workflow" | translate }}</span>
+  </div>
 </div>
 <ul #buttons class="list-group list-group-flush">
-    <li class="list-group-item">
-        <ds-workflow-item-admin-workflow-actions-element *ngIf="object" class="d-flex justify-content-between" [wfi]="dso" [small]="true"></ds-workflow-item-admin-workflow-actions-element>
-    </li>
+  <li class="list-group-item">
+    @if (object) {
+      <ds-workflow-item-admin-workflow-actions-element class="d-flex justify-content-between" [wfi]="dso" [small]="true"></ds-workflow-item-admin-workflow-actions-element>
+    }
+  </li>
 </ul>
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.html b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.html
index f34d17da51..2ecd0a72a1 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.html
@@ -1,10 +1,12 @@
 <div class="workflow-badge">
-    <span class="badge bg-info">{{ "admin.workflow.item.workflow" | translate }}</span>
+  <span class="badge bg-info">{{ "admin.workflow.item.workflow" | translate }}</span>
 </div>
-<ds-listable-object-component-loader *ngIf="item$ | async"
-                                     [object]="item$ | async"
-                                     [viewMode]="viewModes.ListElement"
-                                     [index]="index"
-                                     [linkType]="linkType"
-                                     [listID]="listID"></ds-listable-object-component-loader>
+@if (item$ | async) {
+  <ds-listable-object-component-loader
+    [object]="item$ | async"
+    [viewMode]="viewModes.ListElement"
+    [index]="index"
+    [linkType]="linkType"
+  [listID]="listID"></ds-listable-object-component-loader>
+}
 <ds-workflow-item-admin-workflow-actions-element [wfi]="dso" [small]="false"></ds-workflow-item-admin-workflow-actions-element>
diff --git a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.html b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.html
index 15e0699f28..32777bfa39 100644
--- a/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.html
+++ b/src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workspace-item/workspace-item-search-result-admin-workflow-list-element.component.html
@@ -1,13 +1,15 @@
 <span class="badge bg-info">{{ "admin.workflow.item.workspace" | translate }}</span>
-<ds-listable-object-component-loader *ngIf="item$ | async"
-                                     [object]="item$ | async"
-                                     [viewMode]="viewModes.ListElement"
-                                     [index]="index"
-                                     [linkType]="linkType"
-                                     [listID]="listID"></ds-listable-object-component-loader>
+@if (item$ | async) {
+  <ds-listable-object-component-loader
+    [object]="item$ | async"
+    [viewMode]="viewModes.ListElement"
+    [index]="index"
+    [linkType]="linkType"
+  [listID]="listID"></ds-listable-object-component-loader>
+}
 
 <ds-workspace-item-admin-workflow-actions-element [small]="false"
-                                                  [supervisionOrderList]="supervisionOrder$ | async"
-                                                  [wsi]="dso"
-                                                  (create)="reloadObject($event)"
-                                                  (delete)="reloadObject($event)"></ds-workspace-item-admin-workflow-actions-element>
+  [supervisionOrderList]="supervisionOrder$ | async"
+  [wsi]="dso"
+  (create)="reloadObject($event)"
+(delete)="reloadObject($event)"></ds-workspace-item-admin-workflow-actions-element>
diff --git a/src/app/collection-page/collection-page.component.html b/src/app/collection-page/collection-page.component.html
index e5b8bd6945..d38e38dd83 100644
--- a/src/app/collection-page/collection-page.component.html
+++ b/src/app/collection-page/collection-page.component.html
@@ -1,61 +1,71 @@
 <div class="container">
   <div class="collection-page"
-       *ngVar="(collectionRD$ | async) as collectionRD">
-    <div *ngIf="collectionRD?.hasSucceeded" @fadeInOut>
-      <div *ngIf="collectionRD?.payload as collection">
-        <ds-view-tracker [object]="collection"></ds-view-tracker>
-        <div class="d-flex flex-row border-bottom mb-4 pb-4">
-                <header class="comcol-header me-auto">
-            <!-- Collection Name -->
-            <ds-comcol-page-header
-                [name]="dsoNameService.getName(collection)">
-            </ds-comcol-page-header>
-            <!-- Collection logo -->
-            <ds-comcol-page-logo *ngIf="logoRD$"
-                                 [logo]="(logoRD$ | async)?.payload"
-                                 [alternateText]="'collection.logo' | translate">
-            </ds-comcol-page-logo>
-
-            <!-- Handle -->
-            <ds-comcol-page-handle
-                [content]="collection.handle"
-                [title]="'collection.page.handle'">
-            </ds-comcol-page-handle>
-            <!-- Introductory text -->
-            <ds-comcol-page-content
-                [content]="collection.introductoryText"
-                [hasInnerHtml]="true">
-            </ds-comcol-page-content>
-            <!-- News -->
-            <ds-comcol-page-content
-                [content]="collection.sidebarText"
-                [hasInnerHtml]="true"
-                [title]="'collection.page.news'">
-            </ds-comcol-page-content>
-          </header>
-          <ds-dso-edit-menu></ds-dso-edit-menu>
-        </div>
-        <section class="comcol-page-browse-section">
-          <!-- Browse-By Links -->
-          <ds-comcol-page-browse-by
-              [id]="collection.id"
-              [contentType]="collection.type">
-          </ds-comcol-page-browse-by>
-
-          <router-outlet></router-outlet>
-        </section>
-        <footer *ngIf="collection.copyrightText" class="border-top my-5 pt-4">
-          <!-- Copyright -->
-          <ds-comcol-page-content
-              [content]="collection.copyrightText"
-              [hasInnerHtml]="true">
-          </ds-comcol-page-content>
-        </footer>
+    *ngVar="(collectionRD$ | async) as collectionRD">
+    @if (collectionRD?.hasSucceeded) {
+      <div @fadeInOut>
+        @if (collectionRD?.payload; as collection) {
+          <div>
+            <ds-view-tracker [object]="collection"></ds-view-tracker>
+            <div class="d-flex flex-row border-bottom mb-4 pb-4">
+              <header class="comcol-header me-auto">
+                <!-- Collection Name -->
+                <ds-comcol-page-header
+                  [name]="dsoNameService.getName(collection)">
+                </ds-comcol-page-header>
+                <!-- Collection logo -->
+                @if (logoRD$) {
+                  <ds-comcol-page-logo
+                    [logo]="(logoRD$ | async)?.payload"
+                    [alternateText]="'collection.logo' | translate">
+                  </ds-comcol-page-logo>
+                }
+                <!-- Handle -->
+                <ds-comcol-page-handle
+                  [content]="collection.handle"
+                  [title]="'collection.page.handle'">
+                </ds-comcol-page-handle>
+                <!-- Introductory text -->
+                <ds-comcol-page-content
+                  [content]="collection.introductoryText"
+                  [hasInnerHtml]="true">
+                </ds-comcol-page-content>
+                <!-- News -->
+                <ds-comcol-page-content
+                  [content]="collection.sidebarText"
+                  [hasInnerHtml]="true"
+                  [title]="'collection.page.news'">
+                </ds-comcol-page-content>
+              </header>
+              <ds-dso-edit-menu></ds-dso-edit-menu>
+            </div>
+            <section class="comcol-page-browse-section">
+              <!-- Browse-By Links -->
+              <ds-comcol-page-browse-by
+                [id]="collection.id"
+                [contentType]="collection.type">
+              </ds-comcol-page-browse-by>
+              <router-outlet></router-outlet>
+            </section>
+            @if (collection.copyrightText) {
+              <footer class="border-top my-5 pt-4">
+                <!-- Copyright -->
+                <ds-comcol-page-content
+                  [content]="collection.copyrightText"
+                  [hasInnerHtml]="true">
+                </ds-comcol-page-content>
+              </footer>
+            }
+          </div>
+        }
       </div>
-    </div>
-    <ds-error *ngIf="collectionRD?.hasFailed"
-              message="{{'error.collection' | translate}}"></ds-error>
-    <ds-loading *ngIf="collectionRD?.isLoading"
-                       message="{{'loading.collection' | translate}}"></ds-loading>
+    }
+    @if (collectionRD?.hasFailed) {
+      <ds-error
+      message="{{'error.collection' | translate}}"></ds-error>
+    }
+    @if (collectionRD?.isLoading) {
+      <ds-loading
+      message="{{'loading.collection' | translate}}"></ds-loading>
+    }
   </div>
 </div>
diff --git a/src/app/collection-page/delete-collection-page/delete-collection-page.component.html b/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
index 3bc2d23c34..2147cb85c0 100644
--- a/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
+++ b/src/app/collection-page/delete-collection-page/delete-collection-page.component.html
@@ -1,23 +1,27 @@
 <div class="container">
-    <div class="row">
-        <ng-container *ngVar="(dsoRD$ | async)?.payload as dso">
-            <div class="col-12 pb-4">
-                <h1 id="header" class="border-bottom pb-2">{{ 'collection.delete.head' | translate}}</h1>
-                <p class="pb-2">{{ 'collection.delete.text' | translate:{ dso: dsoNameService.getName(dso) } }}</p>
-                <div class="mb-3 row">
-                  <div class="col text-end space-children-mr">
-                    <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [dsBtnDisabled]="(processing$ | async)">
-                      <i class="fas fa-times"></i> {{'collection.delete.cancel' | translate}}
-                    </button>
-                    <button class="btn btn-danger" (click)="onConfirm(dso)" [dsBtnDisabled]="(processing$ | async)">
-                      <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'collection.delete.processing' | translate}}</span>
-                      <span *ngIf="(processing$ | async) !== true"><i class="fas fa-trash"></i> {{'collection.delete.confirm' | translate}}</span>
-                    </button>
-                  </div>
-                </div>
-            </div>
-        </ng-container>
+  <div class="row">
+    <ng-container *ngVar="(dsoRD$ | async)?.payload as dso">
+      <div class="col-12 pb-4">
+        <h1 id="header" class="border-bottom pb-2">{{ 'collection.delete.head' | translate}}</h1>
+        <p class="pb-2">{{ 'collection.delete.text' | translate:{ dso: dsoNameService.getName(dso) } }}</p>
+        <div class="mb-3 row">
+          <div class="col text-end space-children-mr">
+            <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [dsBtnDisabled]="(processing$ | async)">
+              <i class="fas fa-times"></i> {{'collection.delete.cancel' | translate}}
+            </button>
+            <button class="btn btn-danger" (click)="onConfirm(dso)" [dsBtnDisabled]="(processing$ | async)">
+              @if (processing$ | async) {
+                <span><i class='fas fa-circle-notch fa-spin'></i> {{'collection.delete.processing' | translate}}</span>
+              }
+              @if ((processing$ | async) !== true) {
+                <span><i class="fas fa-trash"></i> {{'collection.delete.confirm' | translate}}</span>
+              }
+            </button>
+          </div>
+        </div>
+      </div>
+    </ng-container>
 
-    </div>
+  </div>
 
 </div>
diff --git a/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.html b/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.html
index 7cd3d6a342..9408bd2ab3 100644
--- a/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-roles/collection-roles.component.html
@@ -1,8 +1,9 @@
 <div class="custom-alignment">
-  <ds-comcol-role
-    *ngFor="let comcolRole of comcolRoles$ | async"
-    [dso]="collection$ | async"
-    [comcolRole]="comcolRole"
-  >
-  </ds-comcol-role>
+  @for (comcolRole of comcolRoles$ | async; track comcolRole) {
+    <ds-comcol-role
+      [dso]="collection$ | async"
+      [comcolRole]="comcolRole"
+      >
+    </ds-comcol-role>
+  }
 </div>
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
index 9a46fac09a..147b10ff62 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.html
@@ -1,54 +1,65 @@
 <div *ngVar="(contentSource$ |async) as contentSource">
-    <div class="container-fluid space-children-mr" *ngIf="shouldShow">
-        <h3>{{ 'collection.source.controls.head' | translate }}</h3>
-        <div>
-            <span class="fw-bold">{{'collection.source.controls.harvest.status' | translate}}</span>
-            <span>{{contentSource?.harvestStatus}}</span>
-        </div>
-        <div>
-            <span class="fw-bold">{{'collection.source.controls.harvest.start' | translate}}</span>
-            <span>{{contentSource?.harvestStartTime ? contentSource?.harvestStartTime : 'collection.source.controls.harvest.no-information'|translate }}</span>
-        </div>
-        <div>
-            <span class="fw-bold">{{'collection.source.controls.harvest.last' | translate}}</span>
-            <span>{{contentSource?.lastHarvested ? contentSource?.lastHarvested : 'collection.source.controls.harvest.no-information'|translate }}</span>
-        </div>
-        <div>
-            <span class="fw-bold">{{'collection.source.controls.harvest.message' | translate}}</span>
-            <span>{{contentSource?.message ? contentSource?.message: 'collection.source.controls.harvest.no-information'|translate }}</span>
-        </div>
-
-        <button *ngIf="(testConfigRunning$ |async) !== true" class="btn btn-secondary"
-                [dsBtnDisabled]="!(isEnabled)"
-                (click)="testConfiguration(contentSource)">
-            <span>{{'collection.source.controls.test.submit' | translate}}</span>
+  @if (shouldShow) {
+    <div class="container-fluid space-children-mr">
+      <h3>{{ 'collection.source.controls.head' | translate }}</h3>
+      <div>
+        <span class="fw-bold">{{'collection.source.controls.harvest.status' | translate}}</span>
+        <span>{{contentSource?.harvestStatus}}</span>
+      </div>
+      <div>
+        <span class="fw-bold">{{'collection.source.controls.harvest.start' | translate}}</span>
+        <span>{{contentSource?.harvestStartTime ? contentSource?.harvestStartTime : 'collection.source.controls.harvest.no-information'|translate }}</span>
+      </div>
+      <div>
+        <span class="fw-bold">{{'collection.source.controls.harvest.last' | translate}}</span>
+        <span>{{contentSource?.lastHarvested ? contentSource?.lastHarvested : 'collection.source.controls.harvest.no-information'|translate }}</span>
+      </div>
+      <div>
+        <span class="fw-bold">{{'collection.source.controls.harvest.message' | translate}}</span>
+        <span>{{contentSource?.message ? contentSource?.message: 'collection.source.controls.harvest.no-information'|translate }}</span>
+      </div>
+      @if ((testConfigRunning$ |async) !== true) {
+        <button class="btn btn-secondary"
+          [dsBtnDisabled]="!(isEnabled)"
+          (click)="testConfiguration(contentSource)">
+          <span>{{'collection.source.controls.test.submit' | translate}}</span>
         </button>
-        <button *ngIf="(testConfigRunning$ |async)" class="btn btn-secondary"
-                [dsBtnDisabled]="true">
-            <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
-            <span>{{'collection.source.controls.test.running' | translate}}</span>
+      }
+      @if ((testConfigRunning$ |async)) {
+        <button class="btn btn-secondary"
+          [dsBtnDisabled]="true">
+          <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
+          <span>{{'collection.source.controls.test.running' | translate}}</span>
         </button>
-        <button *ngIf="(importRunning$ |async) !== true" class="btn btn-primary"
-                [dsBtnDisabled]="!(isEnabled)"
-                (click)="importNow()">
-            <span class="d-none d-sm-inline">{{'collection.source.controls.import.submit' | translate}}</span>
+      }
+      @if ((importRunning$ |async) !== true) {
+        <button class="btn btn-primary"
+          [dsBtnDisabled]="!(isEnabled)"
+          (click)="importNow()">
+          <span class="d-none d-sm-inline">{{'collection.source.controls.import.submit' | translate}}</span>
         </button>
-        <button *ngIf="(importRunning$ |async)" class="btn btn-primary"
-                [dsBtnDisabled]="true">
-            <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
-            <span class="d-none d-sm-inline">{{'collection.source.controls.import.running' | translate}}</span>
+      }
+      @if ((importRunning$ |async)) {
+        <button class="btn btn-primary"
+          [dsBtnDisabled]="true">
+          <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
+          <span class="d-none d-sm-inline">{{'collection.source.controls.import.running' | translate}}</span>
         </button>
-        <button *ngIf="(reImportRunning$ |async) !== true" class="btn btn-primary"
-                [dsBtnDisabled]="!(isEnabled)"
-                (click)="resetAndReimport()">
-            <span class="d-none d-sm-inline">&nbsp;{{'collection.source.controls.reset.submit' | translate}}</span>
+      }
+      @if ((reImportRunning$ |async) !== true) {
+        <button class="btn btn-primary"
+          [dsBtnDisabled]="!(isEnabled)"
+          (click)="resetAndReimport()">
+          <span class="d-none d-sm-inline">&nbsp;{{'collection.source.controls.reset.submit' | translate}}</span>
         </button>
-        <button *ngIf="(reImportRunning$ |async)" class="btn btn-primary"
-                [dsBtnDisabled]="true">
-            <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
-            <span class="d-none d-sm-inline">&nbsp;{{'collection.source.controls.reset.running' | translate}}</span>
+      }
+      @if ((reImportRunning$ |async)) {
+        <button class="btn btn-primary"
+          [dsBtnDisabled]="true">
+          <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
+          <span class="d-none d-sm-inline">&nbsp;{{'collection.source.controls.reset.running' | translate}}</span>
         </button>
-
-
+      }
     </div>
+  }
 </div>
diff --git a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
index 715ef9e726..7f392b2f02 100644
--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html
@@ -1,74 +1,92 @@
 <div class="container-fluid">
-    <div class="d-inline-block float-end space-children-mr">
-        <button class=" btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
-                [dsBtnDisabled]="(hasChanges$ | async) !== true"
-                (click)="discard()"><i
-                class="fas fa-times"></i>
-            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
-        </button>
-        <button class="btn btn-warning" *ngIf="isReinstatable$ | async"
-                (click)="reinstate()"><i
-                class="fas fa-undo-alt"></i>
-            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.reinstate-button" | translate}}</span>
-        </button>
-        <button class="btn btn-primary"
-                [dsBtnDisabled]="(hasChanges$ | async) !== true || !isValid() || (initialHarvestType === harvestTypeNone && contentSource.harvestType === initialHarvestType)"
-                (click)="onSubmit()"><i
-                class="fas fa-save"></i>
-            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
-        </button>
-    </div>
-    <h2>{{ 'collection.edit.tabs.source.head' | translate }}</h2>
-    <div *ngIf="contentSource" class="form-check mb-4">
-        <input type="checkbox" class="form-check-input" id="externalSourceCheck"
-               [checked]="(contentSource?.harvestType !== harvestTypeNone)" (change)="changeExternalSource()">
-        <label class="form-check-label"
-               for="externalSourceCheck">{{ 'collection.edit.tabs.source.external' | translate }}</label>
-    </div>
-    <ds-loading *ngIf="!contentSource" [message]="'loading.content-source' | translate"></ds-loading>
-    <h3 *ngIf="contentSource && (contentSource?.harvestType !== harvestTypeNone)">{{ 'collection.edit.tabs.source.form.head' | translate }}</h3>
+  <div class="d-inline-block float-end space-children-mr">
+    @if ((isReinstatable$ | async) !== true) {
+      <button class=" btn btn-danger"
+        [dsBtnDisabled]="(hasChanges$ | async) !== true"
+        (click)="discard()"><i
+      class="fas fa-times"></i>
+      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
+    </button>
+  }
+  @if (isReinstatable$ | async) {
+    <button class="btn btn-warning"
+      (click)="reinstate()"><i
+    class="fas fa-undo-alt"></i>
+    <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.reinstate-button" | translate}}</span>
+  </button>
+}
+<button class="btn btn-primary"
+  [dsBtnDisabled]="(hasChanges$ | async) !== true || !isValid() || (initialHarvestType === harvestTypeNone && contentSource.harvestType === initialHarvestType)"
+  (click)="onSubmit()"><i
+class="fas fa-save"></i>
+<span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
+</button>
+</div>
+<h2>{{ 'collection.edit.tabs.source.head' | translate }}</h2>
+@if (contentSource) {
+  <div class="form-check mb-4">
+    <input type="checkbox" class="form-check-input" id="externalSourceCheck"
+      [checked]="(contentSource?.harvestType !== harvestTypeNone)" (change)="changeExternalSource()">
+    <label class="form-check-label"
+    for="externalSourceCheck">{{ 'collection.edit.tabs.source.external' | translate }}</label>
+  </div>
+}
+@if (!contentSource) {
+  <ds-loading [message]="'loading.content-source' | translate"></ds-loading>
+}
+@if (contentSource && (contentSource?.harvestType !== harvestTypeNone)) {
+  <h3>{{ 'collection.edit.tabs.source.form.head' | translate }}</h3>
+}
 </div>
 <div class="row">
-    <ds-form *ngIf="formGroup && contentSource && (contentSource?.harvestType !== harvestTypeNone)"
-             [formId]="'collection-source-form-id'"
-             [formGroup]="formGroup"
-             [formModel]="formModel"
-             [formLayout]="formLayout"
-             [displaySubmit]="false"
-             [displayCancel]="false"
-             (dfChange)="onChange($event)"
-             (submitForm)="onSubmit()"
-             (cancel)="onCancel()"></ds-form>
+  @if (formGroup && contentSource && (contentSource?.harvestType !== harvestTypeNone)) {
+    <ds-form
+      [formId]="'collection-source-form-id'"
+      [formGroup]="formGroup"
+      [formModel]="formModel"
+      [formLayout]="formLayout"
+      [displaySubmit]="false"
+      [displayCancel]="false"
+      (dfChange)="onChange($event)"
+      (submitForm)="onSubmit()"
+    (cancel)="onCancel()"></ds-form>
+  }
 </div>
-<div class="container mt-2" *ngIf="(contentSource?.harvestType !== harvestTypeNone)">
+@if ((contentSource?.harvestType !== harvestTypeNone)) {
+  <div class="container mt-2">
     <div class="row">
-        <div class="col-12">
-            <div class="d-inline-block float-end ms-1 space-children-mr">
-                <button class=" btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
-                        [dsBtnDisabled]="(hasChanges$ | async) !== true"
-                        (click)="discard()"><i
-                        class="fas fa-times"></i>
-                    <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
-                </button>
-                <button class="btn btn-warning" *ngIf="isReinstatable$ | async"
-                        (click)="reinstate()"><i
-                        class="fas fa-undo-alt"></i>
-                    <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.reinstate-button" | translate}}</span>
-                </button>
-                <button class="btn btn-primary"
-                        [dsBtnDisabled]="(hasChanges$ | async) !== true || !isValid() || (initialHarvestType === harvestTypeNone && contentSource.harvestType === initialHarvestType)"
-                        (click)="onSubmit()"><i
-                        class="fas fa-save"></i>
-                    <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
-                </button>
-            </div>
-        </div>
-    </div>
+      <div class="col-12">
+        <div class="d-inline-block float-end ms-1 space-children-mr">
+          @if ((isReinstatable$ | async) !== true) {
+            <button class=" btn btn-danger"
+              [dsBtnDisabled]="(hasChanges$ | async) !== true"
+              (click)="discard()"><i
+            class="fas fa-times"></i>
+            <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
+          </button>
+        }
+        @if (isReinstatable$ | async) {
+          <button class="btn btn-warning"
+            (click)="reinstate()"><i
+          class="fas fa-undo-alt"></i>
+          <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.reinstate-button" | translate}}</span>
+        </button>
+      }
+      <button class="btn btn-primary"
+        [dsBtnDisabled]="(hasChanges$ | async) !== true || !isValid() || (initialHarvestType === harvestTypeNone && contentSource.harvestType === initialHarvestType)"
+        (click)="onSubmit()"><i
+      class="fas fa-save"></i>
+      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
+    </button>
+  </div>
 </div>
+</div>
+</div>
+}
 <ds-collection-source-controls
-        [isEnabled]="(hasChanges$ | async) !== true"
-        [shouldShow]="contentSource?.harvestType !== harvestTypeNone"
-        [collection]="(collectionRD$ |async)?.payload"
->
+  [isEnabled]="(hasChanges$ | async) !== true"
+  [shouldShow]="contentSource?.harvestType !== harvestTypeNone"
+  [collection]="(collectionRD$ |async)?.payload"
+  >
 </ds-collection-source-controls>
 
diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html
index 6f3fc66705..864b5032d5 100644
--- a/src/app/community-list-page/community-list/community-list.component.html
+++ b/src/app/community-list-page/community-list/community-list.component.html
@@ -1,18 +1,24 @@
-<ds-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-themed-loading"></ds-loading>
+@if ((dataSource.loading$ | async) && !loadingNode) {
+  <ds-loading class="ds-themed-loading"></ds-loading>
+}
 <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl" [trackBy]="trackBy">
   <!-- This is the tree node template for show more node -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
-                 class="example-tree-node show-more-node">
+    class="example-tree-node show-more-node">
     <div class="btn-group">
       <span aria-hidden="true" class="btn btn-default invisible" cdkTreeNodeToggle>
         <span class="fa fa-chevron-right"></span>
       </span>
       <div class="align-middle my-auto">
-        <button *ngIf="(dataSource.loading$ | async) !== true" (click)="getNextPage(node)"
-           class="btn btn-outline-primary btn-sm" role="button">
-           <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
-        </button>
-        <ds-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-loading>
+        @if ((dataSource.loading$ | async) !== true) {
+          <button (click)="getNextPage(node)"
+            class="btn btn-outline-primary btn-sm" role="button">
+            <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
+          </button>
+        }
+        @if (node===loadingNode && dataSource.loading$ | async) {
+          <ds-loading class="ds-themed-loading"></ds-loading>
+        }
       </div>
     </div>
     <div class="text-muted" cdkTreeNodePadding>
@@ -22,51 +28,61 @@
   </cdk-tree-node>
   <!-- This is the tree node template for expandable nodes (coms and subcoms with children) -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
-                 class="example-tree-node expandable-node">
+    class="example-tree-node expandable-node">
     <div class="btn-group">
-      <button *ngIf="hasChild(null, node) | async" type="button" class="btn btn-default btn-transparent" cdkTreeNodeToggle
-              [attr.aria-label]="(node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) }"
-              (click)="toggleExpanded(node)"
-              data-test="expand-button">
-        <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
-              aria-hidden="true"></span>
-        <span class="sr-only">{{ (node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) } }}</span>
-      </button>
+      @if (hasChild(null, node) | async) {
+        <button type="button" class="btn btn-default btn-transparent" cdkTreeNodeToggle
+          [attr.aria-label]="(node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) }"
+          (click)="toggleExpanded(node)"
+          data-test="expand-button">
+          <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
+          aria-hidden="true"></span>
+          <span class="sr-only">{{ (node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) } }}</span>
+        </button>
+      }
       <!--Don't render the button when non-expandable otherwise it's still accessible, instead render this placeholder-->
-      <span *ngIf="(hasChild(null, node) | async) !== true" aria-hidden="true" class="btn btn-default invisible">
-        <span class="fa fa-chevron-right"></span>
-      </span>
+      @if ((hasChild(null, node) | async) !== true) {
+        <span aria-hidden="true" class="btn btn-default invisible">
+          <span class="fa fa-chevron-right"></span>
+        </span>
+      }
       <div class="d-flex flex-row">
         <span class="d-flex align-middle my-auto">
           <a [routerLink]="node.route" class="lead">{{ dsoNameService.getName(node.payload) }}</a>
           <span class="pe-2">&nbsp;</span>
-          <span *ngIf="node.payload.archivedItemsCount >= 0" class="badge rounded-pill bg-secondary align-top archived-items-lead my-auto ps-2 pe-2">{{node.payload.archivedItemsCount}}</span>
+          @if (node.payload.archivedItemsCount >= 0) {
+            <span class="badge rounded-pill bg-secondary align-top archived-items-lead my-auto ps-2 pe-2">{{node.payload.archivedItemsCount}}</span>
+          }
         </span>
       </div>
     </div>
     <ds-truncatable [id]="node.id">
       <div class="text-muted" cdkTreeNodePadding>
-        <div class="d-flex" *ngIf="node.payload.shortDescription">
-          <span aria-hidden="true" class="btn btn-default invisible">
-            <span class="fa fa-chevron-right"></span>
-          </span>
-          <ds-truncatable-part [id]="node.id" [minLines]="3">
-            <span>{{node.payload.shortDescription}}</span>
-          </ds-truncatable-part>
-        </div>
+        @if (node.payload.shortDescription) {
+          <div class="d-flex">
+            <span aria-hidden="true" class="btn btn-default invisible">
+              <span class="fa fa-chevron-right"></span>
+            </span>
+            <ds-truncatable-part [id]="node.id" [minLines]="3">
+              <span>{{node.payload.shortDescription}}</span>
+            </ds-truncatable-part>
+          </div>
+        }
       </div>
     </ds-truncatable>
-    <div class="d-flex" *ngIf="node===loadingNode && dataSource.loading$ | async"
-         cdkTreeNodePadding>
-      <span aria-hidden="true" class="btn btn-default invisible">
-        <span class="fa fa-chevron-right"></span>
-      </span>
-      <ds-loading class="ds-themed-loading"></ds-loading>
-    </div>
+    @if (node===loadingNode && dataSource.loading$ | async) {
+      <div class="d-flex"
+        cdkTreeNodePadding>
+        <span aria-hidden="true" class="btn btn-default invisible">
+          <span class="fa fa-chevron-right"></span>
+        </span>
+        <ds-loading class="ds-themed-loading"></ds-loading>
+      </div>
+    }
   </cdk-tree-node>
   <!-- This is the tree node template for leaf nodes (collections and (sub)coms without children) -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: !(hasChild && isShowMore)" cdkTreeNodePadding
-                 class="example-tree-node childless-node">
+    class="example-tree-node childless-node">
     <div class="btn-group">
       <span aria-hidden="true" class="btn btn-default invisible" cdkTreeNodeToggle>
         <span class="fa fa-chevron-right"></span>
@@ -77,14 +93,16 @@
     </div>
     <ds-truncatable [id]="node.id">
       <div class="text-muted" cdkTreeNodePadding>
-        <div class="d-flex" *ngIf="node.payload.shortDescription">
-          <span aria-hidden="true" class="btn btn-default invisible">
-            <span class="fa fa-chevron-right"></span>
-          </span>
-          <ds-truncatable-part [id]="node.id" [minLines]="3">
-            <span>{{node.payload.shortDescription}}</span>
-          </ds-truncatable-part>
-        </div>
+        @if (node.payload.shortDescription) {
+          <div class="d-flex">
+            <span aria-hidden="true" class="btn btn-default invisible">
+              <span class="fa fa-chevron-right"></span>
+            </span>
+            <ds-truncatable-part [id]="node.id" [minLines]="3">
+              <span>{{node.payload.shortDescription}}</span>
+            </ds-truncatable-part>
+          </div>
+        }
       </div>
     </ds-truncatable>
   </cdk-tree-node>
diff --git a/src/app/community-page/community-page.component.html b/src/app/community-page/community-page.component.html
index c04575841e..13e5558d1b 100644
--- a/src/app/community-page/community-page.component.html
+++ b/src/app/community-page/community-page.component.html
@@ -1,43 +1,53 @@
 <div class="container" *ngVar="(communityRD$ | async) as communityRD">
-  <div class="community-page" *ngIf="communityRD?.hasSucceeded" @fadeInOut>
-    <div *ngIf="communityRD?.payload; let communityPayload">
-      <ds-view-tracker [object]="communityPayload"></ds-view-tracker>
-      <div class="d-flex flex-row border-bottom mb-4 pb-4">
-        <header class="comcol-header me-auto">
-          <!-- Community name -->
-          <ds-comcol-page-header [name]="dsoNameService.getName(communityPayload)"></ds-comcol-page-header>
-          <!-- Community logo -->
-          <ds-comcol-page-logo *ngIf="logoRD$" [logo]="(logoRD$ | async)?.payload" [alternateText]="'community.logo' | translate">
-          </ds-comcol-page-logo>
-          <!-- Handle -->
-          <ds-comcol-page-handle [content]="communityPayload.handle" [title]="'community.page.handle'">
-          </ds-comcol-page-handle>
-          <!-- Introductory text -->
-          <ds-comcol-page-content [content]="communityPayload.introductoryText" [hasInnerHtml]="true">
-          </ds-comcol-page-content>
-          <!-- News -->
-          <ds-comcol-page-content [content]="communityPayload.sidebarText" [hasInnerHtml]="true"
-                                  [title]="'community.page.news'">
-          </ds-comcol-page-content>
-        </header>
-        <ds-dso-edit-menu></ds-dso-edit-menu>
-      </div>
-      <section class="comcol-page-browse-section">
-
-        <!-- Browse-By Links -->
-        <ds-comcol-page-browse-by [id]="communityPayload.id" [contentType]="communityPayload.type">
-        </ds-comcol-page-browse-by>
-
-        <router-outlet></router-outlet>
-      </section>
-      <footer *ngIf="communityPayload.copyrightText" class="border-top my-5 pt-4">
-        <!-- Copyright -->
-        <ds-comcol-page-content [content]="communityPayload.copyrightText" [hasInnerHtml]="true">
-        </ds-comcol-page-content>
-      </footer>
+  @if (communityRD?.hasSucceeded) {
+    <div class="community-page" @fadeInOut>
+      @if (communityRD?.payload; as communityPayload) {
+        <div>
+          <ds-view-tracker [object]="communityPayload"></ds-view-tracker>
+          <div class="d-flex flex-row border-bottom mb-4 pb-4">
+            <header class="comcol-header me-auto">
+              <!-- Community name -->
+              <ds-comcol-page-header [name]="dsoNameService.getName(communityPayload)"></ds-comcol-page-header>
+              <!-- Community logo -->
+              @if (logoRD$) {
+                <ds-comcol-page-logo [logo]="(logoRD$ | async)?.payload" [alternateText]="'community.logo' | translate">
+                </ds-comcol-page-logo>
+              }
+              <!-- Handle -->
+              <ds-comcol-page-handle [content]="communityPayload.handle" [title]="'community.page.handle'">
+              </ds-comcol-page-handle>
+              <!-- Introductory text -->
+              <ds-comcol-page-content [content]="communityPayload.introductoryText" [hasInnerHtml]="true">
+              </ds-comcol-page-content>
+              <!-- News -->
+              <ds-comcol-page-content [content]="communityPayload.sidebarText" [hasInnerHtml]="true"
+                [title]="'community.page.news'">
+              </ds-comcol-page-content>
+            </header>
+            <ds-dso-edit-menu></ds-dso-edit-menu>
+          </div>
+          <section class="comcol-page-browse-section">
+            <!-- Browse-By Links -->
+            <ds-comcol-page-browse-by [id]="communityPayload.id" [contentType]="communityPayload.type">
+            </ds-comcol-page-browse-by>
+            <router-outlet></router-outlet>
+          </section>
+          @if (communityPayload.copyrightText) {
+            <footer class="border-top my-5 pt-4">
+              <!-- Copyright -->
+              <ds-comcol-page-content [content]="communityPayload.copyrightText" [hasInnerHtml]="true">
+              </ds-comcol-page-content>
+            </footer>
+          }
+        </div>
+      }
     </div>
-  </div>
+  }
 
-  <ds-error *ngIf="communityRD?.hasFailed" message="{{'error.community' | translate}}"></ds-error>
-  <ds-loading *ngIf="communityRD?.isLoading" message="{{'loading.community' | translate}}"></ds-loading>
+  @if (communityRD?.hasFailed) {
+    <ds-error message="{{'error.community' | translate}}"></ds-error>
+  }
+  @if (communityRD?.isLoading) {
+    <ds-loading message="{{'loading.community' | translate}}"></ds-loading>
+  }
 </div>
diff --git a/src/app/community-page/delete-community-page/delete-community-page.component.html b/src/app/community-page/delete-community-page/delete-community-page.component.html
index 07b0bdfa9d..3403cc45db 100644
--- a/src/app/community-page/delete-community-page/delete-community-page.component.html
+++ b/src/app/community-page/delete-community-page/delete-community-page.component.html
@@ -1,22 +1,26 @@
 <div class="container">
-    <div class="row">
-        <ng-container *ngVar="(dsoRD$ | async)?.payload as dso">
-            <div class="col-12 pb-4">
-                <h1 id="header" class="border-bottom pb-2">{{ 'community.delete.head' | translate}}</h1>
-                <p class="pb-2">{{ 'community.delete.text' | translate:{ dso: dsoNameService.getName(dso) } }}</p>
-                <div class="mb-3 row">
-                    <div class="col text-end space-children-mr">
-                        <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [dsBtnDisabled]="(processing$ | async)">
-                            <i class="fas fa-times" aria-hidden="true"></i> {{'community.delete.cancel' | translate}}
-                        </button>
-                        <button class="btn btn-danger" (click)="onConfirm(dso)" [dsBtnDisabled]="(processing$ | async)">
-                            <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin' aria-hidden="true"></i> {{'community.delete.processing' | translate}}</span>
-                            <span *ngIf="(processing$ | async) !== true"><i class="fas fa-trash" aria-hidden="true"></i> {{'community.delete.confirm' | translate}}</span>
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </ng-container>
-    </div>
+  <div class="row">
+    <ng-container *ngVar="(dsoRD$ | async)?.payload as dso">
+      <div class="col-12 pb-4">
+        <h1 id="header" class="border-bottom pb-2">{{ 'community.delete.head' | translate}}</h1>
+        <p class="pb-2">{{ 'community.delete.text' | translate:{ dso: dsoNameService.getName(dso) } }}</p>
+        <div class="mb-3 row">
+          <div class="col text-end space-children-mr">
+            <button class="btn btn-outline-secondary" (click)="onCancel(dso)" [dsBtnDisabled]="(processing$ | async)">
+              <i class="fas fa-times" aria-hidden="true"></i> {{'community.delete.cancel' | translate}}
+            </button>
+            <button class="btn btn-danger" (click)="onConfirm(dso)" [dsBtnDisabled]="(processing$ | async)">
+              @if (processing$ | async) {
+                <span><i class='fas fa-circle-notch fa-spin' aria-hidden="true"></i> {{'community.delete.processing' | translate}}</span>
+              }
+              @if ((processing$ | async) !== true) {
+                <span><i class="fas fa-trash" aria-hidden="true"></i> {{'community.delete.confirm' | translate}}</span>
+              }
+            </button>
+          </div>
+        </div>
+      </div>
+    </ng-container>
+  </div>
 
 </div>
diff --git a/src/app/community-page/edit-community-page/community-roles/community-roles.component.html b/src/app/community-page/edit-community-page/community-roles/community-roles.component.html
index 7a048cf923..86e5b113fd 100644
--- a/src/app/community-page/edit-community-page/community-roles/community-roles.component.html
+++ b/src/app/community-page/edit-community-page/community-roles/community-roles.component.html
@@ -1,8 +1,9 @@
 <div class="custom-alignment">
-  <ds-comcol-role
-    *ngFor="let comcolRole of comcolRoles$ | async"
-    [dso]="community$ | async"
-    [comcolRole]="comcolRole"
-  >
-  </ds-comcol-role>
+  @for (comcolRole of comcolRoles$ | async; track comcolRole) {
+    <ds-comcol-role
+      [dso]="community$ | async"
+      [comcolRole]="comcolRole"
+      >
+    </ds-comcol-role>
+  }
 </div>
diff --git a/src/app/curation-form/curation-form.component.html b/src/app/curation-form/curation-form.component.html
index 93c89499f3..b312a75dd7 100644
--- a/src/app/curation-form/curation-form.component.html
+++ b/src/app/curation-form/curation-form.component.html
@@ -1,20 +1,24 @@
 <form [formGroup]="form" (ngSubmit)="submit()">
-    <div class="mb-3">
-        <div class="row mb-2">
-            <div class="col-12 col-sm-6">
-                <label class="fw-bold form-label" for="task">{{'curation.form.task-select.label' |translate }}</label>
-                <select id="task" formControlName="task" class="form-select">
-                    <option *ngFor="let task of tasks" [value]="task">
-                        {{ 'curation-task.task.' + task + '.label' | translate }}
-                    </option>
-                </select>
-            </div>
-            <div *ngIf="!hasHandleValue()" class="col-12 col-sm-6">
-                <label class="fw-bold form-label" for="handle">{{'curation.form.handle.label' |translate }}</label>
-                <input id="handle" class="form-control" formControlName="handle">
-                <small class="text-muted">{{'curation.form.handle.hint' |translate }}</small>
-            </div>
+  <div class="mb-3">
+    <div class="row mb-2">
+      <div class="col-12 col-sm-6">
+        <label class="fw-bold form-label" for="task">{{'curation.form.task-select.label' |translate }}</label>
+        <select id="task" formControlName="task" class="form-select">
+          @for (task of tasks; track task) {
+            <option [value]="task">
+              {{ 'curation-task.task.' + task + '.label' | translate }}
+            </option>
+          }
+        </select>
+      </div>
+      @if (!hasHandleValue()) {
+        <div class="col-12 col-sm-6">
+          <label class="fw-bold form-label" for="handle">{{'curation.form.handle.label' |translate }}</label>
+          <input id="handle" class="form-control" formControlName="handle">
+          <small class="text-muted">{{'curation.form.handle.hint' |translate }}</small>
         </div>
-        <button class="btn btn-default btn-primary" type="submit">{{'curation.form.submit' |translate }}</button>
+      }
     </div>
+    <button class="btn btn-default btn-primary" type="submit">{{'curation.form.submit' |translate }}</button>
+  </div>
 </form>
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html
index 3bddba534d..fb765583b5 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html
@@ -1,107 +1,135 @@
 <div class="d-flex flex-row ds-value-row" *ngVar="metadataService.isVirtual(mdValue.newValue) as isVirtual" role="row"
-     cdkDrag (cdkDragStarted)="dragging.emit(true)" (cdkDragEnded)="dragging.emit(false)"
-     [ngClass]="{ 'ds-warning': mdValue.reordered || mdValue.change === DsoEditMetadataChangeTypeEnum.UPDATE, 'ds-danger': mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE, 'ds-success': mdValue.change === DsoEditMetadataChangeTypeEnum.ADD, 'h-100': isOnlyValue }">
+  cdkDrag (cdkDragStarted)="dragging.emit(true)" (cdkDragEnded)="dragging.emit(false)"
+  [ngClass]="{ 'ds-warning': mdValue.reordered || mdValue.change === DsoEditMetadataChangeTypeEnum.UPDATE, 'ds-danger': mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE, 'ds-success': mdValue.change === DsoEditMetadataChangeTypeEnum.ADD, 'h-100': isOnlyValue }">
   <div class="flex-grow-1 ds-flex-cell ds-value-cell d-flex flex-column" *ngVar="(mdRepresentation$ | async) as mdRepresentation" role="cell">
-    <div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing && !mdRepresentation">{{ mdValue.newValue.value }}</div>
-    <textarea class="form-control" rows="5" *ngIf="mdValue.editing && !mdRepresentation && ((isAuthorityControlled() | async) !== true || (enabledFreeTextEditing && (isSuggesterVocabulary() | async) !== true))" [(ngModel)]="mdValue.newValue.value"
-              [attr.aria-label]="(dsoType + '.edit.metadata.edit.value') | translate"
-              [dsDebounce]="300" (onDebounce)="confirm.emit(false)"></textarea>
-    <ds-dynamic-scrollable-dropdown *ngIf="mdValue.editing && (isScrollableVocabulary() | async) && !enabledFreeTextEditing"
-                                    [bindId]="mdField"
-                                    [group]="group"
-                                    [model]="getModel()"
-                                    (change)="onChangeAuthorityField($event)">
-    </ds-dynamic-scrollable-dropdown>
-    <ds-dynamic-onebox *ngIf="mdValue.editing && (((isHierarchicalVocabulary() | async)  && !enabledFreeTextEditing) || (isSuggesterVocabulary() | async))"
-                      [group]="group"
-                      [model]="getModel()"
-                      (change)="onChangeAuthorityField($event)">
-    </ds-dynamic-onebox>
-    <button class="btn btn-secondary mt-2" *ngIf="mdValue.editing && ((isScrollableVocabulary() | async) || (isHierarchicalVocabulary() | async))"
+    @if (!mdValue.editing && !mdRepresentation) {
+      <div class="dont-break-out preserve-line-breaks">{{ mdValue.newValue.value }}</div>
+    }
+    @if (mdValue.editing && !mdRepresentation && ((isAuthorityControlled() | async) !== true || (enabledFreeTextEditing && (isSuggesterVocabulary() | async) !== true))) {
+      <textarea class="form-control" rows="5" [(ngModel)]="mdValue.newValue.value"
+        [attr.aria-label]="(dsoType + '.edit.metadata.edit.value') | translate"
+      [dsDebounce]="300" (onDebounce)="confirm.emit(false)"></textarea>
+    }
+    @if (mdValue.editing && (isScrollableVocabulary() | async) && !enabledFreeTextEditing) {
+      <ds-dynamic-scrollable-dropdown
+        [bindId]="mdField"
+        [group]="group"
+        [model]="getModel()"
+        (change)="onChangeAuthorityField($event)">
+      </ds-dynamic-scrollable-dropdown>
+    }
+    @if (mdValue.editing && (((isHierarchicalVocabulary() | async)  && !enabledFreeTextEditing) || (isSuggesterVocabulary() | async))) {
+      <ds-dynamic-onebox
+        [group]="group"
+        [model]="getModel()"
+        (change)="onChangeAuthorityField($event)">
+      </ds-dynamic-onebox>
+    }
+    @if (mdValue.editing && ((isScrollableVocabulary() | async) || (isHierarchicalVocabulary() | async))) {
+      <button class="btn btn-secondary mt-2"
         [title]="enabledFreeTextEditing ? dsoType + '.edit.metadata.edit.buttons.disable-free-text-editing' : dsoType + '.edit.metadata.edit.buttons.enable-free-text-editing' | translate"
         (click)="toggleFreeTextEdition()">
-    <i class="fas fa-fw" [ngClass]="enabledFreeTextEditing ? 'fa-lock' : 'fa-unlock'"></i>
-    {{ (enabledFreeTextEditing ? dsoType + '.edit.metadata.edit.buttons.disable-free-text-editing' : dsoType + '.edit.metadata.edit.buttons.enable-free-text-editing') | translate }}
-    </button>
-    <div *ngIf="!isVirtual && !mdValue.editing && mdValue.newValue.authority && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_UNSET && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_NOVALUE">
-      <span class="badge bg-light border" >
-        <i dsAuthorityConfidenceState
-           class="fas fa-fw p-0"
-           aria-hidden="true"
-           [authorityValue]="mdValue.newValue"
-           [iconMode]="true"
-        ></i>
-        {{ dsoType + '.edit.metadata.authority.label' | translate }} {{ mdValue.newValue.authority }}
-      </span>
-    </div>
-    <div class="mt-2" *ngIf=" mdValue.editing && (isAuthorityControlled() | async) && (isSuggesterVocabulary() | async)">
-      <div class="btn-group w-75">
-        <i dsAuthorityConfidenceState
-          class="fas fa-fw p-0 me-1 mt-auto mb-auto"
-          aria-hidden="true"
-          [authorityValue]="mdValue.newValue.confidence"
-          [iconMode]="true"
-      ></i>
-        <input class="form-control form-outline" data-test="authority-input" [(ngModel)]="mdValue.newValue.authority" [disabled]="!editingAuthority"
-              [attr.aria-label]="(dsoType + '.edit.metadata.edit.authority.key') | translate"
-              (change)="onChangeAuthorityKey()" />
-        <button class="btn btn-outline-secondary btn-sm ng-star-inserted" id="metadata-confirm-btn" *ngIf="!editingAuthority"
-                [title]="dsoType + '.edit.metadata.edit.buttons.open-authority-edition' | translate"
-                ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.open-authority-edition' | translate }}"
-                (click)="onChangeEditingAuthorityStatus(true)">
-          <i class="fas fa-lock fa-fw"></i>
-        </button>
-        <button class="btn btn-outline-success btn-sm ng-star-inserted" id="metadata-confirm-btn" *ngIf="editingAuthority"
-                [title]="dsoType + '.edit.metadata.edit.buttons.close-authority-edition' | translate"
-                ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.close-authority-edition' | translate }}"
-                (click)="onChangeEditingAuthorityStatus(false)">
-          <i class="fas fa-lock-open fa-fw"></i>
-        </button>
+        <i class="fas fa-fw" [ngClass]="enabledFreeTextEditing ? 'fa-lock' : 'fa-unlock'"></i>
+        {{ (enabledFreeTextEditing ? dsoType + '.edit.metadata.edit.buttons.disable-free-text-editing' : dsoType + '.edit.metadata.edit.buttons.enable-free-text-editing') | translate }}
+      </button>
+    }
+    @if (!isVirtual && !mdValue.editing && mdValue.newValue.authority && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_UNSET && mdValue.newValue.confidence !== ConfidenceTypeEnum.CF_NOVALUE) {
+      <div>
+        <span class="badge bg-light border" >
+          <i dsAuthorityConfidenceState
+            class="fas fa-fw p-0"
+            aria-hidden="true"
+            [authorityValue]="mdValue.newValue"
+            [iconMode]="true"
+          ></i>
+          {{ dsoType + '.edit.metadata.authority.label' | translate }} {{ mdValue.newValue.authority }}
+        </span>
       </div>
-    </div>
-    <div class="d-flex" *ngIf="mdRepresentation">
-      <a class="me-2" target="_blank" [routerLink]="mdRepresentationItemRoute$ | async">{{ mdRepresentationName$ | async }}</a>
-      <ds-type-badge [object]="mdRepresentation"></ds-type-badge>
-    </div>
+    }
+    @if ( mdValue.editing && (isAuthorityControlled() | async) && (isSuggesterVocabulary() | async)) {
+      <div class="mt-2">
+        <div class="btn-group w-75">
+          <i dsAuthorityConfidenceState
+            class="fas fa-fw p-0 me-1 mt-auto mb-auto"
+            aria-hidden="true"
+            [authorityValue]="mdValue.newValue.confidence"
+            [iconMode]="true"
+          ></i>
+          <input class="form-control form-outline" data-test="authority-input" [(ngModel)]="mdValue.newValue.authority" [disabled]="!editingAuthority"
+            [attr.aria-label]="(dsoType + '.edit.metadata.edit.authority.key') | translate"
+            (change)="onChangeAuthorityKey()" />
+          @if (!editingAuthority) {
+            <button class="btn btn-outline-secondary btn-sm ng-star-inserted" id="metadata-confirm-btn"
+              [title]="dsoType + '.edit.metadata.edit.buttons.open-authority-edition' | translate"
+              ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.open-authority-edition' | translate }}"
+              (click)="onChangeEditingAuthorityStatus(true)">
+              <i class="fas fa-lock fa-fw"></i>
+            </button>
+          }
+          @if (editingAuthority) {
+            <button class="btn btn-outline-success btn-sm ng-star-inserted" id="metadata-confirm-btn"
+              [title]="dsoType + '.edit.metadata.edit.buttons.close-authority-edition' | translate"
+              ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.close-authority-edition' | translate }}"
+              (click)="onChangeEditingAuthorityStatus(false)">
+              <i class="fas fa-lock-open fa-fw"></i>
+            </button>
+          }
+        </div>
+      </div>
+    }
+    @if (mdRepresentation) {
+      <div class="d-flex">
+        <a class="me-2" target="_blank" [routerLink]="mdRepresentationItemRoute$ | async">{{ mdRepresentationName$ | async }}</a>
+        <ds-type-badge [object]="mdRepresentation"></ds-type-badge>
+      </div>
+    }
   </div>
   <div class="ds-flex-cell ds-lang-cell" role="cell">
-    <div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing">{{ mdValue.newValue.language }}</div>
-    <input class="form-control" type="text" *ngIf="mdValue.editing" [(ngModel)]="mdValue.newValue.language"
-           [attr.aria-label]="(dsoType + '.edit.metadata.edit.language') | translate"
-           [dsDebounce]="300" (onDebounce)="confirm.emit(false)" />
+    @if (!mdValue.editing) {
+      <div class="dont-break-out preserve-line-breaks">{{ mdValue.newValue.language }}</div>
+    }
+    @if (mdValue.editing) {
+      <input class="form-control" type="text" [(ngModel)]="mdValue.newValue.language"
+        [attr.aria-label]="(dsoType + '.edit.metadata.edit.language') | translate"
+        [dsDebounce]="300" (onDebounce)="confirm.emit(false)" />
+    }
   </div>
   <div class="text-center ds-flex-cell ds-edit-cell" role="cell">
     <div class="btn-group">
       <div class="edit-field">
         <div class="btn-group edit-buttons" [ngbTooltip]="isVirtual ? (dsoType + '.edit.metadata.edit.buttons.virtual' | translate) : null">
-          <button class="btn btn-outline-primary btn-sm ng-star-inserted" data-test="metadata-edit-btn" *ngIf="!mdValue.editing"
-                  [title]="dsoType + '.edit.metadata.edit.buttons.edit' | translate"
-                  ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.edit' | translate }}"
-                  [dsBtnDisabled]="isVirtual || mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE || (saving$ | async)" (click)="edit.emit()">
-            <i class="fas fa-edit fa-fw"></i>
-          </button>
-          <button class="btn btn-outline-success btn-sm ng-star-inserted" data-test="metadata-confirm-btn" *ngIf="mdValue.editing"
-                  [title]="dsoType + '.edit.metadata.edit.buttons.confirm' | translate"
-                  ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.confirm' | translate }}"
-                  [dsBtnDisabled]="isVirtual || (saving$ | async)" (click)="confirm.emit(true)">
-            <i class="fas fa-check fa-fw"></i>
-          </button>
+          @if (!mdValue.editing) {
+            <button class="btn btn-outline-primary btn-sm ng-star-inserted" data-test="metadata-edit-btn"
+              [title]="dsoType + '.edit.metadata.edit.buttons.edit' | translate"
+              ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.edit' | translate }}"
+              [dsBtnDisabled]="isVirtual || mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE || (saving$ | async)" (click)="edit.emit()">
+              <i class="fas fa-edit fa-fw"></i>
+            </button>
+          }
+          @if (mdValue.editing) {
+            <button class="btn btn-outline-success btn-sm ng-star-inserted" data-test="metadata-confirm-btn"
+              [title]="dsoType + '.edit.metadata.edit.buttons.confirm' | translate"
+              ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.confirm' | translate }}"
+              [dsBtnDisabled]="isVirtual || (saving$ | async)" (click)="confirm.emit(true)">
+              <i class="fas fa-check fa-fw"></i>
+            </button>
+          }
           <button class="btn btn-outline-danger btn-sm" data-test="metadata-remove-btn"
-                  [title]="dsoType + '.edit.metadata.edit.buttons.remove' | translate"
-                  ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.remove' | translate }}"
-                  [dsBtnDisabled]="isVirtual || (mdValue.change && mdValue.change !== DsoEditMetadataChangeTypeEnum.ADD) || mdValue.editing || (saving$ | async)" (click)="remove.emit()">
+            [title]="dsoType + '.edit.metadata.edit.buttons.remove' | translate"
+            ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.remove' | translate }}"
+            [dsBtnDisabled]="isVirtual || (mdValue.change && mdValue.change !== DsoEditMetadataChangeTypeEnum.ADD) || mdValue.editing || (saving$ | async)" (click)="remove.emit()">
             <i class="fas fa-trash-alt fa-fw"></i>
           </button>
           <button class="btn btn-outline-warning btn-sm" data-test="metadata-undo-btn"
-                  [title]="dsoType + '.edit.metadata.edit.buttons.undo' | translate"
-                  ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.undo' | translate }}"
-                  [dsBtnDisabled]="isVirtual || (!mdValue.change && mdValue.reordered) || (!mdValue.change && !mdValue.editing) || (saving$ | async)" (click)="undo.emit()">
+            [title]="dsoType + '.edit.metadata.edit.buttons.undo' | translate"
+            ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.undo' | translate }}"
+            [dsBtnDisabled]="isVirtual || (!mdValue.change && mdValue.reordered) || (!mdValue.change && !mdValue.editing) || (saving$ | async)" (click)="undo.emit()">
             <i class="fas fa-undo-alt fa-fw"></i>
           </button>
           <button class="btn btn-outline-secondary ds-drag-handle btn-sm" data-test="metadata-drag-btn" *ngVar="(isOnlyValue || (saving$ | async)) as disabled"
-                  cdkDragHandle [cdkDragHandleDisabled]="disabled" [ngClass]="{'disabled': disabled}" [dsBtnDisabled]="disabled"
-                  [title]="dsoType + '.edit.metadata.edit.buttons.drag' | translate"
-                  ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.drag' | translate }}">
+            cdkDragHandle [cdkDragHandleDisabled]="disabled" [ngClass]="{'disabled': disabled}" [dsBtnDisabled]="disabled"
+            [title]="dsoType + '.edit.metadata.edit.buttons.drag' | translate"
+            ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.drag' | translate }}">
             <i class="fas fa-grip-vertical fa-fw"></i>
           </button>
         </div>
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
index 53ebd02491..e8dfce3a7b 100644
--- a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
+++ b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
@@ -1,102 +1,120 @@
-<div class="item-metadata" *ngIf="form">
-  <div class="button-row top d-flex my-2 space-children-mr ms-gap">
-    <button class="me-auto btn btn-success" id="dso-add-btn" [dsBtnDisabled]="form.newValue || (saving$ | async)"
-            [attr.aria-label]="dsoType + '.edit.metadata.add-button' | translate"
-            [title]="dsoType + '.edit.metadata.add-button' | translate"
-            (click)="add()"><i class="fas fa-plus" aria-hidden="true"></i>
-      <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.add-button' | translate }}</span>
-    </button>
-    <button class="btn btn-warning ms-1" id="dso-reinstate-btn" *ngIf="isReinstatable" [dsBtnDisabled]="(saving$ | async)"
+@if (form) {
+  <div class="item-metadata">
+    <div class="button-row top d-flex my-2 space-children-mr ms-gap">
+      <button class="me-auto btn btn-success" id="dso-add-btn" [dsBtnDisabled]="form.newValue || (saving$ | async)"
+        [attr.aria-label]="dsoType + '.edit.metadata.add-button' | translate"
+        [title]="dsoType + '.edit.metadata.add-button' | translate"
+        (click)="add()"><i class="fas fa-plus" aria-hidden="true"></i>
+        <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.add-button' | translate }}</span>
+      </button>
+      @if (isReinstatable) {
+        <button class="btn btn-warning ms-1" id="dso-reinstate-btn" [dsBtnDisabled]="(saving$ | async)"
+          [attr.aria-label]="dsoType + '.edit.metadata.reinstate-button' | translate"
+          [title]="dsoType + '.edit.metadata.reinstate-button' | translate"
+          (click)="reinstate()"><i class="fas fa-undo-alt" aria-hidden="true"></i>
+          <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.reinstate-button' | translate }}</span>
+        </button>
+      }
+      <button class="btn btn-primary ms-1" id="dso-save-btn" [dsBtnDisabled]="!hasChanges || (saving$ | async)"
+        [attr.aria-label]="dsoType + '.edit.metadata.save-button' | translate"
+        [title]="dsoType + '.edit.metadata.save-button' | translate"
+        (click)="submit()"><i class="fas fa-save" aria-hidden="true"></i>
+        <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.save-button' | translate }}</span>
+      </button>
+      @if (!isReinstatable) {
+        <button class="btn btn-danger ms-1" id="dso-discard-btn"
+          [attr.aria-label]="dsoType + '.edit.metadata.discard-button' | translate"
+          [title]="dsoType + '.edit.metadata.discard-button' | translate"
+          [dsBtnDisabled]="!hasChanges || (saving$ | async)"
+          (click)="discard()"><i class="fas fa-times" aria-hidden="true"></i>
+          <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.discard-button' | translate }}</span>
+        </button>
+      }
+    </div>
+    <div role="table" [attr.aria-label]="'item.edit.head' | translate">
+      <ds-dso-edit-metadata-headers [dsoType]="dsoType"></ds-dso-edit-metadata-headers>
+      @if (form.newValue) {
+        <div class="d-flex flex-row ds-field-row" role="row">
+          <div class="lbl-cell ds-success" role="rowheader">
+            <ds-metadata-field-selector [dsoType]="dsoType"
+              [(mdField)]="newMdField"
+              [autofocus]="true">
+            </ds-metadata-field-selector>
+          </div>
+          <div class="flex-grow-1 ds-drop-list" role="cell">
+            <div role="table">
+              <ds-dso-edit-metadata-value-headers role="presentation" [dsoType]="dsoType"></ds-dso-edit-metadata-value-headers>
+              <ds-dso-edit-metadata-value [dso]="dso"
+                [mdValue]="form.newValue"
+                [dsoType]="dsoType"
+                [saving$]="savingOrLoadingFieldValidation$"
+                [isOnlyValue]="true"
+                [mdField]="newMdField"
+                (confirm)="confirmNewValue($event)"
+                (remove)="form.newValue = undefined"
+                (undo)="form.newValue = undefined">
+              </ds-dso-edit-metadata-value>
+            </div>
+          </div>
+        </div>
+      }
+      @for (mdField of form.fieldKeys; track mdField) {
+        <div class="d-flex flex-row ds-field-row" role="row">
+          <div class="lbl-cell" role="rowheader">
+            <span class="dont-break-out preserve-line-breaks">{{ mdField }}</span>
+            @if (form.hasOrderChanges(mdField)) {
+              <div class="btn btn-warning reset-order-button mt-2 w-100"
+                (click)="form.resetOrder(mdField); onValueSaved()">
+                {{ dsoType + '.edit.metadata.reset-order-button' | translate }}
+              </div>
+            }
+          </div>
+          <ds-dso-edit-metadata-field-values class="flex-grow-1" role="cell"
+            [dso]="dso"
+            [form]="form"
+            [dsoType]="dsoType"
+            [saving$]="saving$"
+            [draggingMdField$]="draggingMdField$"
+            [mdField]="mdField"
+            (valueSaved)="onValueSaved()">
+          </ds-dso-edit-metadata-field-values>
+        </div>
+      }
+    </div>
+    @if (isEmpty && !form.newValue) {
+      <div>
+        <ds-alert [content]="dsoType + '.edit.metadata.empty'" [type]="AlertTypeEnum.Info"></ds-alert>
+      </div>
+    }
+    <div class="button-row bottom d-inline-block w-100">
+      <div class="mt-2 float-end space-children-mr ms-gap">
+        @if (isReinstatable) {
+          <button class="btn btn-warning" [dsBtnDisabled]="(saving$ | async)"
             [attr.aria-label]="dsoType + '.edit.metadata.reinstate-button' | translate"
             [title]="dsoType + '.edit.metadata.reinstate-button' | translate"
-            (click)="reinstate()"><i class="fas fa-undo-alt" aria-hidden="true"></i>
-      <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.reinstate-button' | translate }}</span>
-    </button>
-    <button class="btn btn-primary ms-1" id="dso-save-btn" [dsBtnDisabled]="!hasChanges || (saving$ | async)"
-            [attr.aria-label]="dsoType + '.edit.metadata.save-button' | translate"
-            [title]="dsoType + '.edit.metadata.save-button' | translate"
-            (click)="submit()"><i class="fas fa-save" aria-hidden="true"></i>
-      <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.save-button' | translate }}</span>
-    </button>
-    <button class="btn btn-danger ms-1" id="dso-discard-btn" *ngIf="!isReinstatable"
+            (click)="reinstate()">
+            <i class="fas fa-undo-alt" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.reinstate-button' | translate }}
+          </button>
+        }
+        <button class="btn btn-primary" [dsBtnDisabled]="!hasChanges || (saving$ | async)"
+          [attr.aria-label]="dsoType + '.edit.metadata.save-button' | translate"
+          [title]="dsoType + '.edit.metadata.save-button' | translate"
+          (click)="submit()">
+          <i class="fas fa-save" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.save-button' | translate }}
+        </button>
+        @if (!isReinstatable) {
+          <button class="btn btn-danger"
             [attr.aria-label]="dsoType + '.edit.metadata.discard-button' | translate"
             [title]="dsoType + '.edit.metadata.discard-button' | translate"
             [dsBtnDisabled]="!hasChanges || (saving$ | async)"
-            (click)="discard()"><i class="fas fa-times" aria-hidden="true"></i>
-      <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.discard-button' | translate }}</span>
-    </button>
-  </div>
-
-  <div role="table" [attr.aria-label]="'item.edit.head' | translate">
-    <ds-dso-edit-metadata-headers [dsoType]="dsoType"></ds-dso-edit-metadata-headers>
-    <div class="d-flex flex-row ds-field-row" role="row" *ngIf="form.newValue">
-      <div class="lbl-cell ds-success" role="rowheader">
-        <ds-metadata-field-selector [dsoType]="dsoType"
-                                    [(mdField)]="newMdField"
-                                    [autofocus]="true">
-        </ds-metadata-field-selector>
-      </div>
-      <div class="flex-grow-1 ds-drop-list" role="cell">
-        <div role="table">
-          <ds-dso-edit-metadata-value-headers role="presentation" [dsoType]="dsoType"></ds-dso-edit-metadata-value-headers>
-          <ds-dso-edit-metadata-value [dso]="dso"
-                                      [mdValue]="form.newValue"
-                                      [dsoType]="dsoType"
-                                      [saving$]="savingOrLoadingFieldValidation$"
-                                      [isOnlyValue]="true"
-                                      [mdField]="newMdField"
-                                      (confirm)="confirmNewValue($event)"
-                                      (remove)="form.newValue = undefined"
-                                      (undo)="form.newValue = undefined">
-          </ds-dso-edit-metadata-value>
-        </div>
+            (click)="discard()">
+            <i class="fas fa-times" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.discard-button' | translate }}
+          </button>
+        }
       </div>
     </div>
-    <div class="d-flex flex-row ds-field-row" role="row" *ngFor="let mdField of form.fieldKeys">
-      <div class="lbl-cell" role="rowheader">
-        <span class="dont-break-out preserve-line-breaks">{{ mdField }}</span>
-        <div class="btn btn-warning reset-order-button mt-2 w-100" *ngIf="form.hasOrderChanges(mdField)"
-             (click)="form.resetOrder(mdField); onValueSaved()">
-          {{ dsoType + '.edit.metadata.reset-order-button' | translate }}
-        </div>
-      </div>
-      <ds-dso-edit-metadata-field-values class="flex-grow-1" role="cell"
-                                         [dso]="dso"
-                                         [form]="form"
-                                         [dsoType]="dsoType"
-                                         [saving$]="saving$"
-                                         [draggingMdField$]="draggingMdField$"
-                                         [mdField]="mdField"
-                                         (valueSaved)="onValueSaved()">
-      </ds-dso-edit-metadata-field-values>
-    </div>
   </div>
-
-  <div *ngIf="isEmpty && !form.newValue">
-    <ds-alert [content]="dsoType + '.edit.metadata.empty'" [type]="AlertTypeEnum.Info"></ds-alert>
-  </div>
-  <div class="button-row bottom d-inline-block w-100">
-    <div class="mt-2 float-end space-children-mr ms-gap">
-      <button class="btn btn-warning" *ngIf="isReinstatable" [dsBtnDisabled]="(saving$ | async)"
-              [attr.aria-label]="dsoType + '.edit.metadata.reinstate-button' | translate"
-              [title]="dsoType + '.edit.metadata.reinstate-button' | translate"
-              (click)="reinstate()">
-        <i class="fas fa-undo-alt" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.reinstate-button' | translate }}
-      </button>
-      <button class="btn btn-primary" [dsBtnDisabled]="!hasChanges || (saving$ | async)"
-              [attr.aria-label]="dsoType + '.edit.metadata.save-button' | translate"
-              [title]="dsoType + '.edit.metadata.save-button' | translate"
-              (click)="submit()">
-        <i class="fas fa-save" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.save-button' | translate }}
-      </button>
-      <button class="btn btn-danger" *ngIf="!isReinstatable"
-              [attr.aria-label]="dsoType + '.edit.metadata.discard-button' | translate"
-              [title]="dsoType + '.edit.metadata.discard-button' | translate"
-              [dsBtnDisabled]="!hasChanges || (saving$ | async)"
-              (click)="discard()">
-        <i class="fas fa-times" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.discard-button' | translate }}
-      </button>
-    </div>
-  </div>
-</div>
-<ds-loading *ngIf="!form"></ds-loading>
+}
+@if (!form) {
+  <ds-loading></ds-loading>
+}
diff --git a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.html b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.html
index 6b9a775391..90ec0261e2 100644
--- a/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.html
+++ b/src/app/entity-groups/research-entities/submission/item-list-elements/org-unit/org-unit-search-result-list-submission-element.component.html
@@ -1,22 +1,32 @@
 <div class="d-flex">
-<!--    <div class="person-thumbnail pe-2">-->
-<!--        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [defaultImage]="'assets/images/orgunit-placeholder.svg'"></ds-themed-thumbnail>-->
+  <!--    <div class="person-thumbnail pe-2">-->
+  <!--        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [defaultImage]="'assets/images/orgunit-placeholder.svg'"></ds-themed-thumbnail>-->
 <!--    </div>-->
-    <div class="flex-grow-1">
-        <ds-org-unit-input-suggestions *ngIf="useNameVariants" [suggestions]="allSuggestions" [(ngModel)]="selectedName" (clickSuggestion)="select($event)"
-                                       (submitSuggestion)="selectCustom($event)"></ds-org-unit-input-suggestions>
+<div class="flex-grow-1">
+  @if (useNameVariants) {
+    <ds-org-unit-input-suggestions [suggestions]="allSuggestions" [(ngModel)]="selectedName" (clickSuggestion)="select($event)"
+    (submitSuggestion)="selectCustom($event)"></ds-org-unit-input-suggestions>
+  }
 
-      <div *ngIf="!useNameVariants" class="lead" [innerHTML]="dsoTitle"></div>
+  @if (!useNameVariants) {
+    <div class="lead" [innerHTML]="dsoTitle"></div>
+  }
 
-        <span class="text-muted">
-        <span *ngIf="dso.allMetadata('organization.address.addressLocality').length > 0"
-              class="item-list-address-locality">
-                    <span [innerHTML]="firstMetadataValue(['organization.address.addressLocality'])"></span><span *ngIf="dso.allMetadata('organization.address.addressCountry').length > 0">, </span>
-        </span>
-        <span *ngIf="dso.allMetadata('organization.address.addressCountry').length > 0"
-              class="item-list-address-country">
-                    <span [innerHTML]="firstMetadataValue(['organization.address.addressCountry'])"></span>
-        </span>
-        </span>
-    </div>
+  <span class="text-muted">
+    @if (dso.allMetadata('organization.address.addressLocality').length > 0) {
+      <span
+        class="item-list-address-locality">
+        <span [innerHTML]="firstMetadataValue(['organization.address.addressLocality'])"></span>@if (dso.allMetadata('organization.address.addressCountry').length > 0) {
+        <span>, </span>
+      }
+    </span>
+  }
+  @if (dso.allMetadata('organization.address.addressCountry').length > 0) {
+    <span
+      class="item-list-address-country">
+      <span [innerHTML]="firstMetadataValue(['organization.address.addressCountry'])"></span>
+    </span>
+  }
+</span>
+</div>
 </div>
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index 5bac874479..bd18fc2a37 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -1,55 +1,51 @@
 <footer>
-  <div *ngIf="showTopFooter" class="top-footer">
-    <!-- Grid container -->
-    <div class=" container p-4">
-      <!--Grid row-->
-      <div class="row">
-
-        <!--Grid column-->
-        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
-          <h5 class="text-uppercase">Footer Content</h5>
-
-          <ul class="list-unstyled mb-0">
-            <li>
-              <a routerLink="./" class="">Lorem ipsum</a>
-            </li>
-            <li>
-              <a routerLink="./" class="">Ut facilisis</a>
-            </li>
-            <li>
-              <a routerLink="./" class="">Aenean sit</a>
-            </li>
-          </ul>
+  @if (showTopFooter) {
+    <div class="top-footer">
+      <!-- Grid container -->
+      <div class=" container p-4">
+        <!--Grid row-->
+        <div class="row">
+          <!--Grid column-->
+          <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
+            <h5 class="text-uppercase">Footer Content</h5>
+            <ul class="list-unstyled mb-0">
+              <li>
+                <a routerLink="./" class="">Lorem ipsum</a>
+              </li>
+              <li>
+                <a routerLink="./" class="">Ut facilisis</a>
+              </li>
+              <li>
+                <a routerLink="./" class="">Aenean sit</a>
+              </li>
+            </ul>
+          </div>
+          <!--Grid column-->
+          <!--Grid column-->
+          <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
+            <h5 class="text-uppercase">Footer Content</h5>
+            <ul class="list-unstyled mb-0">
+              <li>
+                <a routerLink="./" class="">Suspendisse potenti</a>
+              </li>
+            </ul>
+          </div>
+          <!--Grid column-->
+          <!--Grid column-->
+          <div class="col-lg-4 col-md-12 mb-4 mb-md-0">
+            <h5 class="text-uppercase">Footer Content</h5>
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
+              molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
+              voluptatem veniam, est atque cumque eum delectus sint!
+            </p>
+          </div>
+          <!--Grid column-->
         </div>
-        <!--Grid column-->
-
-        <!--Grid column-->
-        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
-          <h5 class="text-uppercase">Footer Content</h5>
-
-          <ul class="list-unstyled mb-0">
-            <li>
-              <a routerLink="./" class="">Suspendisse potenti</a>
-            </li>
-          </ul>
-        </div>
-        <!--Grid column-->
-
-        <!--Grid column-->
-        <div class="col-lg-4 col-md-12 mb-4 mb-md-0">
-          <h5 class="text-uppercase">Footer Content</h5>
-
-          <p>
-            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
-            molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
-            voluptatem veniam, est atque cumque eum delectus sint!
-          </p>
-        </div>
-        <!--Grid column-->
+        <!--Grid row-->
       </div>
-      <!--Grid row-->
     </div>
-  </div>
+  }
   <!-- Grid container -->
 
   <!-- Copyright -->
@@ -57,10 +53,10 @@
     <div class="content-container">
       <p class="m-0">
         <a class="text-white"
-           href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
+        href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
         {{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
         <a class="text-white"
-           href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
+        href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
       </p>
       <ul class="footer-info list-unstyled d-flex justify-content-center mb-0">
         <li>
@@ -68,26 +64,34 @@
             {{ 'footer.link.cookies' | translate}}
           </button>
         </li>
-        <li *ngIf="showPrivacyPolicy">
-          <a class="btn text-white"
-             routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
-        </li>
-        <li *ngIf="showEndUserAgreement">
-          <a class="btn text-white"
-             routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
-        </li>
-        <li *ngIf="showSendFeedback$ | async">
-          <a class="btn text-white"
-             routerLink="info/feedback">{{ 'footer.link.feedback' | translate}}</a>
-        </li>
+        @if (showPrivacyPolicy) {
+          <li>
+            <a class="btn text-white"
+            routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
+          </li>
+        }
+        @if (showEndUserAgreement) {
+          <li>
+            <a class="btn text-white"
+            routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
+          </li>
+        }
+        @if (showSendFeedback$ | async) {
+          <li>
+            <a class="btn text-white"
+            routerLink="info/feedback">{{ 'footer.link.feedback' | translate}}</a>
+          </li>
+        }
       </ul>
     </div>
-    <div *ngIf="coarLdnEnabled$ | async" class="notify-enabled text-white">
-      <a class="coar-notify-support-route" routerLink="info/coar-notify-support">
-        <img class="n-coar" src="assets/images/n-coar.svg" [attr.alt]="'menu.header.image.logo' | translate" />
-        {{ 'footer.link.coar-notify-support' | translate }}
-      </a>
-    </div>
+    @if (coarLdnEnabled$ | async) {
+      <div class="notify-enabled text-white">
+        <a class="coar-notify-support-route" routerLink="info/coar-notify-support">
+          <img class="n-coar" src="assets/images/n-coar.svg" [attr.alt]="'menu.header.image.logo' | translate" />
+          {{ 'footer.link.coar-notify-support' | translate }}
+        </a>
+      </div>
+    }
   </div>
   <!-- Copyright -->
 </footer>
diff --git a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html
index f8cad64fd5..59ce7311f8 100644
--- a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html
+++ b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.html
@@ -1,36 +1,35 @@
-<div class="container" *ngIf="(registration$ |async)">
+@if ((registration$ |async)) {
+  <div class="container">
     <h1 class="mb-4">{{'forgot-password.form.head' | translate}}</h1>
     <div class="card mb-4">
-        <div class="card-header">{{'forgot-password.form.identification.header' | translate}}</div>
-        <div class="card-body">
-            <div class="row">
-                <div class="col-12">
-                    <span class="fw-bold form-label">{{'forgot-password.form.identification.email' | translate}} </span>
-                    <span [attr.data-test]="'email' | dsBrowserOnly">{{(registration$ |async).email}}</span>
-                </div>
-            </div>
+      <div class="card-header">{{'forgot-password.form.identification.header' | translate}}</div>
+      <div class="card-body">
+        <div class="row">
+          <div class="col-12">
+            <span class="fw-bold form-label">{{'forgot-password.form.identification.email' | translate}} </span>
+            <span [attr.data-test]="'email' | dsBrowserOnly">{{(registration$ |async).email}}</span>
+          </div>
         </div>
+      </div>
     </div>
-
     <div class="card mb-4">
-        <div class="card-header">{{'forgot-password.form.card.security' | translate}}</div>
-        <div class="card-body">
-
-            <ds-profile-page-security-form
-                    [passwordCanBeEmpty]="false"
-                    [FORM_PREFIX]="'forgot-password.form.'"
-                    (isInvalid)="setInValid($event)"
-                    (passwordValue)="setPasswordValue($event)"
-            ></ds-profile-page-security-form>
-        </div>
+      <div class="card-header">{{'forgot-password.form.card.security' | translate}}</div>
+      <div class="card-body">
+        <ds-profile-page-security-form
+          [passwordCanBeEmpty]="false"
+          [FORM_PREFIX]="'forgot-password.form.'"
+          (isInvalid)="setInValid($event)"
+          (passwordValue)="setPasswordValue($event)"
+        ></ds-profile-page-security-form>
+      </div>
     </div>
-
     <div class="row">
-        <div class="col-12">
-            <button
-                    [dsBtnDisabled]="isInValid"
-                    class="btn btn-default btn-primary"
-                    (click)="submit()">{{'forgot-password.form.submit' | translate}}</button>
-        </div>
+      <div class="col-12">
+        <button
+          [dsBtnDisabled]="isInValid"
+          class="btn btn-default btn-primary"
+        (click)="submit()">{{'forgot-password.form.submit' | translate}}</button>
+      </div>
     </div>
-</div>
+  </div>
+}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 80873e7ede..67a4a96c23 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -11,13 +11,15 @@
         <ds-context-help-toggle></ds-context-help-toggle>
         <ds-auth-nav-menu></ds-auth-nav-menu>
         <ds-impersonate-navbar></ds-impersonate-navbar>
-        <div *ngIf="isMobile$ | async" class="ps-2">
-          <button class="navbar-toggler px-0" type="button" (click)="toggleNavbar()"
-                  aria-controls="collapsingNav"
-                  aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
-            <span class="fas fa-bars fa-fw toggler-icon" aria-hidden="true"></span>
-          </button>
-        </div>
+        @if (isMobile$ | async) {
+          <div class="ps-2">
+            <button class="navbar-toggler px-0" type="button" (click)="toggleNavbar()"
+              aria-controls="collapsingNav"
+              aria-expanded="false" [attr.aria-label]="'nav.toggle' | translate">
+              <span class="fas fa-bars fa-fw toggler-icon" aria-hidden="true"></span>
+            </button>
+          </div>
+        }
       </nav>
     </div>
   </div>
diff --git a/src/app/health-page/health-info/health-info-component/health-info-component.component.html b/src/app/health-page/health-info/health-info-component/health-info-component.component.html
index 073f194f7b..f15d8f17b1 100644
--- a/src/app/health-page/health-info/health-info-component/health-info-component.component.html
+++ b/src/app/health-page/health-info/health-info-component/health-info-component.component.html
@@ -1,27 +1,35 @@
-<div *ngFor="let entry of healthInfoComponent | dsObjNgFor" data-test="collapse">
-  <div *ngIf="entry && !isPlainProperty(entry.value)" class="mb-3 border-bottom">
-    <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="collapse.toggle()">
-      <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!collapse.collapsed"
-              [attr.aria-controls]="'health-info-component-' + entry.key + '-content'">
-        {{ entry.key | titlecase }}
-      </button>
-      <div class="d-flex my-auto">
-        <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
-        <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
-      </div>
-    </div>
-    <div #collapse="ngbCollapse" [id]="'health-info-component-' + entry.key + '-content'" [ngbCollapse]="isCollapsed">
-      <div class="card border-0">
-        <div class="card-body">
-          <ds-health-info-component [healthInfoComponent]="entry.value"
-                                    [healthInfoComponentName]="entry.key"
-                                    [isNested]="true"
-                                    data-test="info-component"></ds-health-info-component>
+@for (entry of healthInfoComponent | dsObjNgFor; track entry) {
+  <div data-test="collapse">
+    @if (entry && !isPlainProperty(entry.value)) {
+      <div class="mb-3 border-bottom">
+        <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="collapse.toggle()">
+          <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!collapse.collapsed"
+            [attr.aria-controls]="'health-info-component-' + entry.key + '-content'">
+            {{ entry.key | titlecase }}
+          </button>
+          <div class="d-flex my-auto">
+            @if (collapse.collapsed) {
+              <span class="fas fa-chevron-down"></span>
+            }
+            @if (!collapse.collapsed) {
+              <span class="fas fa-chevron-up"></span>
+            }
+          </div>
+        </div>
+        <div #collapse="ngbCollapse" [id]="'health-info-component-' + entry.key + '-content'" [ngbCollapse]="isCollapsed">
+          <div class="card border-0">
+            <div class="card-body">
+              <ds-health-info-component [healthInfoComponent]="entry.value"
+                [healthInfoComponentName]="entry.key"
+                [isNested]="true"
+              data-test="info-component"></ds-health-info-component>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
+    }
+    @if (entry && isPlainProperty(entry.value)) {
+      <p data-test="property"> <span class="fw-bold">{{ getPropertyLabel(entry.key) | titlecase }}</span> : {{entry.value}}</p>
+    }
   </div>
-  <ng-container *ngIf="entry && isPlainProperty(entry.value)">
-    <p data-test="property"> <span class="fw-bold">{{ getPropertyLabel(entry.key) | titlecase }}</span> : {{entry.value}}</p>
-  </ng-container>
-</div>
+}
diff --git a/src/app/health-page/health-info/health-info.component.html b/src/app/health-page/health-info/health-info.component.html
index e8d1bfb56c..432570cef0 100644
--- a/src/app/health-page/health-info/health-info.component.html
+++ b/src/app/health-page/health-info/health-info.component.html
@@ -1,22 +1,24 @@
-<ng-container *ngIf="healthInfoResponse">
+@if (healthInfoResponse) {
   <ngb-accordion #acc="ngbAccordion" [activeIds]="activeId">
-    <ngb-panel [id]="entry.key" *ngFor="let entry of healthInfoResponse | dsObjNgFor">
-      <ng-template ngbPanelTitle>
-        <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="acc.toggle(entry.key)" data-test="info-component">
-          <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="acc.isExpanded(entry.key)"
-                  [attr.aria-controls]="'health-info-' + entry.key + '-content'">
-            {{ getPanelLabel(entry.key) | titlecase }}
-          </button>
-          <div class="text-end d-flex gap-2">
-            <ds-health-status class="me-2" [status]="entry.value?.status"></ds-health-status>
+    @for (entry of healthInfoResponse | dsObjNgFor; track entry) {
+      <ngb-panel [id]="entry.key">
+        <ng-template ngbPanelTitle>
+          <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="acc.toggle(entry.key)" data-test="info-component">
+            <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="acc.isExpanded(entry.key)"
+              [attr.aria-controls]="'health-info-' + entry.key + '-content'">
+              {{ getPanelLabel(entry.key) | titlecase }}
+            </button>
+            <div class="text-end d-flex gap-2">
+              <ds-health-status class="me-2" [status]="entry.value?.status"></ds-health-status>
+            </div>
           </div>
-        </div>
-      </ng-template>
-      <ng-template ngbPanelContent>
-        <ds-health-info-component [healthInfoComponentName]="entry.key" [healthInfoComponent]="entry.value"
-                                  [id]="'health-info-' + entry.key + '-content'">
-        </ds-health-info-component>
-      </ng-template>
-    </ngb-panel>
+        </ng-template>
+        <ng-template ngbPanelContent>
+          <ds-health-info-component [healthInfoComponentName]="entry.key" [healthInfoComponent]="entry.value"
+            [id]="'health-info-' + entry.key + '-content'">
+          </ds-health-info-component>
+        </ng-template>
+      </ngb-panel>
+    }
   </ngb-accordion>
-</ng-container>
+}
diff --git a/src/app/health-page/health-panel/health-component/health-component.component.html b/src/app/health-page/health-panel/health-component/health-component.component.html
index 55e11ed6ad..37dedd7b98 100644
--- a/src/app/health-page/health-panel/health-component/health-component.component.html
+++ b/src/app/health-page/health-panel/health-component/health-component.component.html
@@ -1,30 +1,38 @@
-<ng-container *ngIf="healthComponent?.components">
-  <div *ngFor="let entry of healthComponent?.components | dsObjNgFor" class="mb-3 border-bottom" data-test="collapse">
-    <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="collapse.toggle()">
-      <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!collapse.collapsed"
-              [attr.aria-controls]="'health-component-' + entry.key + 'content'">
-        {{ entry.key | titlecase }}
-      </button>
-      <div class="d-flex my-auto">
-        <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
-        <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
+@if (healthComponent?.components) {
+  @for (entry of healthComponent?.components | dsObjNgFor; track entry) {
+    <div class="mb-3 border-bottom" data-test="collapse">
+      <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="collapse.toggle()">
+        <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="!collapse.collapsed"
+          [attr.aria-controls]="'health-component-' + entry.key + 'content'">
+          {{ entry.key | titlecase }}
+        </button>
+        <div class="d-flex my-auto">
+          @if (collapse.collapsed) {
+            <span class="fas fa-chevron-down"></span>
+          }
+          @if (!collapse.collapsed) {
+            <span class="fas fa-chevron-up"></span>
+          }
+        </div>
       </div>
-    </div>
-    <div #collapse="ngbCollapse" [id]="'health-component-' + entry.key + 'content'" [ngbCollapse]="isCollapsed">
-      <div class="card border-0">
-        <div class="card-body">
-          <ds-health-component [healthComponent]="entry.value"
-                               [healthComponentName]="entry.key"></ds-health-component>
+      <div #collapse="ngbCollapse" [id]="'health-component-' + entry.key + 'content'" [ngbCollapse]="isCollapsed">
+        <div class="card border-0">
+          <div class="card-body">
+            <ds-health-component [healthComponent]="entry.value"
+            [healthComponentName]="entry.key"></ds-health-component>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-</ng-container>
-<ng-container *ngIf="healthComponent?.details">
-  <div *ngFor="let item of healthComponent?.details | dsObjNgFor" data-test="details">
-    <p data-test="property"><span class="fw-bold">{{ getPropertyLabel(item.key) | titlecase }}</span> : {{item.value}}</p>
-  </div>
-</ng-container>
-<ng-container *ngIf="!healthComponent?.details && !healthComponent?.components">
+  }
+}
+@if (healthComponent?.details) {
+  @for (item of healthComponent?.details | dsObjNgFor; track item) {
+    <div data-test="details">
+      <p data-test="property"><span class="fw-bold">{{ getPropertyLabel(item.key) | titlecase }}</span> : {{item.value}}</p>
+    </div>
+  }
+}
+@if (!healthComponent?.details && !healthComponent?.components) {
   <ds-alert [content]="'health-page.section.no-issues'" [type]="AlertTypeEnum.Info"></ds-alert>
-</ng-container>
+}
diff --git a/src/app/health-page/health-panel/health-panel.component.html b/src/app/health-page/health-panel/health-panel.component.html
index 169cb05575..50caff35dd 100644
--- a/src/app/health-page/health-panel/health-panel.component.html
+++ b/src/app/health-page/health-panel/health-panel.component.html
@@ -3,22 +3,24 @@
   <ds-health-status [status]="healthResponse.status" class="d-inline-flex"></ds-health-status>
 </p>
 <ngb-accordion #acc="ngbAccordion" [activeIds]="activeId">
-  <ngb-panel [id]="entry.key" *ngFor="let entry of healthResponse.components | dsObjNgFor">
-    <ng-template ngbPanelTitle>
-      <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="acc.toggle(entry.key)" data-test="component">
-        <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="acc.isExpanded(entry.key)"
-                [attr.aria-controls]="'health-panel-' + entry.key + '-content'">
-          {{ getPanelLabel(entry.key) | titlecase }}
-        </button>
-        <div class="text-end d-flex gap-2">
-          <ds-health-status class="me-2" [status]="entry.value?.status"></ds-health-status>
+  @for (entry of healthResponse.components | dsObjNgFor; track entry) {
+    <ngb-panel [id]="entry.key">
+      <ng-template ngbPanelTitle>
+        <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="acc.toggle(entry.key)" data-test="component">
+          <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="acc.isExpanded(entry.key)"
+            [attr.aria-controls]="'health-panel-' + entry.key + '-content'">
+            {{ getPanelLabel(entry.key) | titlecase }}
+          </button>
+          <div class="text-end d-flex gap-2">
+            <ds-health-status class="me-2" [status]="entry.value?.status"></ds-health-status>
+          </div>
         </div>
-      </div>
-    </ng-template>
-    <ng-template ngbPanelContent>
-      <ds-health-component [healthComponent]="entry.value" [healthComponentName]="entry.key"
-                           [id]="'health-panel-' + entry.key + '-content'" role="presentation">
-      </ds-health-component>
-    </ng-template>
-  </ngb-panel>
+      </ng-template>
+      <ng-template ngbPanelContent>
+        <ds-health-component [healthComponent]="entry.value" [healthComponentName]="entry.key"
+          [id]="'health-panel-' + entry.key + '-content'" role="presentation">
+        </ds-health-component>
+      </ng-template>
+    </ngb-panel>
+  }
 </ngb-accordion>
diff --git a/src/app/health-page/health-panel/health-status/health-status.component.html b/src/app/health-page/health-panel/health-status/health-status.component.html
index ee1dabc2de..6e6a8ea190 100644
--- a/src/app/health-page/health-panel/health-status/health-status.component.html
+++ b/src/app/health-page/health-panel/health-status/health-status.component.html
@@ -1,12 +1,18 @@
-<ng-container [ngSwitch]="status">
-  <i *ngSwitchCase="HealthStatus.UP"
-     class="fa fa-check-circle text-success ms-2 mt-1"
-     ngbTooltip="{{'health-page.status.ok.info' | translate}}" container="body" ></i>
-  <i *ngSwitchCase="HealthStatus.UP_WITH_ISSUES"
-     class="fa fa-exclamation-triangle text-warning ms-2 mt-1"
-     ngbTooltip="{{'health-page.status.warning.info' | translate}}" container="body"></i>
-  <i *ngSwitchCase="HealthStatus.DOWN"
-     class="fa fa-times-circle text-danger ms-2 mt-1"
-     ngbTooltip="{{'health-page.status.error.info' | translate}}" container="body"></i>
 
-</ng-container>
+@switch (status) {
+  @case (HealthStatus.UP) {
+    <i
+      class="fa fa-check-circle text-success ms-2 mt-1"
+    ngbTooltip="{{'health-page.status.ok.info' | translate}}" container="body" ></i>
+  }
+  @case (HealthStatus.UP_WITH_ISSUES) {
+    <i
+      class="fa fa-exclamation-triangle text-warning ms-2 mt-1"
+    ngbTooltip="{{'health-page.status.warning.info' | translate}}" container="body"></i>
+  }
+  @case (HealthStatus.DOWN) {
+    <i
+      class="fa fa-times-circle text-danger ms-2 mt-1"
+    ngbTooltip="{{'health-page.status.error.info' | translate}}" container="body"></i>
+  }
+}
diff --git a/src/app/home-page/recent-item-list/recent-item-list.component.html b/src/app/home-page/recent-item-list/recent-item-list.component.html
index 7bf89b232f..4d77e5027e 100644
--- a/src/app/home-page/recent-item-list/recent-item-list.component.html
+++ b/src/app/home-page/recent-item-list/recent-item-list.component.html
@@ -1,14 +1,22 @@
 <ng-container *ngVar="(itemRD$ | async) as itemRD">
-        <div class="mt-4" [ngClass]="placeholderFontClass" *ngIf="itemRD?.hasSucceeded && itemRD?.payload?.page.length > 0" @fadeIn>
-                <div class="d-flex flex-row border-bottom mb-4 pb-4"></div>
-                <h2> {{'home.recent-submissions.head' | translate}}</h2>
-                <div class="my-4" *ngFor="let item of itemRD?.payload?.page">
-                        <ds-listable-object-component-loader [object]="item" [viewMode]="viewMode" class="pb-4">
-                        </ds-listable-object-component-loader>
-                </div>
-                <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4 float-start ng-tns-c290-40"> {{'vocabulary-treeview.load-more' | translate }} ...</button>
+  @if (itemRD?.hasSucceeded && itemRD?.payload?.page.length > 0) {
+    <div class="mt-4" [ngClass]="placeholderFontClass" @fadeIn>
+      <div class="d-flex flex-row border-bottom mb-4 pb-4"></div>
+      <h2> {{'home.recent-submissions.head' | translate}}</h2>
+      @for (item of itemRD?.payload?.page; track item) {
+        <div class="my-4">
+          <ds-listable-object-component-loader [object]="item" [viewMode]="viewMode" class="pb-4">
+          </ds-listable-object-component-loader>
         </div>
-        <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
-        <ds-loading *ngIf="!itemRD || itemRD.isLoading" message="{{'loading.recent-submissions' | translate}}">
-        </ds-loading>
+      }
+      <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4 float-start ng-tns-c290-40"> {{'vocabulary-treeview.load-more' | translate }} ...</button>
+    </div>
+  }
+  @if (itemRD?.hasFailed) {
+    <ds-error message="{{'error.recent-submissions' | translate}}"></ds-error>
+  }
+  @if (!itemRD || itemRD.isLoading) {
+    <ds-loading message="{{'loading.recent-submissions' | translate}}">
+    </ds-loading>
+  }
 </ng-container>
diff --git a/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html b/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html
index dde13db9a6..4e40883602 100644
--- a/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html
+++ b/src/app/item-page/bitstreams/request-a-copy/bitstream-request-a-copy-page.component.html
@@ -1,87 +1,101 @@
 <div class="container">
-    <h1 class="mb-4">{{'bitstream-request-a-copy.header' | translate}}</h1>
-    <div *ngIf="canDownload$|async" class="alert alert-success">
-        <span>{{'bitstream-request-a-copy.alert.canDownload1' | translate}}</span>
-        <a [routerLink]="getBitstreamLink()">{{'bitstream-request-a-copy.alert.canDownload2'| translate}}</a>
+  <h1 class="mb-4">{{'bitstream-request-a-copy.header' | translate}}</h1>
+  @if (canDownload$|async) {
+    <div class="alert alert-success">
+      <span>{{'bitstream-request-a-copy.alert.canDownload1' | translate}}</span>
+      <a [routerLink]="getBitstreamLink()">{{'bitstream-request-a-copy.alert.canDownload2'| translate}}</a>
     </div>
-    <div>
-        <p>{{'bitstream-request-a-copy.intro' | translate}} <a [routerLink]="getItemPath()">{{itemName}}</a></p>
-        <p *ngIf="bitstream !== undefined && allfiles.value === 'false'">{{'bitstream-request-a-copy.intro.bitstream.one' | translate}} {{bitstreamName}}</p>
-        <p *ngIf="allfiles.value === 'true'">{{'bitstream-request-a-copy.intro.bitstream.all' | translate}}</p>
-    </div>
-    <form [class]="'ng-invalid'" [formGroup]="requestCopyForm" (ngSubmit)="onSubmit()">
+  }
+  <div>
+    <p>{{'bitstream-request-a-copy.intro' | translate}} <a [routerLink]="getItemPath()">{{itemName}}</a></p>
+    @if (bitstream !== undefined && allfiles.value === 'false') {
+      <p>{{'bitstream-request-a-copy.intro.bitstream.one' | translate}} {{bitstreamName}}</p>
+    }
+    @if (allfiles.value === 'true') {
+      <p>{{'bitstream-request-a-copy.intro.bitstream.all' | translate}}</p>
+    }
+  </div>
+  <form [class]="'ng-invalid'" [formGroup]="requestCopyForm" (ngSubmit)="onSubmit()">
 
-        <div class="mb-3">
-            <div class="row mb-4">
-                <div class="col-12">
-                    <label for="name" class="form-label">{{'bitstream-request-a-copy.name.label' | translate}}</label>
-                    <input [className]="(name.invalid) && (name.dirty || name.touched) ? 'form-control is-invalid' :'form-control'"
-                           type="text" id="name" formControlName="name"/>
-                    <div *ngIf="name.invalid && (name.dirty || name.touched)"
-                         class="invalid-feedback show-feedback">
-                    <span *ngIf="name.errors && name.errors.required">
-                        {{ 'bitstream-request-a-copy.name.error' | translate }}
-                    </span>
-                    </div>
-                </div>
-            </div>
-            <div class="row mb-4">
-                <div class="col-12">
-                    <label
-                            for="email" class="form-label">{{'bitstream-request-a-copy.email.label' | translate}}</label>
-                    <input
-                            [className]="(email.invalid) && (email.dirty || email.touched) ? 'form-control is-invalid' :'form-control'"
-                            id="email" formControlName="email">
-                    <div *ngIf="email.invalid && (email.dirty || email.touched)"
-                         class="invalid-feedback show-feedback">
-                    <span *ngIf="email.errors">
-                        {{ 'bitstream-request-a-copy.email.error' | translate }}
-                    </span>
-                    </div>
-                    <small class="text-muted ds-hint">{{'bitstream-request-a-copy.email.hint' |translate}}</small>
-                </div>
-            </div>
-            <div class="row mb-4">
-                <div class="col-12">
-                    <div>{{'bitstream-request-a-copy.allfiles.label' |translate}}</div>
-                    <div class="ms-4 form-check">
-                        <input [className]="'form-check-input'" type="radio"
-                               id="allfiles-true" formControlName="allfiles" value="true">
-                        <label class="form-check-label"
-                               for="allfiles-true">{{'bitstream-request-a-copy.files-all-true.label' | translate}}</label>
-                    </div>
-                    <div class="ms-4">
-                        <input [className]="'form-check-input'" type="radio"
-                               id="allfiles-false" formControlName="allfiles" value="false" [attr.disabled]="bitstream === undefined ? true : null ">
-                        <label class="form-check-label"
-                               for="allfiles-false">{{'bitstream-request-a-copy.files-all-false.label' | translate}}</label>
-                    </div>
-                </div>
-            </div>
-            <div class="row mb-4">
-                <div class="col-12">
-                    <label
-                            for="message" class="form-label">{{'bitstream-request-a-copy.message.label' | translate}}</label>
-                    <textarea rows="5"
-                              [className]="'form-control'"
-                              id="message" formControlName="message"></textarea>
-                </div>
+    <div class="mb-3">
+      <div class="row mb-4">
+        <div class="col-12">
+          <label for="name" class="form-label">{{'bitstream-request-a-copy.name.label' | translate}}</label>
+          <input [className]="(name.invalid) && (name.dirty || name.touched) ? 'form-control is-invalid' :'form-control'"
+            type="text" id="name" formControlName="name"/>
+          @if (name.invalid && (name.dirty || name.touched)) {
+            <div
+              class="invalid-feedback show-feedback">
+              @if (name.errors && name.errors.required) {
+                <span>
+                  {{ 'bitstream-request-a-copy.name.error' | translate }}
+                </span>
+              }
             </div>
+          }
         </div>
-    </form>
+      </div>
+      <div class="row mb-4">
+        <div class="col-12">
+          <label
+          for="email" class="form-label">{{'bitstream-request-a-copy.email.label' | translate}}</label>
+          <input
+            [className]="(email.invalid) && (email.dirty || email.touched) ? 'form-control is-invalid' :'form-control'"
+            id="email" formControlName="email">
+          @if (email.invalid && (email.dirty || email.touched)) {
+            <div
+              class="invalid-feedback show-feedback">
+              @if (email.errors) {
+                <span>
+                  {{ 'bitstream-request-a-copy.email.error' | translate }}
+                </span>
+              }
+            </div>
+          }
+          <small class="text-muted ds-hint">{{'bitstream-request-a-copy.email.hint' |translate}}</small>
+        </div>
+      </div>
+      <div class="row mb-4">
+        <div class="col-12">
+          <div>{{'bitstream-request-a-copy.allfiles.label' |translate}}</div>
+          <div class="ms-4 form-check">
+            <input [className]="'form-check-input'" type="radio"
+              id="allfiles-true" formControlName="allfiles" value="true">
+            <label class="form-check-label"
+            for="allfiles-true">{{'bitstream-request-a-copy.files-all-true.label' | translate}}</label>
+          </div>
+          <div class="ms-4">
+            <input [className]="'form-check-input'" type="radio"
+              id="allfiles-false" formControlName="allfiles" value="false" [attr.disabled]="bitstream === undefined ? true : null ">
+            <label class="form-check-label"
+            for="allfiles-false">{{'bitstream-request-a-copy.files-all-false.label' | translate}}</label>
+          </div>
+        </div>
+      </div>
+      <div class="row mb-4">
+        <div class="col-12">
+          <label
+          for="message" class="form-label">{{'bitstream-request-a-copy.message.label' | translate}}</label>
+          <textarea rows="5"
+            [className]="'form-control'"
+          id="message" formControlName="message"></textarea>
+        </div>
+      </div>
+    </div>
+  </form>
 
-    <hr>
+  <hr>
     <div class="row">
-        <div class="col-12 text-end">
+      <div class="col-12 text-end">
 
-            <a (click)="navigateBack()" role="button" class="btn btn-outline-secondary me-1">
-                <i class="fas fa-arrow-left"></i> {{'bitstream-request-a-copy.return' | translate}}
-            </a>
+        <a (click)="navigateBack()" role="button" class="btn btn-outline-secondary me-1">
+          <i class="fas fa-arrow-left"></i> {{'bitstream-request-a-copy.return' | translate}}
+        </a>
 
-            <button
-                    [dsBtnDisabled]="requestCopyForm.invalid"
-                    class="btn btn-default btn-primary"
-                    (click)="onSubmit()">{{'bitstream-request-a-copy.submit' | translate}}</button>
-        </div>
+        <button
+          [dsBtnDisabled]="requestCopyForm.invalid"
+          class="btn btn-default btn-primary"
+        (click)="onSubmit()">{{'bitstream-request-a-copy.submit' | translate}}</button>
+      </div>
     </div>
-</div>
+  </div>
diff --git a/src/app/item-page/bitstreams/upload/upload-bitstream.component.html b/src/app/item-page/bitstreams/upload/upload-bitstream.component.html
index c055fdde68..a0f25a9d3c 100644
--- a/src/app/item-page/bitstreams/upload/upload-bitstream.component.html
+++ b/src/app/item-page/bitstreams/upload/upload-bitstream.component.html
@@ -1,41 +1,47 @@
 <div class="container">
-  <ng-container *ngIf="bundles">
+  @if (bundles) {
     <div class="row">
       <div class="col-12 mb-2">
         <h1>{{'item.bitstreams.upload.title' | translate}}</h1>
         <ng-container *ngVar="(itemRD$ | async)?.payload as item">
-          <div *ngIf="item">
-            <span class="fw-bold">{{'item.bitstreams.upload.item' | translate}}</span>
-            <span>{{ dsoNameService.getName(item) }}</span>
-          </div>
+          @if (item) {
+            <div>
+              <span class="fw-bold">{{'item.bitstreams.upload.item' | translate}}</span>
+              <span>{{ dsoNameService.getName(item) }}</span>
+            </div>
+          }
         </ng-container>
       </div>
       <div class="col-12">
         <label class="fw-bold form-label">{{'item.bitstreams.upload.bundle' | translate}}</label>
         <ds-dso-input-suggestions #f id="search-form"
-                                  [suggestions]="bundles"
-                                  [placeholder]="'item.bitstreams.upload.bundle.placeholder' | translate"
-                                  [action]="getCurrentUrl()"
-                                  [name]="'bundle-select'"
-                                  [debounceTime]="50"
-                                  [(ngModel)]="selectedBundleName"
-                                  (typeSuggestion)="bundleNameChange()"
-                                  (clickSuggestion)="onClick($event)"
-                                  (click)="f.open()"
-                                  ngDefaultControl>
+          [suggestions]="bundles"
+          [placeholder]="'item.bitstreams.upload.bundle.placeholder' | translate"
+          [action]="getCurrentUrl()"
+          [name]="'bundle-select'"
+          [debounceTime]="50"
+          [(ngModel)]="selectedBundleName"
+          (typeSuggestion)="bundleNameChange()"
+          (clickSuggestion)="onClick($event)"
+          (click)="f.open()"
+          ngDefaultControl>
         </ds-dso-input-suggestions>
-        <button *ngIf="!selectedBundleId && selectedBundleName?.length > 0" class="btn btn-success me-2" (click)="createBundle()">
-          <i class="fa fa-plus"></i> {{ 'item.bitstreams.upload.bundle.new' | translate }}
-        </button>
-        <ds-uploader  class="w-100" *ngIf="selectedBundleId"
-                      [dropMsg]="'item.bitstreams.upload.drop-message'"
-                      [dropOverDocumentMsg]="'item.bitstreams.upload.drop-message'"
-                      [enableDragOverDocument]="true"
-                      [uploadFilesOptions]="uploadFilesOptions"
-                      (onCompleteItem)="onCompleteItem($event)"
-                      (onUploadError)="onUploadError()"></ds-uploader>
+        @if (!selectedBundleId && selectedBundleName?.length > 0) {
+          <button class="btn btn-success me-2" (click)="createBundle()">
+            <i class="fa fa-plus"></i> {{ 'item.bitstreams.upload.bundle.new' | translate }}
+          </button>
+        }
+        @if (selectedBundleId) {
+          <ds-uploader  class="w-100"
+            [dropMsg]="'item.bitstreams.upload.drop-message'"
+            [dropOverDocumentMsg]="'item.bitstreams.upload.drop-message'"
+            [enableDragOverDocument]="true"
+            [uploadFilesOptions]="uploadFilesOptions"
+            (onCompleteItem)="onCompleteItem($event)"
+          (onUploadError)="onUploadError()"></ds-uploader>
+        }
         <button class="btn btn-outline-secondary" (click)="onCancel()">{{'item.bitstreams.upload.cancel' | translate}}</button>
       </div>
     </div>
-  </ng-container>
+  }
 </div>
diff --git a/src/app/item-page/edit-item-page/edit-item-page.component.html b/src/app/item-page/edit-item-page/edit-item-page.component.html
index ecba905297..0d3907c431 100644
--- a/src/app/item-page/edit-item-page/edit-item-page.component.html
+++ b/src/app/item-page/edit-item-page/edit-item-page.component.html
@@ -1,38 +1,46 @@
 <div class="container">
-    <div class="row">
-        <div class="col-12">
-            <h1 class="border-bottom">{{'item.edit.head' | translate}}</h1>
-            <div class="pt-2">
-              <ul *ngIf="pages.length > 0" class="nav nav-tabs justify-content-start" role="tablist">
-                    <li *ngFor="let page of pages" class="nav-item" role="presentation">
-                        <a *ngIf="(page.enabled | async)"
-                           [attr.aria-selected]="page.page === currentPage"
-                           class="nav-link"
-                           [ngClass]="{'active' : page.page === currentPage}"
-                           [routerLink]="['./' + page.page]"
-                           [attr.data-test]="page.page"
-                           role="tab">
-                            {{'item.edit.tabs.' + page.page + '.head' | translate}}
-                        </a>
-                        <span [ngbTooltip]="'item.edit.tabs.disabled.tooltip' | translate">
-                            <button *ngIf="(page.enabled | async) !== true"
-                                 class="nav-link disabled">
-                                {{'item.edit.tabs.' + page.page + '.head' | translate}}
-                            </button>
-                        </span>
-                    </li>
-                </ul>
-                <div class="tab-pane active">
-                    <div class="mb-4">
-                        <router-outlet></router-outlet>
-                    </div>
-                    <div class="button-row bottom">
-                      <div class="text-end">
-                        <a [routerLink]="getItemPage((itemRD$ | async)?.payload)" role="button" class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{'item.edit.return' | translate}}</a>
-                      </div>
-                    </div>
-                </div>
+  <div class="row">
+    <div class="col-12">
+      <h1 class="border-bottom">{{'item.edit.head' | translate}}</h1>
+      <div class="pt-2">
+        @if (pages.length > 0) {
+          <ul class="nav nav-tabs justify-content-start" role="tablist">
+            @for (page of pages; track page) {
+              <li class="nav-item" role="presentation">
+                @if ((page.enabled | async)) {
+                  <a
+                    [attr.aria-selected]="page.page === currentPage"
+                    class="nav-link"
+                    [ngClass]="{'active' : page.page === currentPage}"
+                    [routerLink]="['./' + page.page]"
+                    [attr.data-test]="page.page"
+                    role="tab">
+                    {{'item.edit.tabs.' + page.page + '.head' | translate}}
+                  </a>
+                }
+                <span [ngbTooltip]="'item.edit.tabs.disabled.tooltip' | translate">
+                  @if ((page.enabled | async) !== true) {
+                    <button
+                      class="nav-link disabled">
+                      {{'item.edit.tabs.' + page.page + '.head' | translate}}
+                    </button>
+                  }
+                </span>
+              </li>
+            }
+          </ul>
+        }
+        <div class="tab-pane active">
+          <div class="mb-4">
+            <router-outlet></router-outlet>
+          </div>
+          <div class="button-row bottom">
+            <div class="text-end">
+              <a [routerLink]="getItemPage((itemRD$ | async)?.payload)" role="button" class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{'item.edit.return' | translate}}</a>
             </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </div>
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
index b5d74d81f3..15d713bdaf 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html
@@ -5,73 +5,93 @@
 
   <div class="button-row top d-flex mt-2 space-children-mr">
     <button class="me-auto btn btn-success"
-            [attr.aria-label]="'item.edit.bitstreams.upload-button' | translate"
-            [routerLink]="[itemPageRoute, 'bitstreams', 'new']"><i
-            class="fas fa-upload"></i>
-      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.upload-button" | translate}}</span>
-    </button>
-    <button class="btn btn-warning" *ngIf="isReinstatable$ | async"
-            [attr.aria-label]="'item.edit.bitstreams.reinstate-button' | translate"
-            (click)="reinstate()"><i
-            class="fas fa-undo-alt"></i>
-      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.reinstate-button" | translate}}</span>
-    </button>
-    <button class="btn btn-primary" [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
-            [attr.aria-label]="'item.edit.bitstreams.save-button' | translate"
-            (click)="submit()"><i
-            class="fas fa-save"></i>
-      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.save-button" | translate}}</span>
-    </button>
-    <button class="btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
-            [attr.aria-label]="'item.edit.bitstreams.discard-button' | translate"
-            [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
-            (click)="discard()"><i
-            class="fas fa-times"></i>
-      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.discard-button" | translate}}</span>
-    </button>
-  </div>
-
-  <div *ngIf="item && bundles?.length > 0" class="mt-4 table-border scrollable-table" [ngClass]="{'disabled-overlay': (isProcessingMoveRequest | async)}">
-    <ds-item-edit-bitstream-bundle *ngFor="let bundle of bundles; first as isFirst"
-                                   [bundle]="bundle"
-                                   [item]="item"
-                                   [columnSizes]="columnSizes"
-                                   [isFirstTable]="isFirst"
-                                   aria-describedby="reorder-description">
-    </ds-item-edit-bitstream-bundle>
-    <div class="d-flex justify-content-center" *ngIf="showLoadMoreLink$ | async">
-      <button class="btn btn-link my-3" (click)="loadBundles()"> {{'item.edit.bitstreams.load-more.link' | translate}}</button>
-    </div>
-  </div>
-  <div *ngIf="bundles?.length === 0"
-       class="alert alert-info w-100 d-inline-block mt-4" role="alert">
-    {{'item.edit.bitstreams.empty' | translate}}
-  </div>
-  <ds-loading *ngIf="!bundles" message="{{'loading.bitstreams' | translate}}"></ds-loading>
-
-  <div class="button-row bottom">
-    <div class="mt-4 float-end space-children-mr ms-gap">
-      <button class="btn btn-warning" *ngIf="isReinstatable$ | async"
-              [attr.aria-label]="'item.edit.bitstreams.reinstate-button' | translate"
-              (click)="reinstate()"><i
-        class="fas fa-undo-alt"></i>
-        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.reinstate-button" | translate}}</span>
-      </button>
-      <button class="btn btn-primary" [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
-              [attr.aria-label]="'item.edit.bitstreams.save-button' | translate"
-              (click)="submit()"><i
-        class="fas fa-save"></i>
-        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.save-button" | translate}}</span>
-      </button>
-      <button class="btn btn-danger" *ngIf="(isReinstatable$ | async) !== true"
-              [attr.aria-label]="'item.edit.bitstreams.discard-button' | translate"
-              [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
-              (click)="discard()"><i
-        class="fas fa-times"></i>
-        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.discard-button" | translate}}</span>
-      </button>
-    </div>
-  </div>
+      [attr.aria-label]="'item.edit.bitstreams.upload-button' | translate"
+      [routerLink]="[itemPageRoute, 'bitstreams', 'new']"><i
+    class="fas fa-upload"></i>
+    <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.upload-button" | translate}}</span>
+  </button>
+  @if (isReinstatable$ | async) {
+    <button class="btn btn-warning"
+      [attr.aria-label]="'item.edit.bitstreams.reinstate-button' | translate"
+      (click)="reinstate()"><i
+    class="fas fa-undo-alt"></i>
+    <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.reinstate-button" | translate}}</span>
+  </button>
+}
+<button class="btn btn-primary" [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
+  [attr.aria-label]="'item.edit.bitstreams.save-button' | translate"
+  (click)="submit()"><i
+class="fas fa-save"></i>
+<span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.save-button" | translate}}</span>
+</button>
+@if ((isReinstatable$ | async) !== true) {
+  <button class="btn btn-danger"
+    [attr.aria-label]="'item.edit.bitstreams.discard-button' | translate"
+    [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
+    (click)="discard()"><i
+  class="fas fa-times"></i>
+  <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.discard-button" | translate}}</span>
+</button>
+}
 </div>
 
-<ds-loading *ngIf="isProcessingMoveRequest | async" class="loading-overlay"></ds-loading>
+@if (item && bundles?.length > 0) {
+  <div class="mt-4 table-border scrollable-table" [ngClass]="{'disabled-overlay': (isProcessingMoveRequest | async)}">
+    @for (bundle of bundles; track bundle; let isFirst = $first) {
+      <ds-item-edit-bitstream-bundle
+        [bundle]="bundle"
+        [item]="item"
+        [columnSizes]="columnSizes"
+        [isFirstTable]="isFirst"
+        aria-describedby="reorder-description">
+      </ds-item-edit-bitstream-bundle>
+    }
+    @if (showLoadMoreLink$ | async) {
+      <div class="d-flex justify-content-center">
+        <button class="btn btn-link my-3" (click)="loadBundles()"> {{'item.edit.bitstreams.load-more.link' | translate}}</button>
+      </div>
+    }
+  </div>
+}
+@if (bundles?.length === 0) {
+  <div
+    class="alert alert-info w-100 d-inline-block mt-4" role="alert">
+    {{'item.edit.bitstreams.empty' | translate}}
+  </div>
+}
+@if (!bundles) {
+  <ds-loading message="{{'loading.bitstreams' | translate}}"></ds-loading>
+}
+
+<div class="button-row bottom">
+  <div class="mt-4 float-end space-children-mr ms-gap">
+    @if (isReinstatable$ | async) {
+      <button class="btn btn-warning"
+        [attr.aria-label]="'item.edit.bitstreams.reinstate-button' | translate"
+        (click)="reinstate()"><i
+      class="fas fa-undo-alt"></i>
+      <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.reinstate-button" | translate}}</span>
+    </button>
+  }
+  <button class="btn btn-primary" [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
+    [attr.aria-label]="'item.edit.bitstreams.save-button' | translate"
+    (click)="submit()"><i
+  class="fas fa-save"></i>
+  <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.save-button" | translate}}</span>
+</button>
+@if ((isReinstatable$ | async) !== true) {
+  <button class="btn btn-danger"
+    [attr.aria-label]="'item.edit.bitstreams.discard-button' | translate"
+    [dsBtnDisabled]="(hasChanges$ | async) !== true || submitting"
+    (click)="discard()"><i
+  class="fas fa-times"></i>
+  <span class="d-none d-sm-inline">&nbsp;{{"item.edit.bitstreams.discard-button" | translate}}</span>
+</button>
+}
+</div>
+</div>
+</div>
+
+@if (isProcessingMoveRequest | async) {
+  <ds-loading class="loading-overlay"></ds-loading>
+}
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html
index 4450e62ec7..f55821f04f 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html
@@ -1,140 +1,137 @@
 <ng-template #bundleView>
 
-  <ds-pagination *ngIf="(bitstreamsRD$ | async)?.payload as bitstreamsList"
-                 [hideGear]="true"
-                 [hidePagerWhenSinglePage]="true"
-                 [hidePaginationDetail]="true"
-                 [paginationOptions]="paginationOptions"
-                 [collectionSize]="bitstreamsList.totalElements"
-                 [retainScrollPosition]="true"
-                 [ngbTooltip]="'item.edit.bitstreams.bundle.tooltip' | translate" placement="bottom"
-                 [autoClose]="false" triggers="manual" #dragTooltip="ngbTooltip">
-    <ng-container *ngIf="(updates$ | async) as updates">
-
-      <table class="table" [class.mt-n1]="!isFirstTable"
-             [attr.aria-label]="'item.edit.bitstreams.bundle.table.aria-label' | translate: { bundle: bundleName } ">
-        <thead [class.visually-hidden]="!isFirstTable">
-        <tr class="header-row font-weight-bold">
-          <th id="name" scope="col" class="{{ columnSizes.columns[0].buildClasses() }}">
-            {{'item.edit.bitstreams.headers.name' | translate}}
-          </th>
-          <th id="description" scope="col" class="{{ columnSizes.columns[1].buildClasses() }}">
-            {{'item.edit.bitstreams.headers.description' | translate}}
-          </th>
-          <th id="format" scope="col" class="{{ columnSizes.columns[2].buildClasses() }}">
-            {{'item.edit.bitstreams.headers.format' | translate}}
-          </th>
-          <th id="actions" scope="col" class="{{ columnSizes.columns[3].buildClasses() }} text-center">
-            {{'item.edit.bitstreams.headers.actions' | translate}}
-          </th>
-        </tr>
-        </thead>
-
-        <tbody cdkDropList (cdkDropListDropped)="drop($event)">
-        <tr class="bundle-row">
-          <th id="{{ bundleName }}" class="span" colspan="3" scope="colgroup">
-            {{'item.edit.bitstreams.bundle.name' | translate:{ name: bundleName } }}
-          </th>
-          <td class="text-center">
-
-            <div class="btn-group">
-              <button [routerLink]="[itemPageRoute, 'bitstreams', 'new']"
-                      [queryParams]="{bundle: bundle.id}"
-                      [attr.aria-label]="'item.edit.bitstreams.bundle.edit.buttons.upload' | translate"
-                      class="btn btn-outline-success btn-sm"
-                      title="{{'item.edit.bitstreams.bundle.edit.buttons.upload' | translate}}">
-                <i class="fas fa-upload fa-fw"></i>
-              </button>
-              <div ngbDropdown #paginationControls="ngbDropdown" class="btn-group float-right btn-sm p-0"
-                   placement="bottom-right">
-                <button class="btn btn-outline-secondary" id="paginationControls" ngbDropdownToggle
-                        [title]="'pagination.options.description' | translate"
-                        [attr.aria-label]="'pagination.options.description' | translate" aria-haspopup="true"
-                        aria-expanded="false">
-                  <i class="fas fa-cog" aria-hidden="true"></i>
-                </button>
-
-                <ul id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" role="menu"
-                    ngbDropdownMenu>
-                  <li role="menuitem">
-                    <span class="dropdown-header" id="pagination-control_results-per-page"
-                          role="heading">{{ 'pagination.results-per-page' | translate}}</span>
-                    <ul aria-labelledby="pagination-control_results-per-page" class="list-unstyled" role="listbox">
-                      <li *ngFor="let size of paginationOptions.pageSizeOptions" role="option"
-                          [attr.aria-selected]="size === (pageSize$ | async)">
-                        <button (click)="doPageSizeChange(size)" class="dropdown-item">
-                          <i [ngClass]="{'invisible': size !== (pageSize$ | async) }" class="fas fa-check"
-                             aria-hidden="true"></i> {{size}}
-                        </button>
+  @if ((bitstreamsRD$ | async)?.payload; as bitstreamsList) {
+    <ds-pagination
+      [hideGear]="true"
+      [hidePagerWhenSinglePage]="true"
+      [hidePaginationDetail]="true"
+      [paginationOptions]="paginationOptions"
+      [collectionSize]="bitstreamsList.totalElements"
+      [retainScrollPosition]="true"
+      [ngbTooltip]="'item.edit.bitstreams.bundle.tooltip' | translate" placement="bottom"
+      [autoClose]="false" triggers="manual" #dragTooltip="ngbTooltip">
+      @if ((updates$ | async); as updates) {
+        <table class="table" [class.mt-n1]="!isFirstTable"
+          [attr.aria-label]="'item.edit.bitstreams.bundle.table.aria-label' | translate: { bundle: bundleName } ">
+          <thead [class.visually-hidden]="!isFirstTable">
+            <tr class="header-row font-weight-bold">
+              <th id="name" scope="col" class="{{ columnSizes.columns[0].buildClasses() }}">
+                {{'item.edit.bitstreams.headers.name' | translate}}
+              </th>
+              <th id="description" scope="col" class="{{ columnSizes.columns[1].buildClasses() }}">
+                {{'item.edit.bitstreams.headers.description' | translate}}
+              </th>
+              <th id="format" scope="col" class="{{ columnSizes.columns[2].buildClasses() }}">
+                {{'item.edit.bitstreams.headers.format' | translate}}
+              </th>
+              <th id="actions" scope="col" class="{{ columnSizes.columns[3].buildClasses() }} text-center">
+                {{'item.edit.bitstreams.headers.actions' | translate}}
+              </th>
+            </tr>
+          </thead>
+          <tbody cdkDropList (cdkDropListDropped)="drop($event)">
+            <tr class="bundle-row">
+              <th id="{{ bundleName }}" class="span" colspan="3" scope="colgroup">
+                {{'item.edit.bitstreams.bundle.name' | translate:{ name: bundleName } }}
+              </th>
+              <td class="text-center">
+                <div class="btn-group">
+                  <button [routerLink]="[itemPageRoute, 'bitstreams', 'new']"
+                    [queryParams]="{bundle: bundle.id}"
+                    [attr.aria-label]="'item.edit.bitstreams.bundle.edit.buttons.upload' | translate"
+                    class="btn btn-outline-success btn-sm"
+                    title="{{'item.edit.bitstreams.bundle.edit.buttons.upload' | translate}}">
+                    <i class="fas fa-upload fa-fw"></i>
+                  </button>
+                  <div ngbDropdown #paginationControls="ngbDropdown" class="btn-group float-right btn-sm p-0"
+                    placement="bottom-right">
+                    <button class="btn btn-outline-secondary" id="paginationControls" ngbDropdownToggle
+                      [title]="'pagination.options.description' | translate"
+                      [attr.aria-label]="'pagination.options.description' | translate" aria-haspopup="true"
+                      aria-expanded="false">
+                      <i class="fas fa-cog" aria-hidden="true"></i>
+                    </button>
+                    <ul id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" role="menu"
+                      ngbDropdownMenu>
+                      <li role="menuitem">
+                        <span class="dropdown-header" id="pagination-control_results-per-page"
+                        role="heading">{{ 'pagination.results-per-page' | translate}}</span>
+                        <ul aria-labelledby="pagination-control_results-per-page" class="list-unstyled" role="listbox">
+                          @for (size of paginationOptions.pageSizeOptions; track size) {
+                            <li role="option"
+                              [attr.aria-selected]="size === (pageSize$ | async)">
+                              <button (click)="doPageSizeChange(size)" class="dropdown-item">
+                                <i [ngClass]="{'invisible': size !== (pageSize$ | async) }" class="fas fa-check"
+                                aria-hidden="true"></i> {{size}}
+                              </button>
+                            </li>
+                          }
+                        </ul>
                       </li>
                     </ul>
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-          </td>
-        </tr>
-
-        <ng-container *ngFor="let entry of (tableEntries$ | async)">
-          <tr *ngIf="updates[entry.id] as update" [ngClass]="getRowClass(update, entry)" class="bitstream-row" cdkDrag
-              (cdkDragStarted)="dragStart()" (cdkDragEnded)="dragEnd()">
-
-            <th class="bitstream-name row-element {{ columnSizes.columns[0].buildClasses() }}"
-                scope="row" id="{{ entry.nameStripped }}" headers="{{ bundleName }} name">
-              <div class="drag-handle text-muted float-left p-1 mr-2 d-inline" tabindex="0" cdkDragHandle
-                   (keydown.enter)="select($event, entry)" (keydown.space)="select($event, entry)" (click)="select($event, entry)">
-                <i class="fas fa-grip-vertical fa-fw"
-                   [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
-              </div>
-              {{ entry.name }}
-            </th>
-            <td class="row-element {{ columnSizes.columns[1].buildClasses() }}"
-                headers="{{ entry.nameStripped }} {{ bundleName }} description">
-              {{ entry.description }}
-            </td>
-            <td class="row-element {{ columnSizes.columns[2].buildClasses() }}"
-                headers="{{ entry.nameStripped }} {{ bundleName }} format">
-              {{ (entry.format | async)?.shortDescription }}
-            </td>
-            <td class="row-element {{ columnSizes.columns[3].buildClasses() }}"
-                headers="{{ entry.nameStripped }} {{ bundleName }} actions">
-              <div class="text-center w-100">
-                <div class="btn-group relationship-action-buttons">
-                  <a [href]="entry.downloadUrl"
-                     [attr.aria-label]="'item.edit.bitstreams.edit.buttons.download' | translate"
-                     class="btn btn-outline-primary btn-sm"
-                     title="{{'item.edit.bitstreams.edit.buttons.download' | translate}}"
-                     [attr.data-test]="'download-button' | dsBrowserOnly">
-                    <i class="fas fa-download fa-fw"></i>
-                  </a>
-                  <button [routerLink]="['/bitstreams/', entry.id, 'edit']" class="btn btn-outline-primary btn-sm"
+                  </div>
+                </div>
+              </td>
+            </tr>
+            @for (entry of (tableEntries$ | async); track entry) {
+              @if (updates[entry.id]; as update) {
+                <tr [ngClass]="getRowClass(update, entry)" class="bitstream-row" cdkDrag
+                  (cdkDragStarted)="dragStart()" (cdkDragEnded)="dragEnd()">
+                  <th class="bitstream-name row-element {{ columnSizes.columns[0].buildClasses() }}"
+                    scope="row" id="{{ entry.nameStripped }}" headers="{{ bundleName }} name">
+                    <div class="drag-handle text-muted float-left p-1 mr-2 d-inline" tabindex="0" cdkDragHandle
+                      (keydown.enter)="select($event, entry)" (keydown.space)="select($event, entry)" (click)="select($event, entry)">
+                      <i class="fas fa-grip-vertical fa-fw"
+                      [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
+                    </div>
+                    {{ entry.name }}
+                  </th>
+                  <td class="row-element {{ columnSizes.columns[1].buildClasses() }}"
+                    headers="{{ entry.nameStripped }} {{ bundleName }} description">
+                    {{ entry.description }}
+                  </td>
+                  <td class="row-element {{ columnSizes.columns[2].buildClasses() }}"
+                    headers="{{ entry.nameStripped }} {{ bundleName }} format">
+                    {{ (entry.format | async)?.shortDescription }}
+                  </td>
+                  <td class="row-element {{ columnSizes.columns[3].buildClasses() }}"
+                    headers="{{ entry.nameStripped }} {{ bundleName }} actions">
+                    <div class="text-center w-100">
+                      <div class="btn-group relationship-action-buttons">
+                        <a [href]="entry.downloadUrl"
+                          [attr.aria-label]="'item.edit.bitstreams.edit.buttons.download' | translate"
+                          class="btn btn-outline-primary btn-sm"
+                          title="{{'item.edit.bitstreams.edit.buttons.download' | translate}}"
+                          [attr.data-test]="'download-button' | dsBrowserOnly">
+                          <i class="fas fa-download fa-fw"></i>
+                        </a>
+                        <button [routerLink]="['/bitstreams/', entry.id, 'edit']" class="btn btn-outline-primary btn-sm"
                           [attr.aria-label]="'item.edit.bitstreams.edit.buttons.edit' | translate"
                           title="{{'item.edit.bitstreams.edit.buttons.edit' | translate}}">
-                    <i class="fas fa-edit fa-fw"></i>
-                  </button>
-                  <button [dsBtnDisabled]="!canRemove(update)" (click)="remove(entry.bitstream)"
+                          <i class="fas fa-edit fa-fw"></i>
+                        </button>
+                        <button [dsBtnDisabled]="!canRemove(update)" (click)="remove(entry.bitstream)"
                           [attr.aria-label]=" 'item. edit bitstreams.edit.buttons.remove' | translate"
                           class="btn btn-outline-danger btn-sm"
                           title="{{'item.edit.bitstreams.edit.buttons.remove' | translate}}">
-                    <i class="fas fa-trash-alt fa-fw"></i>
-                  </button>
-                  <button [dsBtnDisabled]="!canUndo(update)" (click)="undo(entry.bitstream)"
+                          <i class="fas fa-trash-alt fa-fw"></i>
+                        </button>
+                        <button [dsBtnDisabled]="!canUndo(update)" (click)="undo(entry.bitstream)"
                           [attr.aria-label]="'item.edit.bitstreams.edit.buttons.undo' | translate"
                           class="btn btn-outline-warning btn-sm"
                           title="{{'item.edit.bitstreams.edit.buttons.undo' | translate}}">
-                    <i class="fas fa-undo-alt fa-fw"></i>
-                  </button>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </ng-container>
-
-        </tbody>
-      </table>
-
-    </ng-container>
-  </ds-pagination>
+                          <i class="fas fa-undo-alt fa-fw"></i>
+                        </button>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              }
+            }
+          </tbody>
+        </table>
+      }
+    </ds-pagination>
+  }
 
 </ng-template>
diff --git a/src/app/item-page/edit-item-page/item-delete/item-delete.component.html b/src/app/item-page/edit-item-page/item-delete/item-delete.component.html
index 5ed36347cb..dc236be398 100644
--- a/src/app/item-page/edit-item-page/item-delete/item-delete.component.html
+++ b/src/app/item-page/edit-item-page/item-delete/item-delete.component.html
@@ -1,99 +1,99 @@
 <div class="container">
-    <div class="row">
-        <div class="col-12">
+  <div class="row">
+    <div class="col-12">
 
-            <h1>{{headerMessage | translate: {id: item.handle} }}</h1>
-            <p>{{descriptionMessage | translate}}</p>
-            <ds-modify-item-overview [item]="item"></ds-modify-item-overview>
+      <h1>{{headerMessage | translate: {id: item.handle} }}</h1>
+      <p>{{descriptionMessage | translate}}</p>
+      <ds-modify-item-overview [item]="item"></ds-modify-item-overview>
 
-            <ng-container *ngVar="(typeDTOs$ | async) as types">
+      <ng-container>
 
-                <div *ngIf="types && types.length > 0" class="mb-4">
-
-                    {{'virtual-metadata.delete-item.info' | translate}}
-
-                    <div *ngFor="let typeDto of types" class="mb-4">
-                        <div *ngVar="(typeDto.isSelected$ | async) as selected"
-                             class="d-flex flex-row">
-
-                            <div class="m-2" (click)="setSelected(typeDto.relationshipType, !selected)">
-                                <label>
-                                    <input type="checkbox" [checked]="selected" [disabled]="isDeleting$ | async">
-                                </label>
+        @if ((typeDTOs$ | async) && (typeDTOs$ | async).length > 0) {
+          <div class="mb-4">
+            {{'virtual-metadata.delete-item.info' | translate}}
+            @for (typeDto of (typeDTOs$ | async); track typeDto) {
+              <div class="mb-4">
+                <div *ngVar="(typeDto.isSelected$ | async) as selected"
+                  class="d-flex flex-row">
+                  <div class="m-2" (click)="setSelected(typeDto.relationshipType, !selected)">
+                    <label>
+                      <input type="checkbox" [checked]="selected" [disabled]="isDeleting$ | async">
+                    </label>
+                  </div>
+                  <div class="flex-column flex-grow-1">
+                    <h5 (click)="setSelected(typeDto.relationshipType, !selected)">
+                      {{getRelationshipMessageKey(typeDto.label$ | async) | translate}}
+                    </h5>
+                    @for (relationshipDto of (typeDto.relationshipDTOs$ | async); track relationshipDto.relationship.id) {
+                      <div
+                        class="d-flex flex-row">
+                        <ng-container *ngVar="(relationshipDto.relatedItem$ | async) as relatedItem">
+                          @if (relatedItem) {
+                            <ds-listable-object-component-loader
+                              [object]="relatedItem"
+                              [viewMode]="viewMode">
+                            </ds-listable-object-component-loader>
+                          }
+                          <div class="ms-auto">
+                            <div class="btn-group">
+                              <button class="btn btn-outline-info btn-sm"
+                                (click)="openVirtualMetadataModal(virtualMetadataModal)">
+                                <i class="fas fa-info fa-fw"></i>
+                              </button>
                             </div>
-
-                            <div class="flex-column flex-grow-1">
-                                <h5 (click)="setSelected(typeDto.relationshipType, !selected)">
-                                    {{getRelationshipMessageKey(typeDto.label$ | async) | translate}}
-                                </h5>
-                                <div *ngFor="let relationshipDto of (typeDto.relationshipDTOs$ | async)"
-                                     class="d-flex flex-row">
-                                    <ng-container *ngVar="(relationshipDto.relatedItem$ | async) as relatedItem">
-
-                                        <ds-listable-object-component-loader
-                                                *ngIf="relatedItem"
-                                                [object]="relatedItem"
-                                                [viewMode]="viewMode">
-                                        </ds-listable-object-component-loader>
-                                        <div class="ms-auto">
-                                            <div class="btn-group">
-                                                <button class="btn btn-outline-info btn-sm"
-                                                        (click)="openVirtualMetadataModal(virtualMetadataModal)">
-                                                    <i class="fas fa-info fa-fw"></i>
-                                                </button>
-                                            </div>
-                                        </div>
-
-                                        <ng-template #virtualMetadataModal>
-                                            <div class="thumb-font-1">
-                                                <div class="modal-header">
-                                                    {{'virtual-metadata.delete-item.modal-head' | translate}}
-                                                    <button type="button" class="btn-close"
-                                                            (click)="closeVirtualMetadataModal()" aria-label="Close">
-                                                    </button>
-                                                </div>
-                                                <div class="modal-body">
-                                                    <ds-listable-object-component-loader
-                                                            *ngIf="relatedItem"
-                                                            [object]="relatedItem"
-                                                            [viewMode]="viewMode">
-                                                    </ds-listable-object-component-loader>
-                                                    <div *ngFor="let metadata of (relationshipDto.virtualMetadata$ | async)">
-                                                        <div>
-                                                            <div class="fw-bold">
-                                                                {{metadata.metadataField}}
-                                                            </div>
-                                                            <div>
-                                                                {{metadata.metadataValue.value}}
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </ng-template>
-
-                                    </ng-container>
-                                </div>
+                          </div>
+                          <ng-template #virtualMetadataModal>
+                            <div class="thumb-font-1">
+                              <div class="modal-header">
+                                {{'virtual-metadata.delete-item.modal-head' | translate}}
+                                <button type="button" class="btn-close"
+                                  (click)="closeVirtualMetadataModal()" aria-label="Close">
+                                </button>
+                              </div>
+                              <div class="modal-body">
+                                @if (relatedItem) {
+                                  <ds-listable-object-component-loader
+                                    [object]="relatedItem"
+                                    [viewMode]="viewMode">
+                                  </ds-listable-object-component-loader>
+                                }
+                                @for (metadata of (relationshipDto.virtualMetadata$ | async); track metadata) {
+                                  <div>
+                                    <div>
+                                      <div class="fw-bold">
+                                        {{metadata.metadataField}}
+                                      </div>
+                                      <div>
+                                        {{metadata.metadataValue.value}}
+                                      </div>
+                                    </div>
+                                  </div>
+                                }
+                              </div>
                             </div>
-
-                        </div>
-
-                    </div>
-
+                          </ng-template>
+                        </ng-container>
+                      </div>
+                    }
+                  </div>
                 </div>
+              </div>
+            }
+          </div>
+        }
 
-            </ng-container>
+      </ng-container>
 
-            <div class="space-children-mr">
-              <button [dsBtnDisabled]="isDeleting$ | async" (click)="performAction()"
-                      class="btn btn-outline-secondary perform-action">{{confirmMessage | translate}}
-              </button>
-              <button [dsBtnDisabled]="isDeleting$ | async" [routerLink]="[itemPageRoute, 'edit']"
-                      class="btn btn-outline-secondary cancel">
-                {{cancelMessage| translate}}
-              </button>
-            </div>
+      <div class="space-children-mr">
+        <button [dsBtnDisabled]="isDeleting$ | async" (click)="performAction()"
+          class="btn btn-outline-secondary perform-action">{{confirmMessage | translate}}
+        </button>
+        <button [dsBtnDisabled]="isDeleting$ | async" [routerLink]="[itemPageRoute, 'edit']"
+          class="btn btn-outline-secondary cancel">
+          {{cancelMessage| translate}}
+        </button>
+      </div>
 
-        </div>
     </div>
+  </div>
 </div>
diff --git a/src/app/item-page/edit-item-page/item-move/item-move.component.html b/src/app/item-page/edit-item-page/item-move/item-move.component.html
index fa4bacab0e..e2cd2d88af 100644
--- a/src/app/item-page/edit-item-page/item-move/item-move.component.html
+++ b/src/app/item-page/edit-item-page/item-move/item-move.component.html
@@ -1,58 +1,62 @@
 <div class="container">
-    <div class="row">
+  <div class="row">
+    <div class="col-12">
+      <h1>{{'item.edit.move.head' | translate: {id: (itemRD$ | async)?.payload?.handle} }}</h1>
+      <p>{{'item.edit.move.description' | translate}}</p>
+      <div class="row">
         <div class="col-12">
-            <h1>{{'item.edit.move.head' | translate: {id: (itemRD$ | async)?.payload?.handle} }}</h1>
-            <p>{{'item.edit.move.description' | translate}}</p>
-            <div class="row">
-                <div class="col-12">
-                  <div class="card mb-3">
-                    <div class="card-header">{{'dso-selector.placeholder' | translate: { type: 'dso-selector.placeholder.type.collection' | translate } }}</div>
-                    <div class="card-body">
-                      <ds-authorized-collection-selector [types]="COLLECTIONS"
-                                                         [currentDSOId]="selectedCollection ? selectedCollection.id : originalCollection.id"
-                                                         (onSelect)="selectDso($event)">
-                      </ds-authorized-collection-selector>
-                    </div>
-                    <div></div>
-                  </div>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-12">
-                    <p>
-                      <label class="form-label" for="inheritPoliciesCheckbox">
-                        <ng-template #tooltipContent>
-                          {{ 'item.edit.move.inheritpolicies.tooltip' | translate }}
-                        </ng-template>
-                        <input type="checkbox" name="tc" [(ngModel)]="inheritPolicies" id="inheritPoliciesCheckbox" [ngbTooltip]="tooltipContent"
-                        >
-                        {{'item.edit.move.inheritpolicies.checkbox' |translate}}
-                      </label>
-                    </p>
-                    <p>
-                        {{'item.edit.move.inheritpolicies.description' | translate}}
-                    </p>
-                </div>
-            </div>
-
-          <div class="button-row bottom">
-            <div class="float-end space-children-mr">
-              <button [routerLink]="[(itemPageRoute$ | async), 'edit']" class="btn btn-outline-secondary">
-                <i class="fas fa-arrow-left"></i> {{'item.edit.move.cancel' | translate}}
-              </button>
-              <button class="btn btn-primary" [dsBtnDisabled]="!canMove" (click)="moveToCollection()">
-              <span *ngIf="!processing">
-                <i class="fas fa-save"></i> {{'item.edit.move.save-button' | translate}}
-              </span>
-              <span *ngIf="processing">
-                <i class="fas fa-circle-notch fa-spin"></i> {{'item.edit.move.processing' | translate}}
-              </span>
-              </button>
-              <button class="btn btn-danger" [dsBtnDisabled]="!canSubmit" (click)="discard()">
-                <i class="fas fa-times"></i> {{"item.edit.move.discard-button" | translate}}
-              </button>
+          <div class="card mb-3">
+            <div class="card-header">{{'dso-selector.placeholder' | translate: { type: 'dso-selector.placeholder.type.collection' | translate } }}</div>
+            <div class="card-body">
+              <ds-authorized-collection-selector [types]="COLLECTIONS"
+                [currentDSOId]="selectedCollection ? selectedCollection.id : originalCollection.id"
+                (onSelect)="selectDso($event)">
+              </ds-authorized-collection-selector>
             </div>
+            <div></div>
           </div>
         </div>
+      </div>
+      <div class="row">
+        <div class="col-12">
+          <p>
+            <label class="form-label" for="inheritPoliciesCheckbox">
+              <ng-template #tooltipContent>
+                {{ 'item.edit.move.inheritpolicies.tooltip' | translate }}
+              </ng-template>
+              <input type="checkbox" name="tc" [(ngModel)]="inheritPolicies" id="inheritPoliciesCheckbox" [ngbTooltip]="tooltipContent"
+                >
+              {{'item.edit.move.inheritpolicies.checkbox' |translate}}
+            </label>
+          </p>
+          <p>
+            {{'item.edit.move.inheritpolicies.description' | translate}}
+          </p>
+        </div>
+      </div>
+
+      <div class="button-row bottom">
+        <div class="float-end space-children-mr">
+          <button [routerLink]="[(itemPageRoute$ | async), 'edit']" class="btn btn-outline-secondary">
+            <i class="fas fa-arrow-left"></i> {{'item.edit.move.cancel' | translate}}
+          </button>
+          <button class="btn btn-primary" [dsBtnDisabled]="!canMove" (click)="moveToCollection()">
+            @if (!processing) {
+              <span>
+                <i class="fas fa-save"></i> {{'item.edit.move.save-button' | translate}}
+              </span>
+            }
+            @if (processing) {
+              <span>
+                <i class="fas fa-circle-notch fa-spin"></i> {{'item.edit.move.processing' | translate}}
+              </span>
+            }
+          </button>
+          <button class="btn btn-danger" [dsBtnDisabled]="!canSubmit" (click)="discard()">
+            <i class="fas fa-times"></i> {{"item.edit.move.discard-button" | translate}}
+          </button>
+        </div>
+      </div>
     </div>
+  </div>
 </div>
diff --git a/src/app/item-page/edit-item-page/item-operation/item-operation.component.html b/src/app/item-page/edit-item-page/item-operation/item-operation.component.html
index 83c720bcb6..4948bb282c 100644
--- a/src/app/item-page/edit-item-page/item-operation/item-operation.component.html
+++ b/src/app/item-page/edit-item-page/item-operation/item-operation.component.html
@@ -1,17 +1,21 @@
 <div class="col-12 col-md-3 h-auto float-start d-flex action-label">
-      <span class="justify-content-center align-self-center font-weight-bold">
-        {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.label' | translate}}
-      </span>
+  <span class="justify-content-center align-self-center font-weight-bold">
+    {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.label' | translate}}
+  </span>
 </div>
 <div class="col-12 col-md-9 float-start action-button">
-  <span *ngIf="operation.authorized">
-    <button class="btn btn-outline-primary" [dsBtnDisabled]="operation.disabled" [routerLink]="operation.operationUrl" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
-      {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate}}
-    </button>
-  </span>
-  <span *ngIf="!operation.authorized" [ngbTooltip]="'item.edit.tabs.status.buttons.unauthorized' | translate">
-    <button class="btn btn-outline-primary" [dsBtnDisabled]="true" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
-      {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate}}
-    </button>
-  </span>
+  @if (operation.authorized) {
+    <span>
+      <button class="btn btn-outline-primary" [dsBtnDisabled]="operation.disabled" [routerLink]="operation.operationUrl" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
+        {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate}}
+      </button>
+    </span>
+  }
+  @if (!operation.authorized) {
+    <span [ngbTooltip]="'item.edit.tabs.status.buttons.unauthorized' | translate">
+      <button class="btn btn-outline-primary" [dsBtnDisabled]="true" [attr.aria-label]="'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate">
+        {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate}}
+      </button>
+    </span>
+  }
 </div>
diff --git a/src/app/item-page/edit-item-page/item-register-doi/item-register-doi-component.html b/src/app/item-page/edit-item-page/item-register-doi/item-register-doi-component.html
index 4cb5db3f1e..2b08842e6d 100644
--- a/src/app/item-page/edit-item-page/item-register-doi/item-register-doi-component.html
+++ b/src/app/item-page/edit-item-page/item-register-doi/item-register-doi-component.html
@@ -3,13 +3,17 @@
     <div class="col-12">
       <h2>{{headerMessage | translate: {id: item.handle} }}</h2>
       <p>{{descriptionMessage | translate}}</p>
-      <div *ngFor="let identifier of (identifiers$ | async)" class="w-100 p">
-        <div *ngIf="(identifier.identifierType === 'doi')">
-          <p class="float-start">{{doiToUpdateMessage | translate}}: {{identifier.value}}
-            ({{"item.edit.identifiers.doi.status."+identifier.identifierStatus|translate}})
-          </p>
+      @for (identifier of (identifiers$ | async); track identifier) {
+        <div class="w-100 p">
+          @if ((identifier.identifierType === 'doi')) {
+            <div>
+              <p class="float-start">{{doiToUpdateMessage | translate}}: {{identifier.value}}
+                ({{"item.edit.identifiers.doi.status."+identifier.identifierStatus|translate}})
+              </p>
+            </div>
+          }
         </div>
-      </div>
+      }
       <ds-modify-item-overview [item]="item"></ds-modify-item-overview>
       <div class="space-children-mr">
         <button (click)="performAction()" class="btn btn-outline-secondary perform-action">{{confirmMessage | translate}}
diff --git a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html
index aede31e737..4f0de1a789 100644
--- a/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html
+++ b/src/app/item-page/edit-item-page/item-relationships/edit-relationship-list/edit-relationship-list.component.html
@@ -1,34 +1,40 @@
 <h2 class="h4">
-    {{relationshipMessageKey$ | async | translate}}
-    <button class="ms-2 btn btn-success" [dsBtnDisabled]="(hasChanges | async)" (click)="openLookup()">
-        <i class="fas fa-plus"></i>
-        <span class="d-none d-sm-inline">&nbsp;{{"item.edit.relationships.edit.buttons.add" | translate}}</span>
-    </button>
+  {{relationshipMessageKey$ | async | translate}}
+  <button class="ms-2 btn btn-success" [dsBtnDisabled]="(hasChanges | async)" (click)="openLookup()">
+    <i class="fas fa-plus"></i>
+    <span class="d-none d-sm-inline">&nbsp;{{"item.edit.relationships.edit.buttons.add" | translate}}</span>
+  </button>
 </h2>
 <ng-container *ngVar="updates$ | async as updates">
-    <ng-container *ngIf="updates && (loading$ | async) !== true">
-        <ng-container *ngVar="updates | dsObjectValues as updateValues">
-          <ds-pagination
-            [paginationOptions]="paginationConfig"
-            [collectionSize]="(relationshipsRd$ | async)?.payload?.totalElements + (this.nbAddedFields$ | async)"
-            [hideGear]="true"
-            [hidePagerWhenSinglePage]="true">
-            <div class="my-2">
-              <ds-edit-relationship *ngFor="let updateValue of updateValues; trackBy: trackUpdate"
-                                    class="relationship-row d-block alert"
-                                    [fieldUpdate]="updateValue || {}"
-                                    [url]="url"
-                                    [editItem]="item"
+  @if (updates && (loading$ | async) !== true) {
+    <ng-container *ngVar="updates | dsObjectValues as updateValues">
+      <ds-pagination
+        [paginationOptions]="paginationConfig"
+        [collectionSize]="(relationshipsRd$ | async)?.payload?.totalElements + (this.nbAddedFields$ | async)"
+        [hideGear]="true"
+        [hidePagerWhenSinglePage]="true">
+        <div class="my-2">
+          @for (updateValue of updateValues; track trackUpdate($index, updateValue)) {
+            <ds-edit-relationship
+              class="relationship-row d-block alert"
+              [fieldUpdate]="updateValue || {}"
+              [url]="url"
+              [editItem]="item"
                                     [ngClass]="{
                                         'alert-success': updateValue.changeType === 1,
                                         'alert-warning': updateValue.changeType === 0,
                                         'alert-danger': updateValue.changeType === 2
                                   }">
-              </ds-edit-relationship>
-            </div>
-          </ds-pagination>
-          <div *ngIf="updateValues.length === 0">{{"item.edit.relationships.no-relationships" | translate}}</div>
-        </ng-container>
+            </ds-edit-relationship>
+          }
+        </div>
+      </ds-pagination>
+      @if (updateValues.length === 0) {
+        <div>{{"item.edit.relationships.no-relationships" | translate}}</div>
+      }
     </ng-container>
-    <ds-loading *ngIf="loading$ | async"></ds-loading>
+  }
+  @if (loading$ | async) {
+    <ds-loading></ds-loading>
+  }
 </ng-container>
diff --git a/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.html b/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.html
index d33323759b..68539d8dc6 100644
--- a/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.html
+++ b/src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.html
@@ -1,35 +1,37 @@
-<div class="row" *ngIf="relatedItem$ | async">
-  <div class="col-10 relationship">
-    <ds-listable-object-component-loader
-      [object]="relatedItem$ | async"
-      [viewMode]="viewMode"
-      [value]="nameVariant"
-    >
-    </ds-listable-object-component-loader>
-  </div>
-  <div class="col-2 position-relative">
-    <div class="btn-group relationship-action-buttons">
-      <button [dsBtnDisabled]="!canRemove()" (click)="openVirtualMetadataModal(virtualMetadataModal)"
-              class="btn btn-outline-danger btn-sm"
-              title="{{'item.edit.metadata.edit.buttons.remove' | translate}}">
-        <i class="fas fa-trash-alt fa-fw"></i>
-      </button>
-      <button [dsBtnDisabled]="!canUndo()" (click)="undo()"
-              class="btn btn-outline-warning btn-sm"
-              title="{{'item.edit.metadata.edit.buttons.undo' | translate}}">
-        <i class="fas fa-undo-alt fa-fw"></i>
-      </button>
+@if (relatedItem$ | async) {
+  <div class="row">
+    <div class="col-10 relationship">
+      <ds-listable-object-component-loader
+        [object]="relatedItem$ | async"
+        [viewMode]="viewMode"
+        [value]="nameVariant"
+        >
+      </ds-listable-object-component-loader>
+    </div>
+    <div class="col-2 position-relative">
+      <div class="btn-group relationship-action-buttons">
+        <button [dsBtnDisabled]="!canRemove()" (click)="openVirtualMetadataModal(virtualMetadataModal)"
+          class="btn btn-outline-danger btn-sm"
+          title="{{'item.edit.metadata.edit.buttons.remove' | translate}}">
+          <i class="fas fa-trash-alt fa-fw"></i>
+        </button>
+        <button [dsBtnDisabled]="!canUndo()" (click)="undo()"
+          class="btn btn-outline-warning btn-sm"
+          title="{{'item.edit.metadata.edit.buttons.undo' | translate}}">
+          <i class="fas fa-undo-alt fa-fw"></i>
+        </button>
+      </div>
     </div>
   </div>
-</div>
+}
 <ng-template #virtualMetadataModal>
   <ds-virtual-metadata
-          [relationshipId]="relationship.id"
-          [leftItem]="leftItem$ | async"
-          [rightItem]="rightItem$ | async"
-          [url]="url"
-          (close)="closeVirtualMetadataModal()"
-          (save)="remove()"
-  >
+    [relationshipId]="relationship.id"
+    [leftItem]="leftItem$ | async"
+    [rightItem]="rightItem$ | async"
+    [url]="url"
+    (close)="closeVirtualMetadataModal()"
+    (save)="remove()"
+    >
   </ds-virtual-metadata>
 </ng-template>
diff --git a/src/app/item-page/edit-item-page/item-status/item-status.component.html b/src/app/item-page/edit-item-page/item-status/item-status.component.html
index a640bc72cc..ee3004f315 100644
--- a/src/app/item-page/edit-item-page/item-status/item-status.component.html
+++ b/src/app/item-page/edit-item-page/item-status/item-status.component.html
@@ -1,23 +1,29 @@
 <p class="mt-2">{{'item.edit.tabs.status.description' | translate}}</p>
 <div class="row">
-  <div *ngFor="let statusKey of statusDataKeys" class="w-100 pt-1">
-    <div class="col-12 col-md-3 float-start status-label font-weight-bold">
-      {{'item.edit.tabs.status.labels.' + statusKey | translate}}:
-    </div>
-    <div class="col-12 col-md-9 float-start status-data" id="status-{{statusKey}}">
-      {{statusData[statusKey]}}
-    </div>
-  </div>
-
-  <div *ngFor="let identifier of (identifiers$ | async)" class="w-100 pt-1">
-    <div *ngIf="(identifier.identifierType==='doi')">
+  @for (statusKey of statusDataKeys; track statusKey) {
+    <div class="w-100 pt-1">
       <div class="col-12 col-md-3 float-start status-label font-weight-bold">
-        {{identifier.identifierType.toLocaleUpperCase()}}
+        {{'item.edit.tabs.status.labels.' + statusKey | translate}}:
+      </div>
+      <div class="col-12 col-md-9 float-start status-data" id="status-{{statusKey}}">
+        {{statusData[statusKey]}}
       </div>
-      <div class="col-12 col-md-9 float-start status-label font-weight-bold">{{identifier.value}}
-        ({{"item.edit.identifiers.doi.status."+identifier.identifierStatus|translate}})</div>
     </div>
-  </div>
+  }
+
+  @for (identifier of (identifiers$ | async); track identifier) {
+    <div class="w-100 pt-1">
+      @if ((identifier.identifierType==='doi')) {
+        <div>
+          <div class="col-12 col-md-3 float-start status-label font-weight-bold">
+            {{identifier.identifierType.toLocaleUpperCase()}}
+          </div>
+          <div class="col-12 col-md-9 float-start status-label font-weight-bold">{{identifier.value}}
+          ({{"item.edit.identifiers.doi.status."+identifier.identifierStatus|translate}})</div>
+        </div>
+      }
+    </div>
+  }
 
   <div class="col-12 col-md-3 float-start status-label font-weight-bold">
     {{'item.edit.tabs.status.labels.itemPage' | translate}}:
@@ -26,8 +32,10 @@
     <a [routerLink]="itemPageRoute$ | async">{{itemPageRoute$ | async}}</a>
   </div>
 
-  <div *ngFor="let operation of (operations$ | async)" class="w-100" [ngClass]="{'pt-3': operation}">
-    <ds-item-operation [operation]="operation"></ds-item-operation>
-  </div>
+  @for (operation of (operations$ | async); track operation) {
+    <div class="w-100" [ngClass]="{'pt-3': operation}">
+      <ds-item-operation [operation]="operation"></ds-item-operation>
+    </div>
+  }
 
 </div>
diff --git a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html
index f86ab8c288..e1fc018ace 100644
--- a/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html
+++ b/src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html
@@ -1,37 +1,39 @@
 <div [ngClass]="showThumbnails ? 'hide-modal-thumbnail-column' : ''">
-    <div class="modal-header">{{'virtual-metadata.delete-relationship.modal-head' | translate}}
-        <button type="button" class="btn-close" (click)="close.emit()" aria-label="Close">
-        </button>
-    </div>
-    <div class="modal-body">
-        <ng-container *ngFor="let itemDTO of itemDTOs$ | async; trackBy: trackItemDTO">
-            <div *ngVar="(itemDTO.isSelectedVirtualMetadataItem$ | async) as selected"
-                 (click)="setSelectedVirtualMetadataItem(itemDTO.item, !selected)"
-                 class="item d-flex flex-row">
-                <div class="m-2">
-                    <label>
-                        <input class="select" type="checkbox" [checked]="selected">
-                    </label>
-                </div>
-                <div class="flex-column">
-                    <ds-listable-object-component-loader [object]="itemDTO.item">
-                    </ds-listable-object-component-loader>
-                    <div *ngFor="let metadata of virtualMetadata.get(itemDTO.item.uuid)">
-                        <div class="fw-bold">
-                            {{metadata.metadataField}}
-                        </div>
-                        <div>
-                            {{metadata.metadataValue.value}}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </ng-container>
-        <div class="d-flex flex-row-reverse m-2">
-            <button class="btn btn-primary save"
-                    (click)="save.emit()">
-                <i aria-hidden="true" class="fas fa-save"></i> {{ 'item.edit.metadata.save-button' | translate }}
-            </button>
+  <div class="modal-header">{{'virtual-metadata.delete-relationship.modal-head' | translate}}
+    <button type="button" class="btn-close" (click)="close.emit()" aria-label="Close">
+    </button>
+  </div>
+  <div class="modal-body">
+    @for (itemDTO of itemDTOs$ | async; track trackItemDTO($index, itemDTO)) {
+      <div *ngVar="(itemDTO.isSelectedVirtualMetadataItem$ | async) as selected"
+        (click)="setSelectedVirtualMetadataItem(itemDTO.item, !selected)"
+        class="item d-flex flex-row">
+        <div class="m-2">
+          <label>
+            <input class="select" type="checkbox" [checked]="selected">
+          </label>
         </div>
+        <div class="flex-column">
+          <ds-listable-object-component-loader [object]="itemDTO.item">
+          </ds-listable-object-component-loader>
+          @for (metadata of virtualMetadata.get(itemDTO.item.uuid); track metadata) {
+            <div>
+              <div class="fw-bold">
+                {{metadata.metadataField}}
+              </div>
+              <div>
+                {{metadata.metadataValue.value}}
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    }
+    <div class="d-flex flex-row-reverse m-2">
+      <button class="btn btn-primary save"
+        (click)="save.emit()">
+        <i aria-hidden="true" class="fas fa-save"></i> {{ 'item.edit.metadata.save-button' | translate }}
+      </button>
     </div>
+  </div>
 </div>
diff --git a/src/app/item-page/full/full-item-page.component.html b/src/app/item-page/full/full-item-page.component.html
index e9b6436d2f..c6c7d90bf4 100644
--- a/src/app/item-page/full/full-item-page.component.html
+++ b/src/app/item-page/full/full-item-page.component.html
@@ -1,44 +1,60 @@
 <div class="container" *ngVar="(itemRD$ | async) as itemRD">
-  <div class="item-page" *ngIf="itemRD?.hasSucceeded" @fadeInOut>
-    <div *ngIf="itemRD?.payload as item">
-      <ds-item-alerts [item]="item"></ds-item-alerts>
-      <ds-item-versions-notice [item]="item"></ds-item-versions-notice>
-      <ds-view-tracker [object]="item"></ds-view-tracker>
-      <div *ngIf="!item.isWithdrawn || (isAdmin$|async)" class="full-item-info">
-        <div class="d-flex flex-row">
-          <ds-item-page-title-field class="me-auto" [item]="item"></ds-item-page-title-field>
-          <ds-dso-edit-menu></ds-dso-edit-menu>
-        </div>
-        <div class="simple-view-link my-3" *ngIf="!fromSubmissionObject">
-          <a class="btn btn-outline-primary" [routerLink]="[(itemPageRoute$ | async)]">
-            {{"item.page.link.simple" | translate}}
-          </a>
-        </div>
-        <div class="table-responsive">
-          <table class="table  table-striped">
-            <tbody>
-            <ng-container *ngFor="let mdEntry of (metadata$ | async) | keyvalue">
-              <tr *ngFor="let mdValue of mdEntry.value">
-                <td>{{mdEntry.key}}</td>
-                <td>{{mdValue.value}}</td>
-                <td>{{mdValue.language}}</td>
-              </tr>
-            </ng-container>
-            </tbody>
-          </table>
-        </div>
-        <ds-item-page-full-file-section [item]="item"></ds-item-page-full-file-section>
-        <ds-item-page-collections [item]="item"></ds-item-page-collections>
-        <ds-item-versions class="mt-2" [item]="item"></ds-item-versions>
-        <div class="button-row bottom" *ngIf="fromSubmissionObject">
-          <div class="text-end">
-            <button class="btn btn-outline-secondary me-1" (click)="back()"><i
+  @if (itemRD?.hasSucceeded) {
+    <div class="item-page" @fadeInOut>
+      @if (itemRD?.payload; as item) {
+        <div>
+          <ds-item-alerts [item]="item"></ds-item-alerts>
+          <ds-item-versions-notice [item]="item"></ds-item-versions-notice>
+          <ds-view-tracker [object]="item"></ds-view-tracker>
+          @if (!item.isWithdrawn || (isAdmin$|async)) {
+            <div class="full-item-info">
+              <div class="d-flex flex-row">
+                <ds-item-page-title-field class="me-auto" [item]="item"></ds-item-page-title-field>
+                <ds-dso-edit-menu></ds-dso-edit-menu>
+              </div>
+              @if (!fromSubmissionObject) {
+                <div class="simple-view-link my-3">
+                  <a class="btn btn-outline-primary" [routerLink]="[(itemPageRoute$ | async)]">
+                    {{"item.page.link.simple" | translate}}
+                  </a>
+                </div>
+              }
+              <div class="table-responsive">
+                <table class="table  table-striped">
+                  <tbody>
+                    @for (mdEntry of (metadata$ | async) | keyvalue; track mdEntry) {
+                      @for (mdValue of mdEntry.value; track mdValue) {
+                        <tr>
+                          <td>{{mdEntry.key}}</td>
+                          <td>{{mdValue.value}}</td>
+                          <td>{{mdValue.language}}</td>
+                        </tr>
+                      }
+                    }
+                  </tbody>
+                </table>
+              </div>
+              <ds-item-page-full-file-section [item]="item"></ds-item-page-full-file-section>
+              <ds-item-page-collections [item]="item"></ds-item-page-collections>
+              <ds-item-versions class="mt-2" [item]="item"></ds-item-versions>
+              @if (fromSubmissionObject) {
+                <div class="button-row bottom">
+                  <div class="text-end">
+                    <button class="btn btn-outline-secondary me-1" (click)="back()"><i
                     class="fas fa-arrow-left"></i> {{'item.page.return' | translate}}</button>
-          </div>
+                  </div>
+                </div>
+              }
+            </div>
+          }
         </div>
-      </div>
+      }
     </div>
-  </div>
-  <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.item' | translate}}"></ds-error>
-  <ds-loading *ngIf="itemRD?.isLoading" message="{{'loading.item' | translate}}"></ds-loading>
+  }
+  @if (itemRD?.hasFailed) {
+    <ds-error message="{{'error.item' | translate}}"></ds-error>
+  }
+  @if (itemRD?.isLoading) {
+    <ds-loading message="{{'loading.item' | translate}}"></ds-loading>
+  }
 </div>
diff --git a/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html b/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html
index eda90ed213..d2f7bc04b6 100644
--- a/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html
+++ b/src/app/item-page/orcid-page/orcid-auth/orcid-auth.component.html
@@ -1,65 +1,180 @@
 <div class="container mb-5">
   <h1>{{'person.orcid.registry.auth' | translate}}</h1>
-  <ng-container *ngIf="(isLinkedToOrcid() | async); then orcidLinked; else orcidNotLinked"></ng-container>
+  @if ((isLinkedToOrcid() | async)) {
+    <div data-test="orcidLinked">
+      <div class="row">
+        @if ((hasOrcidAuthorizations() | async)) {
+          <div class="col-sm-6 mb-3" data-test="hasOrcidAuthorizations">
+            <div class="card h-100">
+              <div class="card-header">{{ 'person.page.orcid.granted-authorizations'| translate }}</div>
+              <div class="card-body">
+                <div class="container p-0">
+                  <ul>
+                    @for (auth of (getOrcidAuthorizations() | async); track auth) {
+                      <li data-test="orcidAuthorization">
+                        {{getAuthorizationDescription(auth) | translate}}
+                      </li>
+                    }
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+        <div class="col-sm-6 mb-3">
+          <div class="card h-100">
+            <div class="card-header">{{ 'person.page.orcid.missing-authorizations'| translate }}</div>
+            <div class="card-body">
+              <div class="container">
+                @if ((hasMissingOrcidAuthorizations() | async) !== true) {
+                  <ds-alert [type]="'alert-success'" data-test="noMissingOrcidAuthorizations">
+                    {{'person.page.orcid.no-missing-authorizations-message' | translate}}
+                  </ds-alert>
+                }
+                @if ((hasMissingOrcidAuthorizations() | async)) {
+                  <ds-alert [type]="'alert-warning'" data-test="missingOrcidAuthorizations">
+                    {{'person.page.orcid.missing-authorizations-message' | translate}}
+                    <ul>
+                      @for (auth of (getMissingOrcidAuthorizations() | async); track auth) {
+                        <li data-test="missingOrcidAuthorization">
+                          {{getAuthorizationDescription(auth) | translate }}
+                        </li>
+                      }
+                    </ul>
+                  </ds-alert>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      @if ((onlyAdminCanDisconnectProfileFromOrcid() | async) && (ownerCanDisconnectProfileFromOrcid() | async) !== true) {
+        <ds-alert
+          [type]="'alert-warning'" data-test="unlinkOnlyAdmin">
+          {{ 'person.page.orcid.remove-orcid-message' | translate}}
+        </ds-alert>
+      }
+      @if ((ownerCanDisconnectProfileFromOrcid() | async)) {
+        <div class="row" data-test="unlinkOwner">
+          <div class="col">
+            <button type="submit" class="btn btn-danger float-end" (click)="unlinkOrcid()"
+              [dsBtnDisabled]="(unlinkProcessing | async)">
+              @if ((unlinkProcessing | async) !== true) {
+                <span><i
+                class="fas fa-unlink"></i> {{ 'person.page.orcid.unlink' | translate }}</span>
+              }
+              @if ((unlinkProcessing | async)) {
+                <span><i
+                class='fas fa-circle-notch fa-spin'></i> {{'person.page.orcid.unlink.processing' | translate}}</span>
+              }
+            </button>
+            @if ((hasMissingOrcidAuthorizations() | async)) {
+              <button type="submit"
+                class="btn btn-primary float-end" (click)="linkOrcid()">
+                <span><i class="fas fa-check"></i> {{ 'person.page.orcid.grant-authorizations' | translate }}</span>
+              </button>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  } @else {
+    <div data-test="orcidNotLinked">
+      <div class="row">
+        <div class="col-2"><img alt="orcid-logo" src="../../../../assets/images/orcid.logo.icon.svg"/></div>
+        <div class="col">
+          <ds-alert [type]="'alert-info'">{{ getOrcidNotLinkedMessage() | async }}</ds-alert>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <button class="btn btn-primary float-end" (click)="linkOrcid()">
+            <i class="fas fa-link"></i>
+            {{'person.page.orcid.link' | translate}}
+          </button>
+        </div>
+      </div>
+    </div>
+  }
 </div>
 
 <ng-template #orcidLinked>
   <div data-test="orcidLinked">
     <div class="row">
-      <div *ngIf="(hasOrcidAuthorizations() | async)" class="col-sm-6 mb-3" data-test="hasOrcidAuthorizations">
-        <div class="card h-100">
-          <div class="card-header">{{ 'person.page.orcid.granted-authorizations'| translate }}</div>
-          <div class="card-body">
-            <div class="container p-0">
-              <ul>
-                <li *ngFor="let auth of (getOrcidAuthorizations() | async)" data-test="orcidAuthorization">
-                  {{getAuthorizationDescription(auth) | translate}}
-                </li>
-              </ul>
+      @if ((hasOrcidAuthorizations() | async)) {
+        <div class="col-sm-6 mb-3" data-test="hasOrcidAuthorizations">
+          <div class="card h-100">
+            <div class="card-header">{{ 'person.page.orcid.granted-authorizations'| translate }}</div>
+            <div class="card-body">
+              <div class="container p-0">
+                <ul>
+                  @for (auth of (getOrcidAuthorizations() | async); track auth) {
+                    <li data-test="orcidAuthorization">
+                      {{getAuthorizationDescription(auth) | translate}}
+                    </li>
+                  }
+                </ul>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      }
       <div class="col-sm-6 mb-3">
         <div class="card h-100">
           <div class="card-header">{{ 'person.page.orcid.missing-authorizations'| translate }}</div>
           <div class="card-body">
             <div class="container">
-              <ds-alert *ngIf="(hasMissingOrcidAuthorizations() | async) !== true" [type]="'alert-success'" data-test="noMissingOrcidAuthorizations">
-                {{'person.page.orcid.no-missing-authorizations-message' | translate}}
-              </ds-alert>
-              <ds-alert *ngIf="(hasMissingOrcidAuthorizations() | async)" [type]="'alert-warning'" data-test="missingOrcidAuthorizations">
-                {{'person.page.orcid.missing-authorizations-message' | translate}}
-                <ul>
-                  <li *ngFor="let auth of (getMissingOrcidAuthorizations() | async)" data-test="missingOrcidAuthorization">
-                    {{getAuthorizationDescription(auth) | translate }}
-                  </li>
-                </ul>
-              </ds-alert>
+              @if ((hasMissingOrcidAuthorizations() | async) !== true) {
+                <ds-alert [type]="'alert-success'" data-test="noMissingOrcidAuthorizations">
+                  {{'person.page.orcid.no-missing-authorizations-message' | translate}}
+                </ds-alert>
+              }
+              @if ((hasMissingOrcidAuthorizations() | async)) {
+                <ds-alert [type]="'alert-warning'" data-test="missingOrcidAuthorizations">
+                  {{'person.page.orcid.missing-authorizations-message' | translate}}
+                  <ul>
+                    @for (auth of (getMissingOrcidAuthorizations() | async); track auth) {
+                      <li data-test="missingOrcidAuthorization">
+                        {{getAuthorizationDescription(auth) | translate }}
+                      </li>
+                    }
+                  </ul>
+                </ds-alert>
+              }
             </div>
           </div>
         </div>
       </div>
     </div>
-    <ds-alert *ngIf="(onlyAdminCanDisconnectProfileFromOrcid() | async) && (ownerCanDisconnectProfileFromOrcid() | async) !== true"
-              [type]="'alert-warning'" data-test="unlinkOnlyAdmin">
-      {{ 'person.page.orcid.remove-orcid-message' | translate}}
-    </ds-alert>
-    <div class="row" *ngIf="(ownerCanDisconnectProfileFromOrcid() | async)" data-test="unlinkOwner">
-      <div class="col">
-        <button type="submit" class="btn btn-danger float-end" (click)="unlinkOrcid()"
-                [dsBtnDisabled]="(unlinkProcessing | async)">
-          <span *ngIf="(unlinkProcessing | async) !== true"><i
-            class="fas fa-unlink"></i> {{ 'person.page.orcid.unlink' | translate }}</span>
-          <span *ngIf="(unlinkProcessing | async)"><i
-            class='fas fa-circle-notch fa-spin'></i> {{'person.page.orcid.unlink.processing' | translate}}</span>
-        </button>
-        <button *ngIf="(hasMissingOrcidAuthorizations() | async)" type="submit"
-                class="btn btn-primary float-end" (click)="linkOrcid()">
-          <span><i class="fas fa-check"></i> {{ 'person.page.orcid.grant-authorizations' | translate }}</span>
-        </button>
+    @if ((onlyAdminCanDisconnectProfileFromOrcid() | async) && (ownerCanDisconnectProfileFromOrcid() | async) !== true) {
+      <ds-alert
+        [type]="'alert-warning'" data-test="unlinkOnlyAdmin">
+        {{ 'person.page.orcid.remove-orcid-message' | translate}}
+      </ds-alert>
+    }
+    @if ((ownerCanDisconnectProfileFromOrcid() | async)) {
+      <div class="row" data-test="unlinkOwner">
+        <div class="col">
+          <button type="submit" class="btn btn-danger float-end" (click)="unlinkOrcid()"
+            [dsBtnDisabled]="(unlinkProcessing | async)">
+            @if ((unlinkProcessing | async) !== true) {
+              <span><i
+              class="fas fa-unlink"></i> {{ 'person.page.orcid.unlink' | translate }}</span>
+            }
+            @if ((unlinkProcessing | async)) {
+              <span><i
+              class='fas fa-circle-notch fa-spin'></i> {{'person.page.orcid.unlink.processing' | translate}}</span>
+            }
+          </button>
+          @if ((hasMissingOrcidAuthorizations() | async)) {
+            <button type="submit"
+              class="btn btn-primary float-end" (click)="linkOrcid()">
+              <span><i class="fas fa-check"></i> {{ 'person.page.orcid.grant-authorizations' | translate }}</span>
+            </button>
+          }
+        </div>
       </div>
-    </div>
+    }
   </div>
 </ng-template>
 
diff --git a/src/app/item-page/orcid-page/orcid-page.component.html b/src/app/item-page/orcid-page/orcid-page.component.html
index 472dc517fa..586f27bb3f 100644
--- a/src/app/item-page/orcid-page/orcid-page.component.html
+++ b/src/app/item-page/orcid-page/orcid-page.component.html
@@ -1,19 +1,29 @@
-<ds-loading *ngIf="(processingConnection | async)" [message]="'person.page.orcid.link.processing' | translate"></ds-loading>
-<div class="container" *ngIf="(processingConnection | async) !== true && (connectionStatus | async) !== true" data-test="error-box">
-  <ds-alert [type]="AlertType.Error">{{'person.page.orcid.link.error.message' | translate}}</ds-alert>
-</div>
-<ng-container *ngIf="(processingConnection | async) !== true && (item | async) && (connectionStatus | async)" >
+@if ((processingConnection | async)) {
+  <ds-loading [message]="'person.page.orcid.link.processing' | translate"></ds-loading>
+}
+@if ((processingConnection | async) !== true && (connectionStatus | async) !== true) {
+  <div class="container" data-test="error-box">
+    <ds-alert [type]="AlertType.Error">{{'person.page.orcid.link.error.message' | translate}}</ds-alert>
+  </div>
+}
+@if ((processingConnection | async) !== true && (item | async) && (connectionStatus | async)) {
   <ds-orcid-auth [item]="(item | async)" (unlink)="updateItem()" data-test="orcid-auth"></ds-orcid-auth>
-  <ds-orcid-sync-setting *ngIf="isLinkedToOrcid()" [item]="(item | async)" (settingsUpdated)="updateItem()" data-test="orcid-sync-setting"></ds-orcid-sync-setting>
-  <ds-orcid-queue *ngIf="isLinkedToOrcid()" [item]="(item | async)"></ds-orcid-queue>
-</ng-container>
+  @if (isLinkedToOrcid()) {
+    <ds-orcid-sync-setting [item]="(item | async)" (settingsUpdated)="updateItem()" data-test="orcid-sync-setting"></ds-orcid-sync-setting>
+  }
+  @if (isLinkedToOrcid()) {
+    <ds-orcid-queue [item]="(item | async)"></ds-orcid-queue>
+  }
+}
 
-<div *ngIf="(processingConnection | async) !== true && (item | async)" class="container">
-  <div class="button-row bottom mb-3">
-    <div class="text-end">
-      <a [routerLink]="getItemPage()" role="button" class="btn btn-outline-secondary" data-test="back-button">
-        <i class="fas fa-arrow-left"></i> {{'item.orcid.return' | translate}}
-      </a>
+@if ((processingConnection | async) !== true && (item | async)) {
+  <div class="container">
+    <div class="button-row bottom mb-3">
+      <div class="text-end">
+        <a [routerLink]="getItemPage()" role="button" class="btn btn-outline-secondary" data-test="back-button">
+          <i class="fas fa-arrow-left"></i> {{'item.orcid.return' | translate}}
+        </a>
+      </div>
     </div>
   </div>
-</div>
+}
diff --git a/src/app/item-page/orcid-page/orcid-sync-settings/orcid-sync-settings.component.html b/src/app/item-page/orcid-page/orcid-sync-settings/orcid-sync-settings.component.html
index bfba8eb75d..0d7ece9237 100644
--- a/src/app/item-page/orcid-page/orcid-sync-settings/orcid-sync-settings.component.html
+++ b/src/app/item-page/orcid-page/orcid-sync-settings/orcid-sync-settings.component.html
@@ -15,9 +15,11 @@
               <div class="mb-3 row">
                 <label class="form-label" for="syncMode">{{ 'person.page.orcid.synchronization-mode.label'| translate }}</label>
                 <select class="form-select" [(ngModel)]="currentSyncMode" name="syncMode" id="syncMode"
-                        required>
-                  <option *ngFor="let syncMode of syncModes"
-                          [value]="syncMode.value">{{ syncMode.label | translate }}</option>
+                  required>
+                  @for (syncMode of syncModes; track syncMode) {
+                    <option
+                    [value]="syncMode.value">{{ syncMode.label | translate }}</option>
+                  }
                 </select>
               </div>
             </div>
@@ -37,13 +39,15 @@
                 </ds-alert>
               </div>
               <div class="mb-3">
-                <div *ngFor="let option of syncPublicationOptions" class="row form-check">
-                  <input type="radio" [(ngModel)]="currentSyncPublications"
-                         name="syncPublications" id="publicationOption_{{option.value}}" [value]="option.value"
-                         required>
-                  <label for="publicationOption_{{option.value}}"
-                         class="ms-2 form-label">{{option.label | translate}}</label>
-                </div>
+                @for (option of syncPublicationOptions; track option) {
+                  <div class="row form-check">
+                    <input type="radio" [(ngModel)]="currentSyncPublications"
+                      name="syncPublications" id="publicationOption_{{option.value}}" [value]="option.value"
+                      required>
+                    <label for="publicationOption_{{option.value}}"
+                    class="ms-2 form-label">{{option.label | translate}}</label>
+                  </div>
+                }
               </div>
             </div>
           </div>
@@ -60,12 +64,14 @@
                 </ds-alert>
               </div>
               <div class="mb-3">
-                <div *ngFor="let option of syncFundingOptions" class="row form-check">
-                  <input type="radio" [(ngModel)]="currentSyncFunding"
-                         name="syncFundings" id="fundingOption_{{option.value}}" [value]="option.value"
-                         required>
-                  <label for="fundingOption_{{option.value}}" class="ms-2 form-label">{{option.label | translate}}</label>
-                </div>
+                @for (option of syncFundingOptions; track option) {
+                  <div class="row form-check">
+                    <input type="radio" [(ngModel)]="currentSyncFunding"
+                      name="syncFundings" id="fundingOption_{{option.value}}" [value]="option.value"
+                      required>
+                    <label for="fundingOption_{{option.value}}" class="ms-2 form-label">{{option.label | translate}}</label>
+                  </div>
+                }
               </div>
             </div>
           </div>
@@ -82,12 +88,14 @@
                 </ds-alert>
               </div>
               <div class="mb-3">
-                <div *ngFor="let option of syncProfileOptions" class="row form-check">
-                  <input type="checkbox" [(ngModel)]="option.checked"
-                         name="syncProfile_{{option.value}}" id="profileOption_{{option.value}}"
-                         [value]="option.value">
-                  <label for="profileOption_{{option.value}}" class="ms-2 form-label">{{option.label | translate}}</label>
-                </div>
+                @for (option of syncProfileOptions; track option) {
+                  <div class="row form-check">
+                    <input type="checkbox" [(ngModel)]="option.checked"
+                      name="syncProfile_{{option.value}}" id="profileOption_{{option.value}}"
+                      [value]="option.value">
+                    <label for="profileOption_{{option.value}}" class="ms-2 form-label">{{option.label | translate}}</label>
+                  </div>
+                }
               </div>
             </div>
           </div>
diff --git a/src/app/item-page/simple/field-components/file-section/file-section.component.html b/src/app/item-page/simple/field-components/file-section/file-section.component.html
index 3348f55162..fda6d8ae88 100644
--- a/src/app/item-page/simple/field-components/file-section/file-section.component.html
+++ b/src/app/item-page/simple/field-components/file-section/file-section.component.html
@@ -1,21 +1,35 @@
 <ng-container *ngVar="(bitstreams$ | async) as bitstreams">
-  <ds-metadata-field-wrapper *ngIf="bitstreams?.length > 0" [label]="label | translate">
-    <div class="file-section">
-      <ds-file-download-link *ngFor="let file of bitstreams; let last=last;" [bitstream]="file" [item]="item">
-        <span>
-          <span *ngIf="primaryBitsreamId === file.id" class="badge bg-primary">{{ 'item.page.bitstreams.primary' | translate }}</span>
-          {{ dsoNameService.getName(file) }}
-        </span>
-        <span> ({{(file?.sizeBytes) | dsFileSize }})</span>
-        <span *ngIf="!last" innerHTML="{{separator}}"></span>
-      </ds-file-download-link>
-      <ds-loading *ngIf="isLoading" message="{{'loading.default' | translate}}" [showMessage]="false"></ds-loading>
-      <div *ngIf="!isLastPage" class="mt-1" id="view-more">
-        <button class="bitstream-view-more btn btn-outline-secondary btn-sm" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</button>
+  @if (bitstreams?.length > 0) {
+    <ds-metadata-field-wrapper [label]="label | translate">
+      <div class="file-section">
+        @for (file of bitstreams; track file; let last = $last) {
+          <ds-file-download-link [bitstream]="file" [item]="item">
+            <span>
+              @if (primaryBitsreamId === file.id) {
+                <span class="badge bg-primary">{{ 'item.page.bitstreams.primary' | translate }}</span>
+              }
+              {{ dsoNameService.getName(file) }}
+            </span>
+            <span> ({{(file?.sizeBytes) | dsFileSize }})</span>
+            @if (!last) {
+              <span innerHTML="{{separator}}"></span>
+            }
+          </ds-file-download-link>
+        }
+        @if (isLoading) {
+          <ds-loading message="{{'loading.default' | translate}}" [showMessage]="false"></ds-loading>
+        }
+        @if (!isLastPage) {
+          <div class="mt-1" id="view-more">
+            <button class="bitstream-view-more btn btn-outline-secondary btn-sm" (click)="getNextPage()">{{'item.page.bitstreams.view-more' | translate}}</button>
+          </div>
+        }
+        @if (isLastPage && currentPage !== 1) {
+          <div class="mt-1" id="collapse">
+            <button class="bitstream-collapse btn btn-outline-secondary btn-sm" (click)="currentPage = undefined; getNextPage();">{{'item.page.bitstreams.collapse' | translate}}</button>
+          </div>
+        }
       </div>
-      <div *ngIf="isLastPage && currentPage !== 1" class="mt-1" id="collapse">
-        <button class="bitstream-collapse btn btn-outline-secondary btn-sm" (click)="currentPage = undefined; getNextPage();">{{'item.page.bitstreams.collapse' | translate}}</button>
-      </div>
-    </div>
-  </ds-metadata-field-wrapper>
+    </ds-metadata-field-wrapper>
+  }
 </ng-container>
diff --git a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
index c845deb450..058dd96952 100644
--- a/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
+++ b/src/app/item-page/simple/metadata-representation-list/metadata-representation-list.component.html
@@ -1,20 +1,30 @@
 <ds-metadata-field-wrapper [label]="label">
-  <ng-container *ngFor="let objectPage of objects; let i = index">
+  @for (objectPage of objects; track objectPage; let i = $index) {
     <ng-container *ngVar="(objectPage | async) as representations">
-      <ds-metadata-representation-loader *ngFor="let rep of representations"
-                                         [mdRepresentation]="rep">
-      </ds-metadata-representation-loader>
-      <ds-loading *ngIf="(i + 1) === objects.length && (i > 0) && (!representations || representations?.length === 0)" message="{{'loading.default' | translate}}"></ds-loading>
-      <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && representations?.length > 0">
-        <div *ngIf="(objects.length * incrementBy) < total" class="float-start">
-          <button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
-            translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</button>
+      @for (rep of representations; track rep) {
+        <ds-metadata-representation-loader
+          [mdRepresentation]="rep">
+        </ds-metadata-representation-loader>
+      }
+      @if ((i + 1) === objects.length && (i > 0) && (!representations || representations?.length === 0)) {
+        <ds-loading message="{{'loading.default' | translate}}"></ds-loading>
+      }
+      @if ((i + 1) === objects.length && representations?.length > 0) {
+        <div class="d-inline-block w-100 mt-2">
+          @if ((objects.length * incrementBy) < total) {
+            <div class="float-start">
+              <button class="btn btn-link btn-link-inline" (click)="increase()">{{'item.page.related-items.view-more' |
+              translate:{ amount: (total - (objects.length * incrementBy) < incrementBy) ? total - (objects.length * incrementBy) : incrementBy } }}</button>
+            </div>
+          }
+          @if (objects.length > 1) {
+            <div class="float-end">
+              <button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
+              translate:{ amount: representations?.length } }}</button>
+            </div>
+          }
         </div>
-        <div *ngIf="objects.length > 1" class="float-end">
-          <button class="btn btn-link btn-link-inline" (click)="decrease()">{{'item.page.related-items.view-less' |
-            translate:{ amount: representations?.length } }}</button>
-        </div>
-      </div>
+      }
     </ng-container>
-  </ng-container>
+  }
 </ds-metadata-field-wrapper>
diff --git a/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.html b/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.html
index 16a1532fc0..afdb53b81d 100644
--- a/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.html
+++ b/src/app/item-page/simple/qa-event-notification/qa-event-notification.component.html
@@ -1,22 +1,24 @@
-<ng-container *ngIf="(sources$ | async) as sources">
-  <ng-container *ngFor="let source of sources">
-    <div class="alert alert-info d-flex flex-row" *ngIf="source.totalEvents > 0">
-      <div class="source-logo-container">
-        <img class="source-logo"
-             src="assets/images/qa-{{(source.id | dsSplit: ':')[0]}}-logo.png"
-             alt="{{source.id}} logo"
-             onerror="this.src='assets/images/dspace-logo.svg'">
-      </div>
-      <div class="w-100 d-flex justify-content-between">
-        <div class="ps-4 align-self-center">
-          {{'item.qa-event-notification.check.notification-info' | translate : {num: source.totalEvents } }}
+@if ((sources$ | async); as sources) {
+  @for (source of sources; track source) {
+    @if (source.totalEvents > 0) {
+      <div class="alert alert-info d-flex flex-row">
+        <div class="source-logo-container">
+          <img class="source-logo"
+            src="assets/images/qa-{{(source.id | dsSplit: ':')[0]}}-logo.png"
+            alt="{{source.id}} logo"
+            onerror="this.src='assets/images/dspace-logo.svg'">
+          </div>
+          <div class="w-100 d-flex justify-content-between">
+            <div class="ps-4 align-self-center">
+              {{'item.qa-event-notification.check.notification-info' | translate : {num: source.totalEvents } }}
+            </div>
+            <button [routerLink]="[ getQualityAssuranceRoute(), (source.id | dsSplit: ':')[0], 'target', item.id]"
+              [queryParams]="{ forward: true }"
+              class="btn btn-primary align-self-center">
+            {{'item.qa-event-notification-info.check.button' | translate}}
+          </button>
         </div>
-        <button [routerLink]="[ getQualityAssuranceRoute(), (source.id | dsSplit: ':')[0], 'target', item.id]"
-                [queryParams]="{ forward: true }"
-                class="btn btn-primary align-self-center">
-                {{'item.qa-event-notification-info.check.button' | translate}}
-        </button>
       </div>
-    </div>
-  </ng-container>
-</ng-container>
+    }
+  }
+}
diff --git a/src/app/item-page/simple/related-items/related-items.component.html b/src/app/item-page/simple/related-items/related-items.component.html
index b49c91aed9..2bfe384bb4 100644
--- a/src/app/item-page/simple/related-items/related-items.component.html
+++ b/src/app/item-page/simple/related-items/related-items.component.html
@@ -1,20 +1,30 @@
 <ds-metadata-field-wrapper [label]="label" [ngClass]="placeholderFontClass">
-  <ng-container *ngFor="let objectPage of objects; let i = index">
+  @for (objectPage of objects; track objectPage; let i = $index) {
     <ng-container *ngVar="(objectPage | async) as itemsRD">
-      <ds-listable-object-component-loader *ngFor="let item of itemsRD?.payload?.page"
-                                           [object]="item" [viewMode]="viewMode">
-      </ds-listable-object-component-loader>
-      <ds-loading *ngIf="(i + 1) === objects.length && (itemsRD || i > 0) && !(itemsRD?.hasSucceeded && itemsRD?.payload && itemsRD?.payload?.page?.length > 0)" message="{{'loading.default' | translate}}"></ds-loading>
-      <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && itemsRD?.payload?.page?.length > 0">
-        <div *ngIf="itemsRD?.payload?.totalPages > objects.length" class="float-start" id="view-more">
-          <button class="btn btn-link btn-link-inline text-capitalize" (click)="increase()">{{'item.page.related-items.view-more' |
-            translate:{ amount: (itemsRD?.payload?.totalElements - (incrementBy * objects.length) < incrementBy) ? itemsRD?.payload?.totalElements - (incrementBy * objects.length) : incrementBy } }} {{label}}</button>
+      @for (item of itemsRD?.payload?.page; track item) {
+        <ds-listable-object-component-loader
+          [object]="item" [viewMode]="viewMode">
+        </ds-listable-object-component-loader>
+      }
+      @if ((i + 1) === objects.length && (itemsRD || i > 0) && !(itemsRD?.hasSucceeded && itemsRD?.payload && itemsRD?.payload?.page?.length > 0)) {
+        <ds-loading message="{{'loading.default' | translate}}"></ds-loading>
+      }
+      @if ((i + 1) === objects.length && itemsRD?.payload?.page?.length > 0) {
+        <div class="d-inline-block w-100 mt-2">
+          @if (itemsRD?.payload?.totalPages > objects.length) {
+            <div class="float-start" id="view-more">
+              <button class="btn btn-link btn-link-inline text-capitalize" (click)="increase()">{{'item.page.related-items.view-more' |
+              translate:{ amount: (itemsRD?.payload?.totalElements - (incrementBy * objects.length) < incrementBy) ? itemsRD?.payload?.totalElements - (incrementBy * objects.length) : incrementBy } }} {{label}}</button>
+            </div>
+          }
+          @if (objects.length > 1) {
+            <div class="float-end" id="view-less">
+              <button class="btn btn-link btn-link-inline text-capitalize" (click)="decrease()">{{'item.page.related-items.view-less' |
+              translate:{ amount: itemsRD?.payload?.page?.length } }} {{label}}</button>
+            </div>
+          }
         </div>
-        <div *ngIf="objects.length > 1" class="float-end" id="view-less">
-          <button class="btn btn-link btn-link-inline text-capitalize" (click)="decrease()">{{'item.page.related-items.view-less' |
-            translate:{ amount: itemsRD?.payload?.page?.length } }} {{label}}</button>
-        </div>
-      </div>
+      }
     </ng-container>
-  </ng-container>
+  }
 </ds-metadata-field-wrapper>
diff --git a/src/app/item-page/versions/item-versions-row-element-version/item-versions-row-element-version.component.html b/src/app/item-page/versions/item-versions-row-element-version/item-versions-row-element-version.component.html
index 95f6ed8d6b..0608ee93cc 100644
--- a/src/app/item-page/versions/item-versions-row-element-version/item-versions-row-element-version.component.html
+++ b/src/app/item-page/versions/item-versions-row-element-version/item-versions-row-element-version.component.html
@@ -1,53 +1,60 @@
-    <div class="left-column">
-      <span *ngIf="(workspaceId$ | async) || (workflowId$ | async); then versionNumberWithoutLink else versionNumberWithLink"></span>
-      <ng-template #versionNumberWithLink>
-        <a [routerLink]="getVersionRoute(version.id)">{{version.version}}</a>
-      </ng-template>
-      <ng-template #versionNumberWithoutLink>
-        {{version.version}}
-      </ng-template>
-      <span *ngIf="version?.id === itemVersion?.id">*</span>
+<div class="left-column">
+  @if ((workspaceId$ | async) || (workflowId$ | async)) {
+    {{version.version}}
+  } @else {
+    <a [routerLink]="getVersionRoute(version.id)">{{version.version}}</a>
+  }
+  @if (version?.id === itemVersion?.id) {
+    <span>*</span>
+  }
 
-      <span *ngIf="workspaceId$ | async" class="text-light badge bg-primary ms-3">
-                      {{ "item.version.history.table.workspaceItem" | translate }}
-                    </span>
+  @if (workspaceId$ | async) {
+    <span class="text-light badge bg-primary ms-3">
+      {{ "item.version.history.table.workspaceItem" | translate }}
+    </span>
+  }
 
-      <span *ngIf="workflowId$ | async" class="text-light badge bg-info ms-3">
-                      {{ "item.version.history.table.workflowItem" | translate }}
-                    </span>
+  @if (workflowId$ | async) {
+    <span class="text-light badge bg-info ms-3">
+      {{ "item.version.history.table.workflowItem" | translate }}
+    </span>
+  }
 
-    </div>
+</div>
 
-    <div class="right-column">
+<div class="right-column">
 
-      <div class="btn-group edit-field space-children-mr" *ngIf="displayActions">
-        <!--EDIT WORKSPACE ITEM-->
+  @if (displayActions) {
+    <div class="btn-group edit-field space-children-mr">
+      <!--EDIT WORKSPACE ITEM-->
+      @if (workspaceId$ | async) {
         <button class="btn btn-outline-primary btn-sm version-row-element-edit"
-                *ngIf="workspaceId$ | async"
-                (click)="editWorkspaceItem(workspaceId$)"
-                title="{{'item.version.history.table.action.editWorkspaceItem' | translate }}">
+          (click)="editWorkspaceItem(workspaceId$)"
+          title="{{'item.version.history.table.action.editWorkspaceItem' | translate }}">
           <i class="fas fa-pencil-alt fa-fw"></i>
         </button>
-        <!--CREATE-->
-        <ng-container *ngIf="canCreateVersion$ | async">
-          <button class="btn btn-outline-primary btn-sm version-row-element-create"
-                  [dsBtnDisabled]="isAnyBeingEdited() || hasDraftVersion"
-                  (click)="createNewVersion(version)"
-                  title="{{createVersionTitle | translate }}">
-            <i class="fas fa-code-branch fa-fw"></i>
-          </button>
-        </ng-container>
-        <!--DELETE-->
-        <ng-container *ngIf="canDeleteVersion$ | async">
-          <button class="btn btn-sm version-row-element-delete"
-                  [ngClass]="isAnyBeingEdited() ? 'btn-outline-primary' : 'btn-outline-danger'"
-                  [dsBtnDisabled]="isAnyBeingEdited()"
-                  (click)="deleteVersion(version, version.id === itemVersion.id)"
-                  title="{{'item.version.history.table.action.deleteVersion' | translate}}">
-            <i class="fas fa-trash fa-fw"></i>
-          </button>
-        </ng-container>
-      </div>
-
+      }
+      <!--CREATE-->
+      @if (canCreateVersion$ | async) {
+        <button class="btn btn-outline-primary btn-sm version-row-element-create"
+          [dsBtnDisabled]="isAnyBeingEdited() || hasDraftVersion"
+          (click)="createNewVersion(version)"
+          title="{{createVersionTitle | translate }}">
+          <i class="fas fa-code-branch fa-fw"></i>
+        </button>
+      }
+      <!--DELETE-->
+      @if (canDeleteVersion$ | async) {
+        <button class="btn btn-sm version-row-element-delete"
+          [ngClass]="isAnyBeingEdited() ? 'btn-outline-primary' : 'btn-outline-danger'"
+          [dsBtnDisabled]="isAnyBeingEdited()"
+          (click)="deleteVersion(version, version.id === itemVersion.id)"
+          title="{{'item.version.history.table.action.deleteVersion' | translate}}">
+          <i class="fas fa-trash fa-fw"></i>
+        </button>
+      }
     </div>
+  }
+
+</div>
 
diff --git a/src/app/item-page/versions/item-versions-summary-modal/item-versions-summary-modal.component.html b/src/app/item-page/versions/item-versions-summary-modal/item-versions-summary-modal.component.html
index 7b622744e2..ae1e862b07 100644
--- a/src/app/item-page/versions/item-versions-summary-modal/item-versions-summary-modal.component.html
+++ b/src/app/item-page/versions/item-versions-summary-modal/item-versions-summary-modal.component.html
@@ -1,40 +1,42 @@
-<div *ngIf="(this.submitted$ | async) !== true; else waiting">
-  <div class="modal-header">{{'item.version.create.modal.header' | translate}}
-    <button type="button" class="btn-close" (click)="onModalClose()" aria-label="Close">
-    </button>
-  </div>
-  <div class="modal-body">
-    <p class="pb-2">
-      {{ "item.version.create.modal.text" | translate }}
-      <span *ngIf="!firstVersion">
-        {{ "item.version.create.modal.text.startingFrom" | translate : {version: versionNumber} }}
-      </span>
-    </p>
-    <div class="mb-3">
-      <label for="summary" class="form-label">{{'item.version.create.modal.form.summary.label' | translate }}:</label>
-      <input type="text" id="summary" class="form-control" [(ngModel)]="newVersionSummary"
-             (keyup.enter)="onModalSubmit()"
-             placeholder="{{'item.version.create.modal.form.summary.placeholder' | translate }}"/>
-<!--      (keyup.enter)="$event.preventDefault(); $event.stopImmediatePropagation()"-->
+@if ((this.submitted$ | async) !== true) {
+  <div>
+    <div class="modal-header">{{'item.version.create.modal.header' | translate}}
+      <button type="button" class="btn-close" (click)="onModalClose()" aria-label="Close">
+      </button>
     </div>
-  </div>
-  <div class="modal-footer space-children-mr">
+    <div class="modal-body">
+      <p class="pb-2">
+        {{ "item.version.create.modal.text" | translate }}
+        @if (!firstVersion) {
+          <span>
+            {{ "item.version.create.modal.text.startingFrom" | translate : {version: versionNumber} }}
+          </span>
+        }
+      </p>
+      <div class="mb-3">
+        <label for="summary" class="form-label">{{'item.version.create.modal.form.summary.label' | translate }}:</label>
+        <input type="text" id="summary" class="form-control" [(ngModel)]="newVersionSummary"
+          (keyup.enter)="onModalSubmit()"
+          placeholder="{{'item.version.create.modal.form.summary.placeholder' | translate }}"/>
+        <!--      (keyup.enter)="$event.preventDefault(); $event.stopImmediatePropagation()"-->
+      </div>
+    </div>
+    <div class="modal-footer space-children-mr">
       <button class="btn btn-outline-secondary btn-sm ms-0"
-              type="button"
-              (click)="onModalClose()"
-              title="{{'item.version.create.modal.button.cancel.tooltip' | translate}}">
+        type="button"
+        (click)="onModalClose()"
+        title="{{'item.version.create.modal.button.cancel.tooltip' | translate}}">
         <i class="fas fa-times fa-fw"></i> {{'item.version.create.modal.button.cancel' | translate}}
       </button>
       <button class="btn btn-success btn-sm ms-0"
-              type="submit"
-              (click)="onModalSubmit()"
-              title="{{'item.version.create.modal.button.confirm.tooltip' | translate}}">
+        type="submit"
+        (click)="onModalSubmit()"
+        title="{{'item.version.create.modal.button.confirm.tooltip' | translate}}">
         <i class="fas fa-check fa-fw"></i> {{'item.version.create.modal.button.confirm' | translate}}
-    </button>
+      </button>
+    </div>
   </div>
-</div>
-
-<ng-template #waiting>
+} @else {
   <div class="modal-header">{{'item.version.create.modal.submitted.header' | translate}}</div>
   <div class="modal-body">
     <p>{{'item.version.create.modal.submitted.text' | translate}}</p>
@@ -42,4 +44,5 @@
       <ds-loading [showMessage]="false"></ds-loading>
     </div>
   </div>
-</ng-template>
+}
+
diff --git a/src/app/item-page/versions/item-versions.component.html b/src/app/item-page/versions/item-versions.component.html
index c90b2e545e..8df582fd1a 100644
--- a/src/app/item-page/versions/item-versions.component.html
+++ b/src/app/item-page/versions/item-versions.component.html
@@ -1,92 +1,114 @@
-<div *ngIf="(versionsDTO$ | async) as versionsDTO; else noItemVersion">
-  <div *ngIf="(versionRD$ | async)?.payload as itemVersion">
-    <div class="mb-2" *ngIf="versionsDTO.versionDTOs.length > 0 || displayWhenEmpty">
-      <h2 *ngIf="displayTitle" class="h4">{{"item.version.history.head" | translate}}</h2>
-      <ds-alert [type]="AlertTypeEnum.Info">
-        {{ "item.version.history.selected.alert" | translate : {version: itemVersion.version} }}
-      </ds-alert>
-      <ds-pagination *ngIf="versionsDTO.versionDTOs.length > 0"
-                     (paginationChange)="onPageChange()"
-                     [hideGear]="true"
-                     [hidePagerWhenSinglePage]="true"
-                     [paginationOptions]="options"
-                     [collectionSize]="versionsDTO.totalElements"
-                     [retainScrollPosition]="true">
-        <table class="table table-striped table-bordered align-middle my-2">
-          <thead>
-          <tr>
-            <th scope="col">{{"item.version.history.table.version" | translate}}</th>
-            <th scope="col" *ngIf="(showSubmitter$ | async)">{{"item.version.history.table.editor" | translate}}</th>
-            <th scope="col">{{"item.version.history.table.date" | translate}}</th>
-            <th scope="col">{{"item.version.history.table.summary" | translate}}</th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr *ngFor="let versionDTO of versionsDTO.versionDTOs" [id]="'version-row-' + versionDTO.version.id">
-            <td class="version-row-element-version">
-              <ds-item-versions-row-element-version [hasDraftVersion]="hasDraftVersion$ | async"
-                                                    [version]="versionDTO.version"
-                                                    [item]="item" [displayActions]="displayActions"
-                                                    [itemVersion]="itemVersion"
-                                                    [versionBeingEditedNumber]="versionBeingEditedNumber"
-                                                    (versionsHistoryChange)="getAllVersions($event)"
-              ></ds-item-versions-row-element-version>
-            </td>
-            <td class="version-row-element-editor" *ngIf="(showSubmitter$ | async)">
-              {{versionDTO.version.submitterName}}
-            </td>
-            <td class="version-row-element-date">
-              {{versionDTO.version.created | date : 'yyyy-MM-dd HH:mm:ss'}}
-            </td>
-            <td class="version-row-element-summary">
-              <div class="float-start">
-                <ng-container *ngIf="isThisBeingEdited(versionDTO.version); then editSummary else showSummary"></ng-container>
-                <ng-template #showSummary>{{versionDTO.version.summary}}</ng-template>
-                <ng-template #editSummary>
-                  <input [attr.aria-label]="'item.version.history.table.action.editSummary' | translate"
-                         [(ngModel)]="versionBeingEditedSummary" (keyup.enter)="onSummarySubmit()"
-                         class="form-control" type="text"/>
-                </ng-template>
-              </div>
-
-              <div class="float-end btn-group edit-field space-children-mr" *ngIf="displayActions && versionDTO.canEditVersion | async">
-                <ng-container *ngIf="isThisBeingEdited(versionDTO.version); else notThisBeingEdited">
-                  <!--DISCARD EDIT-->
-                  <button class="btn btn-sm btn-outline-warning"
-                          (click)="disableVersionEditing()"
-                          title="{{'item.version.history.table.action.discardSummary' | translate}}">
-                    <i class="fas fa-undo-alt fa-fw"></i>
-                  </button>
-                  <!--SAVE-->
-                  <button class="btn btn-outline-success btn-sm"
-                          (click)="onSummarySubmit()"
-                          title="{{'item.version.history.table.action.saveSummary' | translate}}">
-                    <i class="fas fa-check fa-fw"></i>
-                  </button>
-                </ng-container>
-                <ng-template #notThisBeingEdited>
-                  <!--EDIT-->
-                  <button class="btn btn-outline-primary btn-sm version-row-element-edit"
-                          [dsBtnDisabled]="isAnyBeingEdited()"
-                          (click)="enableVersionEditing(versionDTO.version)"
-                          title="{{'item.version.history.table.action.editSummary' | translate}}">
-                    <i class="fas fa-edit fa-fw"></i>
-                  </button>
-                </ng-template>
-              </div>
-            </td>
-          </tr>
-          </tbody>
-        </table>
-        <div>*&nbsp;{{"item.version.history.selected" | translate}}</div>
-      </ds-pagination>
-    </div>
+@if ((versionsDTO$ | async); as versionsDTO) {
+  <div>
+    @if ((versionRD$ | async)?.payload; as itemVersion) {
+      <div>
+        @if (versionsDTO.versionDTOs.length > 0 || displayWhenEmpty) {
+          <div class="mb-2">
+            @if (displayTitle) {
+              <h2 class="h4">{{"item.version.history.head" | translate}}</h2>
+            }
+            <ds-alert [type]="AlertTypeEnum.Info">
+              {{ "item.version.history.selected.alert" | translate : {version: itemVersion.version} }}
+            </ds-alert>
+            @if (versionsDTO.versionDTOs.length > 0) {
+              <ds-pagination
+                (paginationChange)="onPageChange()"
+                [hideGear]="true"
+                [hidePagerWhenSinglePage]="true"
+                [paginationOptions]="options"
+                [collectionSize]="versionsDTO.totalElements"
+                [retainScrollPosition]="true">
+                <table class="table table-striped table-bordered align-middle my-2">
+                  <thead>
+                    <tr>
+                      <th scope="col">{{"item.version.history.table.version" | translate}}</th>
+                      @if ((showSubmitter$ | async)) {
+                        <th scope="col">{{"item.version.history.table.editor" | translate}}</th>
+                      }
+                      <th scope="col">{{"item.version.history.table.date" | translate}}</th>
+                      <th scope="col">{{"item.version.history.table.summary" | translate}}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (versionDTO of versionsDTO.versionDTOs; track versionDTO) {
+                      <tr [id]="'version-row-' + versionDTO.version.id">
+                        <td class="version-row-element-version">
+                          <ds-item-versions-row-element-version [hasDraftVersion]="hasDraftVersion$ | async"
+                            [version]="versionDTO.version"
+                            [item]="item" [displayActions]="displayActions"
+                            [itemVersion]="itemVersion"
+                            [versionBeingEditedNumber]="versionBeingEditedNumber"
+                            (versionsHistoryChange)="getAllVersions($event)"
+                          ></ds-item-versions-row-element-version>
+                        </td>
+                        @if ((showSubmitter$ | async)) {
+                          <td class="version-row-element-editor">
+                            {{versionDTO.version.submitterName}}
+                          </td>
+                        }
+                        <td class="version-row-element-date">
+                          {{versionDTO.version.created | date : 'yyyy-MM-dd HH:mm:ss'}}
+                        </td>
+                        <td class="version-row-element-summary">
+                          <div class="float-start">
+                            @if (isThisBeingEdited(versionDTO.version)) {
+                              <input [attr.aria-label]="'item.version.history.table.action.editSummary' | translate"
+                                [(ngModel)]="versionBeingEditedSummary" (keyup.enter)="onSummarySubmit()"
+                                class="form-control" type="text"/>
+                            } @else {
+                              <span>{{versionDTO.version.summary}}</span>
+                            }
+                            <ng-template #editSummary>
+                              <input [attr.aria-label]="'item.version.history.table.action.editSummary' | translate"
+                                [(ngModel)]="versionBeingEditedSummary" (keyup.enter)="onSummarySubmit()"
+                                class="form-control" type="text"/>
+                            </ng-template>
+                          </div>
+                          @if (displayActions && versionDTO.canEditVersion | async) {
+                            <div class="float-end btn-group edit-field space-children-mr">
+                              @if (isThisBeingEdited(versionDTO.version)) {
+                                <!--DISCARD EDIT-->
+                                <button class="btn btn-sm btn-outline-warning"
+                                  (click)="disableVersionEditing()"
+                                  title="{{'item.version.history.table.action.discardSummary' | translate}}">
+                                  <i class="fas fa-undo-alt fa-fw"></i>
+                                </button>
+                                <!--SAVE-->
+                                <button class="btn btn-outline-success btn-sm"
+                                  (click)="onSummarySubmit()"
+                                  title="{{'item.version.history.table.action.saveSummary' | translate}}">
+                                  <i class="fas fa-check fa-fw"></i>
+                                </button>
+                              } @else {
+                                <!--EDIT-->
+                                <button class="btn btn-outline-primary btn-sm version-row-element-edit"
+                                  [dsBtnDisabled]="isAnyBeingEdited()"
+                                  (click)="enableVersionEditing(versionDTO.version)"
+                                  title="{{'item.version.history.table.action.editSummary' | translate}}">
+                                  <i class="fas fa-edit fa-fw"></i>
+                                </button>
+                              }
+                            </div>
+                          }
+                        </td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+                <div>*&nbsp;{{"item.version.history.selected" | translate}}</div>
+              </ds-pagination>
+            }
+          </div>
+        }
+      </div>
+    }
   </div>
-</div>
+} @else {
+  @if (displayWhenEmpty) {
+    <ds-alert
+      [content]="'item.version.history.empty'"
+      [type]="AlertTypeEnum.Info">
+    </ds-alert>
+  }
+}
 
-<ng-template #noItemVersion>
-  <ds-alert *ngIf="displayWhenEmpty"
-            [content]="'item.version.history.empty'"
-            [type]="AlertTypeEnum.Info">
-  </ds-alert>
-</ng-template>
diff --git a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html
index ddb74f58f9..39565e6cdd 100644
--- a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html
+++ b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-external-dropdown/my-dspace-new-external-dropdown.component.html
@@ -1,26 +1,30 @@
-  <div class="add" *ngIf="(moreThanOne$ | async) !== true">
+@if ((moreThanOne$ | async) !== true) {
+  <div class="add">
     <button class="btn btn-lg btn-outline-primary mt-1 ms-2"
-            [attr.aria-label]="'mydspace.new-submission-external' | translate" [dsBtnDisabled]="(initialized$ | async) !== true"
-            (click)="openPage(singleEntity)" role="button"
-            title="{{'mydspace.new-submission-external' | translate}}">
+      [attr.aria-label]="'mydspace.new-submission-external' | translate" [dsBtnDisabled]="(initialized$ | async) !== true"
+      (click)="openPage(singleEntity)" role="button"
+      title="{{'mydspace.new-submission-external' | translate}}">
       <i class="fa fa-file-import" aria-hidden="true"></i>
     </button>
   </div>
+}
+@if ((moreThanOne$ | async)) {
   <div class="add w-100" display="dynamic" placement="bottom-right"
-       ngbDropdown
-       *ngIf="(moreThanOne$ | async)">
+    ngbDropdown
+    >
     <button class="btn btn-lg btn-outline-primary mt-1 ms-2" id="dropdownImport" ngbDropdownToggle
-            type="button" [dsBtnDisabled]="(initialized$ | async) !== true"
-            [attr.aria-label]="'mydspace.new-submission-external' | translate"
-            [attr.data-test]="'import-dropdown' | dsBrowserOnly"
-            title="{{'mydspace.new-submission-external' | translate}}">
+      type="button" [dsBtnDisabled]="(initialized$ | async) !== true"
+      [attr.aria-label]="'mydspace.new-submission-external' | translate"
+      [attr.data-test]="'import-dropdown' | dsBrowserOnly"
+      title="{{'mydspace.new-submission-external' | translate}}">
       <i class="fa fa-file-import" aria-hidden="true"></i>
       <span class="caret" aria-hidden="true"></span>
     </button>
     <div ngbDropdownMenu
-         class="dropdown-menu p-0"
-         id="importControlsDropdownMenu"
-         aria-labelledby="dropdownImport">
+      class="dropdown-menu p-0"
+      id="importControlsDropdownMenu"
+      aria-labelledby="dropdownImport">
       <ds-entity-dropdown [isSubmission]="false" (selectionChange)="openPage($event)"></ds-entity-dropdown>
     </div>
   </div>
+}
diff --git a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html
index 1f20330c17..0e167475bf 100644
--- a/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html
+++ b/src/app/my-dspace-page/my-dspace-new-submission/my-dspace-new-submission-dropdown/my-dspace-new-submission-dropdown.component.html
@@ -1,24 +1,28 @@
-  <div class="add" *ngIf="(moreThanOne$ | async) !== true">
+@if ((moreThanOne$ | async) !== true) {
+  <div class="add">
     <button class="btn btn-lg btn-primary mt-1 ms-2" [attr.aria-label]="'mydspace.new-submission' | translate"
-            [dsBtnDisabled]="(initialized$ | async) !== true" (click)="openDialog(singleEntity)" role="button">
+      [dsBtnDisabled]="(initialized$ | async) !== true" (click)="openDialog(singleEntity)" role="button">
       <i class="fa fa-plus-circle" aria-hidden="true"></i>
     </button>
   </div>
+}
+@if ((moreThanOne$ | async)) {
   <div class="add w-100" display="dynamic" placement="bottom-right"
-       ngbDropdown
-       *ngIf="(moreThanOne$ | async)">
+    ngbDropdown
+    >
     <button class="btn btn-lg btn-primary mt-1 ms-2" id="dropdownSubmission" ngbDropdownToggle
-            type="button"  [dsBtnDisabled]="(initialized$ | async) !== true"
-            [attr.aria-label]="'mydspace.new-submission' | translate"
-            [attr.data-test]="'submission-dropdown' | dsBrowserOnly"
-            title="{{'mydspace.new-submission' | translate}}">
+      type="button"  [dsBtnDisabled]="(initialized$ | async) !== true"
+      [attr.aria-label]="'mydspace.new-submission' | translate"
+      [attr.data-test]="'submission-dropdown' | dsBrowserOnly"
+      title="{{'mydspace.new-submission' | translate}}">
       <i class="fa fa-plus-circle" aria-hidden="true"></i>
       <span class="caret" aria-hidden="true"></span>
     </button>
     <div ngbDropdownMenu
-         class="dropdown-menu p-0"
-         id="entityControlsDropdownMenu"
-         aria-labelledby="dropdownSubmission">
+      class="dropdown-menu p-0"
+      id="entityControlsDropdownMenu"
+      aria-labelledby="dropdownSubmission">
       <ds-entity-dropdown [isSubmission]="true" (selectionChange)="openDialog($event)"></ds-entity-dropdown>
     </div>
   </div>
+}
diff --git a/src/app/my-dspace-page/my-dspace-qa-events-notifications/my-dspace-qa-events-notifications.component.html b/src/app/my-dspace-page/my-dspace-qa-events-notifications/my-dspace-qa-events-notifications.component.html
index c29412e004..f2deb49c9f 100644
--- a/src/app/my-dspace-page/my-dspace-qa-events-notifications/my-dspace-qa-events-notifications.component.html
+++ b/src/app/my-dspace-page/my-dspace-qa-events-notifications/my-dspace-qa-events-notifications.component.html
@@ -1,29 +1,30 @@
-<ng-container *ngIf="(sources$ | async)?.length > 0">
-  <ng-container *ngFor="let source of sources$ | async">
-    <div
-      class="alert alert-info d-flex flex-row"
-      *ngIf="source.totalEvents > 0"
-    >
-    <div class="source-logo-container">
-      <img
-        class="source-logo"
-        src="assets/images/qa-{{ source.id }}-logo.png"
-        onerror="this.src='assets/images/dspace-logo.svg'"
-        alt="{{ source.id }} logo"
-      />
-    </div>
-      <div class="w-100 d-flex justify-content-between">
-        <div class="ps-4 align-self-center">
-          {{ "mydspace.qa-event-notification.check.notification-info" | translate : { num: source.totalEvents } }}
-        </div>
-        <button
-          [routerLink]="[getQualityAssuranceRoute(), source.id]"
-          [queryParams]="{ forward: true }"
-          class="btn btn-primary align-self-center"
+@if ((sources$ | async)?.length > 0) {
+  @for (source of sources$ | async; track source) {
+    @if (source.totalEvents > 0) {
+      <div
+        class="alert alert-info d-flex flex-row"
         >
-          {{ "mydspace.qa-event-notification-info.check.button" | translate }}
-        </button>
+        <div class="source-logo-container">
+          <img
+            class="source-logo"
+            src="assets/images/qa-{{ source.id }}-logo.png"
+            onerror="this.src='assets/images/dspace-logo.svg'"
+            alt="{{ source.id }} logo"
+            />
+        </div>
+        <div class="w-100 d-flex justify-content-between">
+          <div class="ps-4 align-self-center">
+            {{ "mydspace.qa-event-notification.check.notification-info" | translate : { num: source.totalEvents } }}
+          </div>
+          <button
+            [routerLink]="[getQualityAssuranceRoute(), source.id]"
+            [queryParams]="{ forward: true }"
+            class="btn btn-primary align-self-center"
+            >
+            {{ "mydspace.qa-event-notification-info.check.button" | translate }}
+          </button>
+        </div>
       </div>
-    </div>
-  </ng-container>
-</ng-container>
+    }
+  }
+}
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
index 7ea2b700ec..479f206f90 100644
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -1,19 +1,19 @@
 <nav [ngClass]="{'open': (menuCollapsed | async) !== true}"
-     [@slideMobileNav]="(windowService.isXsOrSm() | async) !== true ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
-     class="navbar navbar-light navbar-expand-md px-md-0 navbar-container" role="navigation"
-     [attr.aria-label]="'nav.main.description' | translate" id="main-navbar">
+  [@slideMobileNav]="(windowService.isXsOrSm() | async) !== true ? 'default' : ((menuCollapsed | async) ? 'collapsed' : 'expanded')"
+  class="navbar navbar-light navbar-expand-md px-md-0 navbar-container" role="navigation"
+  [attr.aria-label]="'nav.main.description' | translate" id="main-navbar">
   <!-- TODO remove navbar-container class when https://github.com/twbs/bootstrap/issues/24726 is fixed -->
   <div class="navbar-inner-container w-100" [class.container]="(isMobile$ | async) !== true">
     <div class="w-100">
       <div id="collapsingNav">
-        <ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
+        @if ((isMobile$ | async) && (isAuthenticated$ | async)) {
           <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
-        </ng-container>
+        }
         <div class="navbar-nav align-items-md-center me-auto shadow-none gapx-3">
-          <ng-container *ngFor="let section of (sections | async)">
+          @for (section of (sections | async); track section) {
             <ng-container
-              *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
-          </ng-container>
+            *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
+          }
         </div>
       </div>
     </div>
diff --git a/src/app/notifications/qa/events/quality-assurance-events.component.html b/src/app/notifications/qa/events/quality-assurance-events.component.html
index dbcafbde0e..d44fb29e7d 100644
--- a/src/app/notifications/qa/events/quality-assurance-events.component.html
+++ b/src/app/notifications/qa/events/quality-assurance-events.component.html
@@ -6,13 +6,17 @@
           {{'notifications.events.title'| translate}}
         </div>
       </h1>
-      <ds-alert *ngIf="!targetId"  [type]="'alert-info'">
-        <span [innerHTML]="'quality-assurance.events.description' | translate : {topic: selectedTopicName, source: sourceId}"></span>
-      </ds-alert>
-      <ds-alert *ngIf="targetId" [type]="'alert-info'">
-        <span [innerHTML]="'quality-assurance.events.description-with-topic-and-target' | translate : {topic: selectedTopicName, source: sourceId}"></span>
-        <a [routerLink]="itemPageUrl" target="_blank">{{(getTargetItemTitle() | async)}}</a>
-      </ds-alert>
+      @if (!targetId) {
+        <ds-alert  [type]="'alert-info'">
+          <span [innerHTML]="'quality-assurance.events.description' | translate : {topic: selectedTopicName, source: sourceId}"></span>
+        </ds-alert>
+      }
+      @if (targetId) {
+        <ds-alert [type]="'alert-info'">
+          <span [innerHTML]="'quality-assurance.events.description-with-topic-and-target' | translate : {topic: selectedTopicName, source: sourceId}"></span>
+          <a [routerLink]="itemPageUrl" target="_blank">{{(getTargetItemTitle() | async)}}</a>
+        </ds-alert>
+      }
     </div>
   </div>
   <div class="row">
@@ -21,208 +25,271 @@
         {{'quality-assurance.events.topic' | translate}} {{this.showTopic}}
       </h2>
 
-      <ds-loading class="container" *ngIf="(isEventPageLoading | async)" message="{{'quality-assurance.loading' | translate}}"></ds-loading>
+      @if ((isEventPageLoading | async)) {
+        <ds-loading class="container" message="{{'quality-assurance.loading' | translate}}"></ds-loading>
+      }
 
-      <ds-pagination *ngIf="(isEventPageLoading | async) !== true"
-                      [paginationOptions]="paginationConfig"
-                      [collectionSize]="(totalElements$ | async)"
-                      [sortOptions]="paginationSortConfig"
-                      (paginationChange)="getQualityAssuranceEvents()">
-
-        <ng-container>
-          <div *ngIf="(eventsUpdated$ | async)?.length === 0" class="alert alert-info w-100 mb-2 mt-2" role="alert">
-            {{'quality-assurance.noEvents' | translate}}
-          </div>
-          <div *ngIf="(eventsUpdated$ | async)?.length !== 0" class="table-responsive mt-2">
-            <table id="events" class="table table-striped table-hover table-bordered">
-              <thead>
-              <tr>
-                <th scope="col" class="trust-col">{{'quality-assurance.event.table.trust' | translate}}</th>
-                <th scope="col" class="title-col">{{'quality-assurance.event.table.publication' | translate}}</th>
-                <th *ngIf="hasDetailColumn() && showTopic.indexOf('/PROJECT') !== -1" scope="col" class="content-col">
-                  {{'quality-assurance.event.table.project-details' | translate}}
-                </th>
-                <ng-container *ngIf="hasDetailColumn() && (showTopic.indexOf('/REINSTATE') !== -1 || showTopic.indexOf('/WITHDRAWN') !== -1)">
-                  <th scope="col" class="content-col">
-                    {{'quality-assurance.event.table.reasons' | translate}}
-                  </th>
-                  <th scope="col" class="content-col">
-                    {{'quality-assurance.event.table.person-who-requested' | translate}}
-                  </th>
-                </ng-container>
-                <th scope="col" class="button-col">{{'quality-assurance.event.table.actions' | translate}}</th>
-              </tr>
-              </thead>
-              <tbody>
-                <tr *ngFor="let eventElement of (eventsUpdated$ | async); let i = index">
-                  <td>{{eventElement?.event?.trust}}
-                  </td>
-                  <td><a *ngIf="eventElement?.target"
-                         target="_blank"
-                         rel="noopener noreferrer"
-                         [routerLink]="['/items', eventElement?.target?.id]">{{eventElement.title}}</a>
-                    <span *ngIf="!eventElement?.target">{{eventElement.title}}</span>
-                    <div *ngIf="eventElement?.event?.message?.serviceId">
-                      <span class="small pe-1">{{'quality-assurance.event.table.event.message.serviceUrl' | translate}}</span>
-                      <span [title]="eventElement.event.message.serviceId">
-                        <a [href]="eventElement.event.message.serviceId" target="_blank">{{eventElement.event.message.serviceId}}</a>
-                      </span>
-                    </div>
-                    <div *ngIf="eventElement?.event?.message?.href" class="d-flex align-items-center">
-                      <span class="small pe-1">{{'quality-assurance.event.table.event.message.link' | translate}}</span>
-                      <span [title]="eventElement.event.message.href" class="text-truncate d-inline-block w-75">
-                        <a [href]="eventElement.event.message.href" target="_blank">{{eventElement.event.message.href}}</a>
-                      </span>
-                    </div>
-                  </td>
-                  <td *ngIf="showTopic.indexOf('/PID') !== -1">
-                    <p><span class="small">{{'quality-assurance.event.table.pidtype' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.type}}</span></p>
-                    <p><span class="small">{{'quality-assurance.event.table.pidvalue' | translate}}</span><br>
-                      <a *ngIf="hasPIDHref(eventElement.event.message); else noPID" href="{{getPIDHref(eventElement.event.message)}}" rel="noopener noreferrer" target="_blank">
-                        {{eventElement.event.message.value}}
-                      </a>
-                      <ng-template #noPID><span class="badge bg-info">{{eventElement.event.message.value}}</span></ng-template>
-                    </p>
-                  </td>
-                  <td *ngIf="showTopic.indexOf('/SUBJECT') !== -1">
-                    <p><span class="small">{{'quality-assurance.event.table.subjectValue' | translate}}
-                       </span><br><span class="badge bg-info">{{eventElement.event.message.value}}</span></p>
-                  </td>
-                  <td *ngIf="showTopic.indexOf('/ABSTRACT') !== -1">
-                    <p class="abstract-container" [class.show]="showMore">
-                      <span class="small">{{'quality-assurance.event.table.abstract' | translate}}</span><br>
-                      <span class="text-ellipsis">{{eventElement.event.message.abstract}}</span>
-                    </p>
-                    <button class="btn btn-outline-primary btn-sm" (click)="showMore = !showMore">
-                      <i *ngIf="!showMore" class="fas fa-angle-down"></i>
-                      <i *ngIf="showMore" class="fas fa-angle-up"></i>
-                      {{ (showMore ? 'quality-assurance.event.table.less': 'quality-assurance.event.table.more') | translate }}
-                    </button>
-                  </td>
-                  <ng-container *ngIf="showTopic.indexOf('/REINSTATE') !== -1 || showTopic.indexOf('/WITHDRAWN') !== -1">
-                    <td>
-                      <p>
-                        <span *ngIf="eventElement.event.message">
-                          <span>{{eventElement.event.message.reason}}</span><br>
-                        </span>
-                      </p>
-                    </td>
-                    <td>
-                      <p>
-                        <span *ngIf="eventElement.event.originalId">
-                          <ds-eperson-data [ePersonId]="eventElement.event.originalId" [properties]="['email']"></ds-eperson-data>
-                        </span>
-                      </p>
-                    </td>
-                  </ng-container>
-
-                  <td *ngIf="showTopic.indexOf('/PROJECT') !== -1">
-                    <p>
-                      {{'quality-assurance.event.table.suggestedProject' | translate}}
-                    </p>
-                    <p>
-                      <span class="small">{{'quality-assurance.event.table.project' | translate}}</span><br>
-                      <a href="{{sourceUrlForProjectSearch}}{{ eventElement.event.message.sourceId}}" rel="noopener noreferrer" target="_blank">{{eventElement.event.message.title}}</a>
-                    </p>
-                    <p>
-                      <span *ngIf="eventElement.event.message.acronym"><span class="small">{{'quality-assurance.event.table.acronym' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.acronym}}</span><br></span>
-                      <span *ngIf="eventElement.event.message.code"><span class="small">{{'quality-assurance.event.table.code' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.code}}</span><br></span>
-                      <span *ngIf="eventElement.event.message.funder"><span class="small">{{'quality-assurance.event.table.funder' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.funder}}</span><br></span>
-                      <span *ngIf="eventElement.event.message.fundingProgram"><span class="small">{{'quality-assurance.event.table.fundingProgram' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.fundingProgram}}</span><br></span>
-                      <span *ngIf="eventElement.event.message.jurisdiction"><span class="small">{{'quality-assurance.event.table.jurisdiction' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.jurisdiction}}</span></span>
-                    </p>
-                    <hr>
-                    <div>
-                      {{(eventElement.hasProject ? 'quality-assurance.event.project.found' : 'quality-assurance.event.project.notFound') | translate}}
-                      <a target="_blank" rel="noopener noreferrer" *ngIf="eventElement.hasProject" title="{{eventElement.projectTitle}}" [routerLink]="['/items', eventElement.projectId]">{{eventElement.handle}} </a>
-                      <div class="btn-group">
-                        <button *ngIf="!eventElement.hasProject"
-                                class="btn btn-outline-primary btn-sm"
+      @if ((isEventPageLoading | async) !== true) {
+        <ds-pagination
+          [paginationOptions]="paginationConfig"
+          [collectionSize]="(totalElements$ | async)"
+          [sortOptions]="paginationSortConfig"
+          (paginationChange)="getQualityAssuranceEvents()">
+          <ng-container>
+            @if ((eventsUpdated$ | async)?.length === 0) {
+              <div class="alert alert-info w-100 mb-2 mt-2" role="alert">
+                {{'quality-assurance.noEvents' | translate}}
+              </div>
+            }
+            @if ((eventsUpdated$ | async)?.length !== 0) {
+              <div class="table-responsive mt-2">
+                <table id="events" class="table table-striped table-hover table-bordered">
+                  <thead>
+                    <tr>
+                      <th scope="col" class="trust-col">{{'quality-assurance.event.table.trust' | translate}}</th>
+                      <th scope="col" class="title-col">{{'quality-assurance.event.table.publication' | translate}}</th>
+                      @if (hasDetailColumn() && showTopic.indexOf('/PROJECT') !== -1) {
+                        <th scope="col" class="content-col">
+                          {{'quality-assurance.event.table.project-details' | translate}}
+                        </th>
+                      }
+                      @if (hasDetailColumn() && (showTopic.indexOf('/REINSTATE') !== -1 || showTopic.indexOf('/WITHDRAWN') !== -1)) {
+                        <th scope="col" class="content-col">
+                          {{'quality-assurance.event.table.reasons' | translate}}
+                        </th>
+                        <th scope="col" class="content-col">
+                          {{'quality-assurance.event.table.person-who-requested' | translate}}
+                        </th>
+                      }
+                      <th scope="col" class="button-col">{{'quality-assurance.event.table.actions' | translate}}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (eventElement of (eventsUpdated$ | async); track eventElement; let i = $index) {
+                      <tr>
+                        <td>{{eventElement?.event?.trust}}
+                        </td>
+                        <td>@if (eventElement?.target) {
+                          <a
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          [routerLink]="['/items', eventElement?.target?.id]">{{eventElement.title}}</a>
+                        }
+                        @if (!eventElement?.target) {
+                          <span>{{eventElement.title}}</span>
+                        }
+                        @if (eventElement?.event?.message?.serviceId) {
+                          <div>
+                            <span class="small pe-1">{{'quality-assurance.event.table.event.message.serviceUrl' | translate}}</span>
+                            <span [title]="eventElement.event.message.serviceId">
+                              <a [href]="eventElement.event.message.serviceId" target="_blank">{{eventElement.event.message.serviceId}}</a>
+                            </span>
+                          </div>
+                        }
+                        @if (eventElement?.event?.message?.href) {
+                          <div class="d-flex align-items-center">
+                            <span class="small pe-1">{{'quality-assurance.event.table.event.message.link' | translate}}</span>
+                            <span [title]="eventElement.event.message.href" class="text-truncate d-inline-block w-75">
+                              <a [href]="eventElement.event.message.href" target="_blank">{{eventElement.event.message.href}}</a>
+                            </span>
+                          </div>
+                        }
+                      </td>
+                      @if (showTopic.indexOf('/PID') !== -1) {
+                        <td>
+                          <p><span class="small">{{'quality-assurance.event.table.pidtype' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.type}}</span></p>
+                          <p><span class="small">{{'quality-assurance.event.table.pidvalue' | translate}}</span><br>
+                          @if (hasPIDHref(eventElement.event.message)) {
+                            <a href="{{getPIDHref(eventElement.event.message)}}" rel="noopener noreferrer" target="_blank">
+                              {{eventElement.event.message.value}}
+                            </a>
+                          } @else {
+                            <span class="badge bg-info">{{eventElement.event.message.value}}</span>
+                          }
+                        </p>
+                      </td>
+                    }
+                    @if (showTopic.indexOf('/SUBJECT') !== -1) {
+                      <td>
+                        <p><span class="small">{{'quality-assurance.event.table.subjectValue' | translate}}
+                          </span><br><span class="badge bg-info">{{eventElement.event.message.value}}</span></p>
+                        </td>
+                      }
+                      @if (showTopic.indexOf('/ABSTRACT') !== -1) {
+                        <td>
+                          <p class="abstract-container" [class.show]="showMore">
+                            <span class="small">{{'quality-assurance.event.table.abstract' | translate}}</span><br>
+                            <span class="text-ellipsis">{{eventElement.event.message.abstract}}</span>
+                          </p>
+                          <button class="btn btn-outline-primary btn-sm" (click)="showMore = !showMore">
+                            @if (!showMore) {
+                              <i class="fas fa-angle-down"></i>
+                            }
+                            @if (showMore) {
+                              <i class="fas fa-angle-up"></i>
+                            }
+                            {{ (showMore ? 'quality-assurance.event.table.less': 'quality-assurance.event.table.more') | translate }}
+                          </button>
+                        </td>
+                      }
+                      @if (showTopic.indexOf('/REINSTATE') !== -1 || showTopic.indexOf('/WITHDRAWN') !== -1) {
+                        <td>
+                          <p>
+                            @if (eventElement.event.message) {
+                              <span>
+                                <span>{{eventElement.event.message.reason}}</span><br>
+                              </span>
+                            }
+                          </p>
+                        </td>
+                        <td>
+                          <p>
+                            @if (eventElement.event.originalId) {
+                              <span>
+                                <ds-eperson-data [ePersonId]="eventElement.event.originalId" [properties]="['email']"></ds-eperson-data>
+                              </span>
+                            }
+                          </p>
+                        </td>
+                      }
+                      @if (showTopic.indexOf('/PROJECT') !== -1) {
+                        <td>
+                          <p>
+                            {{'quality-assurance.event.table.suggestedProject' | translate}}
+                          </p>
+                          <p>
+                            <span class="small">{{'quality-assurance.event.table.project' | translate}}</span><br>
+                            <a href="{{sourceUrlForProjectSearch}}{{ eventElement.event.message.sourceId}}" rel="noopener noreferrer" target="_blank">{{eventElement.event.message.title}}</a>
+                          </p>
+                          <p>
+                            @if (eventElement.event.message.acronym) {
+                              <span><span class="small">{{'quality-assurance.event.table.acronym' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.acronym}}</span><br></span>
+                            }
+                            @if (eventElement.event.message.code) {
+                              <span><span class="small">{{'quality-assurance.event.table.code' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.code}}</span><br></span>
+                            }
+                            @if (eventElement.event.message.funder) {
+                              <span><span class="small">{{'quality-assurance.event.table.funder' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.funder}}</span><br></span>
+                            }
+                            @if (eventElement.event.message.fundingProgram) {
+                              <span><span class="small">{{'quality-assurance.event.table.fundingProgram' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.fundingProgram}}</span><br></span>
+                            }
+                            @if (eventElement.event.message.jurisdiction) {
+                              <span><span class="small">{{'quality-assurance.event.table.jurisdiction' | translate}}</span>&nbsp;<span class="badge bg-info">{{eventElement.event.message.jurisdiction}}</span></span>
+                            }
+                          </p>
+                          <hr>
+                            <div>
+                              {{(eventElement.hasProject ? 'quality-assurance.event.project.found' : 'quality-assurance.event.project.notFound') | translate}}
+                              @if (eventElement.hasProject) {
+                                <a target="_blank" rel="noopener noreferrer" title="{{eventElement.projectTitle}}" [routerLink]="['/items', eventElement.projectId]">{{eventElement.handle}} </a>
+                              }
+                              <div class="btn-group">
+                                @if (!eventElement.hasProject) {
+                                  <button
+                                    class="btn btn-outline-primary btn-sm"
+                                    [dsBtnDisabled]="eventElement.isRunning"
+                                    (click)="openModalLookup(eventElement); $event.stopPropagation();"
+                                    [attr.aria-label]="'quality-assurance.event.modal.project.select' | translate"
+                                    >
+                                    <i class="fas fa-search"></i>
+                                  </button>
+                                }
+                                @if (eventElement.hasProject) {
+                                  <button
+                                    class="btn btn-outline-danger btn-sm"
+                                    [dsBtnDisabled]="eventElement.isRunning"
+                                    (click)="removeProject(eventElement)"
+                                    [attr.aria-label]="'quality-assurance.event.modal.project.remove' | translate"
+                                    >
+                                    <i class="fas fa-trash-alt"></i>
+                                  </button>
+                                }
+                              </div>
+                            </div>
+                          </td>
+                        }
+                        <td>
+                          @if ((isAdmin$ | async) || !isReinstateWithdrawnRequest) {
+                            <div class="btn-group button-width">
+                              @if (showTopic.indexOf('/PROJECT') !== -1) {
+                                <button
+                                  class="btn btn-outline-success btn-sm button-width"
+                                  ngbTooltip="{{'quality-assurance.event.action.import' | translate}}"
+                                  container="body"
+                                  [dsBtnDisabled]="eventElement.isRunning"
+                                  (click)="modalChoice('ACCEPTED', eventElement, acceptModal)"
+                                  [attr.aria-label]="'quality-assurance.event.action.import' | translate"
+                                  >
+                                  <i class="fas fa-check"></i>
+                                </button>
+                              }
+                              @if (showTopic.indexOf('/PROJECT') === -1) {
+                                <button
+                                  class="btn btn-outline-success btn-sm button-width"
+                                  ngbTooltip="{{'quality-assurance.event.action.accept' | translate}}"
+                                  container="body"
+                                  [dsBtnDisabled]="eventElement.isRunning"
+                                  (click)="executeAction('ACCEPTED', eventElement)"
+                                  [attr.aria-label]="'quality-assurance.event.action.accept' | translate"
+                                  >
+                                  <i class="fas fa-check"></i>
+                                </button>
+                              }
+                              <button class="btn btn-outline-dark btn-sm button-width"
+                                ngbTooltip="{{'quality-assurance.event.action.ignore' | translate}}"
+                                container="body"
                                 [dsBtnDisabled]="eventElement.isRunning"
-                                (click)="openModalLookup(eventElement); $event.stopPropagation();"
-                                [attr.aria-label]="'quality-assurance.event.modal.project.select' | translate"
-                        >
-                          <i class="fas fa-search"></i>
-                        </button>
-                        <button *ngIf="eventElement.hasProject"
-                                class="btn btn-outline-danger btn-sm"
+                                (click)="openModal('DISCARDED', eventElement, ignoreModal)"
+                                [attr.aria-label]="'quality-assurance.event.action.ignore' | translate"
+                                >
+                                <i class="fas fa-ban"></i>
+                              </button>
+                              @if ((isAdmin$ | async)) {
+                                <button class="btn btn-outline-danger btn-sm button-width"
+                                  ngbTooltip="{{'quality-assurance.event.action.reject' | translate}}"
+                                  container="body"
+                                  [dsBtnDisabled]="eventElement.isRunning"
+                                  (click)="openModal('REJECTED', eventElement, rejectModal)"
+                                  [attr.aria-label]="'quality-assurance.event.action.reject' | translate"
+                                  >
+                                  <i class="fas fa-trash-alt"></i>
+                                </button>
+                              }
+                              @if ((isAdmin$ | async) === false) {
+                                <button class="btn btn-outline-danger btn-sm button-width"
+                                  ngbTooltip="{{'quality-assurance.event.action.undo' | translate }}"
+                                  container="body"
+                                  [dsBtnDisabled]="eventElement.isRunning"
+                                  [attr.aria-label]="'quality-assurance.event.action.undo' | translate"
+                                  (click)="openModal('UNDO', eventElement, undoModal)">
+                                  <i class="fas fa-trash-alt"></i>
+                                </button>
+                              }
+                            </div>
+                          }
+                          @if ((isAdmin$ | async) !== true && isReinstateWithdrawnRequest) {
+                            <div class="btn-group button-width">
+                              <button class="btn btn-outline-danger btn-sm button-width"
+                                ngbTooltip="{{'quality-assurance.event.action.undo' | translate}}"
+                                container="body"
                                 [dsBtnDisabled]="eventElement.isRunning"
-                                (click)="removeProject(eventElement)"
-                                [attr.aria-label]="'quality-assurance.event.modal.project.remove' | translate"
-                        >
-                          <i class="fas fa-trash-alt"></i>
-                        </button>
-                      </div>
-                    </div>
-                  </td>
-                  <td>
-                    <div *ngIf="(isAdmin$ | async) || !isReinstateWithdrawnRequest" class="btn-group button-width">
-                      <button *ngIf="showTopic.indexOf('/PROJECT') !== -1"
-                              class="btn btn-outline-success btn-sm button-width"
-                              ngbTooltip="{{'quality-assurance.event.action.import' | translate}}"
-                              container="body"
-                              [dsBtnDisabled]="eventElement.isRunning"
-                              (click)="modalChoice('ACCEPTED', eventElement, acceptModal)"
-                              [attr.aria-label]="'quality-assurance.event.action.import' | translate"
-                      >
-                        <i class="fas fa-check"></i>
-                      </button>
-                      <button *ngIf="showTopic.indexOf('/PROJECT') === -1"
-                              class="btn btn-outline-success btn-sm button-width"
-                              ngbTooltip="{{'quality-assurance.event.action.accept' | translate}}"
-                              container="body"
-                              [dsBtnDisabled]="eventElement.isRunning"
-                              (click)="executeAction('ACCEPTED', eventElement)"
-                              [attr.aria-label]="'quality-assurance.event.action.accept' | translate"
-                      >
-                        <i class="fas fa-check"></i>
-                      </button>
-                      <button class="btn btn-outline-dark btn-sm button-width"
-                              ngbTooltip="{{'quality-assurance.event.action.ignore' | translate}}"
-                              container="body"
-                              [dsBtnDisabled]="eventElement.isRunning"
-                              (click)="openModal('DISCARDED', eventElement, ignoreModal)"
-                              [attr.aria-label]="'quality-assurance.event.action.ignore' | translate"
-                      >
-                        <i class="fas fa-ban"></i>
-                      </button>
-                      <button class="btn btn-outline-danger btn-sm button-width"
-                              *ngIf="(isAdmin$ | async)"
-                              ngbTooltip="{{'quality-assurance.event.action.reject' | translate}}"
-                              container="body"
-                              [dsBtnDisabled]="eventElement.isRunning"
-                              (click)="openModal('REJECTED', eventElement, rejectModal)"
-                              [attr.aria-label]="'quality-assurance.event.action.reject' | translate"
-                      >
-                        <i class="fas fa-trash-alt"></i>
-                      </button>
-                      <button class="btn btn-outline-danger btn-sm button-width"
-                              *ngIf="(isAdmin$ | async) === false"
-                              ngbTooltip="{{'quality-assurance.event.action.undo' | translate }}"
-                              container="body"
-                              [dsBtnDisabled]="eventElement.isRunning"
-                              [attr.aria-label]="'quality-assurance.event.action.undo' | translate"
-                              (click)="openModal('UNDO', eventElement, undoModal)">
-                        <i class="fas fa-trash-alt"></i>
-                      </button>
-                    </div>
-                    <div *ngIf="(isAdmin$ | async) !== true && isReinstateWithdrawnRequest" class="btn-group button-width">
-                      <button class="btn btn-outline-danger btn-sm button-width"
-                              ngbTooltip="{{'quality-assurance.event.action.undo' | translate}}"
-                              container="body"
-                              [dsBtnDisabled]="eventElement.isRunning"
-                              [attr.aria-label]="'quality-assurance.event.action.undo' | translate"
-                              (click)="openModal('UNDO', eventElement, undoModal)">
-                        <i class="fas fa-trash-alt"></i>
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </ng-container>
-      </ds-pagination>
+                                [attr.aria-label]="'quality-assurance.event.action.undo' | translate"
+                                (click)="openModal('UNDO', eventElement, undoModal)">
+                                <i class="fas fa-trash-alt"></i>
+                              </button>
+                            </div>
+                          }
+                        </td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              </div>
+            }
+          </ng-container>
+        </ds-pagination>
+      }
     </div>
   </div>
 </div>
diff --git a/src/app/notifications/qa/source/quality-assurance-source.component.html b/src/app/notifications/qa/source/quality-assurance-source.component.html
index 3a1ccbe7dc..6155b7901f 100644
--- a/src/app/notifications/qa/source/quality-assurance-source.component.html
+++ b/src/app/notifications/qa/source/quality-assurance-source.component.html
@@ -1,58 +1,69 @@
 <div class="container">
-    <div class="row">
-      <div class="col-12">
-        <h1 class="border-bottom pb-2">{{'quality-assurance.title'| translate}}</h1>
-        <ds-alert [type]="'alert-info'" [content]="'quality-assurance.source.description'"></ds-alert>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-12">
-        <h2 class="h4 border-bottom pb-2">{{'quality-assurance.source'| translate}}</h2>
-
-        <ds-loading class="container" *ngIf="(isSourceLoading() | async)" message="{{'quality-assurance.loading' | translate}}"></ds-loading>
-        <ds-pagination *ngIf="(isSourceLoading() | async) !== true"
-                       [paginationOptions]="paginationConfig"
-                       [collectionSize]="(totalElements$ | async)"
-                       [hideGear]="false"
-                       [hideSortOptions]="true"
-                       (paginationChange)="getQualityAssuranceSource()">
-
-          <ds-loading class="container" *ngIf="(isSourceProcessing() | async)" message="'quality-assurance.loading' | translate"></ds-loading>
-          <ng-container *ngIf="(isSourceProcessing() | async) !== true">
-            <div *ngIf="(sources$ | async)?.length === 0" class="alert alert-info w-100 mb-2 mt-2" role="alert">
-              {{'quality-assurance.noSource' | translate}}
-            </div>
-            <div *ngIf="(sources$ | async)?.length !== 0" class="table-responsive mt-2">
-              <table id="epeople" class="table table-striped table-hover table-bordered">
-                <thead>
-                <tr>
-                  <th scope="col">{{'quality-assurance.table.source' | translate}}</th>
-                  <th scope="col">{{'quality-assurance.table.last-event' | translate}}</th>
-                  <th scope="col">{{'quality-assurance.table.actions' | translate}}</th>
-                </tr>
-                </thead>
-                <tbody>
-                  <tr *ngFor="let sourceElement of (sources$ | async); let i = index">
-                    <td>{{sourceElement.id}}</td>
-                    <td>{{sourceElement.lastEvent | date: 'dd/MM/yyyy hh:mm' }}</td>
-                    <td>
-                      <div class="btn-group edit-field">
-                        <button
-                                class="btn btn-outline-primary btn-sm"
-                                title="{{'quality-assurance.source-list.button.detail' | translate : { param: sourceElement.id } }}"
-                                [routerLink]="[sourceElement.id]">
-                          <span class="badge bg-info">{{sourceElement.totalEvents}}</span>
-                          <i class="fas fa-info fa-fw"></i>
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </ng-container>
-        </ds-pagination>
-      </div>
+  <div class="row">
+    <div class="col-12">
+      <h1 class="border-bottom pb-2">{{'quality-assurance.title'| translate}}</h1>
+      <ds-alert [type]="'alert-info'" [content]="'quality-assurance.source.description'"></ds-alert>
     </div>
   </div>
+  <div class="row">
+    <div class="col-12">
+      <h2 class="h4 border-bottom pb-2">{{'quality-assurance.source'| translate}}</h2>
+
+      @if ((isSourceLoading() | async)) {
+        <ds-loading class="container" message="{{'quality-assurance.loading' | translate}}"></ds-loading>
+      }
+      @if ((isSourceLoading() | async) !== true) {
+        <ds-pagination
+          [paginationOptions]="paginationConfig"
+          [collectionSize]="(totalElements$ | async)"
+          [hideGear]="false"
+          [hideSortOptions]="true"
+          (paginationChange)="getQualityAssuranceSource()">
+          @if ((isSourceProcessing() | async)) {
+            <ds-loading class="container" message="'quality-assurance.loading' | translate"></ds-loading>
+          }
+          @if ((isSourceProcessing() | async) !== true) {
+            @if ((sources$ | async)?.length === 0) {
+              <div class="alert alert-info w-100 mb-2 mt-2" role="alert">
+                {{'quality-assurance.noSource' | translate}}
+              </div>
+            }
+            @if ((sources$ | async)?.length !== 0) {
+              <div class="table-responsive mt-2">
+                <table id="epeople" class="table table-striped table-hover table-bordered">
+                  <thead>
+                    <tr>
+                      <th scope="col">{{'quality-assurance.table.source' | translate}}</th>
+                      <th scope="col">{{'quality-assurance.table.last-event' | translate}}</th>
+                      <th scope="col">{{'quality-assurance.table.actions' | translate}}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (sourceElement of (sources$ | async); track sourceElement; let i = $index) {
+                      <tr>
+                        <td>{{sourceElement.id}}</td>
+                        <td>{{sourceElement.lastEvent | date: 'dd/MM/yyyy hh:mm' }}</td>
+                        <td>
+                          <div class="btn-group edit-field">
+                            <button
+                              class="btn btn-outline-primary btn-sm"
+                              title="{{'quality-assurance.source-list.button.detail' | translate : { param: sourceElement.id } }}"
+                              [routerLink]="[sourceElement.id]">
+                              <span class="badge bg-info">{{sourceElement.totalEvents}}</span>
+                              <i class="fas fa-info fa-fw"></i>
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              </div>
+            }
+          }
+        </ds-pagination>
+      }
+    </div>
+  </div>
+</div>
 
diff --git a/src/app/notifications/qa/topics/quality-assurance-topics.component.html b/src/app/notifications/qa/topics/quality-assurance-topics.component.html
index 4afc5e2185..84c91d2150 100644
--- a/src/app/notifications/qa/topics/quality-assurance-topics.component.html
+++ b/src/app/notifications/qa/topics/quality-assurance-topics.component.html
@@ -2,60 +2,75 @@
   <div class="row">
     <div class="col-12">
       <h1 class="border-bottom pb-2">{{'quality-assurance.title'| translate}}</h1>
-      <ds-alert *ngIf="!targetId" [type]="'alert-info'">{{'quality-assurance.topics.description'| translate:{source: sourceId} }}</ds-alert>
-      <ds-alert *ngIf="targetId" [type]="'alert-info'">
-        {{'quality-assurance.topics.description-with-target'| translate:{source: sourceId} }}
-        <a [routerLink]="itemPageUrl">{{(getTargetItemTitle() | async)}}</a>
-      </ds-alert>
+      @if (!targetId) {
+        <ds-alert [type]="'alert-info'">{{'quality-assurance.topics.description'| translate:{source: sourceId} }}</ds-alert>
+      }
+      @if (targetId) {
+        <ds-alert [type]="'alert-info'">
+          {{'quality-assurance.topics.description-with-target'| translate:{source: sourceId} }}
+          <a [routerLink]="itemPageUrl">{{(getTargetItemTitle() | async)}}</a>
+        </ds-alert>
+      }
     </div>
   </div>
   <div class="row">
     <div class="col-12">
       <h2 class="border-bottom pb-2">{{'quality-assurance.topics'| translate}}</h2>
 
-      <ds-loading class="container" *ngIf="(isTopicsLoading() | async)" message="{{'quality-assurance.loading' | translate}}"></ds-loading>
-      <ds-pagination *ngIf="(isTopicsLoading() | async) !== true"
-                     [paginationOptions]="paginationConfig"
-                     [collectionSize]="(totalElements$ | async)"
-                     [hideGear]="false"
-                     [hideSortOptions]="true"
-                     (paginationChange)="getQualityAssuranceTopics(sourceId, targetId)">
-
-        <ds-loading class="container" *ngIf="(isTopicsProcessing() | async)" message="'quality-assurance.loading' | translate"></ds-loading>
-        <ng-container *ngIf="(isTopicsProcessing() | async) !== true">
-          <div *ngIf="(topics$ | async)?.length === 0" class="alert alert-info w-100 mb-2 mt-2" role="alert">
-            {{'quality-assurance.noTopics' | translate}}
-          </div>
-          <div *ngIf="(topics$ | async)?.length !== 0" class="table-responsive mt-2">
-            <table id="epeople" class="table table-striped table-hover table-bordered">
-              <thead>
-              <tr>
-                <th scope="col">{{'quality-assurance.table.topic' | translate}}</th>
-                <th scope="col">{{'quality-assurance.table.last-event' | translate}}</th>
-                <th scope="col">{{'quality-assurance.table.actions' | translate}}</th>
-              </tr>
-              </thead>
-              <tbody>
-                <tr *ngFor="let topicElement of (topics$ | async); let i = index">
-                  <td>{{topicElement.name}}</td>
-                  <td>{{topicElement.lastEvent | date: 'dd/MM/yyyy hh:mm' }}</td>
-                  <td>
-                    <div class="btn-group edit-field">
-                      <button
+      @if ((isTopicsLoading() | async)) {
+        <ds-loading class="container" message="{{'quality-assurance.loading' | translate}}"></ds-loading>
+      }
+      @if ((isTopicsLoading() | async) !== true) {
+        <ds-pagination
+          [paginationOptions]="paginationConfig"
+          [collectionSize]="(totalElements$ | async)"
+          [hideGear]="false"
+          [hideSortOptions]="true"
+          (paginationChange)="getQualityAssuranceTopics(sourceId, targetId)">
+          @if ((isTopicsProcessing() | async)) {
+            <ds-loading class="container" message="'quality-assurance.loading' | translate"></ds-loading>
+          }
+          @if ((isTopicsProcessing() | async) !== true) {
+            @if ((topics$ | async)?.length === 0) {
+              <div class="alert alert-info w-100 mb-2 mt-2" role="alert">
+                {{'quality-assurance.noTopics' | translate}}
+              </div>
+            }
+            @if ((topics$ | async)?.length !== 0) {
+              <div class="table-responsive mt-2">
+                <table id="epeople" class="table table-striped table-hover table-bordered">
+                  <thead>
+                    <tr>
+                      <th scope="col">{{'quality-assurance.table.topic' | translate}}</th>
+                      <th scope="col">{{'quality-assurance.table.last-event' | translate}}</th>
+                      <th scope="col">{{'quality-assurance.table.actions' | translate}}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    @for (topicElement of (topics$ | async); track topicElement; let i = $index) {
+                      <tr>
+                        <td>{{topicElement.name}}</td>
+                        <td>{{topicElement.lastEvent | date: 'dd/MM/yyyy hh:mm' }}</td>
+                        <td>
+                          <div class="btn-group edit-field">
+                            <button
                               class="btn btn-outline-primary btn-sm"
                               title="{{'quality-assurance.topics-list.button.detail' | translate : { param: topicElement.name } }}"
                               [routerLink]="[getQualityAssuranceRoute(), sourceId, topicElement.id]">
-                        <span class="badge bg-info">{{topicElement.totalEvents}}</span>
-                        <i class="fas fa-info fa-fw"></i>
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </ng-container>
-      </ds-pagination>
+                              <span class="badge bg-info">{{topicElement.totalEvents}}</span>
+                              <i class="fas fa-info fa-fw"></i>
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    }
+                  </tbody>
+                </table>
+              </div>
+            }
+          }
+        </ds-pagination>
+      }
     </div>
   </div>
 </div>
diff --git a/src/app/notifications/suggestion-actions/suggestion-actions.component.html b/src/app/notifications/suggestion-actions/suggestion-actions.component.html
index d262e746b1..96a0eb82e5 100644
--- a/src/app/notifications/suggestion-actions/suggestion-actions.component.html
+++ b/src/app/notifications/suggestion-actions/suggestion-actions.component.html
@@ -1,29 +1,35 @@
 <div class="d-inline">
   <div ngbDropdown class="d-inline">
-    <button *ngIf="isCollectionFixed; else chooseCollection" class="btn btn-success" type="button" (click)="approveAndImportCollectionFixed()">
-      <i class="fa fa-check" aria-hidden="true"></i> {{ approveAndImportLabel() | translate}}
-    </button>
-    <ng-template #chooseCollection>
+    @if (isCollectionFixed) {
+      <button class="btn btn-success" type="button" (click)="approveAndImportCollectionFixed()">
+        <i class="fa fa-check" aria-hidden="true"></i> {{ approveAndImportLabel() | translate}}
+      </button>
+    } @else {
       <button class="btn btn-success" id="dropdownSubmission" ngbDropdownToggle
-              type="button">
+        type="button">
         <i class="fa fa-check" aria-hidden="true"></i> {{ approveAndImportLabel() | translate}}
         <span class="caret"></span>
       </button>
-
       <div ngbDropdownMenu
-           class="dropdown-menu"
-           id="entityControlsDropdownMenu"
-           aria-labelledby="dropdownSubmission">
+        class="dropdown-menu"
+        id="entityControlsDropdownMenu"
+        aria-labelledby="dropdownSubmission">
         <ds-entity-dropdown (selectionChange)="openDialog($event)"></ds-entity-dropdown>
       </div>
-    </ng-template>
+    }
 
   </div>
   <button (click)="ignoreSuggestion()" class="btn btn-danger ms-2"><i class="fa fa-ban"></i>
-    {{ ignoreSuggestionLabel() | translate}}</button>
-  <button *ngIf="!isBulk" (click)="toggleSeeEvidences()" [dsBtnDisabled]="!hasEvidence" class="btn btn-info ms-2">
+{{ ignoreSuggestionLabel() | translate}}</button>
+@if (!isBulk) {
+  <button (click)="toggleSeeEvidences()" [dsBtnDisabled]="!hasEvidence" class="btn btn-info ms-2">
     <i class="fa fa-eye"></i>
-    <ng-container *ngIf="!seeEvidence"> {{ 'suggestion.seeEvidence' | translate}}</ng-container>
-    <ng-container *ngIf="seeEvidence"> {{ 'suggestion.hideEvidence' | translate}}</ng-container>
+    @if (!seeEvidence) {
+      {{ 'suggestion.seeEvidence' | translate}}
+    }
+    @if (seeEvidence) {
+      {{ 'suggestion.hideEvidence' | translate}}
+    }
   </button>
+}
 </div>
diff --git a/src/app/notifications/suggestions-popup/suggestions-popup.component.html b/src/app/notifications/suggestions-popup/suggestions-popup.component.html
index f21b469ccf..b04d3deaef 100644
--- a/src/app/notifications/suggestions-popup/suggestions-popup.component.html
+++ b/src/app/notifications/suggestions-popup/suggestions-popup.component.html
@@ -1,27 +1,32 @@
-<div class="notifications-wrapper position-fixed top right" *ngIf="suggestionsRD$ | async">
-  <div class="notification alert alert-success alert-dismissible m-3 shadow" role="alert">
-    <button (click)="removePopup()"
-            type="button" class="close pt-0 pe-1 pe-0 pb-0" data-dismiss="alert" aria-label="Close">
-      <span aria-hidden="true">&times;</span>
-    </button>
-
-    <div class="d-flex flex-row">
-      <div class="d-flex flex-column justify-content-center align-items-center">
-        <div class="notification-icon d-flex justify-content-center"><i class="fas fa-2x fa-check-circle"></i></div>
-      </div>
-      <div class="d-flex flex-column justify-content-center align-content-stretch text-left p-2">
-        <ng-container *ngIf="(suggestionsRD$ | async) as suggestions">
-          <ng-container *ngFor="let suggestion of suggestions" class="alert alert-info">
-            <div *ngIf="suggestion.total > 0">
-              <div [innerHTML]="'notification.suggestion' | translate: getNotificationSuggestionInterpolation(suggestion)"></div>
-              {{ 'notification.suggestion.please' | translate }}
-              <a [routerLink]="getNotificationSuggestionInterpolation(suggestion).url"> {{ 'notification.suggestion.review' | translate}} </a>
-            </div>
-          </ng-container>
-        </ng-container>
+@if (suggestionsRD$ | async) {
+  <div class="notifications-wrapper position-fixed top right">
+    <div class="notification alert alert-success alert-dismissible m-3 shadow" role="alert">
+      <button (click)="removePopup()"
+        type="button" class="close pt-0 pe-1 pe-0 pb-0" data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+      <div class="d-flex flex-row">
+        <div class="d-flex flex-column justify-content-center align-items-center">
+          <div class="notification-icon d-flex justify-content-center"><i class="fas fa-2x fa-check-circle"></i></div>
+        </div>
+        <div class="d-flex flex-column justify-content-center align-content-stretch text-left p-2">
+          @if ((suggestionsRD$ | async); as suggestions) {
+            @for (suggestion of suggestions; track suggestion) {
+              <ng-container class="alert alert-info">
+                @if (suggestion.total > 0) {
+                  <div>
+                    <div [innerHTML]="'notification.suggestion' | translate: getNotificationSuggestionInterpolation(suggestion)"></div>
+                    {{ 'notification.suggestion.please' | translate }}
+                    <a [routerLink]="getNotificationSuggestionInterpolation(suggestion).url"> {{ 'notification.suggestion.review' | translate}} </a>
+                  </div>
+                }
+              </ng-container>
+            }
+          }
+        </div>
       </div>
     </div>
   </div>
-</div>
+}
 
 
diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
index a60ba59ec4..d984df0e9b 100644
--- a/src/app/process-page/detail/process-detail.component.html
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -1,106 +1,125 @@
-<div class="container" *ngIf="(processRD$ | async)?.payload as process">
+@if ((processRD$ | async)?.payload; as process) {
+  <div class="container">
     <div class="row">
       <div class="col-10">
         <h1 class="flex-grow-1">
           {{ 'process.detail.title' | translate:{ id: process?.processId, name: process?.scriptName } }}
         </h1>
       </div>
-      <div *ngIf="isRefreshing$ | async" class="col-2 refresh-counter">
-        {{ 'process.detail.refreshing' | translate }} <i class="fas fa-sync-alt fa-spin"></i>
-      </div>
+      @if (isRefreshing$ | async) {
+        <div class="col-2 refresh-counter">
+          {{ 'process.detail.refreshing' | translate }} <i class="fas fa-sync-alt fa-spin"></i>
+        </div>
+      }
     </div>
-
     <ds-process-detail-field id="process-name" [title]="'process.detail.script'">
-        <div>{{ process?.scriptName }}</div>
+      <div>{{ process?.scriptName }}</div>
     </ds-process-detail-field>
-
-    <ds-process-detail-field *ngIf="process?.parameters && process?.parameters?.length > 0" id="process-arguments"
-                             [title]="'process.detail.arguments'">
-        <div *ngFor="let argument of process?.parameters">{{ argument?.name }} {{ argument?.value }}</div>
-    </ds-process-detail-field>
-
+    @if (process?.parameters && process?.parameters?.length > 0) {
+      <ds-process-detail-field id="process-arguments"
+        [title]="'process.detail.arguments'">
+        @for (argument of process?.parameters; track argument) {
+          <div>{{ argument?.name }} {{ argument?.value }}</div>
+        }
+      </ds-process-detail-field>
+    }
     <div *ngVar="(filesRD$ | async)?.payload?.page as files">
-        <ds-process-detail-field *ngIf="files && files?.length > 0" id="process-files"
-                                 [title]="'process.detail.output-files'">
+      @if (files && files?.length > 0) {
+        <ds-process-detail-field id="process-files"
+          [title]="'process.detail.output-files'">
           <div class="d-flex flex-column">
-            <ds-file-download-link *ngFor="let file of files; let last=last;" [bitstream]="file">
-              <span>{{getFileName(file)}}</span>
-              <span>({{(file?.sizeBytes) | dsFileSize }})</span>
-            </ds-file-download-link>
+            @for (file of files; track file; let last = $last) {
+              <ds-file-download-link [bitstream]="file">
+                <span>{{getFileName(file)}}</span>
+                <span>({{(file?.sizeBytes) | dsFileSize }})</span>
+              </ds-file-download-link>
+            }
           </div>
         </ds-process-detail-field>
+      }
     </div>
-
-    <ds-process-detail-field *ngIf="process && process.startTime" id="process-start-time"
-                             [title]="'process.detail.start-time' | translate">
+    @if (process && process.startTime) {
+      <ds-process-detail-field id="process-start-time"
+        [title]="'process.detail.start-time' | translate">
         <div>{{ process.startTime | date:dateFormat:'UTC' }}</div>
-    </ds-process-detail-field>
-
-    <ds-process-detail-field *ngIf="process && process.endTime" id="process-end-time"
-                             [title]="'process.detail.end-time' | translate">
+      </ds-process-detail-field>
+    }
+    @if (process && process.endTime) {
+      <ds-process-detail-field id="process-end-time"
+        [title]="'process.detail.end-time' | translate">
         <div>{{ process.endTime | date:dateFormat:'UTC' }}</div>
-    </ds-process-detail-field>
-
-    <ds-process-detail-field *ngIf="process && process.processStatus" id="process-status"
-                             [title]="'process.detail.status' | translate">
+      </ds-process-detail-field>
+    }
+    @if (process && process.processStatus) {
+      <ds-process-detail-field id="process-status"
+        [title]="'process.detail.status' | translate">
         <div>{{ process.processStatus }}</div>
-    </ds-process-detail-field>
-
-    <ds-process-detail-field *ngIf="isProcessFinished(process)" id="process-output" [title]="'process.detail.output'">
-        <button *ngIf="!showOutputLogs && process?._links?.output?.href !== undefined" id="showOutputButton"
-                class="btn btn-primary" (click)="showProcessOutputLogs()">
+      </ds-process-detail-field>
+    }
+    @if (isProcessFinished(process)) {
+      <ds-process-detail-field id="process-output" [title]="'process.detail.output'">
+        @if (!showOutputLogs && process?._links?.output?.href !== undefined) {
+          <button id="showOutputButton"
+            class="btn btn-primary" (click)="showProcessOutputLogs()">
             {{ 'process.detail.logs.button' | translate }}
-        </button>
-        <ds-loading *ngIf="retrievingOutputLogs$ | async" class="ds-themed-loading"
-                           message="{{ 'process.detail.logs.loading' | translate }}"></ds-loading>
-        <pre class="fw-bold text-secondary bg-light p-3" tabindex="0"
-             *ngIf="showOutputLogs && (outputLogs$ | async)?.length > 0">{{ (outputLogs$ | async) }}</pre>
-        <p id="no-output-logs-message" *ngIf="((retrievingOutputLogs$ | async) !== true && showOutputLogs)
-      && (outputLogs$ | async | dsHasNoValue) || (outputLogs$ | async)?.length === 0 || !process._links.output">
+          </button>
+        }
+        @if (retrievingOutputLogs$ | async) {
+          <ds-loading class="ds-themed-loading"
+          message="{{ 'process.detail.logs.loading' | translate }}"></ds-loading>
+        }
+        @if (showOutputLogs && (outputLogs$ | async)?.length > 0) {
+          <pre class="fw-bold text-secondary bg-light p-3" tabindex="0"
+          >{{ (outputLogs$ | async) }}</pre>
+        }
+        @if (((retrievingOutputLogs$ | async) !== true && showOutputLogs)
+          && (outputLogs$ | async | dsHasNoValue) || (outputLogs$ | async)?.length === 0 || !process._links.output) {
+          <p id="no-output-logs-message">
             {{ 'process.detail.logs.none' | translate }}
-        </p>
-    </ds-process-detail-field>
-
+          </p>
+        }
+      </ds-process-detail-field>
+    }
     <ds-process-detail-field id="process-actions" [title]="'process.detail.actions'">
-        <button class="btn btn-success me-2" routerLink="/processes/new" [queryParams]="{id: process?.processId}"><i
-                class="fas fa-plus pe-2"></i>{{'process.detail.create' | translate}}</button>
-        <button *ngIf="isProcessFinished(process)" id="delete" class="btn btn-danger"
-                (click)="openDeleteModal(deleteModal)">
-            <i class="fas fa-trash pe-2"></i>{{ 'process.detail.delete.button' | translate }}
+      <button class="btn btn-success me-2" routerLink="/processes/new" [queryParams]="{id: process?.processId}"><i
+      class="fas fa-plus pe-2"></i>{{'process.detail.create' | translate}}</button>
+      @if (isProcessFinished(process)) {
+        <button id="delete" class="btn btn-danger"
+          (click)="openDeleteModal(deleteModal)">
+          <i class="fas fa-trash pe-2"></i>{{ 'process.detail.delete.button' | translate }}
         </button>
+      }
     </ds-process-detail-field>
-
     <div style="text-align: right;">
-        <a class="btn btn-outline-secondary mt-3" [routerLink]="'/processes'">{{'process.detail.back' | translate}}</a>
+      <a class="btn btn-outline-secondary mt-3" [routerLink]="'/processes'">{{'process.detail.back' | translate}}</a>
     </div>
-</div>
+  </div>
+}
 
 <ng-template #deleteModal >
 
-    <div *ngIf="(processRD$ | async)?.payload as process">
-
-        <div class="modal-header">
-            <div>
-                <h4>{{'process.detail.delete.header' | translate }}</h4>
-            </div>
-            <button type="button" class="btn-close"
-                    (click)="closeModal()" aria-label="Close">
-                <span aria-hidden="true">×</span>
-            </button>
+  @if ((processRD$ | async)?.payload; as process) {
+    <div>
+      <div class="modal-header">
+        <div>
+          <h4>{{'process.detail.delete.header' | translate }}</h4>
         </div>
-
-        <div class="modal-body">
-            <div>{{'process.detail.delete.body' | translate }}</div>
-            <div class="mt-4">
-                <button class="btn btn-primary me-2" (click)="closeModal()">{{'process.detail.delete.cancel' | translate}}</button>
-                <button id="delete-confirm" class="btn btn-danger"
-                        (click)="deleteProcess(process)">{{ 'process.detail.delete.confirm' | translate }}
-                </button>
-            </div>
+        <button type="button" class="btn-close"
+          (click)="closeModal()" aria-label="Close">
+          <span aria-hidden="true">×</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div>{{'process.detail.delete.body' | translate }}</div>
+        <div class="mt-4">
+          <button class="btn btn-primary me-2" (click)="closeModal()">{{'process.detail.delete.cancel' | translate}}</button>
+          <button id="delete-confirm" class="btn btn-danger"
+            (click)="deleteProcess(process)">{{ 'process.detail.delete.confirm' | translate }}
+          </button>
         </div>
-
-
+      </div>
     </div>
+  }
 
 </ng-template>
 
diff --git a/src/app/process-page/form/process-form.component.html b/src/app/process-page/form/process-form.component.html
index c1d1c3a61c..3bb6a796c6 100644
--- a/src/app/process-page/form/process-form.component.html
+++ b/src/app/process-page/form/process-form.component.html
@@ -1,25 +1,31 @@
 <div class="container">
-    <div class="row">
-        <h1 class="col-12">
-            {{headerKey | translate}}
-        </h1>
-        <div class="col-12 col-md-6 mb-2">
-            <form #form="ngForm" (ngSubmit)="submitForm(form)">
-                <ds-scripts-select [script]="selectedScript" (select)="selectedScript = $event; parameters = undefined"></ds-scripts-select>
-                <ds-process-parameters [initialParams]="parameters" [script]="selectedScript" (updateParameters)="parameters = $event"></ds-process-parameters>
-                <a [routerLink]="['/processes']" class="btn btn-danger float-start">{{ 'process.new.cancel' | translate }}</a>
-                <button type="submit" class="btn btn-primary float-end">{{ 'process.new.submit' | translate }}</button>
-            </form>
-        </div>
-        <div class="col-12 col-md-6">
-            <ds-script-help *ngIf="selectedScript" [script]="selectedScript"></ds-script-help>
-        </div>
+  <div class="row">
+    <h1 class="col-12">
+      {{headerKey | translate}}
+    </h1>
+    <div class="col-12 col-md-6 mb-2">
+      <form #form="ngForm" (ngSubmit)="submitForm(form)">
+        <ds-scripts-select [script]="selectedScript" (select)="selectedScript = $event; parameters = undefined"></ds-scripts-select>
+        <ds-process-parameters [initialParams]="parameters" [script]="selectedScript" (updateParameters)="parameters = $event"></ds-process-parameters>
+        <a [routerLink]="['/processes']" class="btn btn-danger float-start">{{ 'process.new.cancel' | translate }}</a>
+        <button type="submit" class="btn btn-primary float-end">{{ 'process.new.submit' | translate }}</button>
+      </form>
     </div>
+    <div class="col-12 col-md-6">
+      @if (selectedScript) {
+        <ds-script-help [script]="selectedScript"></ds-script-help>
+      }
+    </div>
+  </div>
 
-    <div *ngIf="missingParameters.length > 0" class="mt-3 alert alert-danger validation-error">
-        {{'process.new.parameter.required.missing' | translate}}
-        <ul>
-            <li *ngFor="let missing of missingParameters">{{missing}}</li>
-        </ul>
+  @if (missingParameters.length > 0) {
+    <div class="mt-3 alert alert-danger validation-error">
+      {{'process.new.parameter.required.missing' | translate}}
+      <ul>
+        @for (missing of missingParameters; track missing) {
+          <li>{{missing}}</li>
+        }
+      </ul>
     </div>
+  }
 </div>
diff --git a/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html
index ee4714806c..1d82530f38 100644
--- a/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html
+++ b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html
@@ -1,20 +1,26 @@
 <div class="row gap-2 mb-2 mx-0">
-    <select id="process-parameters"
-            class="form-select col"
-            name="parameter-{{index}}"
-            [attr.aria-label]="'process.new.select-parameter' | translate"
-            [(ngModel)]="selectedParameter"
-            #param="ngModel">
-        <option [ngValue]="undefined">{{ 'process.new.add-parameter' | translate }}</option>
-        <option *ngFor="let param of parameters" [ngValue]="param.name">
-            {{param.nameLong || param.name}}
-        </option>
-    </select>
-    <ds-parameter-value-input [initialValue]="parameterValue.value" [parameter]="selectedScriptParameter" (updateValue)="selectedParameterValue = $event" class="d-block col px-0" [index]="index"></ds-parameter-value-input>
-    <button *ngIf="removable" [attr.aria-label]="'process.new.delete-parameter' | translate"
-            (click)="removeParameter.emit(parameterValue);" class="btn btn-danger col-1 remove-button">
+  <select id="process-parameters"
+    class="form-select col"
+    name="parameter-{{index}}"
+    [attr.aria-label]="'process.new.select-parameter' | translate"
+    [(ngModel)]="selectedParameter"
+    #param="ngModel">
+    <option [ngValue]="undefined">{{ 'process.new.add-parameter' | translate }}</option>
+    @for (param of parameters; track param) {
+      <option [ngValue]="param.name">
+        {{param.nameLong || param.name}}
+      </option>
+    }
+  </select>
+  <ds-parameter-value-input [initialValue]="parameterValue.value" [parameter]="selectedScriptParameter" (updateValue)="selectedParameterValue = $event" class="d-block col px-0" [index]="index"></ds-parameter-value-input>
+  @if (removable) {
+    <button [attr.aria-label]="'process.new.delete-parameter' | translate"
+      (click)="removeParameter.emit(parameterValue);" class="btn btn-danger col-1 remove-button">
       <i class="fas fa-trash"></i>
     </button>
-    <span *ngIf="!removable" class="col-1"></span>
+  }
+  @if (!removable) {
+    <span class="col-1"></span>
+  }
 </div>
 
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
index 85372acce0..101df27b69 100644
--- a/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
@@ -1,13 +1,17 @@
 <label for="file-upload-{{index}}" class="form-label d-flex align-items-center m-0">
-    <span class="btn btn-primary">
-        {{'process.new.parameter.file.upload-button' | translate}}
-    </span>
-    <span class="file-name ms-1">{{fileObject?.name}}</span>
+  <span class="btn btn-primary">
+    {{'process.new.parameter.file.upload-button' | translate}}
+  </span>
+  <span class="file-name ms-1">{{fileObject?.name}}</span>
 </label>
 <input requireFile #file="ngModel" type="file" name="file-upload-{{index}}" id="file-upload-{{index}}" class="form-control-file d-none" [ngModel]="fileObject" (ngModelChange)="setFile($event)"/>
-<div *ngIf="file.invalid && (file.dirty || file.touched)"
-     class="alert alert-danger validation-error">
-    <div *ngIf="file.errors.required">
+@if (file.invalid && (file.dirty || file.touched)) {
+  <div
+    class="alert alert-danger validation-error">
+    @if (file.errors.required) {
+      <div>
         {{'process.new.parameter.file.required' | translate}}
-    </div>
-</div>
+      </div>
+    }
+  </div>
+}
diff --git a/src/app/process-page/form/process-parameters/process-parameters.component.html b/src/app/process-page/form/process-parameters/process-parameters.component.html
index 5676da2a12..af82cac94b 100644
--- a/src/app/process-page/form/process-parameters/process-parameters.component.html
+++ b/src/app/process-page/form/process-parameters/process-parameters.component.html
@@ -1,11 +1,14 @@
-<div class="mb-3" *ngIf="script?.parameters?.length" data-testID="parameters-select-container">
-  <label class="form-label">{{'process.new.select-parameters' | translate}}</label>
-  <ds-parameter-select
-    *ngFor="let value of parameterValues; let i = index; let last = last"
-    [parameters]="script.parameters"
-    [parameterValue]="value"
-    [removable]="!last"
-    [index]="i"
-    (removeParameter)="removeParameter(i)"
-    (changeParameter)="updateParameter($event, i)"></ds-parameter-select>
-</div>
+@if (script?.parameters?.length) {
+  <div class="mb-3" data-testID="parameters-select-container">
+    <label class="form-label">{{'process.new.select-parameters' | translate}}</label>
+    @for (value of parameterValues; track value; let i = $index; let last = $last) {
+      <ds-parameter-select
+        [parameters]="script.parameters"
+        [parameterValue]="value"
+        [removable]="!last"
+        [index]="i"
+        (removeParameter)="removeParameter(i)"
+      (changeParameter)="updateParameter($event, i)"></ds-parameter-select>
+    }
+  </div>
+}
diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.html b/src/app/process-page/form/scripts-select/scripts-select.component.html
index ffe0c7dc88..88ca77b07f 100644
--- a/src/app/process-page/form/scripts-select/scripts-select.component.html
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.html
@@ -2,46 +2,51 @@
   <div>
     <div ngbDropdown class="d-flex">
       <input id="process-script"
-             class="form-select"
-             required
-             [ngModel]="selectedScript"
-             placeholder="{{'process.new.select-script.placeholder' | translate}}"
-             [ngModelOptions]="{standalone: true}"
-             ngbDropdownToggle
-             role="combobox"
-             #script="ngModel">
+        class="form-select"
+        required
+        [ngModel]="selectedScript"
+        placeholder="{{'process.new.select-script.placeholder' | translate}}"
+        [ngModelOptions]="{standalone: true}"
+        ngbDropdownToggle
+        role="combobox"
+        #script="ngModel">
       <div ngbDropdownMenu aria-labelledby="process-script" class="w-100 scrollable-menu"
-            role="menu"
-            (scroll)="onScroll($event)"
-            infiniteScroll
-            [infiniteScrollDistance]="5"
-            [infiniteScrollThrottle]="300"
-            [infiniteScrollUpDistance]="1.5"
-            [fromRoot]="true"
-            [scrollWindow]="false">
-            <button class="dropdown-item"
-                    *ngFor="let script of scripts"
-                    role="menuitem"
-                    type="button"
-                    title="{{ script.name }}"
-                    (click)="onSelect(script);">
-              <span class="text-truncate">{{ script.name }}</span>
-            </button>
-          <ng-container *ngIf="(isLoading$ | async)">
-            <button class="dropdown-item disabled" role="menuitem">
-              <ds-loading message="{{'loading.default' | translate}}">
-              </ds-loading>
-            </button>
-          </ng-container>
+        role="menu"
+        (scroll)="onScroll($event)"
+        infiniteScroll
+        [infiniteScrollDistance]="5"
+        [infiniteScrollThrottle]="300"
+        [infiniteScrollUpDistance]="1.5"
+        [fromRoot]="true"
+        [scrollWindow]="false">
+        @for (script of scripts; track script) {
+          <button class="dropdown-item"
+            role="menuitem"
+            type="button"
+            title="{{ script.name }}"
+            (click)="onSelect(script);">
+            <span class="text-truncate">{{ script.name }}</span>
+          </button>
+        }
+        @if ((isLoading$ | async)) {
+          <button class="dropdown-item disabled" role="menuitem">
+            <ds-loading message="{{'loading.default' | translate}}">
+            </ds-loading>
+          </button>
+        }
       </div>
     </div>
   </div>
   <div>
-    <div *ngIf="script.invalid && (script.dirty || script.touched)"
-         class="alert alert-danger validation-error">
-      <div *ngIf="script.errors.required">
-        {{ 'process.new.select-script.required' | translate }}
+    @if (script.invalid && (script.dirty || script.touched)) {
+      <div
+        class="alert alert-danger validation-error">
+        @if (script.errors.required) {
+          <div>
+            {{ 'process.new.select-script.required' | translate }}
+          </div>
+        }
       </div>
-    </div>
+    }
   </div>
 </div>
diff --git a/src/app/process-page/overview/process-overview.component.html b/src/app/process-page/overview/process-overview.component.html
index 65100e79eb..ff46c26482 100644
--- a/src/app/process-page/overview/process-overview.component.html
+++ b/src/app/process-page/overview/process-overview.component.html
@@ -1,78 +1,86 @@
 <div class="container">
-    <div class="d-flex">
-        <h1 class="flex-grow-1">{{'process.overview.title' | translate}}</h1>
-    </div>
-    <ng-container *ngTemplateOutlet="buttons"></ng-container>
+  <div class="d-flex">
+    <h1 class="flex-grow-1">{{'process.overview.title' | translate}}</h1>
+  </div>
+  <ng-container *ngTemplateOutlet="buttons"></ng-container>
 
-    <div class="sections">
-        <ds-process-overview-table
-                [processStatus]="ProcessStatus.RUNNING"
-                [useAutoRefreshingSearchBy]="true"
-                [getInfoValueMethod]="processOverviewService.timeStarted"/>
-        <ds-process-overview-table
-                [processStatus]="ProcessStatus.SCHEDULED"
-                [useAutoRefreshingSearchBy]="true"
-                [getInfoValueMethod]="processOverviewService.timeCreated"/>
-        <ds-process-overview-table
-                [processStatus]="ProcessStatus.COMPLETED"
-                [sortField]="ProcessSortField.endTime"
-                [useAutoRefreshingSearchBy]="true"
-                [getInfoValueMethod]="processOverviewService.timeCompleted"/>
-        <ds-process-overview-table
-                [processStatus]="ProcessStatus.FAILED"
-                [sortField]="ProcessSortField.endTime"
-                [useAutoRefreshingSearchBy]="true"
-                [getInfoValueMethod]="processOverviewService.timeCompleted"/>
-    </div>
+  <div class="sections">
+    <ds-process-overview-table
+      [processStatus]="ProcessStatus.RUNNING"
+      [useAutoRefreshingSearchBy]="true"
+      [getInfoValueMethod]="processOverviewService.timeStarted"/>
+    <ds-process-overview-table
+      [processStatus]="ProcessStatus.SCHEDULED"
+      [useAutoRefreshingSearchBy]="true"
+      [getInfoValueMethod]="processOverviewService.timeCreated"/>
+    <ds-process-overview-table
+      [processStatus]="ProcessStatus.COMPLETED"
+      [sortField]="ProcessSortField.endTime"
+      [useAutoRefreshingSearchBy]="true"
+      [getInfoValueMethod]="processOverviewService.timeCompleted"/>
+    <ds-process-overview-table
+      [processStatus]="ProcessStatus.FAILED"
+      [sortField]="ProcessSortField.endTime"
+      [useAutoRefreshingSearchBy]="true"
+      [getInfoValueMethod]="processOverviewService.timeCompleted"/>
+  </div>
 
-    <ng-container *ngTemplateOutlet="buttons"></ng-container>
+  <ng-container *ngTemplateOutlet="buttons"></ng-container>
 </div>
 
 <ng-template #buttons>
-    <div class="d-flex justify-content-end mb-2">
-        <button *ngIf="processBulkDeleteService.hasSelected()" class="btn btn-primary me-2"
-                (click)="processBulkDeleteService.clearAllProcesses()"><i
-                class="fas fa-undo pe-2"></i>{{'process.overview.delete.clear' | translate }}
-        </button>
-        <button *ngIf="processBulkDeleteService.hasSelected()" class="btn btn-danger me-2"
-                (click)="openDeleteModal(deleteModal)"><i
-                class="fas fa-trash pe-2"></i>{{'process.overview.delete' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}
-        </button>
-        <button class="btn btn-success" routerLink="/processes/new"><i
-            class="fas fa-plus pe-2"></i>{{'process.overview.new' | translate}}</button>
-    </div>
+  <div class="d-flex justify-content-end mb-2">
+    @if (processBulkDeleteService.hasSelected()) {
+      <button class="btn btn-primary me-2"
+        (click)="processBulkDeleteService.clearAllProcesses()"><i
+      class="fas fa-undo pe-2"></i>{{'process.overview.delete.clear' | translate }}
+    </button>
+  }
+  @if (processBulkDeleteService.hasSelected()) {
+    <button class="btn btn-danger me-2"
+      (click)="openDeleteModal(deleteModal)"><i
+    class="fas fa-trash pe-2"></i>{{'process.overview.delete' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}
+  </button>
+}
+<button class="btn btn-success" routerLink="/processes/new"><i
+class="fas fa-plus pe-2"></i>{{'process.overview.new' | translate}}</button>
+</div>
 </ng-template>
 
 <ng-template #deleteModal>
 
-    <div>
+  <div>
 
-        <div class="modal-header">
-            <div>
-                <h4>{{'process.overview.delete.header' | translate }}</h4>
-            </div>
-            <button type="button" class="btn-close"
-                    (click)="closeModal()" aria-label="Close">
-                <span aria-hidden="true">×</span>
-            </button>
-        </div>
-
-        <div class="modal-body">
-            <div *ngIf="(processBulkDeleteService.isProcessing$() | async) !== true">{{'process.overview.delete.body' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}</div>
-            <div *ngIf="processBulkDeleteService.isProcessing$() |async" class="alert alert-info">
-                <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
-                <span> {{ 'process.overview.delete.processing' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}</span>
-            </div>
-            <div class="mt-4">
-                <button class="btn btn-primary me-2" [dsBtnDisabled]="processBulkDeleteService.isProcessing$() |async"
-                        (click)="closeModal()">{{'process.detail.delete.cancel' | translate}}</button>
-                <button id="delete-confirm" class="btn btn-danger"
-                        [dsBtnDisabled]="processBulkDeleteService.isProcessing$() |async"
-                        (click)="deleteSelected()">{{ 'process.overview.delete' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()}  }}
-                </button>
-            </div>
-        </div>
+    <div class="modal-header">
+      <div>
+        <h4>{{'process.overview.delete.header' | translate }}</h4>
+      </div>
+      <button type="button" class="btn-close"
+        (click)="closeModal()" aria-label="Close">
+        <span aria-hidden="true">×</span>
+      </button>
     </div>
 
+    <div class="modal-body">
+      @if ((processBulkDeleteService.isProcessing$() | async) !== true) {
+        <div>{{'process.overview.delete.body' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}</div>
+      }
+      @if (processBulkDeleteService.isProcessing$() |async) {
+        <div class="alert alert-info">
+          <span class="spinner-border spinner-border-sm spinner-button" role="status" aria-hidden="true"></span>
+          <span> {{ 'process.overview.delete.processing' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()} }}</span>
+        </div>
+      }
+      <div class="mt-4">
+        <button class="btn btn-primary me-2" [dsBtnDisabled]="processBulkDeleteService.isProcessing$() |async"
+        (click)="closeModal()">{{'process.detail.delete.cancel' | translate}}</button>
+        <button id="delete-confirm" class="btn btn-danger"
+          [dsBtnDisabled]="processBulkDeleteService.isProcessing$() |async"
+          (click)="deleteSelected()">{{ 'process.overview.delete' | translate: {count: processBulkDeleteService.getAmountOfSelectedProcesses()}  }}
+        </button>
+      </div>
+    </div>
+  </div>
+
 
 </ng-template>
diff --git a/src/app/process-page/overview/table/process-overview-table.component.html b/src/app/process-page/overview/table/process-overview-table.component.html
index 69b3deea6f..a9aa922977 100644
--- a/src/app/process-page/overview/table/process-overview-table.component.html
+++ b/src/app/process-page/overview/table/process-overview-table.component.html
@@ -2,10 +2,12 @@
   <div class="d-flex" (click)="collapse.toggle()" [attr.aria-expanded]="!collapse.collapsed" role="button">
     <h2 class="flex-grow-1">
       {{'process.overview.table.' + processStatus.toLowerCase() + '.title' | translate}}
-      <span class="badge rounded-pill bg-primary badge-nb-processes ps-2 pe-2"
-            *ngIf="(processesRD$ | async) as processesRD">
-        {{processesRD?.payload?.totalElements}}
-      </span>
+      @if ((processesRD$ | async); as processesRD) {
+        <span class="badge rounded-pill bg-primary badge-nb-processes ps-2 pe-2"
+          >
+          {{processesRD?.payload?.totalElements}}
+        </span>
+      }
       <span class="ms-2 toggle-icon">
         <i class="fas" [ngClass]="collapse.collapsed ? 'fa-angle-right' : 'fa-angle-down'"></i>
       </span>
@@ -15,50 +17,55 @@
   <div ngbCollapse #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
 
     <ng-container *ngVar="(processesRD$ | async) as processesRD">
-      <ds-loading *ngIf="!processesRD || processesRD.isLoading"/>
+      @if (!processesRD || processesRD.isLoading) {
+        <ds-loading/>
+      }
 
-      <ds-pagination *ngIf="processesRD?.payload?.totalElements > 0"
-                     [paginationOptions]="(paginationOptions$ | async)"
-                     [collectionSize]="processesRD?.payload?.totalElements"
-                     [retainScrollPosition]="true"
-                     [hideGear]="true">
-
-        <div class="table-responsive mt-1">
-          <table class="table table-striped table-hover">
-            <thead>
-            <tr>
-              <th scope="col" class="id-header">{{'process.overview.table.id' | translate}}</th>
-              <th scope="col" class="name-header">{{'process.overview.table.name' | translate}}</th>
-              <th scope="col" class="user-header">{{'process.overview.table.user' | translate}}</th>
-              <th scope="col" class="info-header">{{'process.overview.table.' + processStatus.toLowerCase() + '.info' | translate}}</th>
-              <th scope="col" class="actions-header">{{'process.overview.table.actions' | translate}}</th>
-            </tr>
-            </thead>
-
-            <tbody>
-            <tr *ngFor="let tableEntry of processesRD?.payload?.page"
-                [class]="getRowClass(tableEntry.process)">
-              <td><a [routerLink]="['/processes/', tableEntry.process.processId]">{{tableEntry.process.processId}}</a></td>
-              <td><a [routerLink]="['/processes/', tableEntry.process.processId]">{{tableEntry.process.scriptName}}</a></td>
-              <td>{{tableEntry.user}}</td>
-              <td>{{tableEntry.info}}</td>
-              <td>
-                <button [attr.aria-label]="'process.overview.delete-process' | translate"
+      @if (processesRD?.payload?.totalElements > 0) {
+        <ds-pagination
+          [paginationOptions]="(paginationOptions$ | async)"
+          [collectionSize]="processesRD?.payload?.totalElements"
+          [retainScrollPosition]="true"
+          [hideGear]="true">
+          <div class="table-responsive mt-1">
+            <table class="table table-striped table-hover">
+              <thead>
+                <tr>
+                  <th scope="col" class="id-header">{{'process.overview.table.id' | translate}}</th>
+                  <th scope="col" class="name-header">{{'process.overview.table.name' | translate}}</th>
+                  <th scope="col" class="user-header">{{'process.overview.table.user' | translate}}</th>
+                  <th scope="col" class="info-header">{{'process.overview.table.' + processStatus.toLowerCase() + '.info' | translate}}</th>
+                  <th scope="col" class="actions-header">{{'process.overview.table.actions' | translate}}</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (tableEntry of processesRD?.payload?.page; track tableEntry) {
+                  <tr
+                    [class]="getRowClass(tableEntry.process)">
+                    <td><a [routerLink]="['/processes/', tableEntry.process.processId]">{{tableEntry.process.processId}}</a></td>
+                    <td><a [routerLink]="['/processes/', tableEntry.process.processId]">{{tableEntry.process.scriptName}}</a></td>
+                    <td>{{tableEntry.user}}</td>
+                    <td>{{tableEntry.info}}</td>
+                    <td>
+                      <button [attr.aria-label]="'process.overview.delete-process' | translate"
                         (click)="processBulkDeleteService.toggleDelete(tableEntry.process.processId)"
                         class="btn btn-outline-danger">
-                  <i class="fas fa-trash"></i>
-                </button>
-              </td>
-            </tr>
-            </tbody>
-          </table>
+                        <i class="fas fa-trash"></i>
+                      </button>
+                    </td>
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </ds-pagination>
+      }
+
+      @if (processesRD?.payload?.totalElements === 0) {
+        <div>
+          <p>{{'process.overview.table.empty' | translate}}</p>
         </div>
-
-      </ds-pagination>
-
-      <div *ngIf="processesRD?.payload?.totalElements === 0">
-        <p>{{'process.overview.table.empty' | translate}}</p>
-      </div>
+      }
     </ng-container>
 
   </div>
diff --git a/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.html b/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.html
index 841d65d61c..42a5267909 100644
--- a/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.html
+++ b/src/app/profile-page/profile-claim-item-modal/profile-claim-item-modal.component.html
@@ -1,36 +1,38 @@
 <div>
   <div class="modal-header"><h4>{{'dso-selector.claim.item.head' | translate}}</h4>
-    <button type="button" class="btn-close" (click)="close()" aria-label="Close">
-    </button>
+  <button type="button" class="btn-close" (click)="close()" aria-label="Close">
+  </button>
+</div>
+<div class="modal-body">
+  <div class="alert alert-info" role="alert">
+    {{'dso-selector.claim.item.body' | translate}}
   </div>
-  <div class="modal-body">
-    <div class="alert alert-info" role="alert">
-      {{'dso-selector.claim.item.body' | translate}}
-    </div>
-    <div class="dropdown-divider"></div>
-    <div class="scrollable-menu list-group container">
-      <div *ngFor="let listEntry of (listEntries$ | async)?.payload.page" class="row">
+  <div class="dropdown-divider"></div>
+  <div class="scrollable-menu list-group container">
+    @for (listEntry of (listEntries$ | async)?.payload.page; track listEntry) {
+      <div class="row">
         <button class="list-group-item list-group-item-action border-0 list-entry"
-                title="{{ dsoNameService.getName(listEntry.indexableObject) }}"
-                (click)="selectItem(listEntry.indexableObject)" #listEntryElement>
+          title="{{ dsoNameService.getName(listEntry.indexableObject) }}"
+          (click)="selectItem(listEntry.indexableObject)" #listEntryElement>
           <ds-listable-object-component-loader [object]="listEntry" [viewMode]="viewMode"
-                                               [linkType]=linkTypes.None></ds-listable-object-component-loader>
+          [linkType]=linkTypes.None></ds-listable-object-component-loader>
         </button>
       </div>
-      <div class="row">
-        <div class="col-md mt-2">
-        </div>
+    }
+    <div class="row">
+      <div class="col-md mt-2">
       </div>
     </div>
   </div>
-  <div class="modal-footer">
-    <div class="me-5">
-      <input type="checkbox" [checked]="checked" (change)="toggleCheckbox()"/>
-      {{ 'dso-selector.claim.item.not-mine-label' | translate }}
-    </div>
-    <button type="submit" class="btn btn-primary ms-5 me-2" (click)="createFromScratch()" [dsBtnDisabled]="!checked">
-      <i class="fas fa-plus"></i>
-      {{ 'dso-selector.claim.item.create-from-scratch' | translate }}
-    </button>
-  </div>
+</div>
+<div class="modal-footer">
+  <div class="me-5">
+    <input type="checkbox" [checked]="checked" (change)="toggleCheckbox()"/>
+    {{ 'dso-selector.claim.item.not-mine-label' | translate }}
+  </div>
+  <button type="submit" class="btn btn-primary ms-5 me-2" (click)="createFromScratch()" [dsBtnDisabled]="!checked">
+    <i class="fas fa-plus"></i>
+    {{ 'dso-selector.claim.item.create-from-scratch' | translate }}
+  </button>
+</div>
 </div>
diff --git a/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html b/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html
index abff578acf..0190c36d0c 100644
--- a/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html
+++ b/src/app/profile-page/profile-page-researcher-form/profile-page-researcher-form.component.html
@@ -1,38 +1,52 @@
 <div *ngVar="(researcherProfile$ | async) as researcherProfile">
-  <div *ngIf="researcherProfile">
-    <p>{{'researcher.profile.associated' | translate}}</p>
-    <p class="align-items-center researcher-profile-switch" >
-      <span class="me-3">{{'researcher.profile.status' | translate}}</span>
-      <ui-switch [checkedLabel]="'researcher.profile.public.visibility' | translate"
-                 [uncheckedLabel]="'researcher.profile.private.visibility' | translate"
-                 [checked]="researcherProfile.visible"
-                 (change)="toggleProfileVisibility(researcherProfile)" ></ui-switch>
-    </p>
-  </div>
-  <div *ngIf="!researcherProfile">
-    <p>{{'researcher.profile.not.associated' | translate}}</p>
-  </div>
-  <button *ngIf="!researcherProfile" class="btn btn-primary me-2"
-          [dsBtnDisabled]="(isProcessingCreate() | async)"
-          (click)="createProfile()">
-    <span *ngIf="(isProcessingCreate() | async)">
-        <i class='fas fa-circle-notch fa-spin'></i> {{'researcher.profile.action.processing' | translate}}
-    </span>
-    <span *ngIf="(isProcessingCreate() | async) !== true">
-        <i class="fas fa-plus"></i> &nbsp;{{'researcher.profile.create.new' | translate}}
-    </span>
-  </button>
-  <ng-container *ngIf="researcherProfile">
+  @if (researcherProfile) {
+    <div>
+      <p>{{'researcher.profile.associated' | translate}}</p>
+      <p class="align-items-center researcher-profile-switch" >
+        <span class="me-3">{{'researcher.profile.status' | translate}}</span>
+        <ui-switch [checkedLabel]="'researcher.profile.public.visibility' | translate"
+          [uncheckedLabel]="'researcher.profile.private.visibility' | translate"
+          [checked]="researcherProfile.visible"
+        (change)="toggleProfileVisibility(researcherProfile)" ></ui-switch>
+      </p>
+    </div>
+  }
+  @if (!researcherProfile) {
+    <div>
+      <p>{{'researcher.profile.not.associated' | translate}}</p>
+    </div>
+  }
+  @if (!researcherProfile) {
+    <button class="btn btn-primary me-2"
+      [dsBtnDisabled]="(isProcessingCreate() | async)"
+      (click)="createProfile()">
+      @if ((isProcessingCreate() | async)) {
+        <span>
+          <i class='fas fa-circle-notch fa-spin'></i> {{'researcher.profile.action.processing' | translate}}
+        </span>
+      }
+      @if ((isProcessingCreate() | async) !== true) {
+        <span>
+          <i class="fas fa-plus"></i> &nbsp;{{'researcher.profile.create.new' | translate}}
+        </span>
+      }
+    </button>
+  }
+  @if (researcherProfile) {
     <button class="btn btn-primary me-2" [dsBtnDisabled]="!researcherProfile" (click)="viewProfile(researcherProfile)">
       <i class="fas fa-info-circle"></i> {{'researcher.profile.view' | translate}}
     </button>
     <button class="btn btn-danger" [dsBtnDisabled]="!researcherProfile" (click)="deleteProfile(researcherProfile)">
-        <span *ngIf="(isProcessingDelete() | async)">
-            <i class='fas fa-circle-notch fa-spin'></i> {{'researcher.profile.action.processing' | translate}}
+      @if ((isProcessingDelete() | async)) {
+        <span>
+          <i class='fas fa-circle-notch fa-spin'></i> {{'researcher.profile.action.processing' | translate}}
         </span>
-        <span *ngIf="(isProcessingDelete() | async) !== true">
-            <i class="fas fa-trash-alt"></i> &nbsp;{{'researcher.profile.delete' | translate}}
+      }
+      @if ((isProcessingDelete() | async) !== true) {
+        <span>
+          <i class="fas fa-trash-alt"></i> &nbsp;{{'researcher.profile.delete' | translate}}
         </span>
+      }
     </button>
-  </ng-container>
+  }
 </div>
diff --git a/src/app/profile-page/profile-page.component.html b/src/app/profile-page/profile-page.component.html
index 59c6129ac6..eeb6f8e41c 100644
--- a/src/app/profile-page/profile-page.component.html
+++ b/src/app/profile-page/profile-page.component.html
@@ -1,72 +1,86 @@
 <ng-container *ngVar="(user$ | async) as user">
-  <div class="container" *ngIf="user">
-    <h1>{{'profile.title' | translate}}</h1>
-    <ng-container *ngIf="isResearcherProfileEnabled$ | async">
-      <div class="card mb-4">
-        <div class="card-header">{{'profile.card.researcher' | translate}}</div>
-        <div class="card-body">
-          <div class="mb-4">
-            <ds-profile-page-researcher-form [user]="user" ></ds-profile-page-researcher-form>
+  @if (user) {
+    <div class="container">
+      <h1>{{'profile.title' | translate}}</h1>
+      @if (isResearcherProfileEnabled$ | async) {
+        <div class="card mb-4">
+          <div class="card-header">{{'profile.card.researcher' | translate}}</div>
+          <div class="card-body">
+            <div class="mb-4">
+              <ds-profile-page-researcher-form [user]="user" ></ds-profile-page-researcher-form>
+            </div>
+            <ds-suggestions-notification></ds-suggestions-notification>
           </div>
-          <ds-suggestions-notification></ds-suggestions-notification>
+        </div>
+      }
+      <div class="card mb-4">
+        <div class="card-header">{{'profile.card.identify' | translate}}</div>
+        <div class="card-body">
+          <ds-profile-page-metadata-form [user]="user"></ds-profile-page-metadata-form>
         </div>
       </div>
-    </ng-container>
-    <div class="card mb-4">
-      <div class="card-header">{{'profile.card.identify' | translate}}</div>
-      <div class="card-body">
-        <ds-profile-page-metadata-form [user]="user"></ds-profile-page-metadata-form>
+      @if (canChangePassword$ | async) {
+        <div class="card mb-4 security-section">
+          <div class="card-header">{{'profile.card.security' | translate}}</div>
+          <div class="card-body">
+            <ds-profile-page-security-form
+              [FORM_PREFIX]="'profile.security.form.'"
+              (isInvalid)="setInvalid($event)"
+              (passwordValue)="setPasswordValue($event)"
+              (currentPasswordValue)="setCurrentPasswordValue($event)"
+            ></ds-profile-page-security-form>
+          </div>
+        </div>
+      }
+      <div class="col-12 text-end pe-0">
+        <button class="btn btn-primary" (click)="updateProfile()"><i class="fas fa-edit"></i> {{'profile.form.submit' | translate}}</button>
       </div>
+      @if ((groupsRD$ | async); as groupsRD;) {
+        <ng-container *ngTemplateOutlet="groupsRD?.isLoading ? loader : content"></ng-container>
+        <ng-template #content>
+          @if (groupsRD?.payload) {
+            <ds-pagination
+              [hideGear]="true"
+              [hidePagerWhenSinglePage]="true"
+              [hidePaginationDetail]="true"
+              [paginationOptions]="optionsGroupsPagination"
+              [collectionSize]="groupsRD?.payload?.totalElements">
+              @if (groupsRD?.payload?.page; as groups) {
+                @if (groups?.length > 0) {
+                  <div>
+                    <h2 class="mt-4">{{ 'profile.groups.head' | translate }}</h2>
+                    <ul class="list-group list-group-flush">
+                      @for (group of groups; track group) {
+                        <li class="list-group-item">{{ dsoNameService.getName(group) }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              }
+            </ds-pagination>
+          }
+        </ng-template>
+        <ng-template #loader>
+          <ds-loading [showMessage]="false"></ds-loading>
+        </ng-template>
+        @if (groupsRD?.hasFailed) {
+          <ds-error message="{{ 'error.profile-groups' | translate }}"></ds-error>
+        }
+      }
+      <ng-container *ngVar="(specialGroupsRD$ | async)?.payload?.page as specialGroups">
+        @if (specialGroups?.length > 0) {
+          <div data-test="specialGroups">
+            <h2 class="mt-4">{{'profile.special.groups.head' | translate}}</h2>
+            <ul class="list-group list-group-flush">
+              @for (specialGroup of specialGroups; track specialGroup) {
+                <li class="list-group-item">
+                  {{ dsoNameService.getName(specialGroup) }}
+                </li>
+              }
+            </ul>
+          </div>
+        }
+      </ng-container>
     </div>
-    <div *ngIf="canChangePassword$ | async" class="card mb-4 security-section">
-      <div class="card-header">{{'profile.card.security' | translate}}</div>
-      <div class="card-body">
-        <ds-profile-page-security-form
-                [FORM_PREFIX]="'profile.security.form.'"
-                (isInvalid)="setInvalid($event)"
-                (passwordValue)="setPasswordValue($event)"
-                (currentPasswordValue)="setCurrentPasswordValue($event)"
-        ></ds-profile-page-security-form>
-      </div>
-    </div>
-    <div class="col-12 text-end pe-0">
-      <button class="btn btn-primary" (click)="updateProfile()"><i class="fas fa-edit"></i> {{'profile.form.submit' | translate}}</button>
-    </div>
-
-    <ng-container *ngIf="(groupsRD$ | async) as groupsRD;">
-      <ng-container *ngTemplateOutlet="groupsRD?.isLoading ? loader : content"></ng-container>
-      <ng-template #content>
-        <ds-pagination *ngIf="groupsRD?.payload"
-                       [hideGear]="true"
-                       [hidePagerWhenSinglePage]="true"
-                       [hidePaginationDetail]="true"
-                       [paginationOptions]="optionsGroupsPagination"
-                       [collectionSize]="groupsRD?.payload?.totalElements">
-          <ng-container *ngIf="groupsRD?.payload?.page as groups">
-            <div *ngIf="groups?.length > 0">
-              <h2 class="mt-4">{{ 'profile.groups.head' | translate }}</h2>
-              <ul class="list-group list-group-flush">
-                <li *ngFor="let group of groups" class="list-group-item">{{ dsoNameService.getName(group) }}</li>
-              </ul>
-            </div>
-          </ng-container>
-        </ds-pagination>
-      </ng-template>
-      <ng-template #loader>
-        <ds-loading [showMessage]="false"></ds-loading>
-      </ng-template>
-      <ds-error *ngIf="groupsRD?.hasFailed" message="{{ 'error.profile-groups' | translate }}"></ds-error>
-    </ng-container>
-
-    <ng-container *ngVar="(specialGroupsRD$ | async)?.payload?.page as specialGroups">
-      <div *ngIf="specialGroups?.length > 0" data-test="specialGroups">
-        <h2 class="mt-4">{{'profile.special.groups.head' | translate}}</h2>
-        <ul class="list-group list-group-flush">
-          <li *ngFor="let specialGroup of specialGroups" class="list-group-item">
-            {{ dsoNameService.getName(specialGroup) }}
-          </li>
-        </ul>
-     </div>
-    </ng-container>
-  </div>
+  }
 </ng-container>
diff --git a/src/app/register-email-form/register-email-form.component.html b/src/app/register-email-form/register-email-form.component.html
index 43db6ac1f1..8171565766 100644
--- a/src/app/register-email-form/register-email-form.component.html
+++ b/src/app/register-email-form/register-email-form.component.html
@@ -1,66 +1,77 @@
 <div class="container">
-    <h1>{{MESSAGE_PREFIX + '.header'|translate}}</h1>
-    <p>{{MESSAGE_PREFIX + '.info' | translate}}</p>
+  <h1>{{MESSAGE_PREFIX + '.header'|translate}}</h1>
+  <p>{{MESSAGE_PREFIX + '.info' | translate}}</p>
 
-    <p *ngIf="validMailDomains.length !== 0 && typeRequest === TYPE_REQUEST_REGISTER">
+  @if (validMailDomains.length !== 0 && typeRequest === TYPE_REQUEST_REGISTER) {
+    <p>
       {{ MESSAGE_PREFIX + '.info.maildomain' | translate}} {{ validMailDomains.join(', ')}}
     </p>
+  }
 
-    <form [class]="'ng-invalid'" [formGroup]="form">
-
-        <div class="mb-3">
-            <div class="row">
-                <div class="col-12">
-                    <label class="fw-bold form-label"
-                           for="email">{{MESSAGE_PREFIX + '.email' | translate}}</label>
-                    <input [className]="(email.invalid) && (email.dirty || email.touched) ? 'form-control is-invalid' :'form-control'"
-                           type="text" id="email" formControlName="email"
-                           [attr.aria-label]="MESSAGE_PREFIX + '.aria.label' | translate"
-                           [attr.aria-describedby]="(!email.errors) ? '' : (email.errors.required ? 'email-errors-required' : 'email-error-not-valid')"
-                           [attr.aria-invalid]="email.invalid"/>
-                    <div *ngIf="email.invalid && (email.dirty || email.touched)"
-                         class="invalid-feedback show-feedback">
-                    <span *ngIf="email.errors && email.errors.required" id="email-errors-required">
-                        {{ MESSAGE_PREFIX + '.email.error.required' | translate }}
-                    </span>
-                    <span *ngIf="email.errors && ((email.errors.pattern && this.typeRequest === TYPE_REQUEST_REGISTER) || email.errors.email)" id="email-error-not-valid">
-                        {{ MESSAGE_PREFIX + '.email.error.not-email-form' | translate }}
-                        <ng-container *ngIf="validMailDomains.length > 0">
-                          {{ MESSAGE_PREFIX + '.email.error.not-valid-domain' | translate: { domains: validMailDomains.join(', ') } }}
-                        </ng-container>
-                    </span>
-                    </div>
-                </div>
-                <div class="col-12">
-                    {{MESSAGE_PREFIX + '.email.hint' |translate}}
-                </div>
+  <form [class]="'ng-invalid'" [formGroup]="form">
 
+    <div class="mb-3">
+      <div class="row">
+        <div class="col-12">
+          <label class="fw-bold form-label"
+          for="email">{{MESSAGE_PREFIX + '.email' | translate}}</label>
+          <input [className]="(email.invalid) && (email.dirty || email.touched) ? 'form-control is-invalid' :'form-control'"
+            type="text" id="email" formControlName="email"
+            [attr.aria-label]="MESSAGE_PREFIX + '.aria.label' | translate"
+            [attr.aria-describedby]="(!email.errors) ? '' : (email.errors.required ? 'email-errors-required' : 'email-error-not-valid')"
+            [attr.aria-invalid]="email.invalid"/>
+          @if (email.invalid && (email.dirty || email.touched)) {
+            <div
+              class="invalid-feedback show-feedback">
+              @if (email.errors && email.errors.required) {
+                <span id="email-errors-required">
+                  {{ MESSAGE_PREFIX + '.email.error.required' | translate }}
+                </span>
+              }
+              @if (email.errors && ((email.errors.pattern && this.typeRequest === TYPE_REQUEST_REGISTER) || email.errors.email)) {
+                <span id="email-error-not-valid">
+                  {{ MESSAGE_PREFIX + '.email.error.not-email-form' | translate }}
+                  @if (validMailDomains.length > 0) {
+                    {{ MESSAGE_PREFIX + '.email.error.not-valid-domain' | translate: { domains: validMailDomains.join(', ') } }}
+                  }
+                </span>
+              }
             </div>
-
+          }
+        </div>
+        <div class="col-12">
+          {{MESSAGE_PREFIX + '.email.hint' |translate}}
         </div>
 
-    <ds-alert [type]="AlertTypeEnum.Warning" *ngIf="registrationVerification && !isRecaptchaCookieAccepted()">
-      <p class="m-0" [innerHTML]="MESSAGE_PREFIX + '.google-recaptcha.must-accept-cookies' | translate"></p>
-      <p class="m-0"><a href="javascript:void(0);" (click)="this.orejimeService.showSettings()">{{ MESSAGE_PREFIX + '.google-recaptcha.open-cookie-settings' | translate }}</a></p>
-    </ds-alert>
+      </div>
 
-    <div class="my-3" *ngIf="isRecaptchaCookieAccepted() && (googleRecaptchaService.captchaVersion() | async) === 'v2'">
-      <ds-google-recaptcha [captchaMode]="(googleRecaptchaService.captchaMode() | async)"
-                           (executeRecaptcha)="register($event)" (checkboxChecked)="onCheckboxChecked($event)"
-                           (showNotification)="showNotification($event)"></ds-google-recaptcha>
     </div>
 
-    <ng-container *ngIf="(!registrationVerification  || ((googleRecaptchaService.captchaVersion() | async) !== 'v2' && (googleRecaptchaService.captchaMode() | async) === 'invisible')); else v2Invisible">
+    @if (registrationVerification && !isRecaptchaCookieAccepted()) {
+      <ds-alert [type]="AlertTypeEnum.Warning">
+        <p class="m-0" [innerHTML]="MESSAGE_PREFIX + '.google-recaptcha.must-accept-cookies' | translate"></p>
+        <p class="m-0"><a href="javascript:void(0);" (click)="this.orejimeService.showSettings()">{{ MESSAGE_PREFIX + '.google-recaptcha.open-cookie-settings' | translate }}</a></p>
+      </ds-alert>
+    }
+
+    @if (isRecaptchaCookieAccepted() && (googleRecaptchaService.captchaVersion() | async) === 'v2') {
+      <div class="my-3">
+        <ds-google-recaptcha [captchaMode]="(googleRecaptchaService.captchaMode() | async)"
+          (executeRecaptcha)="register($event)" (checkboxChecked)="onCheckboxChecked($event)"
+        (showNotification)="showNotification($event)"></ds-google-recaptcha>
+      </div>
+    }
+
+    @if ((!registrationVerification  || ((googleRecaptchaService.captchaVersion() | async) !== 'v2' && (googleRecaptchaService.captchaMode() | async) === 'invisible'))) {
       <button class="btn btn-primary" [dsBtnDisabled]="form.invalid || registrationVerification && !isRecaptchaCookieAccepted() || disableUntilChecked" (click)="register()">
         {{ MESSAGE_PREFIX + '.submit' | translate }}
       </button>
-    </ng-container>
-
-    <ng-template #v2Invisible>
+    } @else {
       <button class="btn btn-primary" [dsBtnDisabled]="form.invalid" (click)="executeRecaptcha()">
         {{ MESSAGE_PREFIX + '.submit' | translate }}
       </button>
-    </ng-template>
-    </form>
+    }
+
+  </form>
 
 </div>
diff --git a/src/app/register-page/create-profile/create-profile.component.html b/src/app/register-page/create-profile/create-profile.component.html
index 800ffa2a70..987863ef27 100644
--- a/src/app/register-page/create-profile/create-profile.component.html
+++ b/src/app/register-page/create-profile/create-profile.component.html
@@ -1,91 +1,94 @@
-<div class="container" *ngIf="(registration$ |async)">
+@if ((registration$ |async)) {
+  <div class="container">
     <h3 class="mb-4">{{'register-page.create-profile.header' | translate}}</h3>
     <div class="card mb-4">
-        <div class="card-header">{{'register-page.create-profile.identification.header' | translate}}</div>
-        <div class="card-body">
-            <div class="row">
+      <div class="card-header">{{'register-page.create-profile.identification.header' | translate}}</div>
+      <div class="card-body">
+        <div class="row">
+          <div class="col-12">
+            <label class="fw-bold form-label me-4"
+            for="email">{{'register-page.create-profile.identification.email' | translate}}</label>
+            <span id="email">{{(registration$ |async).email}}</span></div>
+          </div>
+          <form [class]="'ng-invalid'" [formGroup]="userInfoForm" (ngSubmit)="submitEperson()">
+            <div class="mb-3">
+              <div class="row">
                 <div class="col-12">
-                    <label class="fw-bold form-label me-4"
-                           for="email">{{'register-page.create-profile.identification.email' | translate}}</label>
-                    <span id="email">{{(registration$ |async).email}}</span></div>
-            </div>
-            <form [class]="'ng-invalid'" [formGroup]="userInfoForm" (ngSubmit)="submitEperson()">
-
-                <div class="mb-3">
-                    <div class="row">
-                        <div class="col-12">
-                            <label for="firstName" class="form-label">{{'register-page.create-profile.identification.first-name' | translate}}</label>
-                            <input [className]="(firstName.invalid) && (firstName.dirty || firstName.touched) ? 'form-control is-invalid' :'form-control'"
-                                   type="text" id="firstName" formControlName="firstName"/>
-                            <div *ngIf="firstName.invalid && (firstName.dirty || firstName.touched)"
-                                 class="invalid-feedback show-feedback">
-                    <span *ngIf="firstName.errors && firstName.errors.required">
-                        {{ 'register-page.create-profile.identification.first-name.error' | translate }}
-                    </span>
-                            </div>
-                        </div>
-
-                    </div>
-                    <div class="row">
-                        <div class="col-12">
-                            <label
-                                    for="lastName" class="form-label">{{'register-page.create-profile.identification.last-name' | translate}}</label>
-                            <input
-                                    [className]="(lastName.invalid) && (lastName.dirty || lastName.touched) ? 'form-control is-invalid' :'form-control'"
-                                    id="lastName" formControlName="lastName">
-                            <div *ngIf="lastName.invalid && (lastName.dirty || lastName.touched)"
-                                 class="invalid-feedback show-feedback">
-                    <span *ngIf="lastName.errors && lastName.errors.required">
-                        {{ 'register-page.create-profile.identification.last-name.error' | translate }}
-                    </span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-12">
-                            <label class="form-label"
-                                    for="contactPhone">{{'register-page.create-profile.identification.contact' | translate}}</label>
-                            <input class="form-control" id="contactPhone" formControlName="contactPhone">
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-12">
-                            <label class="form-label"
-                                    for="language">{{'register-page.create-profile.identification.language' |translate}}</label>
-
-                            <select id="language" formControlName="language" class="form-select">
-                                <option [value]="''"></option>
-                                <option *ngFor="let lang of activeLangs" [value]="lang.code">{{lang.label}}</option>
-                            </select>
-                        </div>
+                  <label for="firstName" class="form-label">{{'register-page.create-profile.identification.first-name' | translate}}</label>
+                  <input [className]="(firstName.invalid) && (firstName.dirty || firstName.touched) ? 'form-control is-invalid' :'form-control'"
+                    type="text" id="firstName" formControlName="firstName"/>
+                  @if (firstName.invalid && (firstName.dirty || firstName.touched)) {
+                    <div
+                      class="invalid-feedback show-feedback">
+                      @if (firstName.errors && firstName.errors.required) {
+                        <span>
+                          {{ 'register-page.create-profile.identification.first-name.error' | translate }}
+                        </span>
+                      }
                     </div>
+                  }
                 </div>
-            </form>
+              </div>
+              <div class="row">
+                <div class="col-12">
+                  <label
+                  for="lastName" class="form-label">{{'register-page.create-profile.identification.last-name' | translate}}</label>
+                  <input
+                    [className]="(lastName.invalid) && (lastName.dirty || lastName.touched) ? 'form-control is-invalid' :'form-control'"
+                    id="lastName" formControlName="lastName">
+                  @if (lastName.invalid && (lastName.dirty || lastName.touched)) {
+                    <div
+                      class="invalid-feedback show-feedback">
+                      @if (lastName.errors && lastName.errors.required) {
+                        <span>
+                          {{ 'register-page.create-profile.identification.last-name.error' | translate }}
+                        </span>
+                      }
+                    </div>
+                  }
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-12">
+                  <label class="form-label"
+                  for="contactPhone">{{'register-page.create-profile.identification.contact' | translate}}</label>
+                  <input class="form-control" id="contactPhone" formControlName="contactPhone">
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-12">
+                  <label class="form-label"
+                  for="language">{{'register-page.create-profile.identification.language' |translate}}</label>
+                  <select id="language" formControlName="language" class="form-select">
+                    <option [value]="''"></option>
+                    @for (lang of activeLangs; track lang) {
+                      <option [value]="lang.code">{{lang.label}}</option>
+                    }
+                  </select>
+                </div>
+              </div>
+            </div>
+          </form>
         </div>
-    </div>
-
-    <div class="card mb-4">
+      </div>
+      <div class="card mb-4">
         <div class="card-header">{{'register-page.create-profile.security.header' | translate}}</div>
         <div class="card-body">
-
-            <ds-profile-page-security-form
-                    [passwordCanBeEmpty]="false"
-                    [FORM_PREFIX]="'register-page.create-profile.security.'"
-                    (isInvalid)="setInValid($event)"
-                    (passwordValue)="setPasswordValue($event)"
-            ></ds-profile-page-security-form>
+          <ds-profile-page-security-form
+            [passwordCanBeEmpty]="false"
+            [FORM_PREFIX]="'register-page.create-profile.security.'"
+            (isInvalid)="setInValid($event)"
+            (passwordValue)="setPasswordValue($event)"
+          ></ds-profile-page-security-form>
         </div>
-    </div>
-
-
-    <div class="row">
+      </div>
+      <div class="row">
         <div class="col-12">
-            <button
-                    [dsBtnDisabled]="isInValidPassword || userInfoForm.invalid"
-                    class="btn btn-default btn-primary"
-                    (click)="submitEperson()">{{'register-page.create-profile.submit' | translate}}</button>
+          <button
+            [dsBtnDisabled]="isInValidPassword || userInfoForm.invalid"
+            class="btn btn-default btn-primary"
+          (click)="submitEperson()">{{'register-page.create-profile.submit' | translate}}</button>
         </div>
+      </div>
     </div>
-
-
-</div>
+  }
diff --git a/src/app/request-copy/email-request-copy/email-request-copy.component.html b/src/app/request-copy/email-request-copy/email-request-copy.component.html
index a6d0187be9..50e3e73470 100644
--- a/src/app/request-copy/email-request-copy/email-request-copy.component.html
+++ b/src/app/request-copy/email-request-copy/email-request-copy.component.html
@@ -2,9 +2,11 @@
   <div class="mb-3">
     <label for="subject" class="form-label">{{ 'grant-deny-request-copy.email.subject' | translate }}</label>
     <input type="text" class="form-control" id="subject" [ngClass]="{'is-invalid': !subject || subject.length === 0}" [(ngModel)]="subject" name="subject">
-    <div *ngIf="!subject || subject.length === 0" class="invalid-feedback">
-      {{ 'grant-deny-request-copy.email.subject.empty' | translate }}
-    </div>
+    @if (!subject || subject.length === 0) {
+      <div class="invalid-feedback">
+        {{ 'grant-deny-request-copy.email.subject.empty' | translate }}
+      </div>
+    }
   </div>
   <div class="mb-3">
     <label for="message" class="form-label">{{ 'grant-deny-request-copy.email.message' | translate }}</label>
@@ -13,14 +15,14 @@
   <ng-content></ng-content>
   <div class="d-flex flex-row-reverse">
     <button (click)="submit()"
-            [dsBtnDisabled]="!subject || subject.length === 0"
-            class="btn btn-primary"
-            title="{{'grant-deny-request-copy.email.send' | translate }}">
+      [dsBtnDisabled]="!subject || subject.length === 0"
+      class="btn btn-primary"
+      title="{{'grant-deny-request-copy.email.send' | translate }}">
       <i class="fas fa-envelope"></i> {{'grant-deny-request-copy.email.send' | translate }}
     </button>
     <button (click)="return()"
-            class="btn btn-outline-secondary me-1"
-            title="{{'grant-deny-request-copy.email.back' | translate }}">
+      class="btn btn-outline-secondary me-1"
+      title="{{'grant-deny-request-copy.email.back' | translate }}">
       <i class="fas fa-arrow-left"></i> {{'grant-deny-request-copy.email.back' | translate }}
     </button>
   </div>
diff --git a/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html b/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html
index 1a0710f924..1c1aec7a76 100644
--- a/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html
+++ b/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html
@@ -1,11 +1,12 @@
 <form #ngForm="ngForm">
-  <div *ngIf="showWarning" class="alert alert-warning">
-    {{'access-control-no-access-conditions-warning-message' | translate}}
-  </div>
+  @if (showWarning) {
+    <div class="alert alert-warning">
+      {{'access-control-no-access-conditions-warning-message' | translate}}
+    </div>
+  }
 
-  <ng-container *ngFor="let control of form.accessControls; trackBy: trackById">
+  @for (control of form.accessControls; track trackById($index, control)) {
     <div ngModelGroup="access-control-item-{{control.id}}" class="access-control-item mt-3">
-
       <div class="d-flex flex-column">
         <div>
           <label class="form-label" for="accesscontroloption-{{control.id}}">
@@ -19,92 +20,94 @@
             name="itemName-{{control.id}}"
             class="form-select">
             <option value=""></option>
-            <option *ngFor="let option of dropdownOptions" [value]="option.name">
-              {{ option.name }}
-            </option>
+            @for (option of dropdownOptions; track option) {
+              <option [value]="option.name">
+                {{ option.name }}
+              </option>
+            }
           </select>
           <small class="form-text text-muted">
             {{'access-control-option-note' | translate}}
           </small>
         </div>
-
-        <div *ngIf="control.hasStartDate" class="mt-3">
-          <label class="form-label" for="accesscontrolstartdate-{{control.id}}">
-            {{'access-control-option-start-date' | translate}}
-          </label>
-          <div class="input-group">
-            <input
-              id="accesscontrolstartdate-{{control.id}}"
-              class="form-control"
-              placeholder="yyyy-mm-dd"
-              [(ngModel)]="control.startDate"
-              name="startDate-{{control.id}}"
-              [maxDate]="control.maxStartDate | toDate"
-              ngbDatepicker
-              placement="top-start top-end bottom-start bottom-end"
-              #d="ngbDatepicker"
-            />
-            <div class="input-group-append">
-              <button
-                class="btn btn-outline-secondary fas fa-calendar"
-                [dsBtnDisabled]="ngForm.disabled"
-                (click)="d.toggle()" type="button">
-              </button>
+        @if (control.hasStartDate) {
+          <div class="mt-3">
+            <label class="form-label" for="accesscontrolstartdate-{{control.id}}">
+              {{'access-control-option-start-date' | translate}}
+            </label>
+            <div class="input-group">
+              <input
+                id="accesscontrolstartdate-{{control.id}}"
+                class="form-control"
+                placeholder="yyyy-mm-dd"
+                [(ngModel)]="control.startDate"
+                name="startDate-{{control.id}}"
+                [maxDate]="control.maxStartDate | toDate"
+                ngbDatepicker
+                placement="top-start top-end bottom-start bottom-end"
+                #d="ngbDatepicker"
+                />
+              <div class="input-group-append">
+                <button
+                  class="btn btn-outline-secondary fas fa-calendar"
+                  [dsBtnDisabled]="ngForm.disabled"
+                  (click)="d.toggle()" type="button">
+                </button>
+              </div>
             </div>
+            <small class="form-text text-muted">
+              {{'access-control-option-start-date-note' | translate}}
+            </small>
           </div>
-          <small class="form-text text-muted">
-            {{'access-control-option-start-date-note' | translate}}
-          </small>
-        </div>
-
-        <div *ngIf="control.hasEndDate" class="mt-3">
-          <label class="form-label" for="accesscontrolenddate-{{control.id}}">
-            {{'access-control-option-end-date' | translate}}
-          </label>
-          <div class="input-group">
-            <input
-              id="accesscontrolenddate-{{control.id}}"
-              class="form-control"
-              placeholder="yyyy-mm-dd"
-              [(ngModel)]="control.endDate"
-              name="endDate-{{control.id}}"
-              [maxDate]="control.maxEndDate | toDate"
-              ngbDatepicker
-              placement="top-start top-end bottom-start bottom-end"
-              #d1="ngbDatepicker"
-            />
-            <div class="input-group-append">
-              <button
-                type="button" class="btn btn-outline-secondary fas fa-calendar"
-                [dsBtnDisabled]="ngForm.disabled"
-                (click)="d1.toggle()">
-              </button>
+        }
+        @if (control.hasEndDate) {
+          <div class="mt-3">
+            <label class="form-label" for="accesscontrolenddate-{{control.id}}">
+              {{'access-control-option-end-date' | translate}}
+            </label>
+            <div class="input-group">
+              <input
+                id="accesscontrolenddate-{{control.id}}"
+                class="form-control"
+                placeholder="yyyy-mm-dd"
+                [(ngModel)]="control.endDate"
+                name="endDate-{{control.id}}"
+                [maxDate]="control.maxEndDate | toDate"
+                ngbDatepicker
+                placement="top-start top-end bottom-start bottom-end"
+                #d1="ngbDatepicker"
+                />
+              <div class="input-group-append">
+                <button
+                  type="button" class="btn btn-outline-secondary fas fa-calendar"
+                  [dsBtnDisabled]="ngForm.disabled"
+                  (click)="d1.toggle()">
+                </button>
+              </div>
             </div>
+            <small class="form-text text-muted">
+              {{'access-control-option-end-date-note' | translate}}
+            </small>
           </div>
-          <small class="form-text text-muted">
-            {{'access-control-option-end-date-note' | translate}}
-          </small>
-        </div>
+        }
       </div>
-
       <div>
         <span aria-hidden="true" class="mb-2 d-inline-block">&nbsp;</span>
         <div class="input-group">
-
           <button type="button" class="btn btn-outline-danger"
-                  [attr.aria-label]="'access-control-remove' | translate"
-                  [dsBtnDisabled]="ngForm.disabled || form.accessControls.length === 1"
-                  (click)="removeAccessControlItem(control.id)">
+            [attr.aria-label]="'access-control-remove' | translate"
+            [dsBtnDisabled]="ngForm.disabled || form.accessControls.length === 1"
+            (click)="removeAccessControlItem(control.id)">
             <i class="fas fa-trash"></i>
           </button>
         </div>
       </div>
     </div>
-  </ng-container>
+  }
 
   <button type="button" id="add-btn-{{type}}" class="btn btn-outline-primary mt-3"
-          [dsBtnDisabled]="ngForm.disabled"
-          (click)="addAccessControlItem()">
+    [dsBtnDisabled]="ngForm.disabled"
+    (click)="addAccessControlItem()">
     <i class="fas fa-plus"></i>
     {{'access-control-add-more' | translate}}
   </button>
diff --git a/src/app/shared/access-control-form-container/access-control-form-container.component.html b/src/app/shared/access-control-form-container/access-control-form-container.component.html
index 119de6fe80..e4e43bafa9 100644
--- a/src/app/shared/access-control-form-container/access-control-form-container.component.html
+++ b/src/app/shared/access-control-form-container/access-control-form-container.component.html
@@ -1,12 +1,13 @@
 <div class="container">
   <div class="card border-0">
     <div class="card-body">
-      <ds-alert
-        *ngIf="titleMessage"
-        [type]="AlertType.Info"
-        [content]="titleMessage"
-        class="d-block pb-3">
-      </ds-alert>
+      @if (titleMessage) {
+        <ds-alert
+          [type]="AlertType.Info"
+          [content]="titleMessage"
+          class="d-block pb-3">
+        </ds-alert>
+      }
 
       <div class="row mt-5">
         <div class="col-12 col-md-6 border-end d-flex flex-column justify-content-between">
@@ -30,18 +31,18 @@
               <div class="col-12 col-md-8">
                 <div class="form-check">
                   <input class="form-check-input" type="radio"
-                         name="itemMode" id="itemReplace" value="replace"
-                         [disabled]="!state.item.toggleStatus"
-                         [(ngModel)]="state.item.accessMode">
+                    name="itemMode" id="itemReplace" value="replace"
+                    [disabled]="!state.item.toggleStatus"
+                    [(ngModel)]="state.item.accessMode">
                   <label class="form-check-label" for="itemReplace">
                     {{'access-control-replace-all' | translate}}
                   </label>
                 </div>
                 <div class="form-check">
                   <input class="form-check-input" type="radio"
-                         name="itemMode" id="itemAdd" value="add"
-                         [disabled]="!state.item.toggleStatus"
-                         [(ngModel)]="state.item.accessMode">
+                    name="itemMode" id="itemAdd" value="add"
+                    [disabled]="!state.item.toggleStatus"
+                    [(ngModel)]="state.item.accessMode">
                   <label class="form-check-label" for="itemAdd">
                     {{'access-control-add-to-existing' | translate}}
                   </label>
@@ -75,42 +76,43 @@
               </ui-switch>
             </div>
 
-            <div *ngIf="showLimitToSpecificBitstreams" class="row mt-3">
-            <fieldset class="col-12">
-              <legend class="h4">
-                {{'access-control-limit-to-specific' | translate}}
-              </legend>
-              <div class="form-check">
-                <input class="form-check-input" type="radio"
-                       name="changesLimit" id="processAll" value="all"
-                       [disabled]="!state.bitstream.toggleStatus"
-                       [(ngModel)]="state.bitstream.changesLimit">
-                <label class="form-check-label" for="processAll">
-                  {{'access-control-process-all-bitstreams' | translate}}
-                </label>
+            @if (showLimitToSpecificBitstreams) {
+              <div class="row mt-3">
+                <fieldset class="col-12">
+                  <legend class="h4">
+                    {{'access-control-limit-to-specific' | translate}}
+                  </legend>
+                  <div class="form-check">
+                    <input class="form-check-input" type="radio"
+                      name="changesLimit" id="processAll" value="all"
+                      [disabled]="!state.bitstream.toggleStatus"
+                      [(ngModel)]="state.bitstream.changesLimit">
+                    <label class="form-check-label" for="processAll">
+                      {{'access-control-process-all-bitstreams' | translate}}
+                    </label>
+                  </div>
+                  <div class="form-check">
+                    <input class="form-check-input mt-2" type="radio"
+                      name="changesLimit" id="processSelected" value="selected"
+                      [disabled]="!state.bitstream.toggleStatus"
+                      [(ngModel)]="state.bitstream.changesLimit">
+                    <label class="form-check-label" for="processSelected">
+                      {{ state.bitstream.selectedBitstreams.length }}
+                      {{'access-control-bitstreams-selected' | translate}}
+                      @if (itemRD) {
+                        <button
+                          [attr.aria-label]="'access-control-bitstreams-select' | translate"
+                          [dsBtnDisabled]="!state.bitstream.toggleStatus || state.bitstream.changesLimit !== 'selected'"
+                          (click)="openSelectBitstreamsModal(itemRD.payload)"
+                          class="btn btn-outline-dark border-0" type="button">
+                          <i class="fa fa-search"></i>
+                        </button>
+                      }
+                    </label>
+                  </div>
+                </fieldset>
               </div>
-              <div class="form-check">
-                <input class="form-check-input mt-2" type="radio"
-                       name="changesLimit" id="processSelected" value="selected"
-                       [disabled]="!state.bitstream.toggleStatus"
-                       [(ngModel)]="state.bitstream.changesLimit">
-                <label class="form-check-label" for="processSelected">
-                  {{ state.bitstream.selectedBitstreams.length }}
-                  {{'access-control-bitstreams-selected' | translate}}
-
-                  <button
-                    *ngIf="itemRD"
-                    [attr.aria-label]="'access-control-bitstreams-select' | translate"
-                    [dsBtnDisabled]="!state.bitstream.toggleStatus || state.bitstream.changesLimit !== 'selected'"
-                    (click)="openSelectBitstreamsModal(itemRD.payload)"
-                    class="btn btn-outline-dark border-0" type="button">
-                    <i class="fa fa-search"></i>
-                  </button>
-
-                </label>
-              </div>
-            </fieldset>
-            </div>
+            }
           </div>
 
           <fieldset class="row mt-3">
@@ -120,18 +122,18 @@
             <div class="col-12 col-md-8">
               <div class="form-check">
                 <input class="form-check-input" type="radio"
-                       name="bitstreamMode" id="bitstreamReplace" value="replace"
-                       [disabled]="!state.bitstream.toggleStatus"
-                       [(ngModel)]="state.bitstream.accessMode">
+                  name="bitstreamMode" id="bitstreamReplace" value="replace"
+                  [disabled]="!state.bitstream.toggleStatus"
+                  [(ngModel)]="state.bitstream.accessMode">
                 <label class="form-check-label" for="bitstreamReplace">
                   {{'access-control-replace-all' | translate}}
                 </label>
               </div>
               <div class="form-check">
                 <input class="form-check-input" type="radio"
-                       name="bitstreamMode" id="bitstreamAdd" value="add"
-                       [disabled]="!state.bitstream.toggleStatus"
-                       [(ngModel)]="state.bitstream.accessMode">
+                  name="bitstreamMode" id="bitstreamAdd" value="add"
+                  [disabled]="!state.bitstream.toggleStatus"
+                  [(ngModel)]="state.bitstream.accessMode">
                 <label class="form-check-label" for="bitstreamAdd">
                   {{'access-control-add-to-existing' | translate}}
                 </label>
@@ -152,18 +154,22 @@
         </div>
       </div>
 
-      <hr *ngIf="showSubmit">
+      @if (showSubmit) {
+        <hr>
+        }
 
-      <div *ngIf="showSubmit" class="d-flex justify-content-end">
-        <button class="btn btn-outline-primary me-3" (click)="reset()" type="button">
-          {{ 'access-control-cancel' | translate }}
-        </button>
-        <button class="btn btn-primary"
-                [dsBtnDisabled]="!state.item.toggleStatus && !state.bitstream.toggleStatus"
-                (click)="submit()" type="submit">
-          {{ 'access-control-execute' | translate }}
-        </button>
+        @if (showSubmit) {
+          <div class="d-flex justify-content-end">
+            <button class="btn btn-outline-primary me-3" (click)="reset()" type="button">
+              {{ 'access-control-cancel' | translate }}
+            </button>
+            <button class="btn btn-primary"
+              [dsBtnDisabled]="!state.item.toggleStatus && !state.bitstream.toggleStatus"
+              (click)="submit()" type="submit">
+              {{ 'access-control-execute' | translate }}
+            </button>
+          </div>
+        }
       </div>
     </div>
   </div>
-</div>
diff --git a/src/app/shared/access-control-form-container/item-access-control-select-bitstreams-modal/item-access-control-select-bitstreams-modal.component.html b/src/app/shared/access-control-form-container/item-access-control-select-bitstreams-modal/item-access-control-select-bitstreams-modal.component.html
index 4aed6fe128..5773e9395a 100644
--- a/src/app/shared/access-control-form-container/item-access-control-select-bitstreams-modal/item-access-control-select-bitstreams-modal.component.html
+++ b/src/app/shared/access-control-form-container/item-access-control-select-bitstreams-modal/item-access-control-select-bitstreams-modal.component.html
@@ -3,32 +3,33 @@
     {{'access-control-select-bitstreams-modal.title' | translate}}
   </h4>
   <button type="button" class="btn-close" aria-label="Close"
-          (click)="activeModal.dismiss('Cross click')">
+    (click)="activeModal.dismiss('Cross click')">
   </button>
 </div>
 <div class="modal-body">
-  <ng-container *ngIf="data$ | async as data">
-    <ds-viewable-collection
-      *ngIf="data.payload.page.length > 0"
-      [config]="paginationConfig"
-      [context]="context"
-      [objects]="data"
-      [selectable]="true"
-      [selectionConfig]="{ repeatable: true, listId: LIST_ID }"
-      [showPaginator]="true"
-      (pageChange)="loadForPage($event)">
-    </ds-viewable-collection>
-
-    <div *ngIf="data && data.payload.page.length === 0"
-      class="alert alert-info w-100" role="alert">
-      {{'access-control-select-bitstreams-modal.no-items' | translate}}
-    </div>
-
-  </ng-container>
+  @if (data$ | async; as data) {
+    @if (data.payload.page.length > 0) {
+      <ds-viewable-collection
+        [config]="paginationConfig"
+        [context]="context"
+        [objects]="data"
+        [selectable]="true"
+        [selectionConfig]="{ repeatable: true, listId: LIST_ID }"
+        [showPaginator]="true"
+        (pageChange)="loadForPage($event)">
+      </ds-viewable-collection>
+    }
+    @if (data && data.payload.page.length === 0) {
+      <div
+        class="alert alert-info w-100" role="alert">
+        {{'access-control-select-bitstreams-modal.no-items' | translate}}
+      </div>
+    }
+  }
 </div>
 <div class="modal-footer">
   <button type="button" class="btn btn-outline-dark"
-          (click)="activeModal.close('Close click')">
+    (click)="activeModal.close('Close click')">
     {{'access-control-select-bitstreams-modal.close' | translate}}
   </button>
 </div>
diff --git a/src/app/shared/alert/alert.component.html b/src/app/shared/alert/alert.component.html
index 560dfa0794..ae5732b25a 100644
--- a/src/app/shared/alert/alert.component.html
+++ b/src/app/shared/alert/alert.component.html
@@ -1,8 +1,12 @@
-<div *ngIf="!dismissed" class="alert {{type}} alert-dismissible fade show w-100 p-3" role="alert" [@enterLeave]="animate">
-  <span *ngIf="content" [innerHTML]="content | translate"></span>
-
-  <ng-content></ng-content>
-
-  <button *ngIf="dismissible" type="button" class="btn-close" data-dismiss="alert" aria-label="Close" (click)="dismiss()">
-  </button>
-</div>
+@if (!dismissed) {
+  <div class="alert {{type}} alert-dismissible fade show w-100 p-3" role="alert" [@enterLeave]="animate">
+    @if (content) {
+      <span [innerHTML]="content | translate"></span>
+    }
+    <ng-content></ng-content>
+    @if (dismissible) {
+      <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close" (click)="dismiss()">
+      </button>
+    }
+  </div>
+}
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
index 1b279bf16b..4dac66b749 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -1,52 +1,61 @@
-<div class="navbar-nav me-auto" *ngIf="(isMobile$ | async) !== true; else mobileButtons" data-test="auth-nav">
-  <div *ngIf="(isAuthenticated | async) !== true && (showAuth | async)"
-      class="nav-item"
-      (click)="$event.stopPropagation();">
-    <div ngbDropdown #loginDrop="ngbDropdown" display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="javascript:void(0);" class="dropdownLogin px-0.5" [attr.aria-label]="'nav.login' |translate"
-         (click)="$event.preventDefault()" [attr.data-test]="'login-menu' | dsBrowserOnly"
-         role="menuitem"
-         aria-haspopup="menu"
-         aria-controls="loginDropdownMenu"
-         [attr.aria-expanded]="loginDrop.isOpen()"
-         ngbDropdownToggle>{{ 'nav.login' | translate }}</a>
-      <div id="loginDropdownMenu" [ngClass]="{'ps-3 pe-3': (loading | async)}" ngbDropdownMenu
-           role="menu"
-           [attr.aria-label]="'nav.login' | translate">
-        <ds-log-in
-          [isStandalonePage]="false"></ds-log-in>
+@if ((isMobile$ | async) !== true) {
+  <div class="navbar-nav me-auto" data-test="auth-nav">
+    @if ((isAuthenticated | async) !== true && (showAuth | async)) {
+      <div
+        class="nav-item"
+        (click)="$event.stopPropagation();">
+        <div ngbDropdown #loginDrop="ngbDropdown" display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
+          <a href="javascript:void(0);" class="dropdownLogin px-0.5" [attr.aria-label]="'nav.login' |translate"
+            (click)="$event.preventDefault()" [attr.data-test]="'login-menu' | dsBrowserOnly"
+            role="menuitem"
+            aria-haspopup="menu"
+            aria-controls="loginDropdownMenu"
+            [attr.aria-expanded]="loginDrop.isOpen()"
+          ngbDropdownToggle>{{ 'nav.login' | translate }}</a>
+          <div id="loginDropdownMenu" [ngClass]="{'ps-3 pe-3': (loading | async)}" ngbDropdownMenu
+            role="menu"
+            [attr.aria-label]="'nav.login' | translate">
+            <ds-log-in
+            [isStandalonePage]="false"></ds-log-in>
+          </div>
+        </div>
       </div>
+    }
+    @if ((isAuthenticated | async) && (showAuth | async)) {
+      <div class="nav-item">
+        <div ngbDropdown #loggedInDrop="ngbDropdown" display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
+          <a href="javascript:void(0);"
+            role="menuitem"
+            [attr.aria-label]="'nav.user-profile-menu-and-logout' | translate"
+            aria-controls="user-menu-dropdown"
+            (click)="$event.preventDefault()" [title]="'nav.user-profile-menu-and-logout' | translate"
+            class="dropdownLogout px-1"
+            [attr.data-test]="'user-menu' | dsBrowserOnly"
+            ngbDropdownToggle>
+            <i class="fas fa-user-circle fa-lg fa-fw"></i></a>
+            <div id="logoutDropdownMenu" ngbDropdownMenu>
+              <ds-user-menu [inExpandableNavbar]="false" (changedRoute)="loggedInDrop.close()"></ds-user-menu>
+            </div>
+          </div>
+        </div>
+      }
     </div>
-  </div>
-  <div *ngIf="(isAuthenticated | async) && (showAuth | async)" class="nav-item">
-    <div ngbDropdown #loggedInDrop="ngbDropdown" display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="javascript:void(0);"
-         role="menuitem"
-         [attr.aria-label]="'nav.user-profile-menu-and-logout' | translate"
-         aria-controls="user-menu-dropdown"
-         (click)="$event.preventDefault()" [title]="'nav.user-profile-menu-and-logout' | translate"
-         class="dropdownLogout px-1"
-         [attr.data-test]="'user-menu' | dsBrowserOnly"
-         ngbDropdownToggle>
-        <i class="fas fa-user-circle fa-lg fa-fw"></i></a>
-      <div id="logoutDropdownMenu" ngbDropdownMenu>
-        <ds-user-menu [inExpandableNavbar]="false" (changedRoute)="loggedInDrop.close()"></ds-user-menu>
-      </div>
+  } @else {
+    <div data-test="auth-nav">
+      @if ((isAuthenticated | async) !== true) {
+        <a routerLink="/login" routerLinkActive="active" class="loginLink px-0.5" role="button">
+          {{ 'nav.login' | translate }}<span class="sr-only">(current)</span>
+        </a>
+      }
+      @if ((isAuthenticated | async)) {
+        <a role="button" [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="logoutLink px-1">
+          <i class="fas fa-sign-out-alt fa-lg fa-fw"></i>
+          <span class="sr-only">(current)</span>
+        </a>
+      }
     </div>
-  </div>
-</div>
+  }
 
 
-<ng-template #mobileButtons>
-  <div data-test="auth-nav">
-    <a *ngIf="(isAuthenticated | async) !== true" routerLink="/login" routerLinkActive="active" class="loginLink px-0.5" role="button">
-      {{ 'nav.login' | translate }}<span class="sr-only">(current)</span>
-    </a>
-    <a *ngIf="(isAuthenticated | async)" role="button" [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="logoutLink px-1">
-      <i class="fas fa-sign-out-alt fa-lg fa-fw"></i>
-      <span class="sr-only">(current)</span>
-    </a>
-  </div>
-</ng-template>
 
-<!-- Do not use ul/li in this menu as it breaks e2e accessibility tests -->
+  <!-- Do not use ul/li in this menu as it breaks e2e accessibility tests -->
diff --git a/src/app/shared/collection-dropdown/collection-dropdown.component.html b/src/app/shared/collection-dropdown/collection-dropdown.component.html
index 751f91fb7b..985de3dfd7 100644
--- a/src/app/shared/collection-dropdown/collection-dropdown.component.html
+++ b/src/app/shared/collection-dropdown/collection-dropdown.component.html
@@ -1,44 +1,54 @@
-<div *ngIf="searchField" class="mb-3 w-100 pe-2 ps-2 my-2">
-  <input type="search"
-         class="form-control w-100"
-         (click)="$event.stopPropagation();"
-         placeholder="{{ 'submission.sections.general.search-collection' | translate }}"
-         [formControl]="searchField"
-         #searchFieldEl>
-</div>
+@if (searchField) {
+  <div class="mb-3 w-100 pe-2 ps-2 my-2">
+    <input type="search"
+      class="form-control w-100"
+      (click)="$event.stopPropagation();"
+      placeholder="{{ 'submission.sections.general.search-collection' | translate }}"
+      [formControl]="searchField"
+      #searchFieldEl>
+  </div>
+}
 <div class="dropdown-divider m-0"></div>
 <ul class="scrollable-menu p-0 m-0"
-    role="menu"
-     (scroll)="onScroll($event)"
-     infiniteScroll
-     [infiniteScrollDistance]="1.5"
-     [infiniteScrollThrottle]="0"
-     [infiniteScrollUpDistance]="1.5"
-     [fromRoot]="true"
-     [scrollWindow]="false"
-     (scrolled)="onScrollDown()">
+  role="menu"
+  (scroll)="onScroll($event)"
+  infiniteScroll
+  [infiniteScrollDistance]="1.5"
+  [infiniteScrollThrottle]="0"
+  [infiniteScrollUpDistance]="1.5"
+  [fromRoot]="true"
+  [scrollWindow]="false"
+  (scrolled)="onScrollDown()">
 
-  <li class="dropdown-item disabled" role="menuitem" *ngIf="searchListCollection?.length === 0 && (isLoading | async) !== true">
-    {{'submission.sections.general.no-collection' | translate}}
-  </li>
-  <ng-container *ngIf="searchListCollection?.length > 0">
-    <li *ngFor="let listItem of searchListCollection"
-            class="dropdown-item collection-item"
-            role="menuitem"
-            title="{{ listItem.collection.name }}"
-            (click)="onSelect(listItem)">
-      <div class="list-unstyled mb-0">
-        <div class="list-item text-truncate text-secondary" *ngFor="let item of listItem.communities">
-          {{ item.name}} <i class="fa fa-level-down" aria-hidden="true"></i>
-        </div>
-        <div class="list-item text-truncate text-primary fw-bold">{{ listItem.collection.name}}</div>
-      </div>
+  @if (searchListCollection?.length === 0 && (isLoading | async) !== true) {
+    <li class="dropdown-item disabled" role="menuitem">
+      {{'submission.sections.general.no-collection' | translate}}
     </li>
-  </ng-container>
-  <li *ngIf="(isLoading | async)">
-    <button class="dropdown-item disabled">
-      <ds-loading message="{{'loading.default' | translate}}">
-      </ds-loading>
-    </button>
-  </li>
+  }
+  @if (searchListCollection?.length > 0) {
+    @for (listItem of searchListCollection; track listItem) {
+      <li
+        class="dropdown-item collection-item"
+        role="menuitem"
+        title="{{ listItem.collection.name }}"
+        (click)="onSelect(listItem)">
+        <div class="list-unstyled mb-0">
+          @for (item of listItem.communities; track item) {
+            <div class="list-item text-truncate text-secondary">
+              {{ item.name}} <i class="fa fa-level-down" aria-hidden="true"></i>
+            </div>
+          }
+          <div class="list-item text-truncate text-primary fw-bold">{{ listItem.collection.name}}</div>
+        </div>
+      </li>
+    }
+  }
+  @if ((isLoading | async)) {
+    <li>
+      <button class="dropdown-item disabled">
+        <ds-loading message="{{'loading.default' | translate}}">
+        </ds-loading>
+      </button>
+    </li>
+  }
 </ul>
diff --git a/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html b/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html
index d99e740b07..084efd2094 100644
--- a/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html
+++ b/src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.html
@@ -4,42 +4,52 @@
       <label class="form-label">{{type.value + '.edit.logo.label' | translate}}</label>
     </div>
     <ng-container *ngVar="(dso?.logo | async)?.payload as logo">
-      <div class="col-12 d-inline-block alert" id="logo-section" *ngIf="logo">
-        <div class="row">
-          <div class="col-8 d-inline-block">
-            <ds-comcol-page-logo [alternateText]="type.value + '.logo.alt'" [logo]="logo"></ds-comcol-page-logo>
-          </div>
-          <div class="col-4 d-inline-block">
-            <div *ngIf="logo" class="float-end">
-              <button
-                (click)="confirmLogoDeleteWithModal()"
-                class="btn btn-danger"
-                type="button">{{ 'community.edit.logo.delete.title' | translate }}
-              </button>
+      @if (logo) {
+        <div class="col-12 d-inline-block alert" id="logo-section">
+          <div class="row">
+            <div class="col-8 d-inline-block">
+              <ds-comcol-page-logo [alternateText]="type.value + '.logo.alt'" [logo]="logo"></ds-comcol-page-logo>
+            </div>
+            <div class="col-4 d-inline-block">
+              @if (logo) {
+                <div class="float-end">
+                  <button
+                    (click)="confirmLogoDeleteWithModal()"
+                    class="btn btn-danger"
+                    type="button">{{ 'community.edit.logo.delete.title' | translate }}
+                  </button>
+                </div>
+              }
             </div>
           </div>
         </div>
-      </div>
-      <div *ngIf="!logo" class="col-12 d-inline-block">
-        <ds-uploader  *ngIf="initializedUploaderOptions | async"
-                      [ariaLabel]="type.value + '.browse.logo'"
-                      [dropMsg]="type.value + '.edit.logo.upload'"
-                      [dropOverDocumentMsg]="type.value + '.edit.logo.upload'"
-                      [enableDragOverDocument]="true"
-                      [uploadFilesOptions]="uploadFilesOptions"
-                      (onCompleteItem)="onCompleteItem()"
-                      (onUploadError)="onUploadError()"></ds-uploader>
-      </div>
+      }
+      @if (!logo) {
+        <div class="col-12 d-inline-block">
+          @if (initializedUploaderOptions | async) {
+            <ds-uploader
+              [ariaLabel]="type.value + '.browse.logo'"
+              [dropMsg]="type.value + '.edit.logo.upload'"
+              [dropOverDocumentMsg]="type.value + '.edit.logo.upload'"
+              [enableDragOverDocument]="true"
+              [uploadFilesOptions]="uploadFilesOptions"
+              (onCompleteItem)="onCompleteItem()"
+            (onUploadError)="onUploadError()"></ds-uploader>
+          }
+        </div>
+      }
     </ng-container>
   </div>
 </div>
-<ds-form *ngIf="formModel"
-         [formId]="'comcol-form-id'"
-         [formModel]="formModel"
-         [displayCancel]="false"
-         (submitForm)="onSubmit()">
-  <button (click)="back.emit()" before class="btn btn-outline-secondary" type="button">
-    <i class="fas fa-arrow-left" aria-hidden="true"></i> {{ type.value + '.edit.return' | translate }}
-  </button>
-</ds-form>
+@if (formModel) {
+  <ds-form
+    [formId]="'comcol-form-id'"
+    [formModel]="formModel"
+    [displayCancel]="false"
+    (submitForm)="onSubmit()">
+    <button (click)="back.emit()" before class="btn btn-outline-secondary" type="button">
+      <i class="fas fa-arrow-left" aria-hidden="true"></i> {{ type.value + '.edit.return' | translate }}
+    </button>
+  </ds-form>
+}
 
diff --git a/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html b/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
index ac58bf79c7..b719f3080d 100644
--- a/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
+++ b/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
@@ -5,34 +5,38 @@
         <h1>{{ type + '.edit.head' | translate }}</h1>
         <div class="my-auto">
           <a class="btn btn-danger"
-             [routerLink]="((type === 'community') ? '/communities/' : '/collections/') + (dsoRD$ | async)?.payload.uuid + '/delete'"
-             data-test="delete-button">
+            [routerLink]="((type === 'community') ? '/communities/' : '/collections/') + (dsoRD$ | async)?.payload.uuid + '/delete'"
+            data-test="delete-button">
             <i class="fas fa-trash" aria-hidden="true"></i> {{type + '.edit.delete' | translate}}</a>
-        </div>
-      </div>
-      <div class="pt-2">
-        <ul class="nav nav-tabs justify-content-start mb-2" role="tablist">
-          <li *ngFor="let page of pages" class="nav-item" role="presentation">
-            <a class="nav-link" role="tab"
-               [attr.aria-selected]="page === currentPage"
-               [ngClass]="{'active' : page === currentPage}"
-               [routerLink]="['./' + page]"
-               [attr.data-test]="page">
-              {{ type + '.edit.tabs.' + page + '.head' | translate}}
-            </a>
-          </li>
-        </ul>
-        <div class="tab-pane active">
-          <div class="mb-4">
-            <router-outlet></router-outlet>
           </div>
-          <div class="col-12 text-end custom-alignment">
-            <a *ngIf="!hideReturnButton" [routerLink]="getPageUrl((dsoRD$ | async)?.payload)" class="btn btn-outline-secondary">
-              <i class="fas fa-arrow-left" aria-hidden="true"></i> {{ type + '.edit.return' | translate }}
-            </a>
+        </div>
+        <div class="pt-2">
+          <ul class="nav nav-tabs justify-content-start mb-2" role="tablist">
+            @for (page of pages; track page) {
+              <li class="nav-item" role="presentation">
+                <a class="nav-link" role="tab"
+                  [attr.aria-selected]="page === currentPage"
+                  [ngClass]="{'active' : page === currentPage}"
+                  [routerLink]="['./' + page]"
+                  [attr.data-test]="page">
+                  {{ type + '.edit.tabs.' + page + '.head' | translate}}
+                </a>
+              </li>
+            }
+          </ul>
+          <div class="tab-pane active">
+            <div class="mb-4">
+              <router-outlet></router-outlet>
+            </div>
+            <div class="col-12 text-end custom-alignment">
+              @if (!hideReturnButton) {
+                <a [routerLink]="getPageUrl((dsoRD$ | async)?.payload)" class="btn btn-outline-secondary">
+                  <i class="fas fa-arrow-left" aria-hidden="true"></i> {{ type + '.edit.return' | translate }}
+                </a>
+              }
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
diff --git a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
index 0ad9448099..c88bb16afc 100644
--- a/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
+++ b/src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html
@@ -1,30 +1,34 @@
 <h2 class="comcol-browse-label">{{'browse.comcol.head' | translate}}</h2>
-<nav *ngIf="(allOptions$ | async) as allOptions" class="comcol-browse mb-4" aria-label="Browse Community or Collection">
-  <div class="d-none d-sm-block">
-
-    <div class="list-group list-group-horizontal" role="tablist">
-      <a *ngFor="let option of allOptions"
-         [attr.aria-current]="(currentOption$ | async)?.id === option.id"
-         class="list-group-item"
-         role="tab"
-         [routerLink]="option.routerLink"
-         [queryParams]="option.params"
-         [class.active]="(currentOption$ | async)?.id === option.id">
-        {{ option.label | translate }}
-      </a>
+@if ((allOptions$ | async); as allOptions) {
+  <nav class="comcol-browse mb-4" aria-label="Browse Community or Collection">
+    <div class="d-none d-sm-block">
+      <div class="list-group list-group-horizontal" role="tablist">
+        @for (option of allOptions; track option) {
+          <a
+            [attr.aria-current]="(currentOption$ | async)?.id === option.id"
+            class="list-group-item"
+            role="tab"
+            [routerLink]="option.routerLink"
+            [queryParams]="option.params"
+            [class.active]="(currentOption$ | async)?.id === option.id">
+            {{ option.label | translate }}
+          </a>
+        }
+      </div>
     </div>
-  </div>
-
-  <div class="d-block d-sm-none">
-    <select name="browse-type"
-            class="form-select"
-            aria-label="Browse Community or Collection"
-            (change)="onSelectChange($event)">
-      <option *ngFor="let option of allOptions"
-              [value]="option.id"
-              [attr.selected]="(currentOption$ | async)?.id === option.id ? 'selected' : null">
-        {{ option.label | translate }}
-      </option>
-    </select>
-  </div>
-</nav>
+    <div class="d-block d-sm-none">
+      <select name="browse-type"
+        class="form-select"
+        aria-label="Browse Community or Collection"
+        (change)="onSelectChange($event)">
+        @for (option of allOptions; track option) {
+          <option
+            [value]="option.id"
+            [attr.selected]="(currentOption$ | async)?.id === option.id ? 'selected' : null">
+            {{ option.label | translate }}
+          </option>
+        }
+      </select>
+    </div>
+  </nav>
+}
diff --git a/src/app/shared/correction-suggestion/item-withdrawn-reinstate-modal.component.html b/src/app/shared/correction-suggestion/item-withdrawn-reinstate-modal.component.html
index 8f770b915a..7b299e8a37 100644
--- a/src/app/shared/correction-suggestion/item-withdrawn-reinstate-modal.component.html
+++ b/src/app/shared/correction-suggestion/item-withdrawn-reinstate-modal.component.html
@@ -1,55 +1,59 @@
-<div *ngIf="(this.submitted$ | async) !== true; else waiting">
-  <div *ngIf="this.canWithdraw; else reinstateHeader" class="modal-header">
-    {{ 'item.qa.withdrawn.modal.header' | translate }}
-    <button type="button" class="close" (click)="onModalClose()" aria-label="Close">
-      <span aria-hidden="true">×</span>
-    </button>
-  </div>
-  <div class="modal-body">
-    <div class="form-group">
-      <label for="reason">{{ this.canWithdraw ? ('qa-withdrawn.create.modal.form.summary.label' | translate)
-                                              : ('qa-reinstate.create.modal.form.summary.label' | translate) }}</label>
-      <label for="reason">{{ this.canWithdraw ? ('qa-withdrawn.create.modal.form.summary2.label' | translate)
-                                              : ('qa-reinstate.create.modal.form.summary2.label' | translate) }}</label>
-      <textarea class="form-control" id="reason"
-                rows="6"
-                [(ngModel)]="reason"
+@if ((this.submitted$ | async) !== true) {
+  <div>
+    @if (this.canWithdraw) {
+      <div class="modal-header">
+        {{ 'item.qa.withdrawn.modal.header' | translate }}
+        <button type="button" class="close" (click)="onModalClose()" aria-label="Close">
+          <span aria-hidden="true">×</span>
+        </button>
+      </div>
+    } @else {
+      @if (!this.canWithdraw) {
+        <div class="modal-header">
+          {{'item.qa.reinstate.modal.header' | translate}}
+          <button type="button" class="close" (click)="onModalClose()" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+      }
+    }
+    <div class="modal-body">
+      <div class="form-group">
+        <label for="reason">{{ this.canWithdraw ? ('qa-withdrawn.create.modal.form.summary.label' | translate)
+        : ('qa-reinstate.create.modal.form.summary.label' | translate) }}</label>
+        <label for="reason">{{ this.canWithdraw ? ('qa-withdrawn.create.modal.form.summary2.label' | translate)
+        : ('qa-reinstate.create.modal.form.summary2.label' | translate) }}</label>
+        <textarea class="form-control" id="reason"
+          rows="6"
+          [(ngModel)]="reason"
                 placeholder="{{ this.canWithdraw ? ('qa-withdrown.modal.form.summary.placeholder' | translate)
                                                  : ('qa-reinstate.modal.form.summary.placeholder' | translate) }}"
-                name="message"></textarea>
+        name="message"></textarea>
+      </div>
+    </div>
+    <div class="modal-footer space-children-mr">
+      <button class="btn btn-outline-secondary btn-sm ms-0"
+        type="button"
+        (click)="onModalClose()"
+        title="{{'item.qa.withdrawn-reinstate.create.modal.button.cancel.tooltip' | translate}}">
+        <i class="fas fa-times fa-fw"></i> {{'item.qa.withdrawn-reinstate.create.modal.button.cancel' | translate}}
+      </button>
+      <button class="btn btn-success btn-sm ms-0"
+        type="submit"
+        (click)="onModalSubmit()"
+        title="{{'item.qa.withdrawn-reinstate.modal.button.confirm.tooltip' | translate}}">
+        <i class="fas fa-check fa-fw"></i> {{ this.canWithdraw ? ('qa-withdrown.create.modal.button.confirm' | translate)
+        : ('qa-reinstate.create.modal.button.confirm' | translate) }}
+      </button>
     </div>
   </div>
-  <div class="modal-footer space-children-mr">
-    <button class="btn btn-outline-secondary btn-sm ms-0"
-            type="button"
-            (click)="onModalClose()"
-            title="{{'item.qa.withdrawn-reinstate.create.modal.button.cancel.tooltip' | translate}}">
-      <i class="fas fa-times fa-fw"></i> {{'item.qa.withdrawn-reinstate.create.modal.button.cancel' | translate}}
-    </button>
-    <button class="btn btn-success btn-sm ms-0"
-            type="submit"
-            (click)="onModalSubmit()"
-            title="{{'item.qa.withdrawn-reinstate.modal.button.confirm.tooltip' | translate}}">
-      <i class="fas fa-check fa-fw"></i> {{ this.canWithdraw ? ('qa-withdrown.create.modal.button.confirm' | translate)
-                                                             : ('qa-reinstate.create.modal.button.confirm' | translate) }}
-    </button>
-  </div>
-</div>
-
-<ng-template #waiting>
+} @else {
   <div class="modal-header">{{'item.qa.withdrawn.modal.submitted.header' | translate}}</div>
   <div class="modal-body">
     <div class="d-flex justify-content-center">
       <ds-loading [showMessage]="false"></ds-loading>
     </div>
   </div>
-</ng-template>
+}
+
 
-<ng-template #reinstateHeader>
-  <div *ngIf="!this.canWithdraw" class="modal-header">
-    {{'item.qa.reinstate.modal.header' | translate}}
-    <button type="button" class="close" (click)="onModalClose()" aria-label="Close">
-      <span aria-hidden="true">×</span>
-    </button>
-  </div>
-</ng-template>
diff --git a/src/app/shared/ds-select/ds-select.component.html b/src/app/shared/ds-select/ds-select.component.html
index 3e8b8397af..c5fa369ceb 100644
--- a/src/app/shared/ds-select/ds-select.component.html
+++ b/src/app/shared/ds-select/ds-select.component.html
@@ -2,24 +2,26 @@
 
   <div ngbDropdown class="btn-group" (openChange)="toggled.emit($event)">
 
-  <span  *ngIf="label" id="dsSelectMenuLabel" class="input-group-text">
-    {{ label | translate }}
-  </span>
+    @if (label) {
+      <span  id="dsSelectMenuLabel" class="input-group-text">
+        {{ label | translate }}
+      </span>
+    }
 
     <button aria-describedby="dsSelectMenuLabel"
-            id="dsSelectMenuButton"
-            class="btn btn-outline-primary selection"
-            (blur)="close.emit($event)"
-            (click)="close.emit($event)"
-            [dsBtnDisabled]="disabled"
-            ngbDropdownToggle>
+      id="dsSelectMenuButton"
+      class="btn btn-outline-primary selection"
+      (blur)="close.emit($event)"
+      (click)="close.emit($event)"
+      [dsBtnDisabled]="disabled"
+      ngbDropdownToggle>
       <ng-content select=".selection"></ng-content>
     </button>
 
     <div ngbDropdownMenu
-         class="dropdown-menu"
-         id="dsSelectDropdownMenu"
-         aria-labelledby="dsSelectMenuButton">
+      class="dropdown-menu"
+      id="dsSelectDropdownMenu"
+      aria-labelledby="dsSelectMenuButton">
       <div>
         <ng-content select=".menu"></ng-content>
       </div>
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html
index 4e5f4d99d0..bbec6da207 100644
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html
@@ -1,21 +1,28 @@
 <div class="dso-button-menu mb-1" ngbDropdown container="body" placement="bottom-right">
-    <div class="d-flex flex-row flex-nowrap"
-         [ngbTooltip]="itemModel.text | translate" container="body">
-        <button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" ngbDropdownToggle [dsBtnDisabled]="section.model?.disabled">
-            <i class="fas fa-{{section.icon}} fa-fw"></i>
-        </button>
-        <ul ngbDropdownMenu class="dso-edit-menu-dropdown">
-            <li class="nav-item nav-link d-flex flex-row" *ngFor="let subSection of (subSections$ | async)">
-                <div *ngIf="renderIcons$ | async" class="me-2">
-                    <i *ngIf="subSection.icon; else spacer" class="fas fa-{{subSection.icon}} fa-fw"></i>
-                    <ng-template #spacer><i class="fas fa-fw"></i></ng-template>
-                </div>
-                <ng-container
-                        *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;">
-                </ng-container>
-            </li>
-        </ul>
-    </div>
+  <div class="d-flex flex-row flex-nowrap"
+    [ngbTooltip]="itemModel.text | translate" container="body">
+    <button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" ngbDropdownToggle [dsBtnDisabled]="section.model?.disabled">
+      <i class="fas fa-{{section.icon}} fa-fw"></i>
+    </button>
+    <ul ngbDropdownMenu class="dso-edit-menu-dropdown">
+      @for (subSection of (subSections$ | async); track subSection) {
+        <li class="nav-item nav-link d-flex flex-row">
+          @if (renderIcons$ | async) {
+            <div class="me-2">
+              @if (subSection.icon) {
+                <i class="fas fa-{{subSection.icon}} fa-fw"></i>
+              } @else {
+                <i class="fas fa-fw"></i>
+              }
+            </div>
+          }
+          <ng-container
+            *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;">
+          </ng-container>
+        </li>
+      }
+    </ul>
+  </div>
 </div>
 
 
diff --git a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu.component.html b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu.component.html
index b5c51d4855..590d7945ec 100644
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu.component.html
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-menu.component.html
@@ -1,6 +1,8 @@
 <div class="dso-edit-menu d-flex">
-    <div *ngFor="let section of (sections | async)" class="ms-1">
-        <ng-container
-                *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
+  @for (section of (sections | async); track section) {
+    <div class="ms-1">
+      <ng-container
+      *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
     </div>
+  }
 </div>
diff --git a/src/app/shared/dso-selector/dso-selector/dso-selector.component.html b/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
index f13d7f70ca..cfe8da849f 100644
--- a/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
+++ b/src/app/shared/dso-selector/dso-selector/dso-selector.component.html
@@ -1,10 +1,10 @@
 <div class="mb-3 w-100 pe-2 ps-2">
-    <input type="search"
-           class="form-control"
-           (click)="$event.stopPropagation();"
-           [attr.aria-label]="'dso-selector.placeholder' | translate: { type: typesString }"
-           placeholder="{{'dso-selector.placeholder' | translate: { type: typesString } }}"
-           [formControl]="input" ngbAutofocus (keyup.enter)="selectSingleResult()">
+  <input type="search"
+    class="form-control"
+    (click)="$event.stopPropagation();"
+    [attr.aria-label]="'dso-selector.placeholder' | translate: { type: typesString }"
+    placeholder="{{'dso-selector.placeholder' | translate: { type: typesString } }}"
+    [formControl]="input" ngbAutofocus (keyup.enter)="selectSingleResult()">
 </div>
 <div class="dropdown-divider"></div>
 <div id="scrollable-menu-dso-selector-{{randomSeed}}" class="scrollable-menu list-group">
@@ -15,25 +15,31 @@
     [infiniteScrollContainer]="'#scrollable-menu-dso-selector-' + randomSeed"
     [fromRoot]="true"
     (scrolled)="onScrollDown()">
-    <ng-container *ngIf="listEntries$ | async">
-      <button class="list-group-item list-group-item-action border-0 disabled"
-              *ngIf="(listEntries$ | async).length === 0">
-        {{'dso-selector.no-results' | translate: { type: typesString } }}
+    @if (listEntries$ | async) {
+      @if ((listEntries$ | async).length === 0) {
+        <button class="list-group-item list-group-item-action border-0 disabled"
+          >
+          {{'dso-selector.no-results' | translate: { type: typesString } }}
+        </button>
+      }
+      @for (listEntry of (listEntries$ | async); track listEntry) {
+        <button
+          class="list-group-item list-group-item-action border-0 list-entry"
+          [ngClass]="{'bg-primary': listEntry['id'] === currentDSOId}"
+          title="{{ getName(listEntry) }}"
+          dsHoverClass="ds-hover"
+          (click)="onClick(listEntry)" #listEntryElement>
+          <ds-listable-object-component-loader [object]="listEntry" [viewMode]="viewMode"
+          [linkType]=linkTypes.None [context]="getContext(listEntry['id'])"></ds-listable-object-component-loader>
+        </button>
+      }
+    }
+    @if (loading) {
+      <button
+        title="{{'loading.default' | translate}}"
+        class="list-group-item list-group-item-action border-0 list-entry">
+        <ds-loading [showMessage]="false"></ds-loading>
       </button>
-      <button *ngFor="let listEntry of (listEntries$ | async)"
-              class="list-group-item list-group-item-action border-0 list-entry"
-              [ngClass]="{'bg-primary': listEntry['id'] === currentDSOId}"
-              title="{{ getName(listEntry) }}"
-              dsHoverClass="ds-hover"
-              (click)="onClick(listEntry)" #listEntryElement>
-        <ds-listable-object-component-loader [object]="listEntry" [viewMode]="viewMode"
-                                             [linkType]=linkTypes.None [context]="getContext(listEntry['id'])"></ds-listable-object-component-loader>
-      </button>
-    </ng-container>
-    <button *ngIf="loading"
-            title="{{'loading.default' | translate}}"
-            class="list-group-item list-group-item-action border-0 list-entry">
-      <ds-loading [showMessage]="false"></ds-loading>
-    </button>
+    }
   </div>
 </div>
diff --git a/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html b/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html
index 2f04098e8b..8a7a4af89b 100644
--- a/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html
+++ b/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.html
@@ -1,20 +1,22 @@
 <div>
-    <div class="modal-header">{{'dso-selector.'+ action + '.' + objectType.toString().toLowerCase() + '.head' | translate}}
-        <button type="button" class="btn-close" (click)="close()" aria-label="Close">
-        </button>
-    </div>
-    <div class="modal-body">
-      <div data-test="admin-div" *ngIf="(isAdmin$ | async)">
+  <div class="modal-header">{{'dso-selector.'+ action + '.' + objectType.toString().toLowerCase() + '.head' | translate}}
+    <button type="button" class="btn-close" (click)="close()" aria-label="Close">
+    </button>
+  </div>
+  <div class="modal-body">
+    @if ((isAdmin$ | async)) {
+      <div data-test="admin-div">
         <button class="btn btn-outline-primary btn-lg btn-block w-100" (click)="selectObject(undefined)">{{'dso-selector.create.community.top-level' | translate}}</button>
         <div class="h3 position-relative py-1 my-3 fw-normal">
-            <hr>
+          <hr>
             <div id="create-community-or-separator" class="text-center position-absolute w-100">
-                <span class="px-4 bg-white">{{'dso-selector.create.community.or-divider' | translate}}</span>
+              <span class="px-4 bg-white">{{'dso-selector.create.community.or-divider' | translate}}</span>
             </div>
+          </div>
         </div>
-      </div>
-        <span class="h5 px-2">{{'dso-selector.create.community.sub-level' | translate}}</span>
-        <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-dso-selector>
+      }
+      <span class="h5 px-2">{{'dso-selector.create.community.sub-level' | translate}}</span>
+      <ds-dso-selector [currentDSOId]="dsoRD?.payload.uuid" [types]="selectorTypes" [sort]="defaultSort" (onSelect)="selectObject($event)"></ds-dso-selector>
     </div>
-</div>
+  </div>
 
diff --git a/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts b/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts
index dc49fcaa8a..f86e9a2b08 100644
--- a/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts
+++ b/src/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts
@@ -1,7 +1,4 @@
-import {
-  AsyncPipe,
-  NgIf,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
   OnInit,
@@ -50,7 +47,6 @@ import {
   imports: [
     AsyncPipe,
     DSOSelectorComponent,
-    NgIf,
     TranslateModule,
   ],
 })
diff --git a/src/app/shared/entity-dropdown/entity-dropdown.component.html b/src/app/shared/entity-dropdown/entity-dropdown.component.html
index dd73e82584..4f09f88352 100644
--- a/src/app/shared/entity-dropdown/entity-dropdown.component.html
+++ b/src/app/shared/entity-dropdown/entity-dropdown.component.html
@@ -1,32 +1,38 @@
 <ul class="scrollable-menu list-unstyled mb-0"
-    role="menu"
-    (scroll)="onScroll($event)"
-    infiniteScroll
-    [infiniteScrollDistance]="5"
-    [infiniteScrollThrottle]="300"
-    [infiniteScrollUpDistance]="1.5"
-    [fromRoot]="true"
-    [scrollWindow]="false"
-    (scrolled)="onScrollDown()">
-  <li *ngIf="searchListEntity?.length === 0 && (isLoadingList | async) !== true">
-    <button class="dropdown-item disabled" role="menuitem">
-      {{'submission.sections.general.no-entity' | translate}}
-    </button>
-  </li>
-  <li *ngFor="let listItem of searchListEntity" class="entity-item text-primary">
-    <button class="dropdown-item"
-            role="menuitem"
-            title="{{ listItem.label }}"
-            (click)="onSelect(listItem)">
-      <ul class="list-unstyled mb-0">
-        <li class="list-item text-truncate text-primary fw-bold">{{ listItem.label.toLowerCase() + '.listelement.badge' | translate }}</li>
-      </ul>
-    </button>
-  </li>
-  <li *ngIf="(isLoadingList | async)">
-    <button class="dropdown-item disabled" role="menuitem">
-      <ds-loading message="{{'loading.default' | translate}}">
-      </ds-loading>
-    </button>
-  </li>
+  role="menu"
+  (scroll)="onScroll($event)"
+  infiniteScroll
+  [infiniteScrollDistance]="5"
+  [infiniteScrollThrottle]="300"
+  [infiniteScrollUpDistance]="1.5"
+  [fromRoot]="true"
+  [scrollWindow]="false"
+  (scrolled)="onScrollDown()">
+  @if (searchListEntity?.length === 0 && (isLoadingList | async) !== true) {
+    <li>
+      <button class="dropdown-item disabled" role="menuitem">
+        {{'submission.sections.general.no-entity' | translate}}
+      </button>
+    </li>
+  }
+  @for (listItem of searchListEntity; track listItem) {
+    <li class="entity-item text-primary">
+      <button class="dropdown-item"
+        role="menuitem"
+        title="{{ listItem.label }}"
+        (click)="onSelect(listItem)">
+        <ul class="list-unstyled mb-0">
+          <li class="list-item text-truncate text-primary fw-bold">{{ listItem.label.toLowerCase() + '.listelement.badge' | translate }}</li>
+        </ul>
+      </button>
+    </li>
+  }
+  @if ((isLoadingList | async)) {
+    <li>
+      <button class="dropdown-item disabled" role="menuitem">
+        <ds-loading message="{{'loading.default' | translate}}">
+        </ds-loading>
+      </button>
+    </li>
+  }
 </ul>
diff --git a/src/app/shared/file-download-link/file-download-link.component.html b/src/app/shared/file-download-link/file-download-link.component.html
index 5b47f6eb4a..e305d2a82b 100644
--- a/src/app/shared/file-download-link/file-download-link.component.html
+++ b/src/app/shared/file-download-link/file-download-link.component.html
@@ -1,9 +1,11 @@
 <a [routerLink]="(bitstreamPath$| async)?.routerLink" class="dont-break-out"
-   [queryParams]="(bitstreamPath$| async)?.queryParams"
-   [target]="isBlank ? '_blank': '_self'"
-   [ngClass]="cssClasses"
-   [attr.aria-label]="('file-download-link.download' | translate) + dsoNameService.getName(bitstream)">
-  <span role="img" *ngIf="(canDownload$ |async) !== true" [attr.aria-label]="'file-download-link.restricted' | translate" class="pe-1"><i class="fas fa-lock"></i></span>
+  [queryParams]="(bitstreamPath$| async)?.queryParams"
+  [target]="isBlank ? '_blank': '_self'"
+  [ngClass]="cssClasses"
+  [attr.aria-label]="('file-download-link.download' | translate) + dsoNameService.getName(bitstream)">
+  @if ((canDownload$ |async) !== true) {
+    <span role="img" [attr.aria-label]="'file-download-link.restricted' | translate" class="pe-1"><i class="fas fa-lock"></i></span>
+  }
   <ng-container *ngTemplateOutlet="content"></ng-container>
 </a>
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
index 195c1b561e..606fee1a7e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.html
@@ -1,13 +1,15 @@
 <div [class.mb-3]="(model.type !== 'GROUP' && asBootstrapFormGroup) || getClass('element', 'container').includes('mb-3')"
-     [class.d-none]="model.hidden"
-     [formGroup]="group"
-     [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
-  <label *ngIf="!isCheckbox && hasLabel"
-         [id]="'label_' + model.id"
-         [for]="id"
-         class="form-label"
-         [innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
-         [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
+  [class.d-none]="model.hidden"
+  [formGroup]="group"
+  [ngClass]="[getClass('element', 'container'), getClass('grid', 'container')]">
+  @if (!isCheckbox && hasLabel) {
+    <label
+      [id]="'label_' + model.id"
+      [for]="id"
+      class="form-label"
+      [innerHTML]="(model.required && model.label) ? (model.label | translate) + ' *' : (model.label | translate)"
+    [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]"></label>
+  }
   <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: { $implicit: model };"></ng-container>
   <!--    Should be *ngIf instead of class d-none, but that breaks the #componentViewContainer reference-->
   <div [ngClass]="{'row': model.hasLanguages || isRelationship,
@@ -17,69 +19,87 @@
         <ng-container #componentViewContainer></ng-container>
       </div>
 
-      <small *ngIf="hasHint && (formBuilderService.hasArrayGroupValue(model) || (!model.repeatable && (isRelationship === false || value?.value === null)) || (model.repeatable === true && context?.index === context?.context?.groups?.length - 1)) && (!showErrorMessages || errorMessages.length === 0)"
+      @if (hasHint && (formBuilderService.hasArrayGroupValue(model) || (!model.repeatable && (isRelationship === false || value?.value === null)) || (model.repeatable === true && context?.index === context?.context?.groups?.length - 1)) && (!showErrorMessages || errorMessages.length === 0)) {
+<small
              class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
+      }
       <!-- In case of repeatable fields show empty space for all elements except the first -->
-      <div *ngIf="context?.index !== null
-              && (!showErrorMessages || errorMessages.length === 0)" class="clearfix w-100 mb-2"></div>
+      @if (context?.index !== null
+        && (!showErrorMessages || errorMessages.length === 0)) {
+        <div class="clearfix w-100 mb-2"></div>
+      }
 
-      <div *ngIf="!model.hideErrorMessages && showErrorMessages" [id]="id + '_errors'"
-           [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
-        <small *ngFor="let message of errorMessages" class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
+      @if (!model.hideErrorMessages && showErrorMessages) {
+        <div [id]="id + '_errors'"
+          [ngClass]="[getClass('element', 'errors'), getClass('grid', 'errors')]">
+          @for (message of errorMessages; track message) {
+            <small class="invalid-feedback d-block">{{ message | translate: model.validators }}</small>
+          }
+        </div>
+      }
+
+    </div>
+    @if (model.languageCodes && model.languageCodes.length > 0) {
+      <div class="col-xs-2" >
+        <select
+          #language="ngModel"
+          [disabled]="model.readOnly"
+          [(ngModel)]="model.language"
+          class="form-select"
+          (blur)="onBlur($event)"
+          (change)="onChangeLanguage($event)"
+          [ngModelOptions]="{standalone: true}"
+          required>
+          @for (lang of model.languageCodes; track lang) {
+            <option [value]="lang.code">{{lang.display}}</option>
+          }
+        </select>
       </div>
-
-    </div>
-    <div *ngIf="model.languageCodes && model.languageCodes.length > 0" class="col-xs-2" >
-      <select
-        #language="ngModel"
-        [disabled]="model.readOnly"
-        [(ngModel)]="model.language"
-        class="form-select"
-        (blur)="onBlur($event)"
-        (change)="onChangeLanguage($event)"
-        [ngModelOptions]="{standalone: true}"
-        required>
-        <option *ngFor="let lang of model.languageCodes" [value]="lang.code">{{lang.display}}</option>
-      </select>
-    </div>
-    <div *ngIf="isRelationship" class="col-auto text-center">
-      <button class="btn btn-secondary"
-              type="button"
-              ngbTooltip="{{'form.lookup-help' | translate}}"
-              [attr.aria-label]="'form.lookup-help' | translate"
-              placement="top"
-              data-test="lookup-button"
-              (click)="openLookup(); $event.stopPropagation();"><i class="fa fa-search"></i>
-      </button>
-    </div>
+    }
+    @if (isRelationship) {
+      <div class="col-auto text-center">
+        <button class="btn btn-secondary"
+          type="button"
+          ngbTooltip="{{'form.lookup-help' | translate}}"
+          [attr.aria-label]="'form.lookup-help' | translate"
+          placement="top"
+          data-test="lookup-button"
+          (click)="openLookup(); $event.stopPropagation();"><i class="fa fa-search"></i>
+        </button>
+      </div>
+    }
   </div>
   <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: model"></ng-container>
-  <ng-container *ngIf="this.metadataService.isVirtual(value)">
-    <ds-existing-metadata-list-element
-      *ngIf="model.hasSelectableMetadata"
-      [reoRel]="relationshipValue$ | async"
-      [submissionItem]="item$ | async"
-      [listId]="listId"
-      [metadataFields]="model.metadataFields"
-      [submissionId]="model.submissionId"
-      [relationshipOptions]="model.relationship"
-      (remove)="onRemove()"
-    >
-    </ds-existing-metadata-list-element>
-    <ds-existing-relation-list-element
-      *ngIf="!model.hasSelectableMetadata"
-      [ngClass]="{'d-block pb-2 pt-2': !context?.index}"
-      [reoRel]="relationshipValue$ | async"
-      [submissionItem]="item$ | async"
-      [listId]="listId"
-      [metadataFields]="model.metadataFields"
-      [submissionId]="model.submissionId"
-      [relationshipOptions]="model.relationship"
-    >
-    </ds-existing-relation-list-element>
-    <small *ngIf="hasHint && (model.repeatable === false || context?.index === context?.context?.groups?.length - 1) && (!showErrorMessages || errorMessages.length === 0)"
-           class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
+  @if (this.metadataService.isVirtual(value)) {
+    @if (model.hasSelectableMetadata) {
+      <ds-existing-metadata-list-element
+        [reoRel]="relationshipValue$ | async"
+        [submissionItem]="item$ | async"
+        [listId]="listId"
+        [metadataFields]="model.metadataFields"
+        [submissionId]="model.submissionId"
+        [relationshipOptions]="model.relationship"
+        (remove)="onRemove()"
+        >
+      </ds-existing-metadata-list-element>
+    }
+    @if (!model.hasSelectableMetadata) {
+      <ds-existing-relation-list-element
+        [ngClass]="{'d-block pb-2 pt-2': !context?.index}"
+        [reoRel]="relationshipValue$ | async"
+        [submissionItem]="item$ | async"
+        [listId]="listId"
+        [metadataFields]="model.metadataFields"
+        [submissionId]="model.submissionId"
+        [relationshipOptions]="model.relationship"
+        >
+      </ds-existing-relation-list-element>
+    }
+    @if (hasHint && (model.repeatable === false || context?.index === context?.context?.groups?.length - 1) && (!showErrorMessages || errorMessages.length === 0)) {
+      <small
+      class="text-muted ds-hint" [innerHTML]="model.hint | translate" [ngClass]="getClass('element', 'hint')"></small>
+    }
     <div class="clearfix w-100 mb-2"></div>
-  </ng-container>
+  }
   <ng-content></ng-content>
 </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
index 4daf1762a7..be92b7f74c 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component.html
@@ -1,15 +1,15 @@
 <div class="d-flex">
-    <span class="me-auto text-contents">
-        <ng-container *ngIf="(metadataRepresentation$ | async) === undefined">
-            <ds-loading [showMessage]="false"></ds-loading>
-        </ng-container>
-        <ng-container *ngIf="(metadataRepresentation$ | async)">
-            <ds-metadata-representation-loader [mdRepresentation]="metadataRepresentation$ | async"></ds-metadata-representation-loader>
-        </ng-container>
-    </span>
-    <button type="button" class="btn btn-secondary"
-            title="{{'form.remove' | translate}}"
-            (click)="removeSelection()">
-        <i class="fas fa-trash" aria-hidden="true"></i>
-    </button>
+  <span class="me-auto text-contents">
+    @if ((metadataRepresentation$ | async) === undefined) {
+      <ds-loading [showMessage]="false"></ds-loading>
+    }
+    @if ((metadataRepresentation$ | async)) {
+      <ds-metadata-representation-loader [mdRepresentation]="metadataRepresentation$ | async"></ds-metadata-representation-loader>
+    }
+  </span>
+  <button type="button" class="btn btn-secondary"
+    title="{{'form.remove' | translate}}"
+    (click)="removeSelection()">
+    <i class="fas fa-trash" aria-hidden="true"></i>
+  </button>
 </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html
index e24144fbad..a308fc2385 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html
@@ -1,14 +1,14 @@
 <div class="d-flex">
-    <div class="flex-grow-1 me-auto">
-        <ng-container *ngIf="(relatedItem$ | async) === undefined">
-            <ds-loading [showMessage]="false"></ds-loading>
-        </ng-container>
-        <ng-container *ngIf="(relatedItem$ | async)">
-            <ds-listable-object-component-loader [showLabel]="false" [viewMode]="viewType" [object]="(relatedItem$ | async)"></ds-listable-object-component-loader>
-        </ng-container>
-    </div>
-    <button type="button" class="btn btn-secondary"
-            (click)="removeSelection()">
-        <i class="fas fa-trash" aria-hidden="true"></i>
-    </button>
+  <div class="flex-grow-1 me-auto">
+    @if ((relatedItem$ | async) === undefined) {
+      <ds-loading [showMessage]="false"></ds-loading>
+    }
+    @if ((relatedItem$ | async)) {
+      <ds-listable-object-component-loader [showLabel]="false" [viewMode]="viewType" [object]="(relatedItem$ | async)"></ds-listable-object-component-loader>
+    }
+  </div>
+  <button type="button" class="btn btn-secondary"
+    (click)="removeSelection()">
+    <i class="fas fa-trash" aria-hidden="true"></i>
+  </button>
 </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
index 150da83afd..5c6d50d6ab 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
@@ -1,54 +1,56 @@
 <ng-container [formGroup]="group">
-    <div [id]="id"
-         [formArrayName]="model.id"
-         [class.d-none]="model.hidden"
-         [ngClass]="getClass('element', 'control')">
+  <div [id]="id"
+    [formArrayName]="model.id"
+    [class.d-none]="model.hidden"
+    [ngClass]="getClass('element', 'control')">
 
-      <!-- Draggable Container -->
-      <div role="listbox" [attr.aria-label]="'dynamic-form-array.sortable-list.label' | translate" #dropList cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
-        <!-- Draggable Items -->
+    <!-- Draggable Container -->
+    <div role="listbox" [attr.aria-label]="'dynamic-form-array.sortable-list.label' | translate" #dropList cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)">
+      <!-- Draggable Items -->
+      @for (groupModel of model.groups; track groupModel; let idx = $index; let length = $count) {
         <div #sortableElement
-             *ngFor="let groupModel of model.groups; let idx = index; let length = count"
-             class="drag-item-container"
-             role="group"
-             [formGroupName]="groupModel.index"
-             [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"
-             cdkDrag
-             [cdkDragDisabled]="dragDisabled"
-             [cdkDragPreviewClass]="'ds-submission-reorder-dragging'"
-             [class.grey-background]="model.isInlineGroupArray">
+          class="drag-item-container"
+          role="group"
+          [formGroupName]="groupModel.index"
+          [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]"
+          cdkDrag
+          [cdkDragDisabled]="dragDisabled"
+          [cdkDragPreviewClass]="'ds-submission-reorder-dragging'"
+          [class.grey-background]="model.isInlineGroupArray">
           <!-- Item content -->
           <div class="drag-handle" [class.drag-disable]="dragDisabled" tabindex="0" cdkDragHandle
-               (focus)="addInstructionMessageToLiveRegion(sortableElement)"
-               (keydown.space)="toggleKeyboardDragAndDrop($event, sortableElement, idx, length)"
-               (keydown.enter)="toggleKeyboardDragAndDrop($event, sortableElement, idx, length)"
-               (keydown.tab)="stopKeyboardDragAndDrop(sortableElement, idx, length)"
-               (keydown.escape)="cancelKeyboardDragAndDrop(sortableElement, idx, length)"
-               (keydown.arrowUp)="handleArrowPress($event, dropList, length, idx, 'up')"
-               (keydown.arrowDown)="handleArrowPress($event, dropList, length, idx, 'down')">
+            (focus)="addInstructionMessageToLiveRegion(sortableElement)"
+            (keydown.space)="toggleKeyboardDragAndDrop($event, sortableElement, idx, length)"
+            (keydown.enter)="toggleKeyboardDragAndDrop($event, sortableElement, idx, length)"
+            (keydown.tab)="stopKeyboardDragAndDrop(sortableElement, idx, length)"
+            (keydown.escape)="cancelKeyboardDragAndDrop(sortableElement, idx, length)"
+            (keydown.arrowUp)="handleArrowPress($event, dropList, length, idx, 'up')"
+            (keydown.arrowDown)="handleArrowPress($event, dropList, length, idx, 'down')">
             <i class="drag-icon fas fa-grip-vertical fa-fw" [class.drag-disable]="dragDisabled" ></i>
           </div>
           <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
-          <ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"
-                                             [bindId]="false"
-                                             [formGroup]="group"
-                                             [formModel]="formModel"
-                                             [context]="groupModel"
-                                             [group]="getControlOfGroup(groupModel)"
-                                             [hidden]="_model.hidden"
-                                             [class.d-none]="_model.hidden"
-                                             [layout]="formLayout"
-                                             [model]="_model"
-                                             [templates]="templates"
-                                             [ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"
-                                             (dfBlur)="onBlur($event)"
-                                             (dfChange)="onChange($event)"
-                                             (dfFocus)="onFocus($event)"
-                                             (ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
-
+          @for (_model of groupModel.group; track _model) {
+            <ds-dynamic-form-control-container
+              [bindId]="false"
+              [formGroup]="group"
+              [formModel]="formModel"
+              [context]="groupModel"
+              [group]="getControlOfGroup(groupModel)"
+              [hidden]="_model.hidden"
+              [class.d-none]="_model.hidden"
+              [layout]="formLayout"
+              [model]="_model"
+              [templates]="templates"
+              [ngClass]="[getClass('element', 'host', _model), getClass('grid', 'host', _model)]"
+              (dfBlur)="onBlur($event)"
+              (dfChange)="onChange($event)"
+              (dfFocus)="onFocus($event)"
+            (ngbEvent)="onCustomEvent($event, null, true)"></ds-dynamic-form-control-container>
+          }
           <ng-container *ngTemplateOutlet="endTemplate?.templateRef; context: groupModel"></ng-container>
         </div>
-      </div>
+      }
     </div>
+  </div>
 
 </ng-container>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html
index f38cc079db..d8aea2d706 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker-inline/dynamic-date-picker-inline.component.html
@@ -1,40 +1,44 @@
 <div [formGroup]="group" class="input-group">
 
-    <input ngbDatepicker class="form-control" #datepicker="ngbDatepicker"
-           [attr.aria-labelledby]="'label_' + model.id"
-           [class.is-invalid]="showErrorMessages"
-           [displayMonths]="model.getAdditional('displayMonths', config['displayMonths'])"
-           [id]="id"
-           [firstDayOfWeek]="model.getAdditional('firstDayOfWeek', config['firstDayOfWeek'])"
-           [formControlName]="model.id"
-           [maxDate]="model.max"
-           [minDate]="model.min"
-           [name]="model.name"
-           [navigation]="model.getAdditional('navigation', config['navigation'])"
-           [ngClass]="getClass('element', 'control')"
-           [outsideDays]="model.getAdditional('outsideDays', config['outsideDays'])"
-           [placeholder]="model.placeholder"
-           [placement]="model.getAdditional('placement', 'bottom-left')"
-           [weekdays]="model.getAdditional('showWeekdays', config['showWeekdays'])"
-           [showWeekNumbers]="model.getAdditional('showWeekNumbers', config['showWeekNumbers'])"
-           [startDate]="model.focusedDate"
-           (blur)="onBlur($event)"
-           (dateSelect)="onChange($event)"
-           (change)="onChange($event)"
-           (focus)="onFocus($event)">
+  <input ngbDatepicker class="form-control" #datepicker="ngbDatepicker"
+    [attr.aria-labelledby]="'label_' + model.id"
+    [class.is-invalid]="showErrorMessages"
+    [displayMonths]="model.getAdditional('displayMonths', config['displayMonths'])"
+    [id]="id"
+    [firstDayOfWeek]="model.getAdditional('firstDayOfWeek', config['firstDayOfWeek'])"
+    [formControlName]="model.id"
+    [maxDate]="model.max"
+    [minDate]="model.min"
+    [name]="model.name"
+    [navigation]="model.getAdditional('navigation', config['navigation'])"
+    [ngClass]="getClass('element', 'control')"
+    [outsideDays]="model.getAdditional('outsideDays', config['outsideDays'])"
+    [placeholder]="model.placeholder"
+    [placement]="model.getAdditional('placement', 'bottom-left')"
+    [weekdays]="model.getAdditional('showWeekdays', config['showWeekdays'])"
+    [showWeekNumbers]="model.getAdditional('showWeekNumbers', config['showWeekNumbers'])"
+    [startDate]="model.focusedDate"
+    (blur)="onBlur($event)"
+    (dateSelect)="onChange($event)"
+    (change)="onChange($event)"
+    (focus)="onFocus($event)">
 
 
-    <button class="btn btn-outline-secondary"
-            type="button"
-            [attr.aria-labelledby]="'label_' + model.id"
-            [class.disabled]="model.disabled"
-            [dsBtnDisabled]="model.disabled"
-            (click)="datepicker.toggle()">
+  <button class="btn btn-outline-secondary"
+    type="button"
+    [attr.aria-labelledby]="'label_' + model.id"
+    [class.disabled]="model.disabled"
+    [dsBtnDisabled]="model.disabled"
+    (click)="datepicker.toggle()">
 
-        <i *ngIf="model.toggleIcon" class="{{model.toggleIcon}}" aria-hidden="true"></i>
-        <span *ngIf="model.toggleLabel">{{ model.toggleLabel }}</span>
+    @if (model.toggleIcon) {
+      <i class="{{model.toggleIcon}}" aria-hidden="true"></i>
+    }
+    @if (model.toggleLabel) {
+      <span>{{ model.toggleLabel }}</span>
+    }
 
-    </button>
+  </button>
 
 
 </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
index 3dab2d214a..5faf188165 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.html
@@ -1,57 +1,61 @@
 <div>
   <fieldset class="d-flex">
-    <legend *ngIf="!model.repeatable" [id]="'legend_' + model.id" [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]">
-      {{model.placeholder}} <span *ngIf="model.required">*</span>
+    @if (!model.repeatable) {
+      <legend [id]="'legend_' + model.id" [ngClass]="[getClass('element', 'label'), getClass('grid', 'label')]">
+        {{model.placeholder}} @if (model.required) {
+        <span>*</span>
+      }
     </legend>
-    <ds-number-picker
-      tabindex="0"
-      [id]="model.id + '_year'"
-      [disabled]="model.disabled"
-      [min]="minYear"
-      [max]="maxYear"
-      [name]="'year'"
-      [size]="4"
-      [(ngModel)]="initialYear"
-      [value]="year"
-      [invalid]="showErrorMessages"
-      [placeholder]="'form.date-picker.placeholder.year' | translate"
-      (blur)="onBlur($event)"
-      (change)="onChange($event)"
-      (focus)="onFocus($event)"
-    ></ds-number-picker>
+  }
+  <ds-number-picker
+    tabindex="0"
+    [id]="model.id + '_year'"
+    [disabled]="model.disabled"
+    [min]="minYear"
+    [max]="maxYear"
+    [name]="'year'"
+    [size]="4"
+    [(ngModel)]="initialYear"
+    [value]="year"
+    [invalid]="showErrorMessages"
+    [placeholder]="'form.date-picker.placeholder.year' | translate"
+    (blur)="onBlur($event)"
+    (change)="onChange($event)"
+    (focus)="onFocus($event)"
+  ></ds-number-picker>
 
-    <ds-number-picker
-      tabindex="0"
-      [id]="model.id + '_month'"
-      [min]="minMonth"
-      [max]="maxMonth"
-      [name]="'month'"
-      [size]="6"
-      [(ngModel)]="initialMonth"
-      [value]="month"
-      [placeholder]="'form.date-picker.placeholder.month' | translate"
-      [disabled]="!year || model.disabled"
-      (blur)="onBlur($event)"
-      (change)="onChange($event)"
-      (focus)="onFocus($event)"
-    ></ds-number-picker>
+  <ds-number-picker
+    tabindex="0"
+    [id]="model.id + '_month'"
+    [min]="minMonth"
+    [max]="maxMonth"
+    [name]="'month'"
+    [size]="6"
+    [(ngModel)]="initialMonth"
+    [value]="month"
+    [placeholder]="'form.date-picker.placeholder.month' | translate"
+    [disabled]="!year || model.disabled"
+    (blur)="onBlur($event)"
+    (change)="onChange($event)"
+    (focus)="onFocus($event)"
+  ></ds-number-picker>
 
-    <ds-number-picker
-      tabindex="0"
-      [id]="model.id + '_day'"
-      [min]="minDay"
-      [max]="maxDay"
-      [name]="'day'"
-      [size]="2"
-      [(ngModel)]="initialDay"
-      [value]="day"
-      [placeholder]="'form.date-picker.placeholder.day' | translate"
-      [disabled]="!month || model.disabled"
-      (blur)="onBlur($event)"
-      (change)="onChange($event)"
-      (focus)="onFocus($event)"
-    ></ds-number-picker>
-  </fieldset>
+  <ds-number-picker
+    tabindex="0"
+    [id]="model.id + '_day'"
+    [min]="minDay"
+    [max]="maxDay"
+    [name]="'day'"
+    [size]="2"
+    [(ngModel)]="initialDay"
+    [value]="day"
+    [placeholder]="'form.date-picker.placeholder.day' | translate"
+    [disabled]="!month || model.disabled"
+    (blur)="onBlur($event)"
+    (change)="onChange($event)"
+    (focus)="onFocus($event)"
+  ></ds-number-picker>
+</fieldset>
 </div>
 
 <div class="clearfix"></div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
index 360b37e31c..e246cf0c7e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.ts
@@ -1,7 +1,6 @@
 import {
   DOCUMENT,
   NgClass,
-  NgIf,
 } from '@angular/common';
 import {
   Component,
@@ -40,7 +39,6 @@ export const DS_DATE_PICKER_SEPARATOR = '-';
   templateUrl: './date-picker.component.html',
   imports: [
     NgClass,
-    NgIf,
     NumberPickerComponent,
     FormsModule,
     TranslateModule,
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
index 86f997de29..c4aade2ed7 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
@@ -1,67 +1,75 @@
 <div [formGroup]="group">
-  <div *ngIf="model.repeatable"
-       class="row"
-       [attr.tabindex]="model.tabIndex"
-       [id]="id"
-       [formGroupName]="model.id"
-       [ngClass]="model.layout.element?.control">
-
-    <div *ngFor="let columnItems of items" class="col-sm ms-3">
-
-      <div  *ngFor="let item of columnItems" class="custom-control custom-checkbox">
-
-          <input type="checkbox" class="custom-control-input"
-                 [attr.aria-labelledby]="'label_' + model.id"
-                 [attr.tabindex]="item.index"
-                 [checked]="item.value"
-                 [id]="item.id"
-                 [formControlName]="item.id"
-                 [name]="model.name"
-                 [value]="item.value"
-                 (blur)="onBlur($event)"
-                 (change)="onChange($event)"
-                 (focus)="onFocus($event)"/>
-        <label class="custom-control-label"
-               [class.disabled]="model.disabled"
-               [ngClass]="model.layout.element?.control"
-               [for]="item.id">
-          <span [ngClass]="model.layout.element?.label" [innerHTML]="item.label"></span>
-        </label>
-      </div>
-    </div>
-  </div>
-
-  <div *ngIf="!model.repeatable"
-       class="row"
-       ngbRadioGroup
-       [attr.tabindex]="model.tabIndex"
-       [id]="id"
-       [ngClass]="model.layout.element?.control"
-       (change)="onChange($event)">
-
-    <div *ngFor="let columnItems of items" class="col-sm ms-3">
-
-      <div  *ngFor="let item of columnItems" class="custom-control custom-radio">
-        <input type="radio" class="custom-control-input"
-               [checked]="item.value"
-               [id]="item.id"
-               [name]="model.id"
-               [required]="model.required"
-               [value]="item.index"
-               (blur)="onBlur($event)"
-               (focus)="onFocus($event)"/>
-        <label class="custom-control-label"
-               [class.disabled]="model.disabled"
-               [ngClass]="model.layout.element?.control"
+  @if (model.repeatable) {
+    <div
+      class="row"
+      [attr.tabindex]="model.tabIndex"
+      [id]="id"
+      [formGroupName]="model.id"
+      [ngClass]="model.layout.element?.control">
+      @for (columnItems of items; track columnItems) {
+        <div class="col-sm ms-3">
+          @for (item of columnItems; track item) {
+            <div  class="custom-control custom-checkbox">
+              <input type="checkbox" class="custom-control-input"
+                [attr.aria-labelledby]="'label_' + model.id"
+                [attr.tabindex]="item.index"
+                [checked]="item.value"
+                [id]="item.id"
+                [formControlName]="item.id"
+                [name]="model.name"
+                [value]="item.value"
+                (blur)="onBlur($event)"
+                (change)="onChange($event)"
+                (focus)="onFocus($event)"/>
+              <label class="custom-control-label"
+                [class.disabled]="model.disabled"
+                [ngClass]="model.layout.element?.control"
                 [for]="item.id">
-
-          <span [ngClass]="model.layout.element?.label" [innerHTML]="item.label"></span>
-        </label>
-      </div>
+                <span [ngClass]="model.layout.element?.label" [innerHTML]="item.label"></span>
+              </label>
+            </div>
+          }
+        </div>
+      }
     </div>
-  </div>
-  <div class="d-flex justify-content-center" *ngIf="(isLoading$ | async)">
-    <ds-loading></ds-loading>
-  </div>
+  }
+
+  @if (!model.repeatable) {
+    <div
+      class="row"
+      ngbRadioGroup
+      [attr.tabindex]="model.tabIndex"
+      [id]="id"
+      [ngClass]="model.layout.element?.control"
+      (change)="onChange($event)">
+      @for (columnItems of items; track columnItems) {
+        <div class="col-sm ms-3">
+          @for (item of columnItems; track item) {
+            <div  class="custom-control custom-radio">
+              <input type="radio" class="custom-control-input"
+                [checked]="item.value"
+                [id]="item.id"
+                [name]="model.id"
+                [required]="model.required"
+                [value]="item.index"
+                (blur)="onBlur($event)"
+                (focus)="onFocus($event)"/>
+              <label class="custom-control-label"
+                [class.disabled]="model.disabled"
+                [ngClass]="model.layout.element?.control"
+                [for]="item.id">
+                <span [ngClass]="model.layout.element?.label" [innerHTML]="item.label"></span>
+              </label>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  }
+  @if ((isLoading$ | async)) {
+    <div class="d-flex justify-content-center">
+      <ds-loading></ds-loading>
+    </div>
+  }
 
 </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
index 8861174bd7..99e757ed1d 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component.html
@@ -1,114 +1,126 @@
 <div ngbDropdown #sdRef="ngbDropdown"
-     (click)="$event.stopPropagation();"
-     (openChange)="openChange($event);">
+  (click)="$event.stopPropagation();"
+  (openChange)="openChange($event);">
 
   <div class="row align-items-center">
     <!--Simple lookup, first field -->
     <div class="col right-addon">
       <i dsAuthorityConfidenceState
-         class="far fa-circle fa-2x fa-fw position-absolute mt-1 p-0 pe-2"
-         aria-hidden="true"
-         [authorityValue]="model.value"
-         (whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted(sdRef, $event)"></i>
+        class="far fa-circle fa-2x fa-fw position-absolute mt-1 p-0 pe-2"
+        aria-hidden="true"
+        [authorityValue]="model.value"
+      (whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted(sdRef, $event)"></i>
       <input class="form-control"
-             [attr.aria-labelledby]="'label_' + model.id"
-             [attr.autoComplete]="model.autoComplete"
-             [class.is-invalid]="showErrorMessages"
-             [id]="model.id"
-             [name]="model.name"
-             [type]="model.inputType"
-             [(ngModel)]="firstInputValue"
-             [disabled]="isInputDisabled()"
-             [placeholder]="model.placeholder | translate"
-             [readonly]="model.readOnly"
-             (change)="onChange($event)"
-             (blur)="onBlur($event); $event.stopPropagation(); sdRef.close();"
-             (focus)="onFocus($event); $event.stopPropagation(); sdRef.close();"
-             (click)="$event.stopPropagation(); $event.stopPropagation(); sdRef.close();">
+        [attr.aria-labelledby]="'label_' + model.id"
+        [attr.autoComplete]="model.autoComplete"
+        [class.is-invalid]="showErrorMessages"
+        [id]="model.id"
+        [name]="model.name"
+        [type]="model.inputType"
+        [(ngModel)]="firstInputValue"
+        [disabled]="isInputDisabled()"
+        [placeholder]="model.placeholder | translate"
+        [readonly]="model.readOnly"
+        (change)="onChange($event)"
+        (blur)="onBlur($event); $event.stopPropagation(); sdRef.close();"
+        (focus)="onFocus($event); $event.stopPropagation(); sdRef.close();"
+        (click)="$event.stopPropagation(); $event.stopPropagation(); sdRef.close();">
     </div>
 
     <!--Lookup-name, second field-->
-    <div *ngIf="isLookupName()" class="col" >
-      <input  class="form-control"
-              [ngClass]="{}"
-              [attr.aria-labelledby]="'label_' + model.id"
-              [attr.autoComplete]="model.autoComplete"
-              [class.is-invalid]="showErrorMessages"
-              [id]="id"
-              [name]="model.name + '_2'"
-              [type]="model.inputType"
-              [(ngModel)]="secondInputValue"
-              [disabled]="firstInputValue.length === 0 || isInputDisabled()"
-              [placeholder]="model.secondPlaceholder | translate"
-              [readonly]="model.readOnly"
-              (change)="onChange($event)"
-              (blur)="onBlur($event); $event.stopPropagation(); sdRef.close();"
-              (focus)="onFocus($event); $event.stopPropagation(); sdRef.close();"
-              (click)="$event.stopPropagation(); sdRef.close();">
-    </div>
+    @if (isLookupName()) {
+      <div class="col" >
+        <input  class="form-control"
+          [ngClass]="{}"
+          [attr.aria-labelledby]="'label_' + model.id"
+          [attr.autoComplete]="model.autoComplete"
+          [class.is-invalid]="showErrorMessages"
+          [id]="id"
+          [name]="model.name + '_2'"
+          [type]="model.inputType"
+          [(ngModel)]="secondInputValue"
+          [disabled]="firstInputValue.length === 0 || isInputDisabled()"
+          [placeholder]="model.secondPlaceholder | translate"
+          [readonly]="model.readOnly"
+          (change)="onChange($event)"
+          (blur)="onBlur($event); $event.stopPropagation(); sdRef.close();"
+          (focus)="onFocus($event); $event.stopPropagation(); sdRef.close();"
+          (click)="$event.stopPropagation(); sdRef.close();">
+      </div>
+    }
     <div class="col-auto text-center">
       <button ngbDropdownAnchor
-              class="btn btn-secondary"
-              type="button"
-              ngbTooltip="{{'form.search-help' | translate}}"
-              placement="top"
-              [dsBtnDisabled]="model.readOnly || isSearchDisabled()"
-              [hidden]="isInputDisabled()"
-              (click)="sdRef.open(); search(); $event.stopPropagation();">{{'form.search' | translate}}
-      </button>
-      <button *ngIf="isInputDisabled()" class="btn btn-secondary"
-              type="button"
-              ngbTooltip="{{'form.clear-help' | translate}}"
-              placement="top"
-              [dsBtnDisabled]="model.readOnly"
-              (click)="remove()">{{'form.clear' | translate}}
+        class="btn btn-secondary"
+        type="button"
+        ngbTooltip="{{'form.search-help' | translate}}"
+        placement="top"
+        [dsBtnDisabled]="model.readOnly || isSearchDisabled()"
+        [hidden]="isInputDisabled()"
+        (click)="sdRef.open(); search(); $event.stopPropagation();">{{'form.search' | translate}}
       </button>
+      @if (isInputDisabled()) {
+        <button class="btn btn-secondary"
+          type="button"
+          ngbTooltip="{{'form.clear-help' | translate}}"
+          placement="top"
+          [dsBtnDisabled]="model.readOnly"
+          (click)="remove()">{{'form.clear' | translate}}
+        </button>
+      }
     </div>
     <div class="col-auto text-center">
-      <button *ngIf="!editMode" class="btn btn-secondary"
-              type="button"
-              ngbTooltip="{{'form.edit-help' | translate}}"
-              placement="top"
-              [dsBtnDisabled]="isEditDisabled()"
-              (click)="switchEditMode()">{{'form.edit' | translate}}
-      </button>
-      <button *ngIf="editMode" class="btn btn-secondary"
-              type="button"
-              ngbTooltip="{{'form.save-help' | translate}}"
-              placement="top"
-              [dsBtnDisabled]="!hasEmptyValue()"
-              (click)="saveChanges()">{{'form.save' | translate}}
-      </button>
+      @if (!editMode) {
+        <button class="btn btn-secondary"
+          type="button"
+          ngbTooltip="{{'form.edit-help' | translate}}"
+          placement="top"
+          [dsBtnDisabled]="isEditDisabled()"
+          (click)="switchEditMode()">{{'form.edit' | translate}}
+        </button>
+      }
+      @if (editMode) {
+        <button class="btn btn-secondary"
+          type="button"
+          ngbTooltip="{{'form.save-help' | translate}}"
+          placement="top"
+          [dsBtnDisabled]="!hasEmptyValue()"
+          (click)="saveChanges()">{{'form.save' | translate}}
+        </button>
+      }
     </div>
   </div>
 
   <div ngbDropdownMenu
-       class="dropdown-menu scrollable-dropdown-menu w-100"
-       aria-haspopup="true"
-       aria-expanded="false"
-       [attr.aria-labelledby]="'label_' + model.id">
+    class="dropdown-menu scrollable-dropdown-menu w-100"
+    aria-haspopup="true"
+    aria-expanded="false"
+    [attr.aria-labelledby]="'label_' + model.id">
     <div class="scrollable-menu"
-         infiniteScroll
-         [infiniteScrollDistance]="2"
-         [infiniteScrollThrottle]="50"
-         (scrolled)="onScroll()"
-         [scrollWindow]="false">
+      infiniteScroll
+      [infiniteScrollDistance]="2"
+      [infiniteScrollThrottle]="50"
+      (scrolled)="onScroll()"
+      [scrollWindow]="false">
 
-      <button class="dropdown-item disabled" type="button"
-              *ngIf="optionsList && optionsList.length === 0"
-              (click)="$event.stopPropagation(); clearFields(); sdRef.close();">
-        {{ 'form.no-results' | translate }}
-      </button>
-      <button class="dropdown-item lookup-item" type="button"
-              *ngFor="let listEntry of optionsList"
-              (click)="$event.stopPropagation(); onSelect(listEntry); sdRef.close();"
-              title="{{ listEntry.display }}">
-        <ng-container
-          [ngTemplateOutlet]="(listEntry.hasOtherInformation()) ? hasInfo : noInfo"
-          [ngTemplateOutletContext]="{entry: listEntry}">
-        </ng-container>
-      </button>
-      <div class="scrollable-dropdown-loading text-center" *ngIf="loading"><p>{{'form.loading' | translate}}</p></div>
+      @if (optionsList && optionsList.length === 0) {
+        <button class="dropdown-item disabled" type="button"
+          (click)="$event.stopPropagation(); clearFields(); sdRef.close();">
+          {{ 'form.no-results' | translate }}
+        </button>
+      }
+      @for (listEntry of optionsList; track listEntry) {
+        <button class="dropdown-item lookup-item" type="button"
+          (click)="$event.stopPropagation(); onSelect(listEntry); sdRef.close();"
+          title="{{ listEntry.display }}">
+          <ng-container
+            [ngTemplateOutlet]="(listEntry.hasOtherInformation()) ? hasInfo : noInfo"
+            [ngTemplateOutletContext]="{entry: listEntry}">
+          </ng-container>
+        </button>
+      }
+      @if (loading) {
+        <div class="scrollable-dropdown-loading text-center"><p>{{'form.loading' | translate}}</p></div>
+      }
     </div>
   </div>
 </div>
@@ -116,9 +128,11 @@
 <ng-template #hasInfo let-entry="entry">
   <ul class="list-unstyled mb-0" [attr.aria-labelledby]="'label_' + model.id">
     <li class="list-item text-truncate text-primary fw-bold">{{entry.value}}</li>
-    <li class="list-item text-truncate text-secondary" *ngFor="let item of entry.otherInformation | dsObjNgFor" >
-      {{ 'form.other-information.' + item.key | translate }} : {{item.value}}
-    </li>
+    @for (item of entry.otherInformation | dsObjNgFor; track item) {
+      <li class="list-item text-truncate text-secondary" >
+        {{ 'form.other-information.' + item.key | translate }} : {{item.value}}
+      </li>
+    }
   </ul>
 </ng-template>
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
index 81b28ea5dd..43fdf7733e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.html
@@ -8,9 +8,11 @@
 <ng-template #hasInfo let-entry="entry">
   <ul class="list-unstyled mb-0">
     <li class="list-item text-truncate text-primary fw-bold">{{entry.value}}</li>
-    <li class="list-item text-truncate text-secondary" *ngFor="let item of entry.otherInformation | dsObjNgFor" >
-      {{ 'form.other-information.' + item.key | translate }} : {{item.value}}
-    </li>
+    @for (item of entry.otherInformation | dsObjNgFor; track item) {
+      <li class="list-item text-truncate text-secondary" >
+        {{ 'form.other-information.' + item.key | translate }} : {{item.value}}
+      </li>
+    }
   </ul>
 </ng-template>
 
@@ -20,59 +22,68 @@
   </ul>
 </ng-template>
 
-<div *ngIf="(isHierarchicalVocabulary() | async) !== true" class="position-relative right-addon">
-  <i *ngIf="searching || loadingInitialValue" class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></i>
-  <i *ngIf="!searching && !loadingInitialValue"
-     dsAuthorityConfidenceState
-     class="far fa-circle fa-2x fa-fw position-absolute mt-1 p-0"
-     aria-hidden="true"
-     [authorityValue]="currentValue"
-     (whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted($event)"></i>
-  <input #instance="ngbTypeahead"
-         class="form-control"
-         [attr.aria-labelledby]="'label_' + model.id"
-         [attr.autoComplete]="model.autoComplete"
-         [attr.aria-label]="model.label | translate"
-         [class.is-invalid]="showErrorMessages"
-         [id]="model.id"
-         [inputFormatter]="formatter"
-         [name]="model.name"
-         [ngbTypeahead]="search"
-         [placeholder]="model.placeholder"
-         [readonly]="model.readOnly"
-         [disabled]="model.readOnly"
-         [resultTemplate]="rt"
-         [type]="model.inputType"
-         [(ngModel)]="currentValue"
-         (blur)="onBlur($event)"
-         (focus)="onFocus($event)"
-         (change)="onChange($event)"
-         (input)="onInput($event)"
-         (selectItem)="onSelectItem($event)">
+@if ((isHierarchicalVocabulary() | async) !== true) {
+  <div class="position-relative right-addon">
+    @if (searching || loadingInitialValue) {
+      <i class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></i>
+    }
+    @if (!searching && !loadingInitialValue) {
+      <i
+        dsAuthorityConfidenceState
+        class="far fa-circle fa-2x fa-fw position-absolute mt-1 p-0"
+        aria-hidden="true"
+        [authorityValue]="currentValue"
+      (whenClickOnConfidenceNotAccepted)="whenClickOnConfidenceNotAccepted($event)"></i>
+    }
+    <input #instance="ngbTypeahead"
+      class="form-control"
+      [attr.aria-labelledby]="'label_' + model.id"
+      [attr.autoComplete]="model.autoComplete"
+      [attr.aria-label]="model.label | translate"
+      [class.is-invalid]="showErrorMessages"
+      [id]="model.id"
+      [inputFormatter]="formatter"
+      [name]="model.name"
+      [ngbTypeahead]="search"
+      [placeholder]="model.placeholder"
+      [readonly]="model.readOnly"
+      [disabled]="model.readOnly"
+      [resultTemplate]="rt"
+      [type]="model.inputType"
+      [(ngModel)]="currentValue"
+      (blur)="onBlur($event)"
+      (focus)="onFocus($event)"
+      (change)="onChange($event)"
+      (input)="onInput($event)"
+      (selectItem)="onSelectItem($event)">
+    @if (searchFailed) {
+      <div class="invalid-feedback">Sorry, suggestions could not be loaded.</div>
+    }
+  </div>
+}
 
-  <div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
-</div>
-
-<div *ngIf="(isHierarchicalVocabulary() | async)" class="position-relative right-addon">
-  <i class="dropdown-toggle position-absolute tree-toggle" (click)="openTree($event)"
-     aria-hidden="true"></i>
-  <input class="form-control"
-         [attr.aria-labelledby]="'label_' + model.id"
-         [attr.autoComplete]="model.autoComplete"
-         [attr.aria-label]="model.label | translate"
-         [class.is-invalid]="showErrorMessages"
-         [class.tree-input]="!model.readOnly"
-         [id]="id"
-         [name]="model.name"
-         [placeholder]="model.placeholder"
-         [readonly]="true"
-         [disabled]="model.readOnly"
-         [type]="model.inputType"
-         [value]="currentValue?.display"
-         (focus)="onFocus($event)"
-         (change)="onChange($event)"
-         (click)="openTree($event)"
-         (keydown)="$event.preventDefault()"
-         (keypress)="$event.preventDefault()"
-         (keyup)="$event.preventDefault()">
-</div>
+@if ((isHierarchicalVocabulary() | async)) {
+  <div class="position-relative right-addon">
+    <i class="dropdown-toggle position-absolute tree-toggle" (click)="openTree($event)"
+    aria-hidden="true"></i>
+    <input class="form-control"
+      [attr.aria-labelledby]="'label_' + model.id"
+      [attr.autoComplete]="model.autoComplete"
+      [attr.aria-label]="model.label | translate"
+      [class.is-invalid]="showErrorMessages"
+      [class.tree-input]="!model.readOnly"
+      [id]="id"
+      [name]="model.name"
+      [placeholder]="model.placeholder"
+      [readonly]="true"
+      [disabled]="model.readOnly"
+      [type]="model.inputType"
+      [value]="currentValue?.display"
+      (focus)="onFocus($event)"
+      (change)="onChange($event)"
+      (click)="openTree($event)"
+      (keydown)="$event.preventDefault()"
+      (keypress)="$event.preventDefault()"
+      (keyup)="$event.preventDefault()">
+  </div>
+}
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html
index 581ae72318..68afbaf19b 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.html
@@ -1,75 +1,84 @@
-<a *ngIf="(formCollapsed | async) !== true"
-   class="close position-relative"
-   ngbTooltip="{{'form.group-collapse-help' | translate}}"
-   placement="left">
-  <span class="fas fa-angle-up fa-fw fa-2x"
-        aria-hidden="true"
-        (click)="collapseForm()"></span>
-</a>
-<a *ngIf="(formCollapsed | async)"
-   class="close position-relative"
-   ngbTooltip="{{'form.group-expand-help' | translate}}"
-   placement="left">
-  <span class="fas fa-angle-down fa-fw fa-2x"
-        aria-hidden="true"
-        (click)="expandForm()"></span>
-</a>
+@if ((formCollapsed | async) !== true) {
+  <a
+    class="close position-relative"
+    ngbTooltip="{{'form.group-collapse-help' | translate}}"
+    placement="left">
+    <span class="fas fa-angle-up fa-fw fa-2x"
+      aria-hidden="true"
+    (click)="collapseForm()"></span>
+  </a>
+}
+@if ((formCollapsed | async)) {
+  <a
+    class="close position-relative"
+    ngbTooltip="{{'form.group-expand-help' | translate}}"
+    placement="left">
+    <span class="fas fa-angle-down fa-fw fa-2x"
+      aria-hidden="true"
+    (click)="expandForm()"></span>
+  </a>
+}
 
 <div class="pt-2" [ngClass]="{'border-top': !showErrorMessages, 'border border-danger': showErrorMessages}">
-  <div *ngIf="(formCollapsed | async) !== true" class="ps-2 row"  @shrinkInOut>
-    <ds-form #formRef="formComponent"
-             class="col-sm-12 col-md-8 col-lg-9 col-xl-10 ps-0"
-             [formId]="formId"
-             [formModel]="formModel"
-             [displaySubmit]="false"
-             [displayCancel]="false"
-             [emitChange]="false"
-             (dfBlur)="onBlur($event)"
-             (dfFocus)="onFocus($event)"></ds-form>
-
-
-    <div *ngIf="(formCollapsed | async) !== true" class="col p-0 m-0 d-flex justify-content-center align-items-center">
-
-        <button type="button"
-                class="btn btn-link"
-                [dsBtnDisabled]="isMandatoryFieldEmpty()"
-                (click)="save()">
-          <i class="fas fa-save link-primary fa-2x"
-             aria-hidden="true"></i>
-        </button>
-        <button type="button"
-                class="btn btn-link"
-                [dsBtnDisabled]="!editMode"
-                (click)="delete()">
-          <i class="fas fa-trash link-danger fa-2x"
-             aria-hidden="true"></i>
-        </button>
-        <button type="button"
-                class="btn btn-link"
-                [dsBtnDisabled]="isMandatoryFieldEmpty()"
-                (click)="clear()">
-          <i class="fas fa-undo fa-2x"
-             aria-hidden="true"></i>
-        </button>
-
+  @if ((formCollapsed | async) !== true) {
+    <div class="ps-2 row"  @shrinkInOut>
+      <ds-form #formRef="formComponent"
+        class="col-sm-12 col-md-8 col-lg-9 col-xl-10 ps-0"
+        [formId]="formId"
+        [formModel]="formModel"
+        [displaySubmit]="false"
+        [displayCancel]="false"
+        [emitChange]="false"
+        (dfBlur)="onBlur($event)"
+      (dfFocus)="onFocus($event)"></ds-form>
+      @if ((formCollapsed | async) !== true) {
+        <div class="col p-0 m-0 d-flex justify-content-center align-items-center">
+          <button type="button"
+            class="btn btn-link"
+            [dsBtnDisabled]="isMandatoryFieldEmpty()"
+            (click)="save()">
+            <i class="fas fa-save link-primary fa-2x"
+            aria-hidden="true"></i>
+          </button>
+          <button type="button"
+            class="btn btn-link"
+            [dsBtnDisabled]="!editMode"
+            (click)="delete()">
+            <i class="fas fa-trash link-danger fa-2x"
+            aria-hidden="true"></i>
+          </button>
+          <button type="button"
+            class="btn btn-link"
+            [dsBtnDisabled]="isMandatoryFieldEmpty()"
+            (click)="clear()">
+            <i class="fas fa-undo fa-2x"
+            aria-hidden="true"></i>
+          </button>
+        </div>
+      }
+      <div class="clearfix"></div>
     </div>
-    <div class="clearfix"></div>
-  </div>
+  }
 
   <div class="d-flex">
-    <ds-loading *ngIf="!chips" [showMessage]="false"></ds-loading>
-    <div *ngIf="chips && !chips.hasItems()">
-      <input type="text"
-             class="border-0 form-control-plaintext tag-input mt-1 mb-1 ps-2 text-muted"
-             readonly
-             tabindex="-1"
-             value="{{'form.no-value' | translate}}">
-    </div>
-    <ds-chips
-      *ngIf="chips && chips.hasItems()"
-      [chips]="chips"
-      [editable]="true"
-      [showIcons]="true"
+    @if (!chips) {
+      <ds-loading [showMessage]="false"></ds-loading>
+    }
+    @if (chips && !chips.hasItems()) {
+      <div>
+        <input type="text"
+          class="border-0 form-control-plaintext tag-input mt-1 mb-1 ps-2 text-muted"
+          readonly
+          tabindex="-1"
+          value="{{'form.no-value' | translate}}">
+      </div>
+    }
+    @if (chips && chips.hasItems()) {
+      <ds-chips
+        [chips]="chips"
+        [editable]="true"
+        [showIcons]="true"
       (selected)="onChipSelected($event)"></ds-chips>
+    }
   </div>
 </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
index 7a45c19007..f94fedc58d 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/tag/dynamic-tag.component.html
@@ -3,50 +3,56 @@
 </ng-template>
 
 
-  <ds-chips [chips]="chips"
-            [editable]="false"
-            [showIcons]="model.hasAuthority"
-            [wrapperClass]="'border-bottom border-light'">
+<ds-chips [chips]="chips"
+  [editable]="false"
+  [showIcons]="model.hasAuthority"
+  [wrapperClass]="'border-bottom border-light'">
 
-  <input *ngIf="!model.hasAuthority"
-         class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1"
-         type="text"
-         role="textbox"
-         [class.ps-3]="chips.hasItems()"
-         [placeholder]="model.placeholder"
-         [readonly]="model.readOnly"
-         [(ngModel)]="currentValue"
-         (blur)="onBlur($event)"
-         (keypress)="preventEventsPropagation($event)"
-         (keydown)="preventEventsPropagation($event)"
-         (keyup)="onKeyUp($event)" />
+  @if (!model.hasAuthority) {
+    <input
+      class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1"
+      type="text"
+      role="textbox"
+      [class.ps-3]="chips.hasItems()"
+      [placeholder]="model.placeholder"
+      [readonly]="model.readOnly"
+      [(ngModel)]="currentValue"
+      (blur)="onBlur($event)"
+      (keypress)="preventEventsPropagation($event)"
+      (keydown)="preventEventsPropagation($event)"
+      (keyup)="onKeyUp($event)" />
+  }
 
-  <div *ngIf="model.hasAuthority" class="position-relative right-addon">
-    <i *ngIf="searching" class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></i>
-    <input class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1"
-           type="text"
-           [attr.aria-labelledby]="'label_' + model.id"
-           [(ngModel)]="currentValue"
-           [attr.autoComplete]="model.autoComplete"
-           [class.is-invalid]="showErrorMessages"
-           [class.ps-3]="chips.hasItems()"
-           [id]="id"
-           [inputFormatter]="formatter"
-           [name]="model.name"
-           [ngbTypeahead]="search"
-           [placeholder]="model.placeholder"
-           [readonly]="model.readOnly"
-           [resultTemplate]="rt"
-           [type]="model.inputType"
-           (blur)="onBlur($event)"
-           (focus)="onFocus($event)"
-           (change)="$event.stopPropagation()"
-           (input)="onInput($event)"
-           (selectItem)="onSelectItem($event)"
-           (keypress)="preventEventsPropagation($event)"
-           (keydown)="preventEventsPropagation($event)"
-           (keyup)="onKeyUp($event)"
-           #instance="ngbTypeahead"/>
+  @if (model.hasAuthority) {
+    <div class="position-relative right-addon">
+      @if (searching) {
+        <i class="fas fa-circle-notch fa-spin fa-2x fa-fw text-primary position-absolute mt-1 p-0" aria-hidden="true"></i>
+      }
+      <input class="border-0 form-control-plaintext tag-input flex-grow-1 mt-1 mb-1"
+        type="text"
+        [attr.aria-labelledby]="'label_' + model.id"
+        [(ngModel)]="currentValue"
+        [attr.autoComplete]="model.autoComplete"
+        [class.is-invalid]="showErrorMessages"
+        [class.ps-3]="chips.hasItems()"
+        [id]="id"
+        [inputFormatter]="formatter"
+        [name]="model.name"
+        [ngbTypeahead]="search"
+        [placeholder]="model.placeholder"
+        [readonly]="model.readOnly"
+        [resultTemplate]="rt"
+        [type]="model.inputType"
+        (blur)="onBlur($event)"
+        (focus)="onFocus($event)"
+        (change)="$event.stopPropagation()"
+        (input)="onInput($event)"
+        (selectItem)="onSelectItem($event)"
+        (keypress)="preventEventsPropagation($event)"
+        (keydown)="preventEventsPropagation($event)"
+        (keyup)="onKeyUp($event)"
+        #instance="ngbTypeahead"/>
     </div>
-  </ds-chips>
+  }
+</ds-chips>
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
index e4838757d9..9e2a8fe513 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html
@@ -1,95 +1,105 @@
 <div class="modal-header">
-    <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relationship-lookup.title.' + relationshipOptions.relationshipType) | translate }}</h4>
-    <button type="button" [dsBtnDisabled]="isPending" class="btn-close" aria-label="Close button" aria-describedby="modal-title"
-            (click)="close()">
-    </button>
+  <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relationship-lookup.title.' + relationshipOptions.relationshipType) | translate }}</h4>
+  <button type="button" [dsBtnDisabled]="isPending" class="btn-close" aria-label="Close button" aria-describedby="modal-title"
+    (click)="close()">
+  </button>
 </div>
 <div class="modal-body">
-    <ds-loading *ngIf="!item || !collection"></ds-loading>
-    <ng-container *ngIf="item && collection">
-        <ul ngbNav #nav="ngbNav" class="nav-tabs">
-            <li ngbNavItem role="presentation">
-                <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + relationshipOptions.relationshipType | translate  : { count: (totalInternal$ | async)} }}</a>
-                <ng-template ngbNavContent>
-                    <ds-dynamic-lookup-relation-search-tab
-                            [selection$]="selection$"
-                            [listId]="listId"
-                            [relationship]="relationshipOptions"
-                            [repeatable]="repeatable"
-                            [context]="context"
-                            [query]="query"
-                            [hiddenQuery]="hiddenQuery"
-                            [relationshipType]="relationshipType"
-                            [isLeft]="isLeft"
-                            [item]="item"
-                            [isEditRelationship]="isEditRelationship"
-                            [toRemove]="toRemove"
-                            (selectObject)="select($event)"
-                            (deselectObject)="deselect($event)"
-                            (resultFound)="setTotalInternals($event.pageInfo.totalElements)"
-                            class="d-block pt-3">
-                    </ds-dynamic-lookup-relation-search-tab>
-                </ng-template>
-            </li>
-            <li ngbNavItem *ngFor="let source of (externalSourcesRD$ | async); let idx = index" role="presentation">
-                <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + source.id | translate  : { count: (totalExternal$ | async)?.[idx] } }}</a>
-                <ng-template ngbNavContent>
-                    <ds-dynamic-lookup-relation-external-source-tab
-                            [label]="label"
-                            [listId]="listId"
-                            [repeatable]="repeatable"
-                            [item]="item"
-                            [collection]="collection"
-                            [relationship]="relationshipOptions"
-                            [context]="context"
-                            [query]="query"
-                            [externalSource]="source"
-                            (importedObject)="imported($event)"
-                            class="d-block pt-3">
-                    </ds-dynamic-lookup-relation-external-source-tab>
-                </ng-template>
-            </li>
-            <li ngbNavItem *ngIf="!isEditRelationship" role="presentation">
-                <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.selection-tab.tab-title' | translate : { count: (selection$ | async)?.length } }}</a>
-                <ng-template ngbNavContent>
-                    <ds-dynamic-lookup-relation-selection-tab
-                            [selection$]="selection$"
-                            [listId]="listId"
-                            [relationshipType]="relationshipOptions.relationshipType"
-                            [repeatable]="repeatable"
-                            [context]="context"
-                            (selectObject)="select($event)"
-                            (deselectObject)="deselect($event)"
-                            class="d-block pt-3">
-                    </ds-dynamic-lookup-relation-selection-tab>
-                </ng-template>
-            </li>
-        </ul>
-        <div [ngbNavOutlet]="nav"></div>
-    </ng-container>
+  @if (!item || !collection) {
+    <ds-loading></ds-loading>
+  }
+  @if (item && collection) {
+    <ul ngbNav #nav="ngbNav" class="nav-tabs">
+      <li ngbNavItem role="presentation">
+        <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + relationshipOptions.relationshipType | translate  : { count: (totalInternal$ | async)} }}</a>
+        <ng-template ngbNavContent>
+          <ds-dynamic-lookup-relation-search-tab
+            [selection$]="selection$"
+            [listId]="listId"
+            [relationship]="relationshipOptions"
+            [repeatable]="repeatable"
+            [context]="context"
+            [query]="query"
+            [hiddenQuery]="hiddenQuery"
+            [relationshipType]="relationshipType"
+            [isLeft]="isLeft"
+            [item]="item"
+            [isEditRelationship]="isEditRelationship"
+            [toRemove]="toRemove"
+            (selectObject)="select($event)"
+            (deselectObject)="deselect($event)"
+            (resultFound)="setTotalInternals($event.pageInfo.totalElements)"
+            class="d-block pt-3">
+          </ds-dynamic-lookup-relation-search-tab>
+        </ng-template>
+      </li>
+      @for (source of (externalSourcesRD$ | async); track source; let idx = $index) {
+        <li ngbNavItem role="presentation">
+          <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + source.id | translate  : { count: (totalExternal$ | async)?.[idx] } }}</a>
+          <ng-template ngbNavContent>
+            <ds-dynamic-lookup-relation-external-source-tab
+              [label]="label"
+              [listId]="listId"
+              [repeatable]="repeatable"
+              [item]="item"
+              [collection]="collection"
+              [relationship]="relationshipOptions"
+              [context]="context"
+              [query]="query"
+              [externalSource]="source"
+              (importedObject)="imported($event)"
+              class="d-block pt-3">
+            </ds-dynamic-lookup-relation-external-source-tab>
+          </ng-template>
+        </li>
+      }
+      @if (!isEditRelationship) {
+        <li ngbNavItem role="presentation">
+          <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.selection-tab.tab-title' | translate : { count: (selection$ | async)?.length } }}</a>
+          <ng-template ngbNavContent>
+            <ds-dynamic-lookup-relation-selection-tab
+              [selection$]="selection$"
+              [listId]="listId"
+              [relationshipType]="relationshipOptions.relationshipType"
+              [repeatable]="repeatable"
+              [context]="context"
+              (selectObject)="select($event)"
+              (deselectObject)="deselect($event)"
+              class="d-block pt-3">
+            </ds-dynamic-lookup-relation-selection-tab>
+          </ng-template>
+        </li>
+      }
+    </ul>
+    <div [ngbNavOutlet]="nav"></div>
+  }
 </div>
 <div class="modal-footer">
   <small>{{ ('submission.sections.describe.relationship-lookup.selected' | translate: {size: (selection$ | async)?.length || 0}) }}</small>
   <div class="d-flex float-end space-children-mr">
     <div class="close-button">
-        <button type="button" [dsBtnDisabled]="isPending" class="btn btn-outline-secondary" (click)="close()">
-            {{ ('submission.sections.describe.relationship-lookup.close' | translate) }}</button>
+      <button type="button" [dsBtnDisabled]="isPending" class="btn btn-outline-secondary" (click)="close()">
+      {{ ('submission.sections.describe.relationship-lookup.close' | translate) }}</button>
     </div>
-    <ng-container *ngIf="isEditRelationship">
+    @if (isEditRelationship) {
       <button class="btn btn-danger discard"
-              [dsBtnDisabled]="(toAdd.length === 0 && toRemove.length === 0) || isPending"
-              (click)="discardEv()">
-              <i class="fas fa-times"></i>
+        [dsBtnDisabled]="(toAdd.length === 0 && toRemove.length === 0) || isPending"
+        (click)="discardEv()">
+        <i class="fas fa-times"></i>
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.discard-button" | translate}}</span>
       </button>
       <button class="btn btn-primary submit"
-            [dsBtnDisabled]="(toAdd.length === 0 && toRemove.length === 0) || isPending"
-              (click)="submitEv()">
-              <span *ngIf="isPending" class="spinner-border spinner-border-sm me-1" role="status"
-                              aria-hidden="true"></span>
-              <i *ngIf="!isPending" class="fas fa-save"></i>
+        [dsBtnDisabled]="(toAdd.length === 0 && toRemove.length === 0) || isPending"
+        (click)="submitEv()">
+        @if (isPending) {
+          <span class="spinner-border spinner-border-sm me-1" role="status"
+          aria-hidden="true"></span>
+        }
+        @if (!isPending) {
+          <i class="fas fa-save"></i>
+        }
         <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
       </button>
-    </ng-container>
+    }
   </div>
 </div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/external-source-entry-import-modal/external-source-entry-import-modal.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/external-source-entry-import-modal/external-source-entry-import-modal.component.html
index be8f049632..dc818311c9 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/external-source-entry-import-modal/external-source-entry-import-modal.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/external-source-entry-import-modal/external-source-entry-import-modal.component.html
@@ -1,14 +1,16 @@
 <div class="modal-header">
   <h4 class="modal-title" id="modal-title">{{ (labelPrefix + label + '.title') | translate }}</h4>
   <button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title"
-          (click)="modal.dismiss()">
+    (click)="modal.dismiss()">
   </button>
 </div>
 <div class="modal-body">
   <h4>{{ (labelPrefix + 'head.' + externalSourceEntry.externalSource | translate) }}</h4>
   <div id="external-source-entry-information" class="mb-3">
     <div><span>{{externalSourceEntry.display}}</span></div>
-    <div *ngIf="uri"><a href="{{uri.value}}">{{uri.value}}</a></div>
+    @if (uri) {
+      <div><a href="{{uri.value}}">{{uri.value}}</a></div>
+    }
   </div>
 
   <h4>{{ (labelPrefix + 'select' | translate) }}</h4>
@@ -16,32 +18,35 @@
   <div id="external-source-entry-entities" class="mb-3">
     <h5 class="fw-bold">{{ (labelPrefix + 'entities' | translate) }}</h5>
 
-    <ds-search-results *ngIf="(localEntitiesRD$ | async)?.payload?.page?.length > 0"
-                       [searchResults]="(localEntitiesRD$ | async)"
-                       [sortConfig]="this.lookupRelationService.searchConfig?.sort"
-                       [searchConfig]="this.lookupRelationService.searchConfig"
-                       [selectable]="true"
-                       [disableHeader]="true"
-                       [hidePaginationDetail]="true"
-                       [selectionConfig]="{ repeatable: false, listId: entityListId }"
-                       [linkType]="linkTypes.ExternalLink"
-                       [context]="context"
-                       (deselectObject)="deselectEntity()"
-                       (selectObject)="selectEntity($event)">
-    </ds-search-results>
+    @if ((localEntitiesRD$ | async)?.payload?.page?.length > 0) {
+      <ds-search-results
+        [searchResults]="(localEntitiesRD$ | async)"
+        [sortConfig]="this.lookupRelationService.searchConfig?.sort"
+        [searchConfig]="this.lookupRelationService.searchConfig"
+        [selectable]="true"
+        [disableHeader]="true"
+        [hidePaginationDetail]="true"
+        [selectionConfig]="{ repeatable: false, listId: entityListId }"
+        [linkType]="linkTypes.ExternalLink"
+        [context]="context"
+        (deselectObject)="deselectEntity()"
+        (selectObject)="selectEntity($event)">
+      </ds-search-results>
+    }
     <div class="ms-4 form-check">
       <input class="form-check-input" type="radio" name="new-entity" id="new-entity" value="new-entity" (click)="selectNewEntity()" [checked]="selectedImportType === importType.NewEntity" />
       <label class="form-check-label" for="new-entity">{{ (labelPrefix + 'entities.new' | translate) }}</label>
     </div>
   </div>
-  <div id="external-source-entry-authority" *ngIf="authorityEnabled">
-    <h5 class="fw-bold">{{ (labelPrefix + 'authority' | translate) }}</h5>
-
-    <div class="ms-4 form-check">
-      <input class="form-check-input" type="radio" name="new-authority" id="new-authority" value="new-authority" (click)="selectNewAuthority()" [checked]="selectedImportType === importType.NewAuthority" />
-      <label class="form-check-label" for="new-authority">{{ (labelPrefix + 'authority.new' | translate) }}</label>
+  @if (authorityEnabled) {
+    <div id="external-source-entry-authority">
+      <h5 class="fw-bold">{{ (labelPrefix + 'authority' | translate) }}</h5>
+      <div class="ms-4 form-check">
+        <input class="form-check-input" type="radio" name="new-authority" id="new-authority" value="new-authority" (click)="selectNewAuthority()" [checked]="selectedImportType === importType.NewAuthority" />
+        <label class="form-check-label" for="new-authority">{{ (labelPrefix + 'authority.new' | translate) }}</label>
+      </div>
     </div>
-  </div>
+  }
 </div>
 <div class="modal-footer">
   <div>
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.html
index f5928a68cb..b99c2f93da 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.html
@@ -1,44 +1,49 @@
-<ds-search *ngIf="this.relationship.searchConfiguration && context"
-           [configuration]="this.relationship.searchConfiguration"
-           [context]="context"
-           [fixedFilterQuery]="this.relationship.filter"
-           [hiddenQuery]="hiddenQuery"
-           [inPlaceSearch]="true"
-           [linkType]="linkTypes.ExternalLink"
-           [searchFormPlaceholder]="'submission.sections.describe.relationship-lookup.search-tab.search-form.placeholder'"
-           [selectable]="true"
-           [selectionConfig]="{ repeatable: repeatable, listId: listId }"
-           [showScopeSelector]="false"
-           [showViewModes]="false"
-           [query]="query"
-           (resultFound)="onResultFound($event)"
-           (deselectObject)="deselectObject.emit($event)"
-           (selectObject)="selectObject.emit($event)">
-  <div additionalSearchOptions *ngIf="repeatable" class="position-absolute">
-    <div class="input-group mb-3">
-      <div ngbDropdown class="input-group dropdown-button">
-        <button *ngIf="selectAllLoading" type="button"
+@if (this.relationship.searchConfiguration && context) {
+  <ds-search
+    [configuration]="this.relationship.searchConfiguration"
+    [context]="context"
+    [fixedFilterQuery]="this.relationship.filter"
+    [hiddenQuery]="hiddenQuery"
+    [inPlaceSearch]="true"
+    [linkType]="linkTypes.ExternalLink"
+    [searchFormPlaceholder]="'submission.sections.describe.relationship-lookup.search-tab.search-form.placeholder'"
+    [selectable]="true"
+    [selectionConfig]="{ repeatable: repeatable, listId: listId }"
+    [showScopeSelector]="false"
+    [showViewModes]="false"
+    [query]="query"
+    (resultFound)="onResultFound($event)"
+    (deselectObject)="deselectObject.emit($event)"
+    (selectObject)="selectObject.emit($event)">
+    @if (repeatable) {
+      <div additionalSearchOptions class="position-absolute">
+        <div class="input-group mb-3">
+          <div ngbDropdown class="input-group dropdown-button">
+            @if (selectAllLoading) {
+              <button type="button"
                 class="btn btn-outline-secondary rounded-end">
-                            <span class="spinner-border spinner-border-sm" role="status"
-                                  aria-hidden="true"></span>
-          <span class="sr-only">{{ ('submission.sections.describe.relationship-lookup.search-tab.loading' | translate) }}</span>
-        </button>
-        <button id="resultdropdown" type="button"
-                ngbDropdownToggle
-                class="btn btn-outline-secondary dropdown-toggle-split"
-                data-toggle="dropdown" aria-haspopup="true"
-                aria-expanded="false"
-                [hidden]="selectAllLoading">
-          <span class="sr-only">{{ ('submission.sections.describe.relationship-lookup.toggle-dropdown' | translate) }}</span>
-        </button>
-        <div ngbDropdownMenu aria-labelledby="resultdropdown" *ngVar="(resultsRD$ | async) as resultsRD">
-          <button class="dropdown-item"
-                  (click)="selectPage(resultsRD?.page)">{{ ('submission.sections.describe.relationship-lookup.search-tab.select-page' | translate) }}</button>
-          <button class="dropdown-item"
-                  (click)="deselectPage(resultsRD?.page)">{{ ('submission.sections.describe.relationship-lookup.search-tab.deselect-page' | translate) }}</button>
+                <span class="spinner-border spinner-border-sm" role="status"
+                aria-hidden="true"></span>
+                <span class="sr-only">{{ ('submission.sections.describe.relationship-lookup.search-tab.loading' | translate) }}</span>
+              </button>
+            }
+            <button id="resultdropdown" type="button"
+              ngbDropdownToggle
+              class="btn btn-outline-secondary dropdown-toggle-split"
+              data-toggle="dropdown" aria-haspopup="true"
+              aria-expanded="false"
+              [hidden]="selectAllLoading">
+              <span class="sr-only">{{ ('submission.sections.describe.relationship-lookup.toggle-dropdown' | translate) }}</span>
+            </button>
+            <div ngbDropdownMenu aria-labelledby="resultdropdown" *ngVar="(resultsRD$ | async) as resultsRD">
+              <button class="dropdown-item"
+              (click)="selectPage(resultsRD?.page)">{{ ('submission.sections.describe.relationship-lookup.search-tab.select-page' | translate) }}</button>
+              <button class="dropdown-item"
+              (click)="deselectPage(resultsRD?.page)">{{ ('submission.sections.describe.relationship-lookup.search-tab.deselect-page' | translate) }}</button>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
-
-</ds-search>
+    }
+  </ds-search>
+}
diff --git a/src/app/shared/form/chips/chips.component.html b/src/app/shared/form/chips/chips.component.html
index f3c0e0d4b5..fa9a655d23 100644
--- a/src/app/shared/form/chips/chips.component.html
+++ b/src/app/shared/form/chips/chips.component.html
@@ -1,44 +1,51 @@
 <div [className]="'float-start w-100 ' + wrapperClass">
   <div role="list" class="nav nav-pills d-flex flex-column flex-sm-row" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onDrop($event)">
     <ng-template #tipContent>
-        <p class="text-start p-0 m-0" *ngFor="let tip of tipText">
-        {{tip}}
-      </p>
+      @for (tip of tipText; track tip) {
+        <p class="text-start p-0 m-0">
+          {{tip}}
+        </p>
+      }
     </ng-template>
-    <div role="listitem" class="nav-item me-2 mb-1"
-           *ngFor="let c of chips.getChips(); let i = index"
-           #t="ngbTooltip"
-           triggers="manual"
-           [ngbTooltip]="tipContent"
-           (mouseover)="showTooltip(t, i)"
-           (mouseout)="t.close()">
+    @for (c of chips.getChips(); track c; let i = $index) {
+      <div role="listitem" class="nav-item me-2 mb-1"
+        #t="ngbTooltip"
+        triggers="manual"
+        [ngbTooltip]="tipContent"
+        (mouseover)="showTooltip(t, i)"
+        (mouseout)="t.close()">
         <a class="flex-sm-fill text-sm-center nav-link active bg-info"
-           cdkDrag
-           (cdkDragStarted)="onDrag(i)"
-           href="javascript:void(0);"
-           [ngClass]="{'chip-selected disabled': (editable && c.editMode) || dragged === i}"
-           (click)="chipsSelected($event, i);">
+          cdkDrag
+          (cdkDragStarted)="onDrag(i)"
+          href="javascript:void(0);"
+          [ngClass]="{'chip-selected disabled': (editable && c.editMode) || dragged === i}"
+          (click)="chipsSelected($event, i);">
           <span>
-            <i *ngIf="showIcons && !c.isNestedItem()" dsAuthorityConfidenceState [authorityValue]="c.item" class="far fa-circle" aria-hidden="true">&nbsp;</i>
-            <ng-container *ngIf="showIcons && c.hasVisibleIcons()">
-              <i *ngFor="let icon of c.icons; let l = last"
-                 [ngbTooltip]="tipContent"
-                 triggers="manual"
-                 #t="ngbTooltip"
-                 class="{{icon.style}}"
-                 [class.me-1]="!l"
-                 [class.me-2]="l"
-                 dsAuthorityConfidenceState
-                 [authorityValue]="c.item[icon.metadata] || c.item"
-                 [visibleWhenAuthorityEmpty]="icon.visibleWhenAuthorityEmpty"
-                 aria-hidden="true"
-                 (mouseover)="showTooltip(t, i, icon.metadata)"
-                 (mouseout)="t.close()"></i>
-            </ng-container>
+            @if (showIcons && !c.isNestedItem()) {
+              <i dsAuthorityConfidenceState [authorityValue]="c.item" class="far fa-circle" aria-hidden="true">&nbsp;</i>
+            }
+            @if (showIcons && c.hasVisibleIcons()) {
+              @for (icon of c.icons; track icon; let l = $last) {
+                <i
+                  [ngbTooltip]="tipContent"
+                  triggers="manual"
+                  #t="ngbTooltip"
+                  class="{{icon.style}}"
+                  [class.me-1]="!l"
+                  [class.me-2]="l"
+                  dsAuthorityConfidenceState
+                  [authorityValue]="c.item[icon.metadata] || c.item"
+                  [visibleWhenAuthorityEmpty]="icon.visibleWhenAuthorityEmpty"
+                  aria-hidden="true"
+                  (mouseover)="showTooltip(t, i, icon.metadata)"
+                (mouseout)="t.close()"></i>
+              }
+            }
             <p class="chip-label text-truncate d-table-cell">{{c.display}}</p><i class="fas fa-times ms-2" (click)="removeChips($event, i)" [title]="'chips.remove' | translate"></i>
           </span>
         </a>
       </div>
+    }
     <div [class.chips-sort-ignore]="(isDragging | async)" class="flex-grow-1">
       <ng-content ></ng-content>
     </div>
diff --git a/src/app/shared/form/form.component.html b/src/app/shared/form/form.component.html
index b1737a9339..47fca83642 100644
--- a/src/app/shared/form/form.component.html
+++ b/src/app/shared/form/form.component.html
@@ -13,63 +13,77 @@
       (ngbEvent)="onCustomEvent($event)">
       <ng-template modelType="ARRAY" let-group let-index="index" let-context="context">
         <!--Array with repeatable items-->
-        <div *ngIf="(!context.notRepeatable) && !isVirtual(context, index) && group.context.groups.length !== 1 && !isItemReadOnly(context, index)"
-             class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
+        @if ((!context.notRepeatable) && !isVirtual(context, index) && group.context.groups.length !== 1 && !isItemReadOnly(context, index)) {
+          <div
+            class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
             <button type="button" class="btn btn-secondary" role="button"
-                    title="{{'form.remove' | translate}}"
-                    [attr.aria-label]="'form.remove' | translate"
-                    (click)="removeItem($event, context, index)">
+              title="{{'form.remove' | translate}}"
+              [attr.aria-label]="'form.remove' | translate"
+              (click)="removeItem($event, context, index)">
               <span><i class="fas fa-trash" aria-hidden="true"></i></span>
             </button>
-        </div>
-        <div *ngIf="(!context.notRepeatable) && index === (group.context.groups.length - 1) && !isItemReadOnly(context, index)" class="clearfix ps-4 w-100">
-          <div class="btn-group" role="group">
-            <button type="button" role="button" class="ds-form-add-more btn btn-link"
-                    title="{{'form.add' | translate}}"
-                    attr.aria-label="{{'form.add' | translate}}"
-                    (click)="insertItem($event, group.context, group.context.groups.length)">
-              <span><i class="fas fa-plus"></i> {{'form.add' | translate}}</span>
-            </button>
           </div>
-        </div>
+        }
+        @if ((!context.notRepeatable) && index === (group.context.groups.length - 1) && !isItemReadOnly(context, index)) {
+          <div class="clearfix ps-4 w-100">
+            <div class="btn-group" role="group">
+              <button type="button" role="button" class="ds-form-add-more btn btn-link"
+                title="{{'form.add' | translate}}"
+                attr.aria-label="{{'form.add' | translate}}"
+                (click)="insertItem($event, group.context, group.context.groups.length)">
+                <span><i class="fas fa-plus"></i> {{'form.add' | translate}}</span>
+              </button>
+            </div>
+          </div>
+        }
 
         <!--Array with non repeatable items - Only discard button-->
-        <div *ngIf="context.notRepeatable && context.showButtons && group.context.groups.length > 1"
-             class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
-          <div class="btn-group" role="button">
-            <button type="button" class="btn btn-secondary"
-                    title="{{'form.discard' | translate}}"
-                    attr.aria-label="{{'form.discard' | translate}}"
-                    (click)="removeItem($event, context, index)"
-                    [dsBtnDisabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
-              <span>{{'form.discard' | translate}}</span>
-            </button>
+        @if (context.notRepeatable && context.showButtons && group.context.groups.length > 1) {
+          <div
+            class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
+            <div class="btn-group" role="button">
+              <button type="button" class="btn btn-secondary"
+                title="{{'form.discard' | translate}}"
+                attr.aria-label="{{'form.discard' | translate}}"
+                (click)="removeItem($event, context, index)"
+                [dsBtnDisabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
+                <span>{{'form.discard' | translate}}</span>
+              </button>
+            </div>
           </div>
-        </div>
+        }
       </ng-template>
 
     </ds-dynamic-form>
-        <ng-content select="[additional]"></ng-content>
-        <ng-content *ngIf="!displaySubmit && !displayCancel"></ng-content>
+    <ng-content select="[additional]"></ng-content>
+    @if (!displaySubmit && !displayCancel) {
+      <ng-content></ng-content>
+    }
 
-    <div *ngIf="displaySubmit || displayCancel">
-      <hr>
-      <div class="mb-3 row">
-        <div class="col text-end space-children-mr">
-          <ng-content select="[before]"></ng-content>
-            <button *ngIf="displayCancel" type="reset" class="btn btn-outline-secondary" (click)="reset()">
-              <i class="fa fa-times" aria-hidden="true"></i> {{cancelLabel | translate}}
-            </button>
-            <ng-content select="[between]"></ng-content>
-            <button *ngIf="displaySubmit" type="submit" class="btn btn-primary" (click)="onSubmit()"
-                    [dsBtnDisabled]="(isValid() | async) !== true">
-              <i class="fas fa-save" aria-hidden="true"></i> {{submitLabel | translate}}
-            </button>
-            <ng-content select="[after]"></ng-content>
+    @if (displaySubmit || displayCancel) {
+      <div>
+        <hr>
+          <div class="mb-3 row">
+            <div class="col text-end space-children-mr">
+              <ng-content select="[before]"></ng-content>
+              @if (displayCancel) {
+                <button type="reset" class="btn btn-outline-secondary" (click)="reset()">
+                  <i class="fa fa-times" aria-hidden="true"></i> {{cancelLabel | translate}}
+                </button>
+              }
+              <ng-content select="[between]"></ng-content>
+              @if (displaySubmit) {
+                <button type="submit" class="btn btn-primary" (click)="onSubmit()"
+                  [dsBtnDisabled]="(isValid() | async) !== true">
+                  <i class="fas fa-save" aria-hidden="true"></i> {{submitLabel | translate}}
+                </button>
+              }
+              <ng-content select="[after]"></ng-content>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
+      }
 
-  </form>
+    </form>
 
-</div>
+  </div>
diff --git a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
index 6aceab7171..1aa293ed77 100644
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
@@ -1,25 +1,29 @@
-<ds-alert *ngIf="description" [content]="description" [type]="AlertType.Info"></ds-alert>
+@if (description) {
+  <ds-alert [content]="description" [type]="AlertType.Info"></ds-alert>
+}
 <div class="treeview-header row mb-1">
   <div class="col-12">
     <div class="input-group">
       <input #searchInput type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()"
-             [attr.aria-label]="'vocabulary-treeview.search.form.search-placeholder' | translate"
-             [placeholder]="'vocabulary-treeview.search.form.search-placeholder' | translate">
+        [attr.aria-label]="'vocabulary-treeview.search.form.search-placeholder' | translate"
+        [placeholder]="'vocabulary-treeview.search.form.search-placeholder' | translate">
       <div class="input-group-append" id="button-addon4">
         <button class="btn btn-outline-primary" type="button" (click)="search()" [dsBtnDisabled]="!isSearchEnabled()"
-                [attr.aria-label]="'vocabulary-treeview.search.form.search' | translate">
+          [attr.aria-label]="'vocabulary-treeview.search.form.search' | translate">
           {{'vocabulary-treeview.search.form.search' | translate}}
         </button>
         <button class="btn btn-outline-secondary" type="button" (click)="reset()"
-                [attr.aria-label]="'vocabulary-treeview.search.form.reset' | translate">
+          [attr.aria-label]="'vocabulary-treeview.search.form.reset' | translate">
           {{'vocabulary-treeview.search.form.reset' | translate}}
         </button>
-        <button *ngIf="showAdd && this.vocabularyOptions.closed" class="btn btn-outline-primary" type="button" (click)="add()"
-                [attr.aria-label]="'vocabulary-treeview.search.form.add' | translate">
-          {{'vocabulary-treeview.search.form.add' | translate}}
-        </button>
+        @if (showAdd && this.vocabularyOptions.closed) {
+          <button class="btn btn-outline-primary" type="button" (click)="add()"
+            [attr.aria-label]="'vocabulary-treeview.search.form.add' | translate">
+            {{'vocabulary-treeview.search.form.add' | translate}}
+          </button>
+        }
         <button class="btn btn-outline-primary" type="button" (click)="add()" [dsBtnDisabled]="this.vocabularyOptions.closed"
-                [attr.aria-label]="'vocabulary-treeview.search.form.add' | translate">
+          [attr.aria-label]="'vocabulary-treeview.search.form.add' | translate">
           {{'vocabulary-treeview.search.form.add' | translate}}
         </button>
       </div>
@@ -27,85 +31,97 @@
   </div>
 </div>
 <div class="treeview-container">
-  <ds-loading *ngIf="loading | async" [showMessage]="false"></ds-loading>
+  @if (loading | async) {
+    <ds-loading [showMessage]="false"></ds-loading>
+  }
   <div aria-live="polite">
-    <h2 *ngIf="(loading | async) !== true && dataSource.data.length === 0" class="h4 text-center text-muted mt-4" >
-      <span>{{'vocabulary-treeview.search.no-result' | translate}}</span>
-    </h2>
+    @if ((loading | async) !== true && dataSource.data.length === 0) {
+      <h2 class="h4 text-center text-muted mt-4" >
+        <span>{{'vocabulary-treeview.search.no-result' | translate}}</span>
+      </h2>
+    }
   </div>
   <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
     <!-- Leaf node -->
     <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="d-flex">
-            <span aria-hidden="true" type="button" class="btn btn-default px-2 me-1 btn-transparent" cdkTreeNodeToggle>
-                <i class="fas fa-fw fa-angle-right invisible"></i>
-            </span>
-            <label *ngIf="multiSelect" class="form-label d-flex align-items-center m-0 p-0 form-check"
-                 [class.text-success]="node.isSelected"
-                 [ngbTooltip]="node.item?.otherInformation?.note"
-                 [openDelay]="500"
-                 container="body"
+      <span aria-hidden="true" type="button" class="btn btn-default px-2 me-1 btn-transparent" cdkTreeNodeToggle>
+        <i class="fas fa-fw fa-angle-right invisible"></i>
+      </span>
+      @if (multiSelect) {
+        <label class="form-label d-flex align-items-center m-0 p-0 form-check"
+          [class.text-success]="node.isSelected"
+          [ngbTooltip]="node.item?.otherInformation?.note"
+          [openDelay]="500"
+          container="body"
           >
-                <input class="me-2" type="checkbox"
-                   [disabled]="!node.item?.selectable"
-                   [(ngModel)]="node.isSelected"
-                   [checked]="node.isSelected"
-                   (change)="onSelect(node.item)"
+          <input class="me-2" type="checkbox"
+            [disabled]="!node.item?.selectable"
+            [(ngModel)]="node.isSelected"
+            [checked]="node.isSelected"
+            (change)="onSelect(node.item)"
             >
-            <span>{{node.item.display}}</span>
-          </label>
-            <button *ngIf="!multiSelect" class="btn btn-outline-link btn-sm text-start"
-                  [class.text-success]="node.isSelected"
-                  [dsBtnDisabled]="!node.item?.selectable"
-                  [ngbTooltip]="node.item?.otherInformation?.note"
-                  [openDelay]="500"
-                  container="body"
-                  (click)="onSelect(node.item)">
+          <span>{{node.item.display}}</span>
+        </label>
+      }
+      @if (!multiSelect) {
+        <button class="btn btn-outline-link btn-sm text-start"
+          [class.text-success]="node.isSelected"
+          [dsBtnDisabled]="!node.item?.selectable"
+          [ngbTooltip]="node.item?.otherInformation?.note"
+          [openDelay]="500"
+          container="body"
+          (click)="onSelect(node.item)">
           <span>{{node.item.display}}</span>
         </button>
+      }
     </cdk-tree-node>
 
     <!-- expandable node -->
     <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChildren" cdkTreeNodePadding class="d-flex">
-        <button type="button" class="btn btn-default px-2 me-1 btn-transparent" cdkTreeNodeToggle
-                [attr.aria-label]="'toggle ' + node.name"
-                (click)="loadChildren(node)">
-          <i class="fas fa-fw {{treeControl.isExpanded(node) ? 'fa-angle-down' : 'fa-angle-right'}}"></i>
-        </button>
+      <button type="button" class="btn btn-default px-2 me-1 btn-transparent" cdkTreeNodeToggle
+        [attr.aria-label]="'toggle ' + node.name"
+        (click)="loadChildren(node)">
+        <i class="fas fa-fw {{treeControl.isExpanded(node) ? 'fa-angle-down' : 'fa-angle-right'}}"></i>
+      </button>
 
-            <label *ngIf="multiSelect" class="form-label d-flex align-items-center m-0 p-0 form-check"
-                [class.text-success]="node.isSelected"
-                [ngbTooltip]="node.item?.otherInformation?.note"
-                [openDelay]="500"
-                container="body">
-                <input class="me-2" type="checkbox"
-                   [disabled]="!node.item?.selectable"
-                   [(ngModel)]="node.isSelected"
-                   [checked]="node.isSelected"
-                   (change)="onSelect(node.item)"
+      @if (multiSelect) {
+        <label class="form-label d-flex align-items-center m-0 p-0 form-check"
+          [class.text-success]="node.isSelected"
+          [ngbTooltip]="node.item?.otherInformation?.note"
+          [openDelay]="500"
+          container="body">
+          <input class="me-2" type="checkbox"
+            [disabled]="!node.item?.selectable"
+            [(ngModel)]="node.isSelected"
+            [checked]="node.isSelected"
+            (change)="onSelect(node.item)"
             >
-            <span>{{node.item.display}}</span>
-          </label>
-            <button *ngIf="!multiSelect" class="btn btn-outline-link btn-sm text-start"
-                  [class.text-success]="node.isSelected"
-                  [dsBtnDisabled]="!node.item?.selectable"
-                  [ngbTooltip]="node.item?.otherInformation?.note"
-                  [openDelay]="500"
-                  container="body"
-                  (click)="onSelect(node.item)">
-            <span>{{node.item.display}}</span>
-          </button>
+          <span>{{node.item.display}}</span>
+        </label>
+      }
+      @if (!multiSelect) {
+        <button class="btn btn-outline-link btn-sm text-start"
+          [class.text-success]="node.isSelected"
+          [dsBtnDisabled]="!node.item?.selectable"
+          [ngbTooltip]="node.item?.otherInformation?.note"
+          [openDelay]="500"
+          container="body"
+          (click)="onSelect(node.item)">
+          <span>{{node.item.display}}</span>
+        </button>
+      }
     </cdk-tree-node>
 
     <cdk-tree-node *cdkTreeNodeDef="let node; when: isLoadMore" cdkTreeNodePadding>
       <button class="btn btn-outline-secondary btn-sm" (click)="loadMore(node.loadMoreParentItem)"
-              [attr.aria-label]="'vocabulary-treeview.load-more' | translate">
+        [attr.aria-label]="'vocabulary-treeview.load-more' | translate">
         {{'vocabulary-treeview.load-more' | translate}}...
       </button>
     </cdk-tree-node>
 
     <cdk-tree-node *cdkTreeNodeDef="let node; when: isLoadMoreRoot">
       <button class="btn btn-outline-secondary btn-sm" (click)="loadMoreRoot(node)"
-              [attr.aria-label]="'vocabulary-treeview.load-more' | translate">
+        [attr.aria-label]="'vocabulary-treeview.load-more' | translate">
         {{'vocabulary-treeview.load-more' | translate}}...
       </button>
     </cdk-tree-node>
diff --git a/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html b/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html
index 719e76b30f..45a21d73ac 100644
--- a/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html
+++ b/src/app/shared/input-suggestions/filter-suggestions/filter-input-suggestions.component.html
@@ -1,35 +1,47 @@
 <form #form="ngForm" (ngSubmit)="onSubmit(value)"
-      [action]="action" (keydown)="onKeydown($event)"
-      (keydown.arrowdown)="shiftFocusDown($event)"
-      (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
-      (dsClickOutside)="close();">
+  [action]="action" (keydown)="onKeydown($event)"
+  (keydown.arrowdown)="shiftFocusDown($event)"
+  (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
+  (dsClickOutside)="close();">
   <div class="mb-3 mb-0">
-    <label class="form-label" *ngIf="label; else searchInput" class="mb-0 w-100">
-      <span class="fw-bold">
-        {{label}}
-      </span>
-      <ng-container *ngTemplateOutlet="searchInput"></ng-container>
-    </label>
+    @if (label) {
+      <label class="form-label" class="mb-0 w-100">
+        <span class="fw-bold">
+          {{label}}
+        </span>
+        <ng-container *ngTemplateOutlet="searchInput"></ng-container>
+      </label>
+    } @else {
+      <input #inputField type="text" [(ngModel)]="value" [name]="name"
+        class="form-control suggestion_input"
+        [ngClass]="{'is-invalid': !valid}"
+        [dsDebounce]="debounceTime" (onDebounce)="find($event)"
+        [placeholder]="placeholder"
+        [ngModelOptions]="{standalone: true}" autocomplete="off"
+        />
+    }
   </div>
   <ng-template #searchInput>
     <input #inputField type="text" [(ngModel)]="value" [name]="name"
-           class="form-control suggestion_input"
-           [ngClass]="{'is-invalid': !valid}"
-           [dsDebounce]="debounceTime" (onDebounce)="find($event)"
-           [placeholder]="placeholder"
-           [ngModelOptions]="{standalone: true}" autocomplete="off"
-    />
+      class="form-control suggestion_input"
+      [ngClass]="{'is-invalid': !valid}"
+      [dsDebounce]="debounceTime" (onDebounce)="find($event)"
+      [placeholder]="placeholder"
+      [ngModelOptions]="{standalone: true}" autocomplete="off"
+      />
   </ng-template>
   <button class="sr-only" type="submit">
     {{'search.filters.search.submit' | translate}}
   </button>
   <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">
     <div class="dropdown-list">
-      <div *ngFor="let suggestionOption of suggestions">
-        <a href="javascript:void(0);" class="d-block dropdown-item"  (click)="onClickSuggestion(suggestionOption)" #suggestion>
-          <span [innerHTML]="suggestionOption.displayValue"></span>
-        </a>
-      </div>
+      @for (suggestionOption of suggestions; track suggestionOption) {
+        <div>
+          <a href="javascript:void(0);" class="d-block dropdown-item"  (click)="onClickSuggestion(suggestionOption)" #suggestion>
+            <span [innerHTML]="suggestionOption.displayValue"></span>
+          </a>
+        </div>
+      }
     </div>
   </div>
 </form>
diff --git a/src/app/shared/loading/loading.component.html b/src/app/shared/loading/loading.component.html
index e12a0d9444..f47f569955 100644
--- a/src/app/shared/loading/loading.component.html
+++ b/src/app/shared/loading/loading.component.html
@@ -1,18 +1,24 @@
-<div *ngIf="!spinner">
-  <label class="form-label" *ngIf="showMessage && message" aria-live="polite">{{ message }}</label>
-  <div class="loader" aria-hidden="true">
-    <span class="l-1"></span>
-    <span class="l-2"></span>
-    <span class="l-3"></span>
-    <span class="l-4"></span>
-    <span class="l-5"></span>
-    <span class="l-6"></span>
-    <span class="l-7"></span>
-    <span class="l-8"></span>
-    <span class="l-9"></span>
-    <span class="l-10"></span>
+@if (!spinner) {
+  <div>
+    @if (showMessage && message) {
+      <label class="form-label" aria-live="polite">{{ message }}</label>
+    }
+    <div class="loader" aria-hidden="true">
+      <span class="l-1"></span>
+      <span class="l-2"></span>
+      <span class="l-3"></span>
+      <span class="l-4"></span>
+      <span class="l-5"></span>
+      <span class="l-6"></span>
+      <span class="l-7"></span>
+      <span class="l-8"></span>
+      <span class="l-9"></span>
+      <span class="l-10"></span>
+    </div>
   </div>
-</div>
-<div *ngIf='spinner' class="spinner spinner-border" role="status" aria-live="polite">
-  <span class="sr-only">{{ message }}</span>
-</div>
+}
+@if (spinner) {
+  <div class="spinner spinner-border" role="status" aria-live="polite">
+    <span class="sr-only">{{ message }}</span>
+  </div>
+}
diff --git a/src/app/shared/log-in/methods/password/log-in-password.component.html b/src/app/shared/log-in/methods/password/log-in-password.component.html
index 089f4c8de8..52685c361c 100644
--- a/src/app/shared/log-in/methods/password/log-in-password.component.html
+++ b/src/app/shared/log-in/methods/password/log-in-password.component.html
@@ -1,37 +1,45 @@
 <form class="form-login"
-      (ngSubmit)="submit()"
-      [formGroup]="form" novalidate>
+  (ngSubmit)="submit()"
+  [formGroup]="form" novalidate>
   <input [attr.aria-label]="'login.form.email' |translate"
-         autocomplete="username"
-         autofocus
-         class="form-control form-control-lg position-relative"
-         formControlName="email"
-         placeholder="{{'login.form.email' | translate}}"
-         required
-         type="email"
-         [attr.data-test]="'email' | dsBrowserOnly">
+    autocomplete="username"
+    autofocus
+    class="form-control form-control-lg position-relative"
+    formControlName="email"
+    placeholder="{{'login.form.email' | translate}}"
+    required
+    type="email"
+    [attr.data-test]="'email' | dsBrowserOnly">
   <input [attr.aria-label]="'login.form.password' |translate"
-         autocomplete="current-password"
-         class="form-control form-control-lg position-relative mb-3"
-         placeholder="{{'login.form.password' | translate}}"
-         formControlName="password"
-         required
-         type="password"
-         [attr.data-test]="'password' | dsBrowserOnly">
-  <div *ngIf="(error | async) && hasError" class="alert alert-danger" role="alert"
-       @fadeOut>{{ (error | async) | translate }}</div>
-  <div *ngIf="(message | async) && hasMessage" class="alert alert-info" role="alert"
-       @fadeOut>{{ (message | async) | translate }}</div>
+    autocomplete="current-password"
+    class="form-control form-control-lg position-relative mb-3"
+    placeholder="{{'login.form.password' | translate}}"
+    formControlName="password"
+    required
+    type="password"
+    [attr.data-test]="'password' | dsBrowserOnly">
+  @if ((error | async) && hasError) {
+    <div class="alert alert-danger" role="alert"
+    @fadeOut>{{ (error | async) | translate }}</div>
+  }
+  @if ((message | async) && hasMessage) {
+    <div class="alert alert-info" role="alert"
+    @fadeOut>{{ (message | async) | translate }}</div>
+  }
 
   <button class="btn btn-lg btn-primary w-100" type="submit" [attr.data-test]="'login-button' | dsBrowserOnly"
-          [dsBtnDisabled]="!form.valid"><i class="fas fa-sign-in-alt"></i> {{"login.form.submit" | translate}}</button>
-</form>
+    [dsBtnDisabled]="!form.valid"><i class="fas fa-sign-in-alt"></i> {{"login.form.submit" | translate}}</button>
+  </form>
 
-<ng-container *ngIf="canShowDivider$ | async">
-  <div class="mt-2">
-    <a class="dropdown-item" *ngIf="canRegister$ | async" [routerLink]="[getRegisterRoute()]"
-       [attr.data-test]="'register' | dsBrowserOnly" role="menuitem">{{"login.form.new-user" | translate}}</a>
-    <a class="dropdown-item" *ngIf="canForgot$ | async" [routerLink]="[getForgotRoute()]"
-       [attr.data-test]="'forgot' | dsBrowserOnly" role="menuitem">{{"login.form.forgot-password" | translate}}</a>
-  </div>
-</ng-container>
+  @if (canShowDivider$ | async) {
+    <div class="mt-2">
+      @if (canRegister$ | async) {
+        <a class="dropdown-item" [routerLink]="[getRegisterRoute()]"
+        [attr.data-test]="'register' | dsBrowserOnly" role="menuitem">{{"login.form.new-user" | translate}}</a>
+      }
+      @if (canForgot$ | async) {
+        <a class="dropdown-item" [routerLink]="[getForgotRoute()]"
+        [attr.data-test]="'forgot' | dsBrowserOnly" role="menuitem">{{"login.form.forgot-password" | translate}}</a>
+      }
+    </div>
+  }
diff --git a/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.html b/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.html
index fa65a12dd5..82721fb828 100644
--- a/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.html
+++ b/src/app/shared/mydspace-actions/claimed-task/reject/claimed-task-actions-reject.component.html
@@ -1,19 +1,23 @@
 <ng-template #rejectTipContent><p [innerHTML]="'submission.workflow.tasks.claimed.reject_help' | translate"></p></ng-template>
 <button [className]="'btn btn-danger'"
-        [ngbTooltip]="rejectTipContent"
-        [dsBtnDisabled]="processing$ | async"
-        (click)="openRejectModal(rejectModal)" >
-  <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
-  <span *ngIf="(processing$ | async) !== true"><i class="fa fa-trash"></i> {{'submission.workflow.tasks.claimed.reject.submit' | translate}}</span>
+  [ngbTooltip]="rejectTipContent"
+  [dsBtnDisabled]="processing$ | async"
+  (click)="openRejectModal(rejectModal)" >
+  @if (processing$ | async) {
+    <span><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
+  }
+  @if ((processing$ | async) !== true) {
+    <span><i class="fa fa-trash"></i> {{'submission.workflow.tasks.claimed.reject.submit' | translate}}</span>
+  }
 </button>
 
 <ng-template #rejectModal let-c="close" let-d="dismiss">
   <div class="modal-header">
     <h4 class="modal-title">{{'submission.workflow.tasks.claimed.reject.reason.title' | translate}}</h4>
     <button type="button"
-            class="btn-close"
-            aria-label="Close"
-            (click)="d('Cross click')">
+      class="btn-close"
+      aria-label="Close"
+      (click)="d('Cross click')">
     </button>
   </div>
   <div class="modal-body">
@@ -22,15 +26,19 @@
     </div>
     <form (ngSubmit)="submitTask();" [formGroup]="rejectForm" >
       <textarea style="width: 100%"
-                formControlName="reason"
-                rows="4"
-                placeholder="{{'submission.workflow.tasks.claimed.reject.reason.placeholder' | translate}}"></textarea>
+        formControlName="reason"
+        rows="4"
+      placeholder="{{'submission.workflow.tasks.claimed.reject.reason.placeholder' | translate}}"></textarea>
       <button id="btn-chat"
-              class="btn btn-danger btn-lg btn-block w-100 mt-3"
-              [dsBtnDisabled]="!rejectForm.valid || (processing$ | async)"
-              type="submit">
-        <span *ngIf="processing$ | async"><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
-        <span *ngIf="(processing$ | async) !== true">{{'submission.workflow.tasks.claimed.reject.reason.submit' | translate}}</span>
+        class="btn btn-danger btn-lg btn-block w-100 mt-3"
+        [dsBtnDisabled]="!rejectForm.valid || (processing$ | async)"
+        type="submit">
+        @if (processing$ | async) {
+          <span><i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}</span>
+        }
+        @if ((processing$ | async) !== true) {
+          <span>{{'submission.workflow.tasks.claimed.reject.reason.submit' | translate}}</span>
+        }
       </button>
     </form>
   </div>
diff --git a/src/app/shared/notifications/notification/notification.component.html b/src/app/shared/notifications/notification/notification.component.html
index ce6297904a..dac3e03f7a 100644
--- a/src/app/shared/notifications/notification/notification.component.html
+++ b/src/app/shared/notifications/notification/notification.component.html
@@ -1,14 +1,18 @@
 <div class="notification alert {{notification.type}} alert-dismissible m-3 shadow" role="alert"
-     [@enterLeave]="animate">
+  [@enterLeave]="animate">
 
-  <div class="notification-progress-loader position-absolute w-100" *ngIf="showProgressBar">
-    <span [ngStyle]="{'width': progressWidth + '%'}" class="h-100 float-start"></span>
-  </div>
+  @if (showProgressBar) {
+    <div class="notification-progress-loader position-absolute w-100">
+      <span [ngStyle]="{'width': progressWidth + '%'}" class="h-100 float-start"></span>
+    </div>
+  }
 
-    <button *ngIf="notification.options.clickToClose"
-            (click)="remove()"
-            type="button" class="btn-close pt-0 pe-1 ps-0 pb-0 mt-1 me-1" data-dismiss="alert" aria-label="Close">
+  @if (notification.options.clickToClose) {
+    <button
+      (click)="remove()"
+      type="button" class="btn-close pt-0 pe-1 ps-0 pb-0 mt-1 me-1" data-dismiss="alert" aria-label="Close">
     </button>
+  }
 
 
   <div class="d-flex flex-row">
@@ -22,34 +26,43 @@
       }"></i></div>
     </div>
     <div class="d-flex flex-column justify-content-center align-content-stretch">
-      <div class="p-2 me-3"  *ngIf="title">
-        <strong>
-          <div class="notification-title ps-1" *ngIf="titleIsTemplate; else regularTitle">
-            <ng-container *ngTemplateOutlet="title"></ng-container>
-          </div>
-          <ng-template #regularTitle>
-            <div class="notification-title ps-1">{{(title | async)}}</div>
-          </ng-template>
-        </strong>
-      </div>
-
-      <div class="p-2 me-3"  *ngIf="content && !html">
-        <div class="notification-content ps-1" *ngIf="contentIsTemplate; else regularContent">
-          <ng-container *ngTemplateOutlet="content"></ng-container>
+      @if (title) {
+        <div class="p-2 me-3" >
+          <strong>
+            @if (titleIsTemplate) {
+              <div class="notification-title ps-1">
+                <ng-container *ngTemplateOutlet="title"></ng-container>
+              </div>
+            } @else {
+              <div class="notification-title ps-1">{{(title | async)}}</div>
+            }
+          </strong>
         </div>
-        <ng-template #regularContent>
-          <div class="notification-content ps-1">{{(content | async)}}</div>
-        </ng-template>
-      </div>
+      }
 
-      <div class="p-2 me-3" *ngIf="content && html">
-        <div class="notification-html ps-1" *ngIf="contentIsTemplate; else regularHtml">
-          <ng-container *ngTemplateOutlet="content"></ng-container>
+      @if (content && !html) {
+        <div class="p-2 me-3" >
+          @if (contentIsTemplate) {
+            <div class="notification-content ps-1">
+              <ng-container *ngTemplateOutlet="content"></ng-container>
+            </div>
+          } @else {
+            <div class="notification-content ps-1">{{(content | async)}}</div>
+          }
         </div>
-        <ng-template #regularHtml>
-          <div class="notification-html ps-1" [innerHTML]="content"></div>
-        </ng-template>
-      </div>
+      }
+
+      @if (content && html) {
+        <div class="p-2 me-3">
+          @if (contentIsTemplate) {
+            <div class="notification-html ps-1">
+              <ng-container *ngTemplateOutlet="content"></ng-container>
+            </div>
+          } @else {
+            <div class="notification-html ps-1" [innerHTML]="content"></div>
+          }
+        </div>
+      }
     </div>
   </div>
 
diff --git a/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.html b/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.html
index 32adab29c7..16d1bfde58 100644
--- a/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.html
+++ b/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.html
@@ -1,5 +1,7 @@
-<ng-container *ngIf="showAccessStatus">
-  <span *ngIf="accessStatus$ | async as accessStatus">
-    <span [class]="'badge bg-secondary access-status-list-element-badge ' + accessStatusClass">{{ accessStatus | translate }}</span>
-  </span>
-</ng-container>
+@if (showAccessStatus) {
+  @if (accessStatus$ | async; as accessStatus) {
+    <span>
+      <span [class]="'badge bg-secondary access-status-list-element-badge ' + accessStatusClass">{{ accessStatus | translate }}</span>
+    </span>
+  }
+}
diff --git a/src/app/shared/object-collection/shared/badges/badges.component.html b/src/app/shared/object-collection/shared/badges/badges.component.html
index 46e2555a9a..5c35ff680b 100644
--- a/src/app/shared/object-collection/shared/badges/badges.component.html
+++ b/src/app/shared/object-collection/shared/badges/badges.component.html
@@ -1,10 +1,10 @@
 <ds-status-badge [object]="object"></ds-status-badge>
-<ng-container *ngIf="isMyDSpaceStatus">
-    <ds-my-dspace-status-badge [context]="context"></ds-my-dspace-status-badge>
-</ng-container>
+@if (isMyDSpaceStatus) {
+  <ds-my-dspace-status-badge [context]="context"></ds-my-dspace-status-badge>
+}
 <div>
-    <ds-type-badge class="pe-1" [object]="object"></ds-type-badge>
-    <ng-container *ngIf="showAccessStatus">
-        <ds-access-status-badge [object]="object"></ds-access-status-badge>
-    </ng-container>
+  <ds-type-badge class="pe-1" [object]="object"></ds-type-badge>
+  @if (showAccessStatus) {
+    <ds-access-status-badge [object]="object"></ds-access-status-badge>
+  }
 </div>
diff --git a/src/app/shared/object-collection/shared/badges/status-badge/status-badge.component.html b/src/app/shared/object-collection/shared/badges/status-badge/status-badge.component.html
index 5175848f8d..8eb3cc0bf3 100644
--- a/src/app/shared/object-collection/shared/badges/status-badge/status-badge.component.html
+++ b/src/app/shared/object-collection/shared/badges/status-badge/status-badge.component.html
@@ -1,6 +1,10 @@
-<div *ngIf="privateBadge" class="private-badge">
+@if (privateBadge) {
+  <div class="private-badge">
     <span class="badge bg-danger">{{ "item.badge.private" | translate }}</span>
-</div>
-<div *ngIf="withdrawnBadge" class="withdrawn-badge">
+  </div>
+}
+@if (withdrawnBadge) {
+  <div class="withdrawn-badge">
     <span class="badge bg-warning">{{ "item.badge.withdrawn" | translate }}</span>
-</div>
+  </div>
+}
diff --git a/src/app/shared/object-collection/shared/badges/type-badge/type-badge.component.html b/src/app/shared/object-collection/shared/badges/type-badge/type-badge.component.html
index c0a173dfe8..78fc9ba832 100644
--- a/src/app/shared/object-collection/shared/badges/type-badge/type-badge.component.html
+++ b/src/app/shared/object-collection/shared/badges/type-badge/type-badge.component.html
@@ -1,3 +1,5 @@
-<span *ngIf="typeMessage">
-  <span class="badge bg-info">{{ typeMessage | translate }}</span>
-</span>
+@if (typeMessage) {
+  <span>
+    <span class="badge bg-info">{{ typeMessage | translate }}</span>
+  </span>
+}
diff --git a/src/app/shared/object-collection/shared/mydspace-item-collection/item-collection.component.html b/src/app/shared/object-collection/shared/mydspace-item-collection/item-collection.component.html
index 5256b87cc1..9f6ad28a87 100644
--- a/src/app/shared/object-collection/shared/mydspace-item-collection/item-collection.component.html
+++ b/src/app/shared/object-collection/shared/mydspace-item-collection/item-collection.component.html
@@ -1,7 +1,9 @@
-<div class="mt-2 mb-2" *ngIf="(collection$ | async)">
-  <span class="link-muted">{{'collection.listelement.badge' | translate}}:
-    <a [routerLink]="['/collections', (collection$ | async)?.id]">
-      {{ dsoNameService.getName(collection$ | async) }}
-    </a>
+@if ((collection$ | async)) {
+  <div class="mt-2 mb-2">
+    <span class="link-muted">{{'collection.listelement.badge' | translate}}:
+      <a [routerLink]="['/collections', (collection$ | async)?.id]">
+        {{ dsoNameService.getName(collection$ | async) }}
+      </a>
     </span>
-</div>
+  </div>
+}
diff --git a/src/app/shared/object-collection/shared/mydspace-item-submitter/item-submitter.component.html b/src/app/shared/object-collection/shared/mydspace-item-submitter/item-submitter.component.html
index c1154be723..d7b5b71007 100644
--- a/src/app/shared/object-collection/shared/mydspace-item-submitter/item-submitter.component.html
+++ b/src/app/shared/object-collection/shared/mydspace-item-submitter/item-submitter.component.html
@@ -2,12 +2,11 @@
   <span class="text-muted">
     {{'submission.workflow.tasks.generic.submitter' | translate}}:
     <span class="badge bg-info">
-      <ng-container *ngIf="submitter$ | async as submitter; else noSubmitter">
+      @if (submitter$ | async; as submitter) {
         {{ dsoNameService.getName(submitter) }}
-      </ng-container>
-      <ng-template #noSubmitter>
+      } @else {
         {{ 'submitter.empty' | translate }}
-      </ng-template>
+      }
     </span>
   </span>
 </div>
diff --git a/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.html b/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.html
index 58de45d81c..07f9802df9 100644
--- a/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.html
+++ b/src/app/shared/object-collection/shared/selectable-list-item-control/selectable-list-item-control.component.html
@@ -1,16 +1,20 @@
 <ng-container *ngVar="selectionService?.isObjectSelected(selectionConfig?.listId, object) | async as checked">
-    <span class="form-check">
-        <input #selectListItemCheckbox *ngIf="selectionConfig.repeatable" class="form-check-input" type="checkbox"
-           [attr.aria-label]="(selectListItemCheckbox.checked ? 'selectable-list-item-control.deselect' : 'selectable-list-item-control.select') | translate"
-           [name]="'checkbox' + index"
-           [id]="'object' + index"
-           [ngModel]="selected$ | async"
-           (ngModelChange)="selectCheckbox($event)">
-    <input *ngIf="!selectionConfig.repeatable" class="form-check-input mt-2" type="radio"
-           [attr.aria-label]="'selectable-list-item-control.select' | translate"
-           [name]="'radio' + index"
-           [id]="'object' + index"
-           [checked]="selected$ | async"
-           (click)="selectRadio(!checked)">
-    </span>
+  <span class="form-check">
+    @if (selectionConfig.repeatable) {
+      <input #selectListItemCheckbox class="form-check-input" type="checkbox"
+        [attr.aria-label]="(selectListItemCheckbox.checked ? 'selectable-list-item-control.deselect' : 'selectable-list-item-control.select') | translate"
+        [name]="'checkbox' + index"
+        [id]="'object' + index"
+        [ngModel]="selected$ | async"
+        (ngModelChange)="selectCheckbox($event)">
+    }
+    @if (!selectionConfig.repeatable) {
+      <input class="form-check-input mt-2" type="radio"
+        [attr.aria-label]="'selectable-list-item-control.select' | translate"
+        [name]="'radio' + index"
+        [id]="'object' + index"
+        [checked]="selected$ | async"
+        (click)="selectRadio(!checked)">
+    }
+  </span>
 </ng-container>
diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html
index 374c7f2acb..ca001c348c 100644
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html
@@ -1,44 +1,60 @@
-  <div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
-    <div class="position-absolute ms-1">
-        <ng-content></ng-content>
-    </div>
-    <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
-        <div>
-              <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-              </ds-thumbnail>
-        </div>
-    </a>
-    <span *ngIf="linkType === linkTypes.None" class="card-img-top full-width">
-        <div>
-              <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-              </ds-thumbnail>
-        </div>
-    </span>
-    <div class="card-body">
-        <ds-badges *ngIf="showLabel" [object]="dso" [context]="context" [showAccessStatus]="true"></ds-badges>
-        <ds-truncatable [id]="dso.id">
-            <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
-                <h4 class="card-title" [innerHTML]="dsoTitle"></h4>
-            </ds-truncatable-part>
-            <ds-truncatable-part [id]="dso.id" [minLines]="1" *ngIf="dso.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])">
-                <p class="item-authors card-text text-muted">
-                    <span *ngIf="dso.hasMetadata('dc.date.issued')" class="item-date">{{firstMetadataValue('dc.date.issued')}}</span>
-                    <span *ngFor="let author of allMetadataValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
-                        <span [innerHTML]="author"></span>
-                    </span>
-                </p>
-            </ds-truncatable-part>
-            <ds-truncatable-part *ngIf="dso.hasMetadata('dc.description.abstract')" [id]="dso.id" [minLines]="3">
-                <p class="item-abstract card-text">
-                    <span [innerHTML]="firstMetadataValue('dc.description.abstract')"></span>
-                </p>
-            </ds-truncatable-part>
-        </ds-truncatable>
-        <div *ngIf="linkType !== linkTypes.None" class="text-center">
-            <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-                class="lead btn btn-primary viewButton">{{ 'search.results.view-result' | translate}}</a>
-        </div>
-    </div>
+<div class="card" [@focusShadow]="(isCollapsed$ | async)?'blur':'focus'">
+  <div class="position-absolute ms-1">
     <ng-content></ng-content>
   </div>
+  @if (linkType !== linkTypes.None) {
+    <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
+      class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
+      <div>
+        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-thumbnail>
+      </div>
+    </a>
+  }
+  @if (linkType === linkTypes.None) {
+    <span class="card-img-top full-width">
+      <div>
+        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-thumbnail>
+      </div>
+    </span>
+  }
+  <div class="card-body">
+    @if (showLabel) {
+      <ds-badges [object]="dso" [context]="context" [showAccessStatus]="true"></ds-badges>
+    }
+    <ds-truncatable [id]="dso.id">
+      <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
+        <h4 class="card-title" [innerHTML]="dsoTitle"></h4>
+      </ds-truncatable-part>
+      @if (dso.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])) {
+        <ds-truncatable-part [id]="dso.id" [minLines]="1">
+          <p class="item-authors card-text text-muted">
+            @if (dso.hasMetadata('dc.date.issued')) {
+              <span class="item-date">{{firstMetadataValue('dc.date.issued')}}</span>
+            }
+            @for (author of allMetadataValues(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); track author) {
+              <span>,
+                <span [innerHTML]="author"></span>
+              </span>
+            }
+          </p>
+        </ds-truncatable-part>
+      }
+      @if (dso.hasMetadata('dc.description.abstract')) {
+        <ds-truncatable-part [id]="dso.id" [minLines]="3">
+          <p class="item-abstract card-text">
+            <span [innerHTML]="firstMetadataValue('dc.description.abstract')"></span>
+          </p>
+        </ds-truncatable-part>
+      }
+    </ds-truncatable>
+    @if (linkType !== linkTypes.None) {
+      <div class="text-center">
+        <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
+        class="lead btn btn-primary viewButton">{{ 'search.results.view-result' | translate}}</a>
+      </div>
+    }
+  </div>
+  <ng-content></ng-content>
+</div>
diff --git a/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html b/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html
index b6349fd83c..e0bae4ec57 100644
--- a/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html
+++ b/src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html
@@ -1,10 +1,14 @@
 <div class="d-flex flex-row">
-    <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[]" [queryParams]="queryParams$ | async" [queryParamsHandling]="'merge'" class="lead">
-        {{object.value}}
+  @if (linkType !== linkTypes.None) {
+    <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[]" [queryParams]="queryParams$ | async" [queryParamsHandling]="'merge'" class="lead">
+      {{object.value}}
     </a>
-    <span *ngIf="linkType === linkTypes.None" class="lead">
-        {{object.value}}
+  }
+  @if (linkType === linkTypes.None) {
+    <span class="lead">
+      {{object.value}}
     </span>
-    <span class="pe-2">&nbsp;</span>
-    <span class="badge rounded-pill bg-secondary align-self-center ps-2 pe-2">{{object.count}}</span>
+  }
+  <span class="pe-2">&nbsp;</span>
+  <span class="badge rounded-pill bg-secondary align-self-center ps-2 pe-2">{{object.count}}</span>
 </div>
diff --git a/src/app/shared/object-list/collection-list-element/collection-list-element.component.html b/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
index 5d965ca47d..74f77225c1 100644
--- a/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
+++ b/src/app/shared/object-list/collection-list-element/collection-list-element.component.html
@@ -1,13 +1,21 @@
 <div class="d-flex flex-row">
-  <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/collections/' + object.id]" class="lead">
-    {{ dsoNameService.getName(object) }}
-  </a>
-  <span *ngIf="linkType === linkTypes.None" class="lead">
-    {{ dsoNameService.getName(object) }}
-  </span>
+  @if (linkType !== linkTypes.None) {
+    <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/collections/' + object.id]" class="lead">
+      {{ dsoNameService.getName(object) }}
+    </a>
+  }
+  @if (linkType === linkTypes.None) {
+    <span class="lead">
+      {{ dsoNameService.getName(object) }}
+    </span>
+  }
   <span class="pe-2">&nbsp;</span>
-  <span *ngIf="object.archivedItemsCount >= 0" class="badge rounded-pill bg-secondary align-self-center archived-items-lead ps-2 pe-2">{{object.archivedItemsCount}}</span>
+  @if (object.archivedItemsCount >= 0) {
+    <span class="badge rounded-pill bg-secondary align-self-center archived-items-lead ps-2 pe-2">{{object.archivedItemsCount}}</span>
+  }
 </div>
-<div *ngIf="object.shortDescription" class="text-muted abstract-text">
+@if (object.shortDescription) {
+  <div class="text-muted abstract-text">
     {{object.shortDescription}}
-</div>
+  </div>
+}
diff --git a/src/app/shared/object-list/community-list-element/community-list-element.component.html b/src/app/shared/object-list/community-list-element/community-list-element.component.html
index 234dc4f859..3c7faf3dab 100644
--- a/src/app/shared/object-list/community-list-element/community-list-element.component.html
+++ b/src/app/shared/object-list/community-list-element/community-list-element.component.html
@@ -1,13 +1,21 @@
 <div class="d-flex flex-row">
-  <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/communities/' + object.id]" class="lead">
-    {{ dsoNameService.getName(object) }}
-  </a>
-  <span *ngIf="linkType === linkTypes.None" class="lead">
-    {{ dsoNameService.getName(object) }}
-  </span>
+  @if (linkType !== linkTypes.None) {
+    <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/communities/' + object.id]" class="lead">
+      {{ dsoNameService.getName(object) }}
+    </a>
+  }
+  @if (linkType === linkTypes.None) {
+    <span class="lead">
+      {{ dsoNameService.getName(object) }}
+    </span>
+  }
   <span class="pe-2">&nbsp;</span>
-  <span *ngIf="object.archivedItemsCount >= 0" class="badge rounded-pill bg-secondary align-self-center archived-items-lead ps-2 pe-2">{{object.archivedItemsCount}}</span>
+  @if (object.archivedItemsCount >= 0) {
+    <span class="badge rounded-pill bg-secondary align-self-center archived-items-lead ps-2 pe-2">{{object.archivedItemsCount}}</span>
+  }
 </div>
-<div *ngIf="object.shortDescription" class="text-muted abstract-text">
+@if (object.shortDescription) {
+  <div class="text-muted abstract-text">
     {{object.shortDescription}}
-</div>
+  </div>
+}
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.html b/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.html
index cdd650ce65..d75b1ee685 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.html
+++ b/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.html
@@ -1,15 +1,16 @@
-<ng-container *ngIf="derivedSearchResult$ | async">
-    <ds-listable-object-component-loader
-            [viewMode]="ViewModes.ListElement"
-            [object]="derivedSearchResult$ | async" [linkType]="LinkTypes.None"
-            [context]="badgeContext"></ds-listable-object-component-loader>
-    <div class="row">
-        <div [ngClass]="showThumbnails ? 'offset-3 offset-md-2  col-9 col-md-10 ps-3' : ''">
-            <ds-workflowitem-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-workflowitem-actions>
-        </div>
+@if (derivedSearchResult$ | async) {
+  <ds-listable-object-component-loader
+    [viewMode]="ViewModes.ListElement"
+    [object]="derivedSearchResult$ | async" [linkType]="LinkTypes.None"
+  [context]="badgeContext"></ds-listable-object-component-loader>
+  <div class="row">
+    <div [ngClass]="showThumbnails ? 'offset-3 offset-md-2  col-9 col-md-10 ps-3' : ''">
+      <ds-workflowitem-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-workflowitem-actions>
     </div>
-</ng-container>
+  </div>
+}
 
-<ds-loading
-        *ngIf="(derivedSearchResult$ | async) === undefined"
-        [showMessage]="false"></ds-loading>
+@if ((derivedSearchResult$ | async) === undefined) {
+  <ds-loading
+  [showMessage]="false"></ds-loading>
+}
diff --git a/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.html b/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.html
index 91e8d92f29..f081a4694f 100644
--- a/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.html
+++ b/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.html
@@ -1,14 +1,15 @@
-<ng-container *ngIf="derivedSearchResult$ | async">
-    <ds-listable-object-component-loader
-            [viewMode]="ViewModes.ListElement"
-            [object]="derivedSearchResult$ | async" [linkType]="LinkTypes.None"
-            [context]="badgeContext"></ds-listable-object-component-loader>
-    <div class="row">
-        <div [ngClass]="showThumbnails ? 'offset-3 offset-md-2 col-9 col-md-10 ps-3' : ''">
-            <ds-workspaceitem-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-workspaceitem-actions>
-        </div>
+@if (derivedSearchResult$ | async) {
+  <ds-listable-object-component-loader
+    [viewMode]="ViewModes.ListElement"
+    [object]="derivedSearchResult$ | async" [linkType]="LinkTypes.None"
+  [context]="badgeContext"></ds-listable-object-component-loader>
+  <div class="row">
+    <div [ngClass]="showThumbnails ? 'offset-3 offset-md-2 col-9 col-md-10 ps-3' : ''">
+      <ds-workspaceitem-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-workspaceitem-actions>
     </div>
-</ng-container>
-<ds-loading
-        *ngIf="(derivedSearchResult$ | async) === undefined"
-        [showMessage]="false"></ds-loading>
+  </div>
+}
+@if ((derivedSearchResult$ | async) === undefined) {
+  <ds-loading
+  [showMessage]="false"></ds-loading>
+}
diff --git a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
index 2447366d00..c506050ece 100644
--- a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html
@@ -1,8 +1,16 @@
 <div class="row">
   <div [ngClass]="showThumbnails ? 'col-9 offset-3 offset-md-2' : 'col-md-12'">
-    <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
-    <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/collections/' + dso.id]" class="lead" [innerHTML]="dsoTitle"></a>
-    <span *ngIf="linkType === linkTypes.None" class="lead" [innerHTML]="dsoTitle"></span>
-    <div *ngIf="dso.shortDescription" class="text-muted abstract-text" [innerHTML]="firstMetadataValue('dc.description.abstract')"></div>
+    @if (showLabel) {
+      <ds-badges [object]="dso" [context]="context"></ds-badges>
+    }
+    @if (linkType !== linkTypes.None) {
+      <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/collections/' + dso.id]" class="lead" [innerHTML]="dsoTitle"></a>
+    }
+    @if (linkType === linkTypes.None) {
+      <span class="lead" [innerHTML]="dsoTitle"></span>
+    }
+    @if (dso.shortDescription) {
+      <div class="text-muted abstract-text" [innerHTML]="firstMetadataValue('dc.description.abstract')"></div>
+    }
   </div>
 </div>
diff --git a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
index 8547f2b848..392a369efb 100644
--- a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html
@@ -1,8 +1,16 @@
 <div class="row">
   <div [ngClass]="showThumbnails ? 'col-9 offset-3 offset-md-2' : 'col-md-12'">
-    <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
-    <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"  [routerLink]="['/communities/' + dso.id]" class="lead" [innerHTML]="dsoTitle"></a>
-    <span *ngIf="linkType === linkTypes.None" class="lead" [innerHTML]="dsoTitle"></span>
-    <div *ngIf="dso.shortDescription" class="text-muted abstract-text" [innerHTML]="firstMetadataValue('dc.description.abstract')"></div>
+    @if (showLabel) {
+      <ds-badges [object]="dso" [context]="context"></ds-badges>
+    }
+    @if (linkType !== linkTypes.None) {
+      <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"  [routerLink]="['/communities/' + dso.id]" class="lead" [innerHTML]="dsoTitle"></a>
+    }
+    @if (linkType === linkTypes.None) {
+      <span class="lead" [innerHTML]="dsoTitle"></span>
+    }
+    @if (dso.shortDescription) {
+      <div class="text-muted abstract-text" [innerHTML]="firstMetadataValue('dc.description.abstract')"></div>
+    }
   </div>
 </div>
diff --git a/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html b/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html
index 64a063ae4f..55f8b6d4e9 100644
--- a/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html
+++ b/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html
@@ -1,14 +1,16 @@
 <ds-truncatable-part [maxLines]="1" [background]="isCurrent() ? 'primary' : 'default'" [showToggle]="false">
   <div [ngClass]="isCurrent() ? 'text-light' : 'text-body'"
-       [innerHTML]="(parentTitle$ && parentTitle$ | async) ? (parentTitle$ | async) : ('home.breadcrumbs' | translate)"></div>
+  [innerHTML]="(parentTitle$ && parentTitle$ | async) ? (parentTitle$ | async) : ('home.breadcrumbs' | translate)"></div>
 </ds-truncatable-part>
 <ds-truncatable-part [maxLines]="1" [background]="isCurrent() ? 'primary' : 'default'" [showToggle]="false">
   <div class="fw-bold"
-       [ngClass]="isCurrent() ? 'text-light' : 'text-primary'"
-       [innerHTML]="dsoTitle"></div>
-</ds-truncatable-part>
-<ds-truncatable-part *ngIf="description" [maxLines]="1" [background]="isCurrent() ? 'primary' : 'default'" [showToggle]="false">
-  <div class="text-secondary"
-       [ngClass]="isCurrent() ? 'text-light' : 'text-secondary'"
-       [innerHTML]="description"></div>
+    [ngClass]="isCurrent() ? 'text-light' : 'text-primary'"
+  [innerHTML]="dsoTitle"></div>
 </ds-truncatable-part>
+@if (description) {
+  <ds-truncatable-part [maxLines]="1" [background]="isCurrent() ? 'primary' : 'default'" [showToggle]="false">
+    <div class="text-secondary"
+      [ngClass]="isCurrent() ? 'text-light' : 'text-secondary'"
+    [innerHTML]="description"></div>
+  </ds-truncatable-part>
+}
diff --git a/src/app/shared/object-select/collection-select/collection-select.component.html b/src/app/shared/object-select/collection-select/collection-select.component.html
index f341060c81..93bff0f8e0 100644
--- a/src/app/shared/object-select/collection-select/collection-select.component.html
+++ b/src/app/shared/object-select/collection-select/collection-select.component.html
@@ -1,41 +1,50 @@
 <ng-container *ngVar="(dsoRD$ | async) as collectionsRD">
-  <ds-pagination
-    *ngIf="collectionsRD?.payload?.totalElements > 0 || collectionsRD?.payload?.page?.length > 0"
-    [paginationOptions]="paginationOptions"
-    [sortOptions]="sortOptions"
-    [collectionSize]="collectionsRD?.payload?.totalElements"
-    [hidePagerWhenSinglePage]="true"
-    [hideGear]="true">
-    <div class="table-responsive mt-2">
-      <table id="collection-select" class="table table-striped table-hover">
-        <thead>
-          <tr>
-            <th><span class="sr-only">{{'collection.select.table.selected' | translate}}</span></th>
-            <th scope="col">{{'collection.select.table.title' | translate}}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let selectCollection of selectCollections$ | async">
-            <td><input #selectCollectionBtn [attr.aria-label]="(selectCollectionBtn.checked ? 'collection.select.table.deselect' : 'collection.select.table.select') | translate" [disabled]="(selectCollection.canSelect$ | async) === false" class="collection-checkbox" [ngModel]="selectCollection.selected$ | async" (change)="switch(selectCollection.dso.id)" type="checkbox" name="{{selectCollection.dso.id}}"></td>
-            <td><a [routerLink]="selectCollection.route">{{ dsoNameService.getName(selectCollection.dso) }}</a></td>
-          </tr>
-        </tbody>
-      </table>
+  @if (collectionsRD?.payload?.totalElements > 0 || collectionsRD?.payload?.page?.length > 0) {
+    <ds-pagination
+      [paginationOptions]="paginationOptions"
+      [sortOptions]="sortOptions"
+      [collectionSize]="collectionsRD?.payload?.totalElements"
+      [hidePagerWhenSinglePage]="true"
+      [hideGear]="true">
+      <div class="table-responsive mt-2">
+        <table id="collection-select" class="table table-striped table-hover">
+          <thead>
+            <tr>
+              <th><span class="sr-only">{{'collection.select.table.selected' | translate}}</span></th>
+              <th scope="col">{{'collection.select.table.title' | translate}}</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (selectCollection of selectCollections$ | async; track selectCollection) {
+              <tr>
+                <td><input #selectCollectionBtn [attr.aria-label]="(selectCollectionBtn.checked ? 'collection.select.table.deselect' : 'collection.select.table.select') | translate" [disabled]="(selectCollection.canSelect$ | async) === false" class="collection-checkbox" [ngModel]="selectCollection.selected$ | async" (change)="switch(selectCollection.dso.id)" type="checkbox" name="{{selectCollection.dso.id}}"></td>
+                <td><a [routerLink]="selectCollection.route">{{ dsoNameService.getName(selectCollection.dso) }}</a></td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    </ds-pagination>
+  }
+  @if (collectionsRD?.payload?.totalElements === 0 || collectionsRD?.payload?.page?.length === 0) {
+    <div class="alert alert-info w-100" role="alert">
+      {{'collection.select.empty' | translate}}
     </div>
-  </ds-pagination>
-  <div *ngIf="collectionsRD?.payload?.totalElements === 0 || collectionsRD?.payload?.page?.length === 0" class="alert alert-info w-100" role="alert">
-    {{'collection.select.empty' | translate}}
-  </div>
-  <ds-error *ngIf="collectionsRD?.hasFailed" message="{{'error.collections' | translate}}"></ds-error>
-  <ds-loading *ngIf="!collectionsRD || collectionsRD?.isLoading" message="{{'loading.collections' | translate}}"></ds-loading>
+  }
+  @if (collectionsRD?.hasFailed) {
+    <ds-error message="{{'error.collections' | translate}}"></ds-error>
+  }
+  @if (!collectionsRD || collectionsRD?.isLoading) {
+    <ds-loading message="{{'loading.collections' | translate}}"></ds-loading>
+  }
   <div class="space-children-mr float-end" *ngVar="(selectedIds$ | async) as selectedIds">
     <button class="btn btn-outline-secondary collection-cancel" (click)="onCancel()">
       <i class="fas fa-times"></i> {{cancelButton | translate}}
     </button>
     <button class="btn collection-confirm"
-            [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
-            [dsBtnDisabled]="selectedIds?.length === 0"
-            (click)="confirmSelected()">
+      [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
+      [dsBtnDisabled]="selectedIds?.length === 0"
+      (click)="confirmSelected()">
       <i class="fas fa-trash"></i> {{confirmButton | translate}}
     </button>
   </div>
diff --git a/src/app/shared/object-select/item-select/item-select.component.html b/src/app/shared/object-select/item-select/item-select.component.html
index 8a369446cf..5c3a908038 100644
--- a/src/app/shared/object-select/item-select/item-select.component.html
+++ b/src/app/shared/object-select/item-select/item-select.component.html
@@ -1,49 +1,66 @@
 <ng-container *ngVar="(dsoRD$ | async) as itemsRD">
-  <ds-pagination
-    *ngIf="itemsRD?.payload?.totalElements > 0"
-    [paginationOptions]="paginationOptions"
-    [sortOptions]="sortOptions"
-    [collectionSize]="itemsRD?.payload?.totalElements"
-    [hidePagerWhenSinglePage]="true"
-    [hideGear]="true">
-    <div class="table-responsive mt-2">
-      <table id="item-select" class="table table-striped table-hover">
-        <thead>
-        <tr>
-          <th><span class="sr-only">{{'item.select.table.selected' | translate}}</span></th>
-          <th *ngIf="!hideCollection" scope="col">{{'item.select.table.collection' | translate}}</th>
-          <th scope="col">{{'item.select.table.author' | translate}}</th>
-          <th scope="col">{{'item.select.table.title' | translate}}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="let selectItem of selectItems$ | async">
-          <td><input #selectItemBtn [attr.aria-label]="(selectItemBtn.checked ? 'item.select.table.deselect' : 'item.select.table.select') | translate" [disabled]="(selectItem.canSelect$ | async) === false" class="item-checkbox" [ngModel]="selectItem.selected$ | async" (change)="switch(selectItem.dso.id)" type="checkbox" name="{{selectItem.dso.id}}"></td>
-          <td *ngIf="!hideCollection">
-            <span *ngVar="(selectItem.dso.owningCollection | async)?.payload as collection">
-              <a *ngIf="collection" [routerLink]="['/collections', collection?.id]">
-                {{ dsoNameService.getName(collection) }}
-              </a>
-            </span>
-          </td>
-          <td><span *ngIf="selectItem.dso.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])">{{selectItem.dso.firstMetadataValue(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])}}</span></td>
-          <td><a [routerLink]="selectItem.route">{{ dsoNameService.getName(selectItem.dso) }}</a></td>
-        </tr>
-        </tbody>
-      </table>
+  @if (itemsRD?.payload?.totalElements > 0) {
+    <ds-pagination
+      [paginationOptions]="paginationOptions"
+      [sortOptions]="sortOptions"
+      [collectionSize]="itemsRD?.payload?.totalElements"
+      [hidePagerWhenSinglePage]="true"
+      [hideGear]="true">
+      <div class="table-responsive mt-2">
+        <table id="item-select" class="table table-striped table-hover">
+          <thead>
+            <tr>
+              <th><span class="sr-only">{{'item.select.table.selected' | translate}}</span></th>
+              @if (!hideCollection) {
+                <th scope="col">{{'item.select.table.collection' | translate}}</th>
+              }
+              <th scope="col">{{'item.select.table.author' | translate}}</th>
+              <th scope="col">{{'item.select.table.title' | translate}}</th>
+            </tr>
+          </thead>
+          <tbody>
+            @for (selectItem of selectItems$ | async; track selectItem) {
+              <tr>
+                <td><input #selectItemBtn [attr.aria-label]="(selectItemBtn.checked ? 'item.select.table.deselect' : 'item.select.table.select') | translate" [disabled]="(selectItem.canSelect$ | async) === false" class="item-checkbox" [ngModel]="selectItem.selected$ | async" (change)="switch(selectItem.dso.id)" type="checkbox" name="{{selectItem.dso.id}}"></td>
+                @if (!hideCollection) {
+                  <td>
+                    <span *ngVar="(selectItem.dso.owningCollection | async)?.payload as collection">
+                      @if (collection) {
+                        <a [routerLink]="['/collections', collection?.id]">
+                          {{ dsoNameService.getName(collection) }}
+                        </a>
+                      }
+                    </span>
+                  </td>
+                }
+                <td>@if (selectItem.dso.hasMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])) {
+                  <span>{{selectItem.dso.firstMetadataValue(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])}}</span>
+                }</td>
+                <td><a [routerLink]="selectItem.route">{{ dsoNameService.getName(selectItem.dso) }}</a></td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </div>
+    </ds-pagination>
+  }
+  @if (itemsRD?.payload?.totalElements === 0 || itemsRD?.payload?.page?.length === 0) {
+    <div class="alert alert-info w-100" role="alert">
+      {{'item.select.empty' | translate}}
     </div>
-  </ds-pagination>
-  <div *ngIf="itemsRD?.payload?.totalElements === 0 || itemsRD?.payload?.page?.length === 0" class="alert alert-info w-100" role="alert">
-    {{'item.select.empty' | translate}}
-  </div>
-  <ds-error *ngIf="itemsRD?.hasFailed" message="{{'error.items' | translate}}"></ds-error>
-  <ds-loading *ngIf="!itemsRD || itemsRD?.isLoading" message="{{'loading.items' | translate}}"></ds-loading>
+  }
+  @if (itemsRD?.hasFailed) {
+    <ds-error message="{{'error.items' | translate}}"></ds-error>
+  }
+  @if (!itemsRD || itemsRD?.isLoading) {
+    <ds-loading message="{{'loading.items' | translate}}"></ds-loading>
+  }
   <div *ngVar="(selectedIds$ | async) as selectedIds">
     <button class="btn btn-outline-secondary item-cancel float-start" (click)="onCancel()">{{cancelButton | translate}}</button>
     <button class="btn item-confirm float-end"
-            [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
-            [dsBtnDisabled]="selectedIds?.length === 0"
-            (click)="confirmSelected()">
+      [ngClass]="{'btn-danger': dangerConfirm, 'btn-primary': !dangerConfirm}"
+      [dsBtnDisabled]="selectedIds?.length === 0"
+      (click)="confirmSelected()">
       {{confirmButton | translate}}
     </button>
   </div>
diff --git a/src/app/shared/pagination/pagination.component.html b/src/app/shared/pagination/pagination.component.html
index d5e9ee41bd..21d8909800 100644
--- a/src/app/shared/pagination/pagination.component.html
+++ b/src/app/shared/pagination/pagination.component.html
@@ -1,71 +1,89 @@
-<div *ngIf="currentPageState === undefined || currentPageState === (currentPage$|async)" [id]="'p-' + id">
-  <div *ngIf="(!hidePaginationDetail && collectionSize > 0) || !hideGear" class="pagination-masked clearfix top">
-    <div class="row">
-      <div *ngIf="!hidePaginationDetail && collectionSize > 0" class="col-auto pagination-info">
-          <span class="align-middle hidden-xs-down">{{ 'pagination.showing.label' | translate }}</span>
-          <span class="align-middle">{{ 'pagination.showing.detail' | translate:(showingDetails$ | async)}}</span>
-      </div>
-      <div class="col">
-        <div *ngIf="!hideGear" ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="d-inline-block float-end">
-          <button class="btn btn-secondary" id="paginationControls" ngbDropdownToggle [title]="'pagination.options.description' | translate" [attr.aria-label]="'pagination.options.description' | translate" aria-haspopup="true" aria-expanded="false"><i class="fas fa-cog" aria-hidden="true"></i></button>
-          <ul id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" role="menu" ngbDropdownMenu>
-            <li role="menuitem">
-              <span class="dropdown-header" id="pagination-control_results-per-page" role="heading">{{ 'pagination.results-per-page' | translate}}</span>
-              <ul aria-labelledby="pagination-control_results-per-page" class="list-unstyled" role="listbox">
-                <li *ngFor="let item of pageSizeOptions" role="option" [attr.aria-selected]="item === (pageSize$ | async)">
-                  <button (click)="doPageSizeChange(item)" class="dropdown-item">
-                    <i [ngClass]="{'invisible': item !== (pageSize$ | async) }" class="fas fa-check" aria-hidden="true"></i> {{item}}
-                  </button>
-                </li>
-              </ul>
-            </li>
-            <li *ngIf="hideSortOptions === false" role="menuitem">
-              <span class="dropdown-header" id="pagination-control_sort-direction" role="heading">{{ 'pagination.sort-direction' | translate}}</span>
-              <ul aria-labelledby="pagination-control_sort-direction" class="list-unstyled" role="listbox">
-                <li *ngFor="let direction of (sortDirections | dsKeys)" [attr.aria-selected]="direction.value === (sortDirection$ | async)" role="option">
-                  <button class="dropdown-item" (click)="doSortDirectionChange(direction.value)">
-                    <i [ngClass]="{'invisible': direction.value !== (sortDirection$ |async)}" class="fas fa-check" aria-hidden="true"></i> {{'sorting.' + direction.key | translate}}
-                  </button>
-                </li>
-              </ul>
-            </li>
-          </ul>
+@if (currentPageState === undefined || currentPageState === (currentPage$|async)) {
+  <div [id]="'p-' + id">
+    @if ((!hidePaginationDetail && collectionSize > 0) || !hideGear) {
+      <div class="pagination-masked clearfix top">
+        <div class="row">
+          @if (!hidePaginationDetail && collectionSize > 0) {
+            <div class="col-auto pagination-info">
+              <span class="align-middle hidden-xs-down">{{ 'pagination.showing.label' | translate }}</span>
+              <span class="align-middle">{{ 'pagination.showing.detail' | translate:(showingDetails$ | async)}}</span>
+            </div>
+          }
+          <div class="col">
+            @if (!hideGear) {
+              <div ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="d-inline-block float-end">
+                <button class="btn btn-secondary" id="paginationControls" ngbDropdownToggle [title]="'pagination.options.description' | translate" [attr.aria-label]="'pagination.options.description' | translate" aria-haspopup="true" aria-expanded="false"><i class="fas fa-cog" aria-hidden="true"></i></button>
+                <ul id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" role="menu" ngbDropdownMenu>
+                  <li role="menuitem">
+                    <span class="dropdown-header" id="pagination-control_results-per-page" role="heading">{{ 'pagination.results-per-page' | translate}}</span>
+                    <ul aria-labelledby="pagination-control_results-per-page" class="list-unstyled" role="listbox">
+                      @for (item of pageSizeOptions; track item) {
+                        <li role="option" [attr.aria-selected]="item === (pageSize$ | async)">
+                          <button (click)="doPageSizeChange(item)" class="dropdown-item">
+                            <i [ngClass]="{'invisible': item !== (pageSize$ | async) }" class="fas fa-check" aria-hidden="true"></i> {{item}}
+                          </button>
+                        </li>
+                      }
+                    </ul>
+                  </li>
+                  @if (hideSortOptions === false) {
+                    <li role="menuitem">
+                      <span class="dropdown-header" id="pagination-control_sort-direction" role="heading">{{ 'pagination.sort-direction' | translate}}</span>
+                      <ul aria-labelledby="pagination-control_sort-direction" class="list-unstyled" role="listbox">
+                        @for (direction of (sortDirections | dsKeys); track direction) {
+                          <li [attr.aria-selected]="direction.value === (sortDirection$ | async)" role="option">
+                            <button class="dropdown-item" (click)="doSortDirectionChange(direction.value)">
+                              <i [ngClass]="{'invisible': direction.value !== (sortDirection$ |async)}" class="fas fa-check" aria-hidden="true"></i> {{'sorting.' + direction.key | translate}}
+                            </button>
+                          </li>
+                        }
+                      </ul>
+                    </li>
+                  }
+                </ul>
+              </div>
+            }
+            <ds-rss></ds-rss>
+          </div>
         </div>
-        <ds-rss></ds-rss>
       </div>
-    </div>
-  </div>
-  <ng-content></ng-content>
-
-  <div *ngIf="shouldShowBottomPager | async">
-    <div *ngIf="showPaginator" class="pagination justify-content-center clearfix bottom">
-      <ngb-pagination [attr.aria-label]="('pagination-control.page-number-bar' | translate) + paginationOptions.id"
-                      [boundaryLinks]="paginationOptions.boundaryLinks"
-                      [collectionSize]="collectionSize"
-                      [disabled]="paginationOptions.disabled"
-                      [ellipses]="paginationOptions.ellipses"
-                      [maxSize]="(isXs)?5:paginationOptions.maxSize"
-                      [page]="(currentPage$|async)"
-                      (pageChange)="doPageChange($event)"
-                      [pageSize]="(pageSize$ |async)"
-                      [rotate]="paginationOptions.rotate"
-                      [size]="(isXs)?'sm':paginationOptions.size">
-      </ngb-pagination>
-    </div>
-
-    <div *ngIf="!showPaginator" class="d-flex justify-content-between">
-        <button id="nav-prev" type="button" class="btn btn-outline-primary float-start"
-                (click)="goPrev()"
-                [dsBtnDisabled]="(objects?.payload?.currentPage <= 1) && (paginationOptions?.currentPage <= 1)">
-          <i class="fas fa-angle-left"></i> {{'pagination.previous.button' |translate}}
-        </button>
-      <button id="nav-next" type="button" class="btn btn-outline-primary float-end"
+    }
+    <ng-content></ng-content>
+    @if (shouldShowBottomPager | async) {
+      <div>
+        @if (showPaginator) {
+          <div class="pagination justify-content-center clearfix bottom">
+            <ngb-pagination [attr.aria-label]="('pagination-control.page-number-bar' | translate) + paginationOptions.id"
+              [boundaryLinks]="paginationOptions.boundaryLinks"
+              [collectionSize]="collectionSize"
+              [disabled]="paginationOptions.disabled"
+              [ellipses]="paginationOptions.ellipses"
+              [maxSize]="(isXs)?5:paginationOptions.maxSize"
+              [page]="(currentPage$|async)"
+              (pageChange)="doPageChange($event)"
+              [pageSize]="(pageSize$ |async)"
+              [rotate]="paginationOptions.rotate"
+              [size]="(isXs)?'sm':paginationOptions.size">
+            </ngb-pagination>
+          </div>
+        }
+        @if (!showPaginator) {
+          <div class="d-flex justify-content-between">
+            <button id="nav-prev" type="button" class="btn btn-outline-primary float-start"
+              (click)="goPrev()"
+              [dsBtnDisabled]="(objects?.payload?.currentPage <= 1) && (paginationOptions?.currentPage <= 1)">
+              <i class="fas fa-angle-left"></i> {{'pagination.previous.button' |translate}}
+            </button>
+            <button id="nav-next" type="button" class="btn btn-outline-primary float-end"
               (click)="goNext()"
               [dsBtnDisabled]="(objects?.payload?.currentPage >= objects?.payload?.totalPages) || (paginationOptions?.currentPage >= objects?.payload?.totalPages)">
-          <span [ngbTooltip]="objects?.payload?.currentPage >= objects?.payload?.totalPages ? ('pagination.next.button.disabled.tooltip' |translate) : null">
-            <i class="fas fa-angle-right"></i> {{'pagination.next.button' |translate}}
-          </span>
-      </button>
-    </div>
+              <span [ngbTooltip]="objects?.payload?.currentPage >= objects?.payload?.totalPages ? ('pagination.next.button.disabled.tooltip' |translate) : null">
+                <i class="fas fa-angle-right"></i> {{'pagination.next.button' |translate}}
+              </span>
+            </button>
+          </div>
+        }
+      </div>
+    }
   </div>
-</div>
+}
diff --git a/src/app/shared/resource-policies/form/resource-policy-form.component.html b/src/app/shared/resource-policies/form/resource-policy-form.component.html
index 65c67f4159..2e445a69a7 100644
--- a/src/app/shared/resource-policies/form/resource-policy-form.component.html
+++ b/src/app/shared/resource-policies/form/resource-policy-form.component.html
@@ -1,10 +1,12 @@
 <div>
-  <ds-form *ngIf="formModel"
-           #formRef="formComponent"
-           [formId]="formId"
-           [formModel]="formModel"
-           [displaySubmit]="false"
-           [displayCancel]="false"></ds-form>
+  @if (formModel) {
+    <ds-form
+      #formRef="formComponent"
+      [formId]="formId"
+      [formModel]="formModel"
+      [displaySubmit]="false"
+    [displayCancel]="false"></ds-form>
+  }
   <div class="container-fluid">
     <label for="ResourcePolicyObject">{{'resource-policies.form.eperson-group-list.label' | translate}}</label>
     <input id="ResourcePolicyObject" class="form-control mb-3" type="text" [value]="resourcePolicyTargetName$ | async">
@@ -19,57 +21,61 @@
         <a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.group' | translate}}</a>
         <ng-template ngbNavContent>
           <ds-eperson-group-list [isListOfEPerson]="false"
-                                 (select)="updateObjectSelected($event, false)"></ds-eperson-group-list>
+          (select)="updateObjectSelected($event, false)"></ds-eperson-group-list>
         </ng-template>
       </li>
     </ul>
     <div [ngbNavOutlet]="nav"></div>
     <div>
       <hr>
-      <div class="mb-3 row">
+        <div class="mb-3 row">
 
-        <div class="col text-end">
-          <button type="reset"
-                  class="btn btn-default"
-                  [dsBtnDisabled]="(isProcessing | async)"
-                  (click)="onReset()">{{'form.cancel' | translate}}</button>
-          <button type="button"
-                  class="btn btn-primary"
-                  [dsBtnDisabled]="(isFormValid() | async) !== true || (isProcessing | async)"
-                  (click)="onSubmit()">
-            <span *ngIf="(isProcessing | async)">
+          <div class="col text-end">
+            <button type="reset"
+              class="btn btn-default"
+              [dsBtnDisabled]="(isProcessing | async)"
+            (click)="onReset()">{{'form.cancel' | translate}}</button>
+            <button type="button"
+              class="btn btn-primary"
+              [dsBtnDisabled]="(isFormValid() | async) !== true || (isProcessing | async)"
+              (click)="onSubmit()">
+              @if ((isProcessing | async)) {
+                <span>
                   <i class='fas fa-circle-notch fa-spin'></i> {{'submission.workflow.tasks.generic.processing' | translate}}
                 </span>
-            <span *ngIf="(isProcessing | async) !== true">
+              }
+              @if ((isProcessing | async) !== true) {
+                <span>
                   {{'form.submit' | translate}}
                 </span>
-          </button>
+              }
+            </button>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
 
 
-<ng-template #content let-modal>
-  <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">{{ 'resource-policies.form.eperson-group-list.modal.header' | translate }}</h4>
-    <button type="button" class="btn-close" aria-label="Close" (click)="modal.close()">
-    </button>
-  </div>
-  <div class="modal-body">
-    <div class="d-flex flex-row">
-      <div class="me-3">
-        <i class="fas fa-info-circle fa-2x text-info"></i>
-      </div>
-      <div>
+  <ng-template #content let-modal>
+    <div class="modal-header">
+      <h4 class="modal-title" id="modal-basic-title">{{ 'resource-policies.form.eperson-group-list.modal.header' | translate }}</h4>
+      <button type="button" class="btn-close" aria-label="Close" (click)="modal.close()">
+      </button>
+    </div>
+    <div class="modal-body">
+      <div class="d-flex flex-row">
+        <div class="me-3">
+          <i class="fas fa-info-circle fa-2x text-info"></i>
+        </div>
+        <div>
       <p [innerHTML]="(navActiveId === 'eperson' ? 'resource-policies.form.eperson-group-list.modal.text1.toGroup' :
        'resource-policies.form.eperson-group-list.modal.text1.toEPerson') | translate" class="fw-bold"></p>
-      <p [innerHTML]="'resource-policies.form.eperson-group-list.modal.text2' | translate"></p>
+          <p [innerHTML]="'resource-policies.form.eperson-group-list.modal.text2' | translate"></p>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="modal-footer">
-    <button type="button" class="btn btn-secondary" (click)="modal.close()">{{ 'resource-policies.form.eperson-group-list.modal.close' | translate }}</button>
-  </div>
-</ng-template>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-secondary" (click)="modal.close()">{{ 'resource-policies.form.eperson-group-list.modal.close' | translate }}</button>
+    </div>
+  </ng-template>
diff --git a/src/app/shared/rss-feed/rss.component.html b/src/app/shared/rss-feed/rss.component.html
index 079441132e..9bca53b8c8 100644
--- a/src/app/shared/rss-feed/rss.component.html
+++ b/src/app/shared/rss-feed/rss.component.html
@@ -1,9 +1,10 @@
-<ng-container
-  *ngIf="(isEnabled$ | async) && (isActivated$ | async)">
-  <div *ngIf="route$ | async as route" class="d-inline-block float-end margin-right">
-    <a target="_blank" rel="noopener noreferrer" [href]="route" class="btn btn-secondary"
-      [title]="'feed.description' | translate" [attr.aria-label]="'feed.description' | translate">
-      <i class="fas fa-rss-square"></i>
-    </a>
-  </div>
-</ng-container>
+@if ((isEnabled$ | async) && (isActivated$ | async)) {
+  @if (route$ | async; as route) {
+    <div class="d-inline-block float-end margin-right">
+      <a target="_blank" rel="noopener noreferrer" [href]="route" class="btn btn-secondary"
+        [title]="'feed.description' | translate" [attr.aria-label]="'feed.description' | translate">
+        <i class="fas fa-rss-square"></i>
+      </a>
+    </div>
+  }
+}
diff --git a/src/app/shared/search-form/search-form.component.html b/src/app/shared/search-form/search-form.component.html
index f1c882dbe2..1f887c1ba6 100644
--- a/src/app/shared/search-form/search-form.component.html
+++ b/src/app/shared/search-form/search-form.component.html
@@ -1,15 +1,17 @@
 <form #form="ngForm" (ngSubmit)="onSubmit(form.value)" action="/search">
-    <div>
-        <div class="mb-3 input-group">
-                <button *ngIf="showScopeSelector" class="scope-button btn btn-outline-secondary text-truncate"
-                        [ngbTooltip]="dsoNameService.getName(selectedScope | async)" type="button"
-                        (click)="openScopeModal()">
-                  {{dsoNameService.getName(selectedScope | async) || ('search.form.scope.all' | translate)}}
-                </button>
-            <input type="text" [(ngModel)]="query" name="query" class="form-control"
-                   [attr.aria-label]="searchPlaceholder" [attr.data-test]="'search-box' | dsBrowserOnly"
-                   [placeholder]="searchPlaceholder">
-            <button type="submit" class="search-button btn btn-{{brandColor}}" [attr.data-test]="'search-button' | dsBrowserOnly"><i class="fas fa-search"></i> {{ ('search.form.search' | translate) }}</button>
-        </div>
+  <div>
+    <div class="mb-3 input-group">
+      @if (showScopeSelector) {
+        <button class="scope-button btn btn-outline-secondary text-truncate"
+          [ngbTooltip]="dsoNameService.getName(selectedScope | async)" type="button"
+          (click)="openScopeModal()">
+          {{dsoNameService.getName(selectedScope | async) || ('search.form.scope.all' | translate)}}
+        </button>
+      }
+      <input type="text" [(ngModel)]="query" name="query" class="form-control"
+        [attr.aria-label]="searchPlaceholder" [attr.data-test]="'search-box' | dsBrowserOnly"
+        [placeholder]="searchPlaceholder">
+      <button type="submit" class="search-button btn btn-{{brandColor}}" [attr.data-test]="'search-button' | dsBrowserOnly"><i class="fas fa-search"></i> {{ ('search.form.search' | translate) }}</button>
     </div>
+  </div>
 </form>
diff --git a/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html
index 716de88eef..b25a602996 100644
--- a/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html
@@ -1,31 +1,40 @@
 <div>
-    <div class="filters py-2">
-        <ds-search-facet-selected-option *ngFor="let value of (selectedAppliedFilters$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
-        <ng-container *ngFor="let page of (facetValues$ | async)">
-          <div [@facetLoad]="animationState">
-            <ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
-          </div>
-        </ng-container>
-        <div class="clearfix toggle-more-filters">
-            <a class="float-start" *ngIf="(isLastPage$ | async) !== true"
-               (click)="showMore()" href="javascript:void(0);">
-              {{"search.filters.filter.show-more" | translate}}
-            </a>
-            <a class="float-end" *ngIf="(currentPage | async) > 1"
-               (click)="showFirstPageOnly()" href="javascript:void(0);">
-              {{"search.filters.filter.show-less" | translate}}
-            </a>
-        </div>
+  <div class="filters py-2">
+    @for (value of (selectedAppliedFilters$ | async); track value) {
+      <ds-search-facet-selected-option [selectedValue]="value" [filterConfig]="filterConfig" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
+    }
+    @for (page of (facetValues$ | async); track page) {
+      <div [@facetLoad]="animationState">
+        @for (value of page.page; track trackUpdate($index, value)) {
+          <ds-search-facet-option [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
+        }
+      </div>
+    }
+    <div class="clearfix toggle-more-filters">
+      @if ((isLastPage$ | async) !== true) {
+        <a class="float-start"
+          (click)="showMore()" href="javascript:void(0);">
+          {{"search.filters.filter.show-more" | translate}}
+        </a>
+      }
+      @if ((currentPage | async) > 1) {
+        <a class="float-end"
+          (click)="showFirstPageOnly()" href="javascript:void(0);">
+          {{"search.filters.filter.show-less" | translate}}
+        </a>
+      }
     </div>
+  </div>
+  @if ((isAvailableForShowSearchText | async) === false) {
     <ds-filter-input-suggestions [suggestions]="(filterSearchResults$ | async)"
-                          [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder' | translate"
-                          [label]="'search.filters.filter.' + filterConfig.name + '.label' | translate"
-                          [action]="currentUrl"
-                          [name]="filterConfig.paramName"
-                          [(ngModel)]="filter"
-                          (submitSuggestion)="onSubmit($event)"
-                          (clickSuggestion)="onClick($event)"
-                          (findSuggestions)="findSuggestions($event)"
-                          *ngIf="(isAvailableForShowSearchText | async) === false"
-                          ngDefaultControl></ds-filter-input-suggestions>
+      [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder' | translate"
+      [label]="'search.filters.filter.' + filterConfig.name + '.label' | translate"
+      [action]="currentUrl"
+      [name]="filterConfig.paramName"
+      [(ngModel)]="filter"
+      (submitSuggestion)="onSubmit($event)"
+      (clickSuggestion)="onClick($event)"
+      (findSuggestions)="findSuggestions($event)"
+    ngDefaultControl></ds-filter-input-suggestions>
+  }
 </div>
diff --git a/src/app/shared/search/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html
index 92e6e0631f..c5abc198a6 100644
--- a/src/app/shared/search/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html
@@ -1,21 +1,29 @@
 <div>
-    <div class="filters py-2">
-        <ds-search-facet-selected-option *ngFor="let value of (selectedAppliedFilters$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
-      <ng-container *ngFor="let page of (facetValues$ | async)">
-        <div [@facetLoad]="animationState">
-            <ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
-        </div>
-        </ng-container>
-        <div class="clearfix toggle-more-filters">
-            <a class="float-start" *ngIf="(isLastPage$ | async) !== true"
-               (click)="showMore()" href="javascript:void(0);">
-              {{"search.filters.filter.show-more" | translate}}
-            </a>
-            <a class="float-end" *ngIf="(currentPage | async) > 1"
-               (click)="showFirstPageOnly()" href="javascript:void(0);">
-              {{"search.filters.filter.show-less" | translate}}
-            </a>
-        </div>
+  <div class="filters py-2">
+    @for (value of (selectedAppliedFilters$ | async); track value) {
+      <ds-search-facet-selected-option [selectedValue]="value" [filterConfig]="filterConfig" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
+    }
+    @for (page of (facetValues$ | async); track page) {
+      <div [@facetLoad]="animationState">
+        @for (value of page.page; track trackUpdate($index, value)) {
+          <ds-search-facet-option [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
+        }
+      </div>
+    }
+    <div class="clearfix toggle-more-filters">
+      @if ((isLastPage$ | async) !== true) {
+        <a class="float-start"
+          (click)="showMore()" href="javascript:void(0);">
+          {{"search.filters.filter.show-more" | translate}}
+        </a>
+      }
+      @if ((currentPage | async) > 1) {
+        <a class="float-end"
+          (click)="showFirstPageOnly()" href="javascript:void(0);">
+          {{"search.filters.filter.show-less" | translate}}
+        </a>
+      }
     </div>
+  </div>
 
 </div>
diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
index 5dd12829eb..75387550b2 100644
--- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html
@@ -1,14 +1,15 @@
-<a *ngIf="isVisible | async" class="d-flex flex-row"
-   [tabIndex]="-1"
-   [routerLink]="[searchLink]"
-   [queryParams]="addQueryParams$ | async"
-   (click)="announceFilter(); filterService.minimizeAll()">
-  <label class="mb-0 d-flex w-100">
-    <input type="checkbox" [checked]="false" class="my-1 align-self-stretch filter-checkbox"/>
-    <span class="w-100 ps-1 break-facet">
-      <span class="float-end badge bg-secondary rounded-pill mt-1 ms-1">{{filterValue.count | dsShortNumber}}</span>
-      {{ 'search.filters.' + filterConfig.name + '.' + filterValue.value | translate: {default: filterValue.value} }}
-    </span>
-  </label>
-
-</a>
+@if (isVisible | async) {
+  <a class="d-flex flex-row"
+    [tabIndex]="-1"
+    [routerLink]="[searchLink]"
+    [queryParams]="addQueryParams$ | async"
+    (click)="announceFilter(); filterService.minimizeAll()">
+    <label class="mb-0 d-flex w-100">
+      <input type="checkbox" [checked]="false" class="my-1 align-self-stretch filter-checkbox"/>
+      <span class="w-100 ps-1 break-facet">
+        <span class="float-end badge bg-secondary rounded-pill mt-1 ms-1">{{filterValue.count | dsShortNumber}}</span>
+        {{ 'search.filters.' + filterConfig.name + '.' + filterValue.value | translate: {default: filterValue.value} }}
+      </span>
+    </label>
+  </a>
+}
diff --git a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html
index 30ab17b7db..595609d5a4 100644
--- a/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html
@@ -1,9 +1,11 @@
-<a *ngIf="isVisible | async" class="d-flex flex-row"
-   (click)="filterService.minimizeAll()"
-   [routerLink]="[searchLink]"
-   [queryParams]="changeQueryParams" queryParamsHandling="merge">
-  <span class="filter-value px-1">{{filterValue.label}}</span>
-  <span class="float-end filter-value-count ms-auto">
-    <span class="badge bg-secondary rounded-pill">{{filterValue.count | dsShortNumber}}</span>
-  </span>
-</a>
+@if (isVisible | async) {
+  <a class="d-flex flex-row"
+    (click)="filterService.minimizeAll()"
+    [routerLink]="[searchLink]"
+    [queryParams]="changeQueryParams" queryParamsHandling="merge">
+    <span class="filter-value px-1">{{filterValue.label}}</span>
+    <span class="float-end filter-value-count ms-auto">
+      <span class="badge bg-secondary rounded-pill">{{filterValue.count | dsShortNumber}}</span>
+    </span>
+  </a>
+}
diff --git a/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
index a4fe34b50e..1774aba0a0 100644
--- a/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
@@ -1,39 +1,50 @@
 <div>
-    <div class="filters py-2">
-        <ds-search-facet-selected-option *ngFor="let value of (selectedAppliedFilters$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
-        <ng-container *ngFor="let page of (facetValues$ | async)">
-          <div [@facetLoad]="animationState">
-            <ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
-          </div>
-        </ng-container>
-        <div class="clearfix toggle-more-filters">
-            <a class="float-start" *ngIf="(isLastPage$ | async) !== true"
-               (click)="showMore()" href="javascript:void(0);">
-              {{"search.filters.filter.show-more" | translate}}
-            </a>
-            <a class="float-end" *ngIf="(currentPage | async) > 1"
-               (click)="showFirstPageOnly()" href="javascript:void(0);">
-              {{"search.filters.filter.show-less" | translate}}
-            </a>
-        </div>
+  <div class="filters py-2">
+    @for (value of (selectedAppliedFilters$ | async); track value) {
+      <ds-search-facet-selected-option [selectedValue]="value" [filterConfig]="filterConfig" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
+    }
+    @for (page of (facetValues$ | async); track page) {
+      <div [@facetLoad]="animationState">
+        @for (value of page.page; track trackUpdate($index, value)) {
+          <ds-search-facet-option [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
+        }
+      </div>
+    }
+    <div class="clearfix toggle-more-filters">
+      @if ((isLastPage$ | async) !== true) {
+        <a class="float-start"
+          (click)="showMore()" href="javascript:void(0);">
+          {{"search.filters.filter.show-more" | translate}}
+        </a>
+      }
+      @if ((currentPage | async) > 1) {
+        <a class="float-end"
+          (click)="showFirstPageOnly()" href="javascript:void(0);">
+          {{"search.filters.filter.show-less" | translate}}
+        </a>
+      }
     </div>
+  </div>
+  @if ((isAvailableForShowSearchText | async) === false) {
     <ds-filter-input-suggestions [suggestions]="(filterSearchResults$ | async)"
-                          [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder' | translate"
-                          [label]="'search.filters.filter.' + filterConfig.name + '.label' | translate"
-                          [action]="currentUrl"
-                          [name]="filterConfig.paramName"
-                          [(ngModel)]="filter"
-                          (submitSuggestion)="onSubmit($event)"
-                          (clickSuggestion)="onClick($event)"
-                          (findSuggestions)="findSuggestions($event)"
-                          *ngIf="(isAvailableForShowSearchText | async) === false"
-                          ngDefaultControl
+      [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder' | translate"
+      [label]="'search.filters.filter.' + filterConfig.name + '.label' | translate"
+      [action]="currentUrl"
+      [name]="filterConfig.paramName"
+      [(ngModel)]="filter"
+      (submitSuggestion)="onSubmit($event)"
+      (clickSuggestion)="onClick($event)"
+      (findSuggestions)="findSuggestions($event)"
+      ngDefaultControl
     ></ds-filter-input-suggestions>
+  }
 </div>
 
-<a *ngIf="vocabularyExists$ | async"
-     href="javascript:void(0);"
-     id="show-{{filterConfig.name}}-tree"
-     (click)="showVocabularyTree()">
-  {{'search.filters.filter.show-tree' | translate: {name: ('search.filters.filter.' + filterConfig.name + '.head' | translate | lowercase )} }}
-</a>
+@if (vocabularyExists$ | async) {
+  <a
+    href="javascript:void(0);"
+    id="show-{{filterConfig.name}}-tree"
+    (click)="showVocabularyTree()">
+    {{'search.filters.filter.show-tree' | translate: {name: ('search.filters.filter.' + filterConfig.name + '.head' | translate | lowercase )} }}
+  </a>
+}
diff --git a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html
index 67c2be4e4f..3e0a80875e 100644
--- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html
@@ -1,51 +1,53 @@
 <div>
-    <div class="filters py-2">
-        <form #form="ngForm" (ngSubmit)="onSubmit()" class="add-filter row"
-              [action]="currentUrl">
-            <div class="col-6 mb-3 mb-0">
-                <label class="form-label">
-                  <span class="fw-bold">
-                    {{'search.filters.filter.' + filterConfig.name + '.min.label' | translate}}
-                  </span>
-                  <input type="text" [(ngModel)]="range[0]" [name]="filterConfig.paramName + '.min'"
-                         class="form-control"
-                         [attr.aria-label]="minLabel"
-                         [placeholder]="minLabel"
-                  />
-                </label>
-            </div>
-            <div class="col-6">
-                <label class="form-label">
-                    <span class="fw-bold">
-                      {{'search.filters.filter.' + filterConfig.name + '.max.label' | translate}}
-                    </span>
-                    <input type="text" [(ngModel)]="range[1]" [name]="filterConfig.paramName + '.max'"
-                           class="form-control"
-                           [attr.aria-label]="maxLabel"
-                           [placeholder]="maxLabel"
-                    />
-                </label>
-            </div>
-            <button class="sr-only" type="submit">
-                {{'search.filters.search.submit' | translate}}
-            </button>
-        </form>
+  <div class="filters py-2">
+    <form #form="ngForm" (ngSubmit)="onSubmit()" class="add-filter row"
+      [action]="currentUrl">
+      <div class="col-6 mb-3 mb-0">
+        <label class="form-label">
+          <span class="fw-bold">
+            {{'search.filters.filter.' + filterConfig.name + '.min.label' | translate}}
+          </span>
+          <input type="text" [(ngModel)]="range[0]" [name]="filterConfig.paramName + '.min'"
+            class="form-control"
+            [attr.aria-label]="minLabel"
+            [placeholder]="minLabel"
+            />
+        </label>
+      </div>
+      <div class="col-6">
+        <label class="form-label">
+          <span class="fw-bold">
+            {{'search.filters.filter.' + filterConfig.name + '.max.label' | translate}}
+          </span>
+          <input type="text" [(ngModel)]="range[1]" [name]="filterConfig.paramName + '.max'"
+            class="form-control"
+            [attr.aria-label]="maxLabel"
+            [placeholder]="maxLabel"
+            />
+        </label>
+      </div>
+      <button class="sr-only" type="submit">
+        {{'search.filters.search.submit' | translate}}
+      </button>
+    </form>
 
-        <ng-container *ngIf="shouldShowSlider()">
-            <nouislider [connect]="true" [config]="config" [min]="min" [max]="max" [step]="1"
-                        [dsDebounce]="250"
-                        (change)="onSliderChange($event)"
-                        (keydown)="startKeyboardControl()" (keyup)="stopKeyboardControl()"
-                        [(ngModel)]="range" ngDefaultControl>
-            </nouislider>
-        </ng-container>
-      <ng-container *ngFor="let page of (facetValues$ | async)">
-        <div [@facetLoad]="animationState">
-          <ds-search-facet-range-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-range-option>
-          </div>
-        </ng-container>
-        <button (click)="onSubmit()" class="btn btn-primary">
-          {{'search.filters.search.submit' | translate}}
-        </button>
-    </div>
+    @if (shouldShowSlider()) {
+      <nouislider [connect]="true" [config]="config" [min]="min" [max]="max" [step]="1"
+        [dsDebounce]="250"
+        (change)="onSliderChange($event)"
+        (keydown)="startKeyboardControl()" (keyup)="stopKeyboardControl()"
+        [(ngModel)]="range" ngDefaultControl>
+      </nouislider>
+    }
+    @for (page of (facetValues$ | async); track page) {
+      <div [@facetLoad]="animationState">
+        @for (value of page.page; track trackUpdate($index, value)) {
+          <ds-search-facet-range-option [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-range-option>
+        }
+      </div>
+    }
+    <button (click)="onSubmit()" class="btn btn-primary">
+      {{'search.filters.search.submit' | translate}}
+    </button>
+  </div>
 </div>
diff --git a/src/app/shared/search/search-filters/search-filter/search-text-filter/search-text-filter.component.html b/src/app/shared/search/search-filters/search-filter/search-text-filter/search-text-filter.component.html
index 776680c2cd..b25a602996 100644
--- a/src/app/shared/search/search-filters/search-filter/search-text-filter/search-text-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-text-filter/search-text-filter.component.html
@@ -1,31 +1,40 @@
 <div>
-    <div class="filters py-2">
-        <ds-search-facet-selected-option *ngFor="let value of (selectedAppliedFilters$ | async)" [selectedValue]="value" [filterConfig]="filterConfig" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
-        <ng-container *ngFor="let page of (facetValues$ | async)">
-          <div [@facetLoad]="animationState">
-                  <ds-search-facet-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
-          </div>
-        </ng-container>
-        <div class="clearfix toggle-more-filters">
-            <a class="float-start" *ngIf="(isLastPage$ | async) !== true"
-               (click)="showMore()" href="javascript:void(0);">
-              {{"search.filters.filter.show-more" | translate}}
-            </a>
-            <a class="float-end" *ngIf="(currentPage | async) > 1"
-               (click)="showFirstPageOnly()" href="javascript:void(0);">
-              {{"search.filters.filter.show-less" | translate}}
-            </a>
-        </div>
+  <div class="filters py-2">
+    @for (value of (selectedAppliedFilters$ | async); track value) {
+      <ds-search-facet-selected-option [selectedValue]="value" [filterConfig]="filterConfig" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-selected-option>
+    }
+    @for (page of (facetValues$ | async); track page) {
+      <div [@facetLoad]="animationState">
+        @for (value of page.page; track trackUpdate($index, value)) {
+          <ds-search-facet-option [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-option>
+        }
+      </div>
+    }
+    <div class="clearfix toggle-more-filters">
+      @if ((isLastPage$ | async) !== true) {
+        <a class="float-start"
+          (click)="showMore()" href="javascript:void(0);">
+          {{"search.filters.filter.show-more" | translate}}
+        </a>
+      }
+      @if ((currentPage | async) > 1) {
+        <a class="float-end"
+          (click)="showFirstPageOnly()" href="javascript:void(0);">
+          {{"search.filters.filter.show-less" | translate}}
+        </a>
+      }
     </div>
+  </div>
+  @if ((isAvailableForShowSearchText | async) === false) {
     <ds-filter-input-suggestions [suggestions]="(filterSearchResults$ | async)"
-                          [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder' | translate"
-                          [label]="'search.filters.filter.' + filterConfig.name + '.label' | translate"
-                          [action]="currentUrl"
-                          [name]="filterConfig.paramName"
-                          [(ngModel)]="filter"
-                          (submitSuggestion)="onSubmit($event)"
-                          (clickSuggestion)="onClick($event)"
-                          (findSuggestions)="findSuggestions($event)"
-                          *ngIf="(isAvailableForShowSearchText | async) === false"
-                          ngDefaultControl></ds-filter-input-suggestions>
+      [placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder' | translate"
+      [label]="'search.filters.filter.' + filterConfig.name + '.label' | translate"
+      [action]="currentUrl"
+      [name]="filterConfig.paramName"
+      [(ngModel)]="filter"
+      (submitSuggestion)="onSubmit($event)"
+      (clickSuggestion)="onClick($event)"
+      (findSuggestions)="findSuggestions($event)"
+    ngDefaultControl></ds-filter-input-suggestions>
+  }
 </div>
diff --git a/src/app/shared/search/search-labels/search-label-range/search-label-range.component.html b/src/app/shared/search/search-labels/search-label-range/search-label-range.component.html
index ea8fbc392b..1eb83e071b 100644
--- a/src/app/shared/search/search-labels/search-label-range/search-label-range.component.html
+++ b/src/app/shared/search/search-labels/search-label-range/search-label-range.component.html
@@ -1,22 +1,26 @@
-<a *ngIf="min !== '*'"
-   [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.f.' + appliedFilter.filter + '.min') | translate, value: min }"
-   [routerLink]="searchLink"
-   [queryParams]="(removeParametersMin$ | async)"
-   (click)="searchFilterService.minimizeAll()"
-   class="badge bg-primary">
-  <span class="d-flex">
-    <span class="flex-grow-1 text-left">{{('search.filters.applied.f.' + appliedFilter.filter + '.min') | translate}}: {{ min }}</span>
-    <span class="ps-1" aria-hidden="true">×</span>
-  </span>
-</a>
-<a *ngIf="max !== '*'"
-   [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.f.' + appliedFilter.filter + '.max') | translate, value: max }"
-   [routerLink]="searchLink"
-   [queryParams]="(removeParametersMax$ | async)"
-   (click)="searchFilterService.minimizeAll()"
-   class="badge bg-primary">
-  <span class="d-flex">
-    <span class="flex-grow-1 text-left">{{('search.filters.applied.f.' + appliedFilter.filter + '.max') | translate}}: {{ max }}</span>
-    <span class="ps-1" aria-hidden="true">×</span>
-  </span>
-</a>
+@if (min !== '*') {
+  <a
+    [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.f.' + appliedFilter.filter + '.min') | translate, value: min }"
+    [routerLink]="searchLink"
+    [queryParams]="(removeParametersMin$ | async)"
+    (click)="searchFilterService.minimizeAll()"
+    class="badge bg-primary">
+    <span class="d-flex">
+      <span class="flex-grow-1 text-left">{{('search.filters.applied.f.' + appliedFilter.filter + '.min') | translate}}: {{ min }}</span>
+      <span class="ps-1" aria-hidden="true">×</span>
+    </span>
+  </a>
+}
+@if (max !== '*') {
+  <a
+    [attr.aria-label]="'search.filters.remove' | translate:{ type: ('search.filters.applied.f.' + appliedFilter.filter + '.max') | translate, value: max }"
+    [routerLink]="searchLink"
+    [queryParams]="(removeParametersMax$ | async)"
+    (click)="searchFilterService.minimizeAll()"
+    class="badge bg-primary">
+    <span class="d-flex">
+      <span class="flex-grow-1 text-left">{{('search.filters.applied.f.' + appliedFilter.filter + '.max') | translate}}: {{ max }}</span>
+      <span class="ps-1" aria-hidden="true">×</span>
+    </span>
+  </a>
+}
diff --git a/src/app/shared/search/search-results/search-results.component.ts b/src/app/shared/search/search-results/search-results.component.ts
index e8f66d01f9..421f361bc0 100644
--- a/src/app/shared/search/search-results/search-results.component.ts
+++ b/src/app/shared/search/search-results/search-results.component.ts
@@ -1,7 +1,4 @@
-import {
-  AsyncPipe,
-  NgIf,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
   Component,
   EventEmitter,
@@ -60,7 +57,6 @@ export interface SelectionConfig {
   imports: [
     AsyncPipe,
     ErrorComponent,
-    NgIf,
     NgxSkeletonLoaderModule,
     ObjectCollectionComponent,
     RouterLink,
diff --git a/src/app/shared/search/search-sidebar/search-sidebar.component.html b/src/app/shared/search/search-sidebar/search-sidebar.component.html
index c52d8b1d4a..9c9e4a9001 100644
--- a/src/app/shared/search/search-sidebar/search-sidebar.component.html
+++ b/src/app/shared/search/search-sidebar/search-sidebar.component.html
@@ -1,38 +1,46 @@
 <div>
-    <div id="sidebar-options" class="d-block d-md-none search-controls clearfix">
-        <small class="results">{{resultCount}} {{"search.sidebar.results" | translate}}</small>
-        <button (click)="toggleSidebar.emit()"
-                [attr.aria-label]="'search.sidebar.close' | translate"
-                aria-controls="search-content"
-                class="btn btn-outline-primary float-end close-sidebar"><i
-                class="fas fa-arrow-right"></i> {{'search.sidebar.close' | translate}}
-        </button>
-    </div>
-    <div id="search-sidebar-content">
-        <ds-view-mode-switch *ngIf="showViewModes" class="d-none d-md-block"
-                             [viewModeList]="viewModeList"
-                             (changeViewMode)="changeViewMode.emit($event)"></ds-view-mode-switch>
-        <div class="sidebar-content">
-            <ds-search-switch-configuration *ngIf="configurationList"
-                                            [configurationList]="configurationList"
-                                            [defaultConfiguration]="configuration"
-                                            [inPlaceSearch]="inPlaceSearch"
-                                            (changeConfiguration)="changeConfiguration.emit($event)"></ds-search-switch-configuration>
-            <ds-search-filters [currentScope]="currentScope"
-                               [currentConfiguration]="configuration"
-                               [filters]="filters"
-                               [refreshFilters]="refreshFilters"
-                               [inPlaceSearch]="inPlaceSearch">
-            </ds-search-filters>
-            <ds-advanced-search *ngIf="inPlaceSearch && (this.showAdvancedSearch$ | async) === true"
-                                [configuration]="configuration"
-                                [filtersConfig]="(filters | async)?.payload"
-                                [scope]="currentScope">
-            </ds-advanced-search>
-            <ds-search-settings *ngIf="inPlaceSearch"
-                                [currentSortOption]="currentSortOption"
-                                [sortOptionsList]="sortOptionsList">
-            </ds-search-settings>
-        </div>
-    </div>
+  <div id="sidebar-options" class="d-block d-md-none search-controls clearfix">
+    <small class="results">{{resultCount}} {{"search.sidebar.results" | translate}}</small>
+    <button (click)="toggleSidebar.emit()"
+      [attr.aria-label]="'search.sidebar.close' | translate"
+      aria-controls="search-content"
+      class="btn btn-outline-primary float-end close-sidebar"><i
+    class="fas fa-arrow-right"></i> {{'search.sidebar.close' | translate}}
+  </button>
+</div>
+<div id="search-sidebar-content">
+  @if (showViewModes) {
+    <ds-view-mode-switch class="d-none d-md-block"
+      [viewModeList]="viewModeList"
+    (changeViewMode)="changeViewMode.emit($event)"></ds-view-mode-switch>
+  }
+  <div class="sidebar-content">
+    @if (configurationList) {
+      <ds-search-switch-configuration
+        [configurationList]="configurationList"
+        [defaultConfiguration]="configuration"
+        [inPlaceSearch]="inPlaceSearch"
+      (changeConfiguration)="changeConfiguration.emit($event)"></ds-search-switch-configuration>
+    }
+    <ds-search-filters [currentScope]="currentScope"
+      [currentConfiguration]="configuration"
+      [filters]="filters"
+      [refreshFilters]="refreshFilters"
+      [inPlaceSearch]="inPlaceSearch">
+    </ds-search-filters>
+    @if (inPlaceSearch && (this.showAdvancedSearch$ | async) === true) {
+      <ds-advanced-search
+        [configuration]="configuration"
+        [filtersConfig]="(filters | async)?.payload"
+        [scope]="currentScope">
+      </ds-advanced-search>
+    }
+    @if (inPlaceSearch) {
+      <ds-search-settings
+        [currentSortOption]="currentSortOption"
+        [sortOptionsList]="sortOptionsList">
+      </ds-search-settings>
+    }
+  </div>
+</div>
 </div>
diff --git a/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html b/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html
index 87546b6c76..e4ac701043 100644
--- a/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html
+++ b/src/app/shared/search/search-switch-configuration/search-switch-configuration.component.html
@@ -1,14 +1,16 @@
-<div *ngIf="configurationList?.length > 1" class="search-switch-configuration">
-  <h3 id="configuration-switch">{{ 'search.switch-configuration.title' | translate}}</h3>
-
-  <select class="form-select"
-          aria-labelledby="configuration-switch"
-          [compareWith]="compare"
-          [(ngModel)]="selectedOption"
-          (change)="onSelect()">
-    <option *ngFor="let option of configurationList;" [ngValue]="option">
-      {{option.label | translate}}
-    </option>
-  </select>
-
-</div>
+@if (configurationList?.length > 1) {
+  <div class="search-switch-configuration">
+    <h3 id="configuration-switch">{{ 'search.switch-configuration.title' | translate}}</h3>
+    <select class="form-select"
+      aria-labelledby="configuration-switch"
+      [compareWith]="compare"
+      [(ngModel)]="selectedOption"
+      (change)="onSelect()">
+      @for (option of configurationList; track option) {
+        <option [ngValue]="option">
+          {{option.label | translate}}
+        </option>
+      }
+    </select>
+  </div>
+}
diff --git a/src/app/shared/search/search.component.html b/src/app/shared/search/search.component.html
index 07b9ea5cf2..e0f778e55d 100644
--- a/src/app/shared/search/search.component.html
+++ b/src/app/shared/search/search.component.html
@@ -1,106 +1,122 @@
-<div class="container" *ngIf="searchEnabled && (isXsOrSm$ | async)">
+@if (searchEnabled && (isXsOrSm$ | async)) {
+  <div class="container">
     <div class="row">
-        <div class="col-12">
-            <ng-template *ngTemplateOutlet="searchForm"></ng-template>
-        </div>
+      <div class="col-12">
+        <ng-template *ngTemplateOutlet="searchForm"></ng-template>
+      </div>
     </div>
-</div>
+  </div>
+}
 
-<div *ngIf="!showSidebar && (initialized$ | async)">
-  <ng-template *ngTemplateOutlet="searchContent"></ng-template>
-</div>
+@if (!showSidebar && (initialized$ | async)) {
+  <div>
+    <ng-template *ngTemplateOutlet="searchContent"></ng-template>
+  </div>
+}
 
-<ds-page-with-sidebar *ngIf="showSidebar && (initialized$ | async)" [id]="'search-page'" [sideBarWidth]="sideBarWidth"
+@if (showSidebar && (initialized$ | async)) {
+  <ds-page-with-sidebar [id]="'search-page'" [sideBarWidth]="sideBarWidth"
     [sidebarContent]="sidebarContent">
     <ng-template *ngTemplateOutlet="searchContent"></ng-template>
-</ds-page-with-sidebar>
+  </ds-page-with-sidebar>
+}
 
 <ng-template #searchContent>
-    <div class="row">
-        <div class="col-12" *ngIf="(isXsOrSm$ | async) !== true">
-            <ng-container *ngIf="searchEnabled">
-                <ng-template *ngTemplateOutlet="searchForm"></ng-template>
-            </ng-container>
-            <ng-content select="[additionalSearchOptions]"></ng-content>
-        </div>
-        <div id="search-content" class="col-12">
-            <div class="d-block d-md-none search-controls clearfix">
-                <ds-view-mode-switch *ngIf="inPlaceSearch && showViewModes" [viewModeList]="viewModeList"
-                    [inPlaceSearch]="inPlaceSearch"></ds-view-mode-switch>
-                <button (click)="openSidebar()" aria-controls="#search-body"
-                        class="btn btn-outline-primary float-end open-sidebar"><i
-                        class="fas fa-sliders"></i> {{"search.sidebar.open"
-                       | translate}}
-                </button>
-            </div>
-            <ng-content select="[searchContentTop]"></ng-content>
-            <ds-search-results *ngIf="inPlaceSearch"
-                                      [searchResults]="resultsRD$ | async"
-                                      [searchConfig]="searchOptions$ | async"
-                                      [configuration]="(currentConfiguration$ | async)"
-                                      [disableHeader]="!searchEnabled"
-                                      [linkType]="linkType"
-                                      [context]="(currentContext$ | async)"
-                                      [selectable]="selectable"
-                                      [selectionConfig]="selectionConfig"
-                                      [showCsvExport]="showCsvExport"
-                                      [showThumbnails]="showThumbnails"
-                                      (contentChange)="onContentChange($event)"
-                                      (deselectObject)="deselectObject.emit($event)"
-                                      (selectObject)="selectObject.emit($event)"></ds-search-results>
-        </div>
+  <div class="row">
+    @if ((isXsOrSm$ | async) !== true) {
+      <div class="col-12">
+        @if (searchEnabled) {
+          <ng-template *ngTemplateOutlet="searchForm"></ng-template>
+        }
+        <ng-content select="[additionalSearchOptions]"></ng-content>
+      </div>
+    }
+    <div id="search-content" class="col-12">
+      <div class="d-block d-md-none search-controls clearfix">
+        @if (inPlaceSearch && showViewModes) {
+          <ds-view-mode-switch [viewModeList]="viewModeList"
+          [inPlaceSearch]="inPlaceSearch"></ds-view-mode-switch>
+        }
+        <button (click)="openSidebar()" aria-controls="#search-body"
+          class="btn btn-outline-primary float-end open-sidebar"><i
+        class="fas fa-sliders"></i> {{"search.sidebar.open"
+        | translate}}
+      </button>
     </div>
+    <ng-content select="[searchContentTop]"></ng-content>
+    @if (inPlaceSearch) {
+      <ds-search-results
+        [searchResults]="resultsRD$ | async"
+        [searchConfig]="searchOptions$ | async"
+        [configuration]="(currentConfiguration$ | async)"
+        [disableHeader]="!searchEnabled"
+        [linkType]="linkType"
+        [context]="(currentContext$ | async)"
+        [selectable]="selectable"
+        [selectionConfig]="selectionConfig"
+        [showCsvExport]="showCsvExport"
+        [showThumbnails]="showThumbnails"
+        (contentChange)="onContentChange($event)"
+        (deselectObject)="deselectObject.emit($event)"
+      (selectObject)="selectObject.emit($event)"></ds-search-results>
+    }
+  </div>
+</div>
 </ng-template>
 
 <ng-template #sidebarContent>
-    <ds-search-sidebar id="search-sidebar" *ngIf="(isXsOrSm$ | async) !== true"
-                       [configurationList]="configurationList"
-                       [configuration]="(currentConfiguration$ | async)"
-                       [currentScope]="(currentScope$ | async)"
-                       [filters]="filtersRD$.asObservable()"
-                       [refreshFilters]="refreshFilters"
-                       [resultCount]="(resultsRD$ | async)?.payload?.totalElements"
-                       [searchOptions]="(searchOptions$ | async)"
-                       [sortOptionsList]="(sortOptionsList$ | async)"
-                       [currentSortOption]="(currentSortOptions$ | async)"
-                       [inPlaceSearch]="inPlaceSearch"
-                       [viewModeList]="viewModeList"
-                       [showViewModes]="showViewModes"
-                       (changeConfiguration)="changeContext($event.context)"
-                       (changeViewMode)="changeViewMode()"></ds-search-sidebar>
-    <ds-search-sidebar id="search-sidebar-sm" *ngIf="(isXsOrSm$ | async)"
-                       [configurationList]="configurationList"
-                       [configuration]="(currentConfiguration$ | async)"
-                       [currentScope]="(currentScope$ | async)"
-                       [filters]="filtersRD$.asObservable()"
-                       [refreshFilters]="refreshFilters"
-                       [resultCount]="(resultsRD$ | async)?.payload?.totalElements"
-                       [searchOptions]="(searchOptions$ | async)"
-                       [sortOptionsList]="(sortOptionsList$ | async)"
-                       [currentSortOption]="(currentSortOptions$ | async)"
-                       [inPlaceSearch]="inPlaceSearch"
-                       [viewModeList]="viewModeList"
-                       [showViewModes]="showViewModes"
-                       (toggleSidebar)="closeSidebar()"
-                       (changeConfiguration)="changeContext($event.context)"
-                       (changeViewMode)="changeViewMode()">
+  @if ((isXsOrSm$ | async) !== true) {
+    <ds-search-sidebar id="search-sidebar"
+      [configurationList]="configurationList"
+      [configuration]="(currentConfiguration$ | async)"
+      [currentScope]="(currentScope$ | async)"
+      [filters]="filtersRD$.asObservable()"
+      [refreshFilters]="refreshFilters"
+      [resultCount]="(resultsRD$ | async)?.payload?.totalElements"
+      [searchOptions]="(searchOptions$ | async)"
+      [sortOptionsList]="(sortOptionsList$ | async)"
+      [currentSortOption]="(currentSortOptions$ | async)"
+      [inPlaceSearch]="inPlaceSearch"
+      [viewModeList]="viewModeList"
+      [showViewModes]="showViewModes"
+      (changeConfiguration)="changeContext($event.context)"
+    (changeViewMode)="changeViewMode()"></ds-search-sidebar>
+  }
+  @if ((isXsOrSm$ | async)) {
+    <ds-search-sidebar id="search-sidebar-sm"
+      [configurationList]="configurationList"
+      [configuration]="(currentConfiguration$ | async)"
+      [currentScope]="(currentScope$ | async)"
+      [filters]="filtersRD$.asObservable()"
+      [refreshFilters]="refreshFilters"
+      [resultCount]="(resultsRD$ | async)?.payload?.totalElements"
+      [searchOptions]="(searchOptions$ | async)"
+      [sortOptionsList]="(sortOptionsList$ | async)"
+      [currentSortOption]="(currentSortOptions$ | async)"
+      [inPlaceSearch]="inPlaceSearch"
+      [viewModeList]="viewModeList"
+      [showViewModes]="showViewModes"
+      (toggleSidebar)="closeSidebar()"
+      (changeConfiguration)="changeContext($event.context)"
+      (changeViewMode)="changeViewMode()">
     </ds-search-sidebar>
+  }
 </ng-template>
 
 <ng-template #searchForm>
-    <ds-search-form id="search-form"
-                    [query]="(searchOptions$ | async)?.query"
-                    [scope]="(searchOptions$ | async)?.scope"
-                    [hideScopeInUrl]="hideScopeInUrl"
-                    [currentUrl]="searchLink"
-                    [showScopeSelector]="showScopeSelector"
-                    [inPlaceSearch]="inPlaceSearch"
-                    [searchPlaceholder]="searchFormPlaceholder | translate">
-    </ds-search-form>
-    <div class="row mb-3 mb-md-1">
-        <div class="labels col-12">
-            <ds-search-labels [inPlaceSearch]="inPlaceSearch">
-            </ds-search-labels>
-        </div>
+  <ds-search-form id="search-form"
+    [query]="(searchOptions$ | async)?.query"
+    [scope]="(searchOptions$ | async)?.scope"
+    [hideScopeInUrl]="hideScopeInUrl"
+    [currentUrl]="searchLink"
+    [showScopeSelector]="showScopeSelector"
+    [inPlaceSearch]="inPlaceSearch"
+    [searchPlaceholder]="searchFormPlaceholder | translate">
+  </ds-search-form>
+  <div class="row mb-3 mb-md-1">
+    <div class="labels col-12">
+      <ds-search-labels [inPlaceSearch]="inPlaceSearch">
+      </ds-search-labels>
     </div>
+  </div>
 </ng-template>
diff --git a/src/app/shared/sidebar/page-with-sidebar.component.html b/src/app/shared/sidebar/page-with-sidebar.component.html
index c558d97f1f..24d7a2f038 100644
--- a/src/app/shared/sidebar/page-with-sidebar.component.html
+++ b/src/app/shared/sidebar/page-with-sidebar.component.html
@@ -1,15 +1,17 @@
 <div class="container">
   <div class="row">
     <div class="row-with-sidebar row-offcanvas row-offcanvas-left px-0"
-         [@pushInOut]="(isSidebarCollapsed$ | async) ? 'collapsed' : 'expanded'">
-      <div *ngIf="sideBarWidth > 0" id="{{id}}-sidebar-content"
-           [class.invisible]="(isSidebarCollapsed$ | async) === true && (isXsOrSm$ | async) === true"
-           class="col-12 col-md-{{sideBarWidth}} sidebar-content {{sidebarClasses | async}}">
-        <ng-container *ngTemplateOutlet="sidebarContent"></ng-container>
-      </div>
+      [@pushInOut]="(isSidebarCollapsed$ | async) ? 'collapsed' : 'expanded'">
+      @if (sideBarWidth > 0) {
+        <div id="{{id}}-sidebar-content"
+          [class.invisible]="(isSidebarCollapsed$ | async) === true && (isXsOrSm$ | async) === true"
+          class="col-12 col-md-{{sideBarWidth}} sidebar-content {{sidebarClasses | async}}">
+          <ng-container *ngTemplateOutlet="sidebarContent"></ng-container>
+        </div>
+      }
       <div class="col-12 col-md-{{12 - sideBarWidth}}"
-           [class.px-0]="sideBarWidth === 0"
-           [class.invisible]="(isSidebarCollapsed$ | async) !== true && (isXsOrSm$ | async) === true">
+        [class.px-0]="sideBarWidth === 0"
+        [class.invisible]="(isSidebarCollapsed$ | async) !== true && (isXsOrSm$ | async) === true">
         <ng-content></ng-content>
       </div>
     </div>
diff --git a/src/app/shared/starts-with/date/starts-with-date.component.html b/src/app/shared/starts-with/date/starts-with-date.component.html
index fcc0986003..cd07a898c0 100644
--- a/src/app/shared/starts-with/date/starts-with-date.component.html
+++ b/src/app/shared/starts-with/date/starts-with-date.component.html
@@ -1,35 +1,39 @@
 <form class="w-100" [formGroup]="formData" (ngSubmit)="submitForm(formData.value)">
-    <div class="row">
+  <div class="row">
     <span class="col-12 fw-bold mb-1">
       {{ 'browse.startsWith.jump' | translate }}
     </span>
-        <div class="col-6 col-md-2">
-            <select id="year-select" class="form-select" (change)="setStartsWithYearEvent($event)" [attr.aria-label]="'browse.startsWith.choose_year.label' |translate">
-                <option [value]="-1" [selected]="!startsWithYear">
-                    {{ 'browse.startsWith.choose_year' | translate }}
-                </option>
-                <option *ngFor="let option of startsWithOptions"
-                        [value]="option"
-                        [selected]="option === startsWithYear ? 'selected': null">
-                    {{ option }}
-                </option>
-            </select>
-        </div>
-        <div class="col-6 col-md-2">
-            <select id="month-select" class="form-select" (change)="setStartsWithMonthEvent($event)" [attr.aria-label]="'browse.startsWith.months.none.label' |translate">
-                <option *ngFor="let option of monthOptions"
-                        [value]="option"
-                        [selected]="option === startsWithMonth ? 'selected': null">
-                    {{ 'browse.startsWith.months.' + option | translate }}
-                </option>
-            </select>
-        </div>
-        <div class="col-12 col-md-6">
-            <div class="mb-3 input-group pt-1 pt-md-0">
-                <input class="form-control" placeholder="{{'browse.startsWith.type_date' | translate}}" [attr.aria-label]="'browse.startsWith.type_date.label' |translate" type="text" name="startsWith"
-                       formControlName="startsWith" [value]="getStartsWith() ? getStartsWith() : ''"/>
-                <button class="btn btn-primary" type="submit"><i class="fas fa-book-open"></i> {{ 'browse.startsWith.submit' | translate }}</button>
-            </div>
-        </div>
+    <div class="col-6 col-md-2">
+      <select id="year-select" class="form-select" (change)="setStartsWithYearEvent($event)" [attr.aria-label]="'browse.startsWith.choose_year.label' |translate">
+        <option [value]="-1" [selected]="!startsWithYear">
+          {{ 'browse.startsWith.choose_year' | translate }}
+        </option>
+        @for (option of startsWithOptions; track option) {
+          <option
+            [value]="option"
+            [selected]="option === startsWithYear ? 'selected': null">
+            {{ option }}
+          </option>
+        }
+      </select>
     </div>
+    <div class="col-6 col-md-2">
+      <select id="month-select" class="form-select" (change)="setStartsWithMonthEvent($event)" [attr.aria-label]="'browse.startsWith.months.none.label' |translate">
+        @for (option of monthOptions; track option) {
+          <option
+            [value]="option"
+            [selected]="option === startsWithMonth ? 'selected': null">
+            {{ 'browse.startsWith.months.' + option | translate }}
+          </option>
+        }
+      </select>
+    </div>
+    <div class="col-12 col-md-6">
+      <div class="mb-3 input-group pt-1 pt-md-0">
+        <input class="form-control" placeholder="{{'browse.startsWith.type_date' | translate}}" [attr.aria-label]="'browse.startsWith.type_date.label' |translate" type="text" name="startsWith"
+          formControlName="startsWith" [value]="getStartsWith() ? getStartsWith() : ''"/>
+        <button class="btn btn-primary" type="submit"><i class="fas fa-book-open"></i> {{ 'browse.startsWith.submit' | translate }}</button>
+      </div>
+    </div>
+  </div>
 </form>
diff --git a/src/app/shared/subscriptions/subscription-modal/subscription-modal.component.html b/src/app/shared/subscriptions/subscription-modal/subscription-modal.component.html
index 926ae08c2f..0037f44092 100644
--- a/src/app/shared/subscriptions/subscription-modal/subscription-modal.component.html
+++ b/src/app/shared/subscriptions/subscription-modal/subscription-modal.component.html
@@ -1,45 +1,63 @@
-<form *ngIf="subscriptionForm" [formGroup]="subscriptionForm" (ngSubmit)="submit()" data-test="subscription-form">
-  <div class="modal-header">
-    <h4 class="modal-title">{{'subscriptions.modal.title' | translate}}</h4>
-    <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.close()">
-    </button>
-  </div>
-  <div class="modal-body">
-    <p class="mb-3"><strong>{{ dsoNameService.getName(dso) }}</strong>
-      <span *ngIf="!!dso" class="float-end"><ds-type-badge *ngIf="!!dso" [object]="dso"></ds-type-badge></span>
+@if (subscriptionForm) {
+  <form [formGroup]="subscriptionForm" (ngSubmit)="submit()" data-test="subscription-form">
+    <div class="modal-header">
+      <h4 class="modal-title">{{'subscriptions.modal.title' | translate}}</h4>
+      <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.close()">
+      </button>
+    </div>
+    <div class="modal-body">
+      <p class="mb-3"><strong>{{ dsoNameService.getName(dso) }}</strong>
+      @if (!!dso) {
+        <span class="float-end">@if (!!dso) {
+          <ds-type-badge [object]="dso"></ds-type-badge>
+        }</span>
+      }
     </p>
     <div>
-      <fieldset *ngFor="let subscriptionType of subscriptionForm?.controls | keyvalue" formGroupName="{{subscriptionType.key}}" class="mb-3 row">
-        <legend class="col-md-4 col-form-label float-md-left pt-0">
-          {{ 'subscriptions.modal.new-subscription-form.type.' + subscriptionType.key | translate }}:
-        </legend>
-        <div class="col-md-8">
-          <input type="hidden" formControlName="subscriptionId" [value]="subscriptionType?.value?.controls['subscriptionId'].value" >
-          <div class="form-check" formGroupName="frequencies" *ngFor="let frequency of frequencyDefaultValues">
-            <input type="checkbox" [id]="'checkbox-' + frequency" class="form-check-input" [formControlName]="frequency"/>
-            <label class="form-check-label"
-                   [for]="'checkbox-' + frequency">{{ 'subscriptions.modal.new-subscription-form.frequency.' + frequency | translate }}</label>
+      @for (subscriptionType of subscriptionForm?.controls | keyvalue; track subscriptionType) {
+        <fieldset formGroupName="{{subscriptionType.key}}" class="mb-3 row">
+          <legend class="col-md-4 col-form-label float-md-left pt-0">
+            {{ 'subscriptions.modal.new-subscription-form.type.' + subscriptionType.key | translate }}:
+          </legend>
+          <div class="col-md-8">
+            <input type="hidden" formControlName="subscriptionId" [value]="subscriptionType?.value?.controls['subscriptionId'].value" >
+            @for (frequency of frequencyDefaultValues; track frequency) {
+              <div class="form-check" formGroupName="frequencies">
+                <input type="checkbox" [id]="'checkbox-' + frequency" class="form-check-input" [formControlName]="frequency"/>
+                <label class="form-check-label"
+                [for]="'checkbox-' + frequency">{{ 'subscriptions.modal.new-subscription-form.frequency.' + frequency | translate }}</label>
+              </div>
+            }
           </div>
-        </div>
-        <ds-alert *ngIf="!!submitted && subscriptionType?.value?.controls['frequencies'].errors?.required" [type]="'alert-danger'">
-          {{ 'context-menu.actions.subscription.frequency.required' | translate }}
-        </ds-alert>
-      </fieldset>
+          @if (!!submitted && subscriptionType?.value?.controls['frequencies'].errors?.required) {
+            <ds-alert [type]="'alert-danger'">
+              {{ 'context-menu.actions.subscription.frequency.required' | translate }}
+            </ds-alert>
+          }
+        </fieldset>
+      }
     </div>
-    <p class="text-muted" *ngIf="(showDeleteInfo$ | async)">{{'subscriptions.modal.delete-info' | translate}}</p>
+    @if ((showDeleteInfo$ | async)) {
+      <p class="text-muted">{{'subscriptions.modal.delete-info' | translate}}</p>
+    }
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-outline-secondary"
-            (click)="activeModal.close()">
+      (click)="activeModal.close()">
       {{'subscriptions.modal.close' | translate}}
     </button>
     <button type="submit" class="btn btn-success" [dsBtnDisabled]="(processing$ | async) || !isValid">
-        <span *ngIf="(processing$ | async)">
+      @if ((processing$ | async)) {
+        <span>
           <i class='fas fa-circle-notch fa-spin'></i> {{'subscriptions.modal.new-subscription-form.processing' | translate}}
         </span>
-      <span *ngIf="(processing$ | async) !== true">
-        {{'subscriptions.modal.new-subscription-form.submit' | translate}}
-      </span>
+      }
+      @if ((processing$ | async) !== true) {
+        <span>
+          {{'subscriptions.modal.new-subscription-form.submit' | translate}}
+        </span>
+      }
     </button>
   </div>
 </form>
+}
diff --git a/src/app/shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html b/src/app/shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html
index 95b00acdbd..79d3b2ca90 100644
--- a/src/app/shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html
+++ b/src/app/shared/upload/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html
@@ -1,27 +1,31 @@
 <div ng2FileDrop
-     class="ds-document-drop-zone position-fixed h-100 w-100"
-     [class.ds-document-drop-zone-active]="(isOverDocumentDropZone | async)"
-     [uploader]="uploader"
-     (onFileDrop)="setFile($event)"
-     (fileOver)="fileOverDocument($event)">
+  class="ds-document-drop-zone position-fixed h-100 w-100"
+  [class.ds-document-drop-zone-active]="(isOverDocumentDropZone | async)"
+  [uploader]="uploader"
+  (onFileDrop)="setFile($event)"
+  (fileOver)="fileOverDocument($event)">
 </div>
-<div *ngIf="(isOverDocumentDropZone | async)"
-     class="ds-document-drop-zone-inner position-fixed h-100 w-100 p-2">
+@if ((isOverDocumentDropZone | async)) {
   <div
-    class="ds-document-drop-zone-inner-content position-relative d-flex flex-column justify-content-center text-center h-100 w-100">
-    <p class="text-primary">{{ dropMessageLabel | translate}}</p>
+    class="ds-document-drop-zone-inner position-fixed h-100 w-100 p-2">
+    <div
+      class="ds-document-drop-zone-inner-content position-relative d-flex flex-column justify-content-center text-center h-100 w-100">
+      <p class="text-primary">{{ dropMessageLabel | translate}}</p>
+    </div>
   </div>
-</div>
+}
 <div class="well ds-base-drop-zone mt-1 mb-3 text-muted p-2">
-  <p class="text-center m-0 p-0 d-flex justify-content-center align-items-center"
-     *ngIf="fileObject">  {{ fileObject?.name }} </p>
+  @if (fileObject) {
+    <p class="text-center m-0 p-0 d-flex justify-content-center align-items-center"
+    >  {{ fileObject?.name }} </p>
+  }
   <p class="text-center m-0 p-0 d-flex justify-content-center align-items-center">
-      <span><i class="fas fa-cloud-upload"
-               aria-hidden="true"></i> {{ ((fileObject === null || fileObject === undefined) ? dropMessageLabel : dropMessageLabelReplacement) | translate}} {{'uploader.or' | translate}}</span>
+    <span><i class="fas fa-cloud-upload"
+    aria-hidden="true"></i> {{ ((fileObject === null || fileObject === undefined) ? dropMessageLabel : dropMessageLabelReplacement) | translate}} {{'uploader.or' | translate}}</span>
     <label class="btn btn-link m-0 p-0 ms-1">
       <input class="form-control-file d-none" type="file" name="file-upload"
-             id="file-upload"
-             (change)="handleFileInput($event)">
+        id="file-upload"
+        (change)="handleFileInput($event)">
       {{'uploader.browse' | translate}}
     </label>
   </p>
diff --git a/src/app/shared/upload/uploader/uploader.component.html b/src/app/shared/upload/uploader/uploader.component.html
index 5b2f3f9672..44b90d8189 100644
--- a/src/app/shared/upload/uploader/uploader.component.html
+++ b/src/app/shared/upload/uploader/uploader.component.html
@@ -1,55 +1,68 @@
-<div ng2FileDrop
-     *ngIf="(isOverDocumentDropZone | async)"
-     class="ds-document-drop-zone position-fixed h-100 w-100"
-     [class.ds-document-drop-zone-active]="(isOverDocumentDropZone | async)"
-     [uploader]="uploader"
-     (fileOver)="fileOverDocument($event)">
-</div>
-<div *ngIf="(isOverDocumentDropZone | async)"
-     class="ds-document-drop-zone-inner position-fixed h-100 w-100 p-2">
-  <div class="ds-document-drop-zone-inner-content position-relative d-flex flex-column justify-content-center text-center h-100 w-100">
-    <p class="text-primary">{{dropOverDocumentMsg | translate}}</p>
+@if ((isOverDocumentDropZone | async)) {
+  <div ng2FileDrop
+    class="ds-document-drop-zone position-fixed h-100 w-100"
+    [class.ds-document-drop-zone-active]="(isOverDocumentDropZone | async)"
+    [uploader]="uploader"
+    (fileOver)="fileOverDocument($event)">
   </div>
-</div>
+}
+@if ((isOverDocumentDropZone | async)) {
+  <div
+    class="ds-document-drop-zone-inner position-fixed h-100 w-100 p-2">
+    <div class="ds-document-drop-zone-inner-content position-relative d-flex flex-column justify-content-center text-center h-100 w-100">
+      <p class="text-primary">{{dropOverDocumentMsg | translate}}</p>
+    </div>
+  </div>
+}
 <div [attr.id]="uploaderId" class="row">
   <div class="col-md-12">
     <div ng2FileDrop
-         [ngClass]="{'ds-base-drop-zone-file-over': (isOverBaseDropZone | async)}"
-         [uploader]="uploader"
-         (fileOver)="fileOverBase($event)"
-         class="well ds-base-drop-zone mt-1 mb-3 text-muted">
-      <div class="text-center m-0 p-2 d-flex justify-content-center align-items-center" *ngIf="uploader?.queue?.length === 0">
-        <span class="d-flex align-items-center">
-          <i class="fas fa-upload pe-1" aria-hidden="true"></i>
-          {{dropMsg | translate}}{{'uploader.or' | translate}}
-          <label for="inputFileUploader-{{uploaderId}}" class="btn btn-link m-0 p-0 ms-1" tabindex="0" (keyup.enter)="$event.stopImmediatePropagation(); fileInput.click()">
-            <span role="button" [attr.aria-label]="ariaLabel | translate">{{'uploader.browse' | translate}}</span>
-          </label>
-          <input #fileInput id="inputFileUploader-{{uploaderId}}" class="d-none" type="file" ng2FileSelect [uploader]="uploader" multiple tabindex="0" />
-        </span>
-      </div>
-      <div *ngIf="(isOverBaseDropZone | async) || uploader?.queue?.length !== 0">
-        <div class="m-1">
-          <div class="upload-item-top">
-            <span class="filename">
-              <span *ngIf="!uploader.options.disableMultipart">{{'uploader.queue-length' | translate}}: {{ uploader?.queue?.length }} | </span>{{ uploader?.queue[0]?.file.name }}
-            </span>
-            <div class="btn-group btn-group-sm float-end" role="group">
-              <button type="button" class="btn btn-danger" title="{{'uploader.delete.btn-title' | translate}}" (click)="uploader.clearQueue()" [dsBtnDisabled]="!uploader.queue.length">
-                <i class="fas fa-trash" aria-hidden="true"></i>
-              </button>
-            </div>
-            <span *ngIf="uploader.progress < 100 && !(uploader.progress === 0 && !uploader.options.autoUpload)" class="float-end me-3">{{ uploader.progress }}%</span>
-            <span *ngIf="uploader.progress === 100" class="float-end me-3">{{'uploader.processing' | translate}}</span>
-          </div>
-          <div class="ds-base-drop-zone-progress clearfix mt-2">
-            <div role="progressbar"
-                 style="height: 5px; width: 0;"
-                 [ngStyle]="{ 'width': uploader.progress + '%' }"
-                 [ngClass]="{'progress-bar': true, 'bg-success progress-bar-striped progress-bar-animated': uploader.progress === 100}"></div>
-          </div>
+      [ngClass]="{'ds-base-drop-zone-file-over': (isOverBaseDropZone | async)}"
+      [uploader]="uploader"
+      (fileOver)="fileOverBase($event)"
+      class="well ds-base-drop-zone mt-1 mb-3 text-muted">
+      @if (uploader?.queue?.length === 0) {
+        <div class="text-center m-0 p-2 d-flex justify-content-center align-items-center">
+          <span class="d-flex align-items-center">
+            <i class="fas fa-upload pe-1" aria-hidden="true"></i>
+            {{dropMsg | translate}}{{'uploader.or' | translate}}
+            <label for="inputFileUploader-{{uploaderId}}" class="btn btn-link m-0 p-0 ms-1" tabindex="0" (keyup.enter)="$event.stopImmediatePropagation(); fileInput.click()">
+              <span role="button" [attr.aria-label]="ariaLabel | translate">{{'uploader.browse' | translate}}</span>
+            </label>
+            <input #fileInput id="inputFileUploader-{{uploaderId}}" class="d-none" type="file" ng2FileSelect [uploader]="uploader" multiple tabindex="0" />
+          </span>
         </div>
+      }
+      @if ((isOverBaseDropZone | async) || uploader?.queue?.length !== 0) {
+        <div>
+          <div class="m-1">
+            <div class="upload-item-top">
+              <span class="filename">
+                @if (!uploader.options.disableMultipart) {
+                  <span>{{'uploader.queue-length' | translate}}: {{ uploader?.queue?.length }} | </span>
+                  }{{ uploader?.queue[0]?.file.name }}
+                </span>
+                <div class="btn-group btn-group-sm float-end" role="group">
+                  <button type="button" class="btn btn-danger" title="{{'uploader.delete.btn-title' | translate}}" (click)="uploader.clearQueue()" [dsBtnDisabled]="!uploader.queue.length">
+                    <i class="fas fa-trash" aria-hidden="true"></i>
+                  </button>
+                </div>
+                @if (uploader.progress < 100 && !(uploader.progress === 0 && !uploader.options.autoUpload)) {
+                  <span class="float-end me-3">{{ uploader.progress }}%</span>
+                }
+                @if (uploader.progress === 100) {
+                  <span class="float-end me-3">{{'uploader.processing' | translate}}</span>
+                }
+              </div>
+              <div class="ds-base-drop-zone-progress clearfix mt-2">
+                <div role="progressbar"
+                  style="height: 5px; width: 0;"
+                  [ngStyle]="{ 'width': uploader.progress + '%' }"
+                [ngClass]="{'progress-bar': true, 'bg-success progress-bar-striped progress-bar-animated': uploader.progress === 100}"></div>
+              </div>
+            </div>
+          </div>
+        }
       </div>
     </div>
   </div>
-</div>
diff --git a/src/app/submission/form/collection/submission-form-collection.component.html b/src/app/submission/form/collection/submission-form-collection.component.html
index 2795686501..4888ecad0f 100644
--- a/src/app/submission/form/collection/submission-form-collection.component.html
+++ b/src/app/submission/form/collection/submission-form-collection.component.html
@@ -1,37 +1,42 @@
 <div>
-  <div
-    *ngIf="(available$ | async) !== true"
-    class="input-group mb-3">
-  <span class="input-group-text">{{ 'submission.sections.general.collection' | translate }}</span>
-  <span class="input-group-text">{{ selectedCollectionName$ | async }}</span>
-  </div>
-  <div
-    ngbDropdown
-    #collectionControls="ngbDropdown"
-    *ngIf="(available$ | async)"
-    class="btn-group input-group"
-    (openChange)="toggled($event)">
-  <span id="collectionControlsMenuLabel" class="input-group-text">
-    {{ 'submission.sections.general.collection' | translate }}
-  </span>
-    <button aria-describedby="collectionControlsMenuLabel"
-            id="collectionControlsMenuButton"
-            class="btn btn-outline-primary"
-            (blur)="onClose()"
-            (click)="onClose()"
-            [dsBtnDisabled]="(processingChange$ | async) || collectionModifiable === false || isReadonly"
-            ngbDropdownToggle>
-      <span *ngIf="(processingChange$ | async)"><i class='fas fa-circle-notch fa-spin'></i></span>
-      <span *ngIf="(processingChange$ | async) !== true">{{ selectedCollectionName$ | async }}</span>
-    </button>
-
-    <div ngbDropdownMenu
-         class="dropdown-menu p-0"
-         id="collectionControlsDropdownMenu"
-         aria-labelledby="collectionControlsMenuButton">
-      <ds-collection-dropdown
-        (selectionChange)="onSelect($event)">
-      </ds-collection-dropdown>
+  @if ((available$ | async) !== true) {
+    <div
+      class="input-group mb-3">
+      <span class="input-group-text">{{ 'submission.sections.general.collection' | translate }}</span>
+      <span class="input-group-text">{{ selectedCollectionName$ | async }}</span>
     </div>
-  </div>
+  }
+  @if ((available$ | async)) {
+    <div
+      ngbDropdown
+      #collectionControls="ngbDropdown"
+      class="btn-group input-group"
+      (openChange)="toggled($event)">
+      <span id="collectionControlsMenuLabel" class="input-group-text">
+        {{ 'submission.sections.general.collection' | translate }}
+      </span>
+      <button aria-describedby="collectionControlsMenuLabel"
+        id="collectionControlsMenuButton"
+        class="btn btn-outline-primary"
+        (blur)="onClose()"
+        (click)="onClose()"
+        [dsBtnDisabled]="(processingChange$ | async) || collectionModifiable === false || isReadonly"
+        ngbDropdownToggle>
+        @if ((processingChange$ | async)) {
+          <span><i class='fas fa-circle-notch fa-spin'></i></span>
+        }
+        @if ((processingChange$ | async) !== true) {
+          <span>{{ selectedCollectionName$ | async }}</span>
+        }
+      </button>
+      <div ngbDropdownMenu
+        class="dropdown-menu p-0"
+        id="collectionControlsDropdownMenu"
+        aria-labelledby="collectionControlsMenuButton">
+        <ds-collection-dropdown
+          (selectionChange)="onSelect($event)">
+        </ds-collection-dropdown>
+      </div>
+    </div>
+  }
 </div>
diff --git a/src/app/submission/form/footer/submission-form-footer.component.html b/src/app/submission/form/footer/submission-form-footer.component.html
index dbbef546df..1001d4c619 100644
--- a/src/app/submission/form/footer/submission-form-footer.component.html
+++ b/src/app/submission/form/footer/submission-form-footer.component.html
@@ -1,59 +1,75 @@
-<div class="row" *ngIf="!!submissionId">
-  <div class="col">
-    <button *ngIf="(showDepositAndDiscard | async)"
+@if (!!submissionId) {
+  <div class="row">
+    <div class="col">
+      @if ((showDepositAndDiscard | async)) {
+        <button
+          type="button"
+          id="discard"
+          [attr.data-test]="'discard' | dsBrowserOnly"
+          class="btn btn-danger"
+          [dsBtnDisabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
+          (click)="$event.preventDefault();confirmDiscard(content)">
+          <i class="fas fa-trash"></i> {{'submission.general.discard.submit' | translate}}
+        </button>
+      }
+    </div>
+    <div class="col text-end d-flex justify-content-end align-items-center">
+      @if ((hasUnsavedModification | async) !== true && (processingSaveStatus | async) !== true && (processingDepositStatus | async) !== true) {
+        <span>
+          <i class="fas fa-check-circle"></i> {{'submission.general.info.saved' | translate}}
+        </span>
+      }
+      @if ((hasUnsavedModification | async) && (processingSaveStatus | async) !== true && (processingDepositStatus | async) !== true) {
+        <span>
+          <i class="fas fa-exclamation-circle"></i> {{'submission.general.info.pending-changes' | translate}}
+        </span>
+      }
+      @if ((processingSaveStatus | async) || (processingDepositStatus | async)) {
+        <div class="col d-flex justify-content-end align-items-center">
+          <div class="progress w-75">
+            @if ((processingSaveStatus | async)) {
+              <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Saving...</div>
+            }
+            @if ((processingDepositStatus | async)) {
+              <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Depositing...</div>
+            }
+          </div>
+        </div>
+      }
+      <div class="ms-2 space-children-mr">
+        <button type="button"
+          class="btn btn-secondary"
+          id="save"
+          [attr.data-test]="'save' | dsBrowserOnly"
+          [dsBtnDisabled]="(processingSaveStatus | async) || (hasUnsavedModification | async) !== true"
+          (click)="save($event)">
+          <span><i class="fas fa-save"></i> {{'submission.general.save' | translate}}</span>
+        </button>
+        <button type="button"
+          [class.btn-primary]="(showDepositAndDiscard | async) !== true"
+          [class.btn-secondary]="(showDepositAndDiscard | async)"
+          class="btn"
+          id="saveForLater"
+          [attr.data-test]="'save-for-later' | dsBrowserOnly"
+          [dsBtnDisabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
+          (click)="saveLater($event)">
+          <span><i class="fas fa-save"></i> {{'submission.general.save-later' | translate}}</span>
+        </button>
+        @if ((showDepositAndDiscard | async)) {
+          <button
             type="button"
-            id="discard"
-            [attr.data-test]="'discard' | dsBrowserOnly"
-            class="btn btn-danger"
+            id="deposit"
+            [attr.data-test]="'deposit' | dsBrowserOnly"
+            class="btn btn-success"
             [dsBtnDisabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
-            (click)="$event.preventDefault();confirmDiscard(content)">
-      <i class="fas fa-trash"></i> {{'submission.general.discard.submit' | translate}}
-    </button>
-  </div>
-  <div class="col text-end d-flex justify-content-end align-items-center">
-    <span *ngIf="(hasUnsavedModification | async) !== true && (processingSaveStatus | async) !== true && (processingDepositStatus | async) !== true">
-      <i class="fas fa-check-circle"></i> {{'submission.general.info.saved' | translate}}
-    </span>
-    <span *ngIf="(hasUnsavedModification | async) && (processingSaveStatus | async) !== true && (processingDepositStatus | async) !== true">
-      <i class="fas fa-exclamation-circle"></i> {{'submission.general.info.pending-changes' | translate}}
-    </span>
-    <div *ngIf="(processingSaveStatus | async) || (processingDepositStatus | async)" class="col d-flex justify-content-end align-items-center">
-      <div class="progress w-75">
-        <div *ngIf="(processingSaveStatus | async)" class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Saving...</div>
-        <div *ngIf="(processingDepositStatus | async)" class="progress-bar progress-bar-striped progress-bar-animated bg-info" [style.width]="'100%'" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Depositing...</div>
+            (click)="deposit($event)">
+            <span><i class="fas fa-plus"></i> {{'submission.general.deposit' | translate}}</span>
+          </button>
+        }
       </div>
     </div>
-    <div class="ms-2 space-children-mr">
-      <button type="button"
-              class="btn btn-secondary"
-              id="save"
-              [attr.data-test]="'save' | dsBrowserOnly"
-              [dsBtnDisabled]="(processingSaveStatus | async) || (hasUnsavedModification | async) !== true"
-              (click)="save($event)">
-        <span><i class="fas fa-save"></i> {{'submission.general.save' | translate}}</span>
-      </button>
-      <button type="button"
-              [class.btn-primary]="(showDepositAndDiscard | async) !== true"
-              [class.btn-secondary]="(showDepositAndDiscard | async)"
-              class="btn"
-              id="saveForLater"
-              [attr.data-test]="'save-for-later' | dsBrowserOnly"
-              [dsBtnDisabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
-              (click)="saveLater($event)">
-        <span><i class="fas fa-save"></i> {{'submission.general.save-later' | translate}}</span>
-      </button>
-      <button *ngIf="(showDepositAndDiscard | async)"
-              type="button"
-              id="deposit"
-              [attr.data-test]="'deposit' | dsBrowserOnly"
-              class="btn btn-success"
-              [dsBtnDisabled]="(processingSaveStatus | async) || (processingDepositStatus | async)"
-              (click)="deposit($event)">
-        <span><i class="fas fa-plus"></i> {{'submission.general.deposit' | translate}}</span>
-      </button>
-    </div>
   </div>
-</div>
+}
 
 <ng-template #content let-c="close" let-d="dismiss">
   <div class="modal-header">
diff --git a/src/app/submission/form/submission-form.component.html b/src/app/submission/form/submission-form.component.html
index 27b1c0c545..802d0e1c4c 100644
--- a/src/app/submission/form/submission-form.component.html
+++ b/src/app/submission/form/submission-form.component.html
@@ -1,42 +1,49 @@
 <div class="container-fluid">
-    <div *ngIf="(isLoading() | async) !== true" class="submission-form-header mb-3 d-flex flex-wrap position-sticky">
-        <div *ngIf="(uploadEnabled$ | async)" class="w-100">
-            <ds-submission-upload-files [submissionId]="submissionId"
-                                        [collectionId]="collectionId"
-                                        [uploadFilesOptions]="uploadFilesOptions"></ds-submission-upload-files>
-            <div class="clearfix"></div>
+  @if ((isLoading() | async) !== true) {
+    <div class="submission-form-header mb-3 d-flex flex-wrap position-sticky">
+      @if ((uploadEnabled$ | async)) {
+        <div class="w-100">
+          <ds-submission-upload-files [submissionId]="submissionId"
+            [collectionId]="collectionId"
+          [uploadFilesOptions]="uploadFilesOptions"></ds-submission-upload-files>
+          <div class="clearfix"></div>
         </div>
-
-        <div class="submission-form-header-item mb-3 mb-sm-0 flex-sm-grow-1 flex-md-grow-0">
-          <ng-container *ngIf="!isSectionHidden">
-            <ds-submission-form-collection
+      }
+      <div class="submission-form-header-item mb-3 mb-sm-0 flex-sm-grow-1 flex-md-grow-0">
+        @if (!isSectionHidden) {
+          <ds-submission-form-collection
             [currentCollectionId]="collectionId"
-                                           [currentDefinition]="definitionId"
-                                           [submissionId]="submissionId"
-                                           [collectionModifiable]="collectionModifiable"
-                                           [isReadonly]="isSectionReadonly"
-                                           (collectionChange)="onCollectionChange($event)">
-            </ds-submission-form-collection>
-          </ng-container>
-        </div>
-        <div class="submission-form-header-item text-end">
-            <ds-submission-form-section-add [collectionId]="collectionId"
-                                            [submissionId]="submissionId">
-            </ds-submission-form-section-add>
-        </div>
+            [currentDefinition]="definitionId"
+            [submissionId]="submissionId"
+            [collectionModifiable]="collectionModifiable"
+            [isReadonly]="isSectionReadonly"
+            (collectionChange)="onCollectionChange($event)">
+          </ds-submission-form-collection>
+        }
+      </div>
+      <div class="submission-form-header-item text-end">
+        <ds-submission-form-section-add [collectionId]="collectionId"
+          [submissionId]="submissionId">
+        </ds-submission-form-section-add>
+      </div>
     </div>
+  }
 
-    <div class="submission-form-content">
-        <ds-loading *ngIf="(isLoading() | async)" message="Loading..."></ds-loading>
-        <ng-container *ngFor="let object of $any(submissionSections | async)">
-            <ds-submission-section-container [collectionId]="collectionId"
-                                             [submissionId]="submissionId"
-                                             [sectionData]="$any(object)">
-            </ds-submission-section-container>
-        </ng-container>
-    </div>
-    <div *ngIf="(isLoading() | async) !== true" class="submission-form-footer mt-3 mb-3 position-sticky">
-        <ds-submission-form-footer [submissionId]="submissionId"></ds-submission-form-footer>
+  <div class="submission-form-content">
+    @if ((isLoading() | async)) {
+      <ds-loading message="Loading..."></ds-loading>
+    }
+    @for (object of $any(submissionSections | async); track object) {
+      <ds-submission-section-container [collectionId]="collectionId"
+        [submissionId]="submissionId"
+        [sectionData]="$any(object)">
+      </ds-submission-section-container>
+    }
+  </div>
+  @if ((isLoading() | async) !== true) {
+    <div class="submission-form-footer mt-3 mb-3 position-sticky">
+      <ds-submission-form-footer [submissionId]="submissionId"></ds-submission-form-footer>
     </div>
+  }
 </div>
 
diff --git a/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.html b/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.html
index b386f3c8cb..02bcc78bf4 100644
--- a/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.html
+++ b/src/app/submission/import-external/import-external-preview/submission-import-external-preview.component.html
@@ -1,7 +1,7 @@
 <div class="modal-header">
   <h2>{{'submission.import-external.preview.title.' + labelPrefix | translate}}</h2>
   <button type="button" class="btn-close"
-          (click)="closeMetadataModal()" aria-label="Close">
+    (click)="closeMetadataModal()" aria-label="Close">
   </button>
 </div>
 <div class="modal-body">
@@ -14,27 +14,29 @@
     <div class="row">
       <div class="col-md-12">
         <hr>
+        </div>
+      </div>
+      @for (metadata of metadataList; track metadata) {
+        <div class="row">
+          <p class="col-md-12">
+            <strong class="">{{'item.preview.' + metadata.key | translate}}</strong><br>
+            @for (metadatum of metadata.values; track metadatum) {
+              <span>{{metadatum.value}}</span><br>
+            }
+          </p>
+        </div>
+      }
+      <div class="row">
+        <div class="col-md-12">
+          <hr>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-md-12 text-end">
+            <button class="btn btn-success" (click)="import()" role="button">
+              <i class="fa fa-file-import" aria-hidden="true"></i> {{'submission.import-external.preview.button.import' | translate}}
+            </button>
+          </div>
+        </div>
       </div>
     </div>
-    <div *ngFor="let metadata of metadataList" class="row">
-      <p class="col-md-12">
-        <strong class="">{{'item.preview.' + metadata.key | translate}}</strong><br>
-        <ng-container *ngFor="let metadatum of metadata.values">
-          <span>{{metadatum.value}}</span><br>
-        </ng-container>
-      </p>
-    </div>
-    <div class="row">
-      <div class="col-md-12">
-        <hr>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-md-12 text-end">
-        <button class="btn btn-success" (click)="import()" role="button">
-          <i class="fa fa-file-import" aria-hidden="true"></i> {{'submission.import-external.preview.button.import' | translate}}
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html b/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html
index c90adbea07..3dfbea992b 100644
--- a/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html
+++ b/src/app/submission/import-external/import-external-searchbar/submission-import-external-searchbar.component.html
@@ -1,14 +1,18 @@
-<div *ngIf="(isXsOrSm$ | async)" class="input-group mb-2">
+@if ((isXsOrSm$ | async)) {
+  <div class="input-group mb-2">
     <input type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' |translate}}"
-           [attr.aria-label]="'submission.import-external.search.placeholder' | translate">
-</div>
+      [attr.aria-label]="'submission.import-external.search.placeholder' | translate">
+  </div>
+}
 <div class="input-group mb-5">
-  <input *ngIf="(isXsOrSm$ | async) !== true" type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' | translate}}" [attr.aria-label]="'submission.import-external.search.placeholder' | translate">
+  @if ((isXsOrSm$ | async) !== true) {
+    <input type="text" class="form-control" (keyup.enter)="(searchString === '')?null:search()" [(ngModel)]="searchString" placeholder="{{'submission.import-external.search.placeholder' | translate}}" [attr.aria-label]="'submission.import-external.search.placeholder' | translate">
+  }
   <div [ngClass]="{'input-group-append': (isXsOrSm$ | async) !== true}" ngbDropdown role="group">
     <button [attr.aria-label]="'submission.import-external.search.source.hint' |translate"
-            class="btn btn-outline-secondary w-fx"
-            title="{{'submission.import-external.search.source.hint' |translate}}"
-            ngbDropdownToggle>
+      class="btn btn-outline-secondary w-fx"
+      title="{{'submission.import-external.search.source.hint' |translate}}"
+      ngbDropdownToggle>
       {{'submission.import-external.source.' + selectedElement?.name | translate}}
     </button>
     <ul ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100"
@@ -20,13 +24,17 @@
         [infiniteScrollThrottle]="50"
         (scrolled)="onScroll()"
         [scrollWindow]="false">
-            <button ngbDropdownItem class="dropdown-item text-truncate" (click)="makeSourceSelection(source)"
-                    *ngFor="let source of sourceList">{{ 'submission.import-external.source.' + source?.name | translate }}
-            </button>
-        <div ngbDropdownItem class="scrollable-dropdown-loading text-center" *ngIf="sourceListLoading"><p>{{'submission.import-external.source.loading' | translate}}</p></div>
-        </li>
+        @for (source of sourceList; track source) {
+          <button ngbDropdownItem class="dropdown-item text-truncate" (click)="makeSourceSelection(source)"
+            >{{ 'submission.import-external.source.' + source?.name | translate }}
+          </button>
+        }
+        @if (sourceListLoading) {
+          <div ngbDropdownItem class="scrollable-dropdown-loading text-center"><p>{{'submission.import-external.source.loading' | translate}}</p></div>
+        }
+      </li>
     </ul>
     <button type="button" class="btn btn-primary" [title]="(searchString === '')?('submission.import-external.search.button.hint' | translate):''"
-            [dsBtnDisabled]="searchString === ''" (click)="search()">{{ 'submission.import-external.search.button' | translate }}
+      [dsBtnDisabled]="searchString === ''" (click)="search()">{{ 'submission.import-external.search.button' | translate }}
     </button>
-</div>
+  </div>
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
index cf2e68e87b..2a7ff552af 100644
--- a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
@@ -2,22 +2,22 @@
   <div class="mb-4 ccLicense-select">
     <div ngbDropdown>
       <input id="cc-license-dropdown"
-             class="form-control"
-             [(ngModel)]="selectedCcLicense.name"
-             placeholder="{{ !storedCcLicenseLink ? ('submission.sections.ccLicense.select' | translate) : ('submission.sections.ccLicense.change' | translate)}}"
-             [ngModelOptions]="{standalone: true}"
-             ngbDropdownToggle
-             role="combobox"
-             #script="ngModel">
+        class="form-control"
+        [(ngModel)]="selectedCcLicense.name"
+        placeholder="{{ !storedCcLicenseLink ? ('submission.sections.ccLicense.select' | translate) : ('submission.sections.ccLicense.change' | translate)}}"
+        [ngModelOptions]="{standalone: true}"
+        ngbDropdownToggle
+        role="combobox"
+        #script="ngModel">
       <div ngbDropdownMenu aria-labelledby="cc-license-dropdown" class="w-100 scrollable-menu"
-           role="menu"
-           infiniteScroll
-           (scroll)="onScroll($event)"
-           [infiniteScrollDistance]="5"
-           [infiniteScrollThrottle]="300"
-           [infiniteScrollUpDistance]="1.5"
-           [fromRoot]="true"
-           [scrollWindow]="false">
+        role="menu"
+        infiniteScroll
+        (scroll)="onScroll($event)"
+        [infiniteScrollDistance]="5"
+        [infiniteScrollThrottle]="300"
+        [infiniteScrollUpDistance]="1.5"
+        [fromRoot]="true"
+        [scrollWindow]="false">
 
         @if(submissionCcLicenses?.length === 0) {
           <button class="dropdown-item disabled">
@@ -31,115 +31,121 @@
           }
         }
       </div>
-  </div>
+    </div>
   </div>
 }
 
-<ng-container *ngIf="getSelectedCcLicense()">
-
-  <div *ngFor="let field of getSelectedCcLicense().fields"
-       class="mb-4">
-
-    <div class="d-flex flex-row">
-      <div class="fw-bold {{ field.id }}">
-        {{ field.label }}
-      </div>
-      <button
-        class="btn btn-outline-info btn-sm ms-2"
-        (click)="openInfoModal(infoModal)">
-        <i class="fas fa-question"></i>
-      </button>
-    </div>
-
-    <ng-template #infoModal>
-
-      <div>
-
-        <div class="modal-header mb-4 ">
-          <div>
-            <h4>
-              {{ field.label }}
-            </h4>
-            <div [innerHTML]="field.description"></div>
-          </div>
-          <button type="button" class="btn-close"
-                  (click)="closeInfoModal()" aria-label="Close">
-          </button>
+@if (getSelectedCcLicense()) {
+  @for (field of getSelectedCcLicense().fields; track field) {
+    <div
+      class="mb-4">
+      <div class="d-flex flex-row">
+        <div class="fw-bold {{ field.id }}">
+          {{ field.label }}
         </div>
-
-        <div class="modal-body">
-          <div *ngFor="let value of field.enums"
-               class="mb-4">
-            <h5>
-              {{ value.label }}
-            </h5>
-            <div [innerHTML]="value.description" class="fw-light"></div>
+        <button
+          class="btn btn-outline-info btn-sm ms-2"
+          (click)="openInfoModal(infoModal)">
+          <i class="fas fa-question"></i>
+        </button>
+      </div>
+      <ng-template #infoModal>
+        <div>
+          <div class="modal-header mb-4 ">
+            <div>
+              <h4>
+                {{ field.label }}
+              </h4>
+              <div [innerHTML]="field.description"></div>
+            </div>
+            <button type="button" class="btn-close"
+              (click)="closeInfoModal()" aria-label="Close">
+            </button>
+          </div>
+          <div class="modal-body">
+            @for (value of field.enums; track value) {
+              <div
+                class="mb-4">
+                <h5>
+                  {{ value.label }}
+                </h5>
+                <div [innerHTML]="value.description" class="fw-light"></div>
+              </div>
+            }
           </div>
         </div>
-
-      </div>
-
-    </ng-template>
-
-    <ds-select *ngIf="field.enums?.length > 5" [disabled]="field.id === 'jurisdiction' && defaultJurisdiction !== undefined && defaultJurisdiction !== 'none'">
-      <ng-container class="selection" *ngVar="getSelectedOption(getSelectedCcLicense(), field) as option">
-        <span *ngIf="option">
-          {{ option.label }}
-        </span>
-        <span *ngIf="!option">
-          {{ 'submission.sections.ccLicense.option.select' | translate }}
-        </span>
-      </ng-container>
-      <ng-container class="menu">
-        <div class="options-select-menu overflow-auto">
-          <button *ngFor="let option of field.enums"
+      </ng-template>
+      @if (field.enums?.length > 5) {
+        <ds-select [disabled]="field.id === 'jurisdiction' && defaultJurisdiction !== undefined && defaultJurisdiction !== 'none'">
+          <ng-container class="selection" *ngVar="getSelectedOption(getSelectedCcLicense(), field) as option">
+            @if (option) {
+              <span>
+                {{ option.label }}
+              </span>
+            }
+            @if (!option) {
+              <span>
+                {{ 'submission.sections.ccLicense.option.select' | translate }}
+              </span>
+            }
+          </ng-container>
+          <ng-container class="menu">
+            <div class="options-select-menu overflow-auto">
+              @for (option of field.enums; track option) {
+                <button
                   class="dropdown-item"
                   (click)="selectOption(getSelectedCcLicense(), field, option)">
-            {{ option.label }}
-          </button>
-        </div>
-      </ng-container>
-    </ds-select>
+                  {{ option.label }}
+                </button>
+              }
+            </div>
+          </ng-container>
+        </ds-select>
+      }
+      @if (field.enums?.length <= 5) {
+        @for (option of field.enums; track option) {
+          <div
+            class="d-flex flex-row m-1">
+            <div (click)="selectOption(getSelectedCcLicense(), field, option)">
+              <input type="radio"
+                title="{{ option.label }}"
+                class="me-1"
+                [checked]="isSelectedOption(getSelectedCcLicense(), field, option)">
+              <span>{{ option.label }}</span>
+            </div>
+          </div>
+        }
+      }
+    </div>
+  }
+}
 
-    <ng-container *ngIf="field.enums?.length <= 5">
-      <div *ngFor="let option of field.enums"
-           class="d-flex flex-row m-1">
-        <div (click)="selectOption(getSelectedCcLicense(), field, option)">
-          <input type="radio"
-                 title="{{ option.label }}"
-                 class="me-1"
-                 [checked]="isSelectedOption(getSelectedCcLicense(), field, option)">
-          <span>{{ option.label }}</span>
-        </div>
-      </div>
-    </ng-container>
-
-  </div>
-
-</ng-container>
-
-<ng-container *ngIf="getCcLicenseLink$()">
+@if (getCcLicenseLink$()) {
   <ng-container *ngVar="getCcLicenseLink$() | async as licenseLink">
-    <div *ngIf="!licenseLink">
-      <ds-loading></ds-loading>
-    </div>
-    <div *ngIf="licenseLink"
-         class="mt-2 p-4 bg-light text-dark">
+    @if (!licenseLink) {
       <div>
-        {{ 'submission.sections.ccLicense.link' | translate }}
+        <ds-loading></ds-loading>
       </div>
-      <a class="license-link" href="{{ licenseLink }}" target="_blank" rel="noopener noreferrer">
-        {{ licenseLink }}
-      </a>
-      <div class="m-2">
-        <div (click)="setAccepted(!accepted)">
-          <input type="checkbox"
-                 class="me-2"
-                 title="accepted"
-                 [checked]="accepted">
-          <span> {{ 'submission.sections.ccLicense.confirmation' | translate }}</span>
+    }
+    @if (licenseLink) {
+      <div
+        class="mt-2 p-4 bg-light text-dark">
+        <div>
+          {{ 'submission.sections.ccLicense.link' | translate }}
+        </div>
+        <a class="license-link" href="{{ licenseLink }}" target="_blank" rel="noopener noreferrer">
+          {{ licenseLink }}
+        </a>
+        <div class="m-2">
+          <div (click)="setAccepted(!accepted)">
+            <input type="checkbox"
+              class="me-2"
+              title="accepted"
+              [checked]="accepted">
+            <span> {{ 'submission.sections.ccLicense.confirmation' | translate }}</span>
+          </div>
         </div>
       </div>
-    </div>
+    }
   </ng-container>
-</ng-container>
+}
diff --git a/src/app/submission/sections/container/section-container.component.html b/src/app/submission/sections/container/section-container.component.html
index 4f76af8c4c..cb31d2766c 100644
--- a/src/app/submission/sections/container/section-container.component.html
+++ b/src/app/submission/sections/container/section-container.component.html
@@ -2,44 +2,60 @@
   class="mb-2"
   [ngClass]="{ 'section-focus' : sectionRef.isSectionActive() }" [mandatory]="sectionData.mandatory"
   [submissionId]="submissionId" [sectionType]="sectionData.sectionType" [sectionId]="sectionData.id">
-  <ngb-accordion #acc="ngbAccordion" *ngIf="(sectionRef.isEnabled() | async)"
-    (panelChange)="sectionRef.sectionChange($event)" activeIds="{{ sectionData.id }}" [destroyOnHide]="false">
-    <ngb-panel id="{{ sectionData.id }}" [type]="sectionRef.isInfo() ? 'info' : ''">
-      <ng-template ngbPanelTitle class="d-flex">
-        <span [ngClass]="{ 'text-white' : sectionRef.isInfo()}" class="flex-grow-1 section-title" tabindex="0">{{
-          'submission.sections.'+sectionData.header | translate
+  @if ((sectionRef.isEnabled() | async)) {
+    <ngb-accordion #acc="ngbAccordion"
+      (panelChange)="sectionRef.sectionChange($event)" activeIds="{{ sectionData.id }}" [destroyOnHide]="false">
+      <ngb-panel id="{{ sectionData.id }}" [type]="sectionRef.isInfo() ? 'info' : ''">
+        <ng-template ngbPanelTitle class="d-flex">
+          <span [ngClass]="{ 'text-white' : sectionRef.isInfo()}" class="flex-grow-1 section-title" tabindex="0">{{
+            'submission.sections.'+sectionData.header | translate
           }}</span>
-        <div class="d-inline-block">
-          <i *ngIf="(sectionRef.isValid() | async) !== true && !(sectionRef.hasErrors()) && !(sectionRef.isInfo())"
-            class="fas fa-exclamation-circle text-warning me-3"
-            title="{{'submission.sections.status.warnings.title' | translate}}" role="img"
-            [attr.aria-label]="'submission.sections.status.warnings.aria' | translate"></i>
-          <i *ngIf="(sectionRef.hasErrors()) && !(sectionRef.isInfo())"
-            class="fas fa-exclamation-circle text-danger me-3"
-            title="{{'submission.sections.status.errors.title' | translate}}" role="img"
-            [attr.aria-label]="'submission.sections.status.errors.aria' | translate"></i>
-          <i *ngIf="(sectionRef.isValid() | async) && !(sectionRef.hasErrors()) && !(sectionRef.isInfo())"
-            class="fas fa-check-circle text-success me-3"
-            title="{{'submission.sections.status.valid.title' | translate}}" role="img"
-            [attr.aria-label]="'submission.sections.status.valid.aria' | translate"></i>
-          <i *ngIf="sectionRef.isInfo()" class="fas fa-info-circle me-3 text-white"
-            title="{{'submission.sections.status.info.title' | translate}}" role="img"
-            [attr.aria-label]="'submission.sections.status.info.aria' | translate"></i>
-          <a href="javascript:void(0);" class="me-3" *ngIf="!sectionRef.isMandatory()"
-            (click)="removeSection($event)">
-            <i class="fas fa-trash-o" aria-hidden="true" tabindex="0"></i>
-          </a>
-        </div>
-      </ng-template>
-      <ng-template ngbPanelContent>
-        <div id="sectionGenericError_{{sectionData.id}}" *ngIf="sectionRef.hasGenericErrors()">
-          <ds-alert *ngFor="let error of sectionRef.getErrors(); let i = index" [content]="error" [dismissible]="true"
-            [type]="AlertTypeEnum.Error" (close)="sectionRef.removeError(i)"></ds-alert>
-        </div>
-        <div id="sectionContent_{{sectionData.id}}" (click)="sectionRef.setFocus($event)">
-          <ng-container *ngComponentOutlet="getSectionContent(); injector: objectInjector;"></ng-container>
-        </div>
-      </ng-template>
-    </ngb-panel>
-  </ngb-accordion>
+          <div class="d-inline-block">
+            @if ((sectionRef.isValid() | async) !== true && !(sectionRef.hasErrors()) && !(sectionRef.isInfo())) {
+              <i
+                class="fas fa-exclamation-circle text-warning me-3"
+                title="{{'submission.sections.status.warnings.title' | translate}}" role="img"
+              [attr.aria-label]="'submission.sections.status.warnings.aria' | translate"></i>
+            }
+            @if ((sectionRef.hasErrors()) && !(sectionRef.isInfo())) {
+              <i
+                class="fas fa-exclamation-circle text-danger me-3"
+                title="{{'submission.sections.status.errors.title' | translate}}" role="img"
+              [attr.aria-label]="'submission.sections.status.errors.aria' | translate"></i>
+            }
+            @if ((sectionRef.isValid() | async) && !(sectionRef.hasErrors()) && !(sectionRef.isInfo())) {
+              <i
+                class="fas fa-check-circle text-success me-3"
+                title="{{'submission.sections.status.valid.title' | translate}}" role="img"
+              [attr.aria-label]="'submission.sections.status.valid.aria' | translate"></i>
+            }
+            @if (sectionRef.isInfo()) {
+              <i class="fas fa-info-circle me-3 text-white"
+                title="{{'submission.sections.status.info.title' | translate}}" role="img"
+              [attr.aria-label]="'submission.sections.status.info.aria' | translate"></i>
+            }
+            @if (!sectionRef.isMandatory()) {
+              <a href="javascript:void(0);" class="me-3"
+                (click)="removeSection($event)">
+                <i class="fas fa-trash-o" aria-hidden="true" tabindex="0"></i>
+              </a>
+            }
+          </div>
+        </ng-template>
+        <ng-template ngbPanelContent>
+          @if (sectionRef.hasGenericErrors()) {
+            <div id="sectionGenericError_{{sectionData.id}}">
+              @for (error of sectionRef.getErrors(); track error; let i = $index) {
+                <ds-alert [content]="error" [dismissible]="true"
+                [type]="AlertTypeEnum.Error" (close)="sectionRef.removeError(i)"></ds-alert>
+              }
+            </div>
+          }
+          <div id="sectionContent_{{sectionData.id}}" (click)="sectionRef.setFocus($event)">
+            <ng-container *ngComponentOutlet="getSectionContent(); injector: objectInjector;"></ng-container>
+          </div>
+        </ng-template>
+      </ngb-panel>
+    </ngb-accordion>
+  }
 </div>
diff --git a/src/app/submission/sections/section-coar-notify/section-coar-notify.component.html b/src/app/submission/sections/section-coar-notify/section-coar-notify.component.html
index 9f3110d965..ecd66f1d4d 100644
--- a/src/app/submission/sections/section-coar-notify/section-coar-notify.component.html
+++ b/src/app/submission/sections/section-coar-notify/section-coar-notify.component.html
@@ -1,149 +1,168 @@
 <div class="container-fluid">
-  <ng-container *ngIf="patterns?.length > 0 ">
-    <div *ngFor="let ldnPattern of patterns; let i = index" class="col">
-      <div *ngIf="(filterServices(ldnPattern.pattern ) | async)?.length > 0">
-        <label class="row col-form-label">
-          {{'submission.section.section-coar-notify.control.' + ldnPattern.pattern + '.label' | translate }}
-        </label
-        >
-        <div *ngIf="ldnServiceByPattern[ldnPattern.pattern]?.services.length">
-          <div
-            *ngFor="
-            let service of ldnServiceByPattern[ldnPattern.pattern].services;
-            let serviceIndex = index
-          "
-          >
-            <div class="row">
-              <div ngbDropdown #myDropdown="ngbDropdown" [class.mt-2]="serviceIndex > 0" class="flex-grow-1">
-                <div class="position-relative right-addon"
-                     [attr.aria-label]="ldnPattern.pattern + '.dropdown'">
-                  <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
-                     aria-hidden="true"></i>
-                  <input
-                    [attr.aria-label]="ldnPattern.pattern+'.dropdownanchor'"
-                    type="text"
-                    [readonly]="true"
-                    [ngClass]="{'border-danger': (getShownSectionErrors$(ldnPattern.pattern, serviceIndex) | async)?.length > 0}"
-                    class="form-control w-100 scrollable-dropdown-input"
-                    [value]="ldnServiceByPattern[ldnPattern.pattern].services[serviceIndex]?.name"
-                    (click)="myDropdown.open()"
-                  />
-                </div>
-                <div
-                  ngbDropdownMenu
-                  class="dropdown-menu scrollable-dropdown-menu w-100"
-                  aria-haspopup="true"
-                  aria-expanded="false"
-                >
-                  <div
-                    class="scrollable-menu"
-                    role="listbox"
-                    infiniteScroll
-                    [infiniteScrollDistance]="2"
-                    [infiniteScrollThrottle]="50"
-                    [scrollWindow]="false"
-                  >
-                    <button
-                      *ngIf="(filterServices(ldnPattern.pattern) | async)?.length === 0"
-                      class="dropdown-item collection-item text-truncate w-100"
-                    >
-                      {{'submission.section.section-coar-notify.dropdown.no-data' | translate}}
-                    </button>
-                    <button
-                      *ngIf="(filterServices(ldnPattern.pattern ) | async)?.length > 0"
-                      class="dropdown-item collection-item text-truncate w-100"
-                      (click)="onChange(ldnPattern.pattern, serviceIndex, null)"
-                    >
-                      {{'submission.section.section-coar-notify.dropdown.select-none' | translate}}
-                    </button>
-                    <button
-                      *ngFor="let serviceOption of filterServices(ldnPattern.pattern ) | async"
-                      [ngClass]="{'bg-light': ldnServiceByPattern[ldnPattern.pattern ].services[serviceIndex]?.id === serviceOption.id}"
-                      class="dropdown-item collection-item text-truncate w-100"
-                      (click)="onChange(ldnPattern.pattern, serviceIndex, serviceOption)"
-                    >
-                      <b>
-                        {{ serviceOption.name }}
-                      </b>
-                      <br />
-                      {{ serviceOption.description }}
-                    </button>
-                  </div>
-                </div>
-              </div>
-              <button *ngIf="ldnServiceByPattern[ldnPattern.pattern].services.length > 1"
-                      type="button" [class.mt-2]="serviceIndex > 0"
-                      class="btn btn-secondary ms-2"
-                      role="button"
-                      title="{{'form.remove' | translate}}"
-                      [attr.aria-label]="'form.remove' | translate"
-                      (click)="removeService(ldnPattern, serviceIndex)"
+  @if (patterns?.length > 0 ) {
+    @for (ldnPattern of patterns; track ldnPattern; let i = $index) {
+      <div class="col">
+        @if ((filterServices(ldnPattern.pattern ) | async)?.length > 0) {
+          <div>
+            <label class="row col-form-label">
+              {{'submission.section.section-coar-notify.control.' + ldnPattern.pattern + '.label' | translate }}
+              </label
               >
-                <span><i class="fas fa-trash" aria-hidden="true"></i></span>
-              </button>
-            </div>
-
-            <small
-              class="row text-muted"
-              *ngIf="!ldnServiceByPattern[ldnPattern.pattern].services[serviceIndex] &&
-                    serviceIndex === ldnServiceByPattern[ldnPattern.pattern].services.length -1"
-            >
-              {{'submission.section.section-coar-notify.small.notification' | translate : {pattern : ldnPattern.pattern} }}
-            </small>
-            <ng-container *ngIf="(getShownSectionErrors$(ldnPattern.pattern , serviceIndex) | async)?.length > 0">
-              <small class="row text-danger" *ngFor="let error of (getShownSectionErrors$(ldnPattern.pattern , serviceIndex) | async)">
-                {{ error.message | translate}}
-              </small>
-            </ng-container>
-            <div
-              class="row mt-1"
-              *ngIf="ldnServiceByPattern[ldnPattern.pattern].services[serviceIndex]"
-            >
-              <div
-                class="alert alert-info w-100 d-flex align-items-center flex-row"
-              >
-                <i class="fa-solid fa-circle-info fa-xl ms-2"></i>
-                <div class="ms-4">
-                  <div>{{ 'submission.section.section-coar-notify.selection.description' | translate }}</div>
-                  <div *ngIf="ldnServiceByPattern[ldnPattern.pattern].services[serviceIndex]?.description; else noDesc">
-                    {{ ldnServiceByPattern[ldnPattern.pattern].services[serviceIndex].description }}
-                  </div>
-                  <ng-template #noDesc>
-                <span class="text-muted">
-                  {{ 'submission.section.section-coar-notify.selection.no-description' | translate }}
-                </span>
-                  </ng-template>
+              @if (ldnServiceByPattern[ldnPattern.pattern]?.services.length) {
+                <div>
+                  @for (
+                    service of ldnServiceByPattern[ldnPattern.pattern].services; track
+                    service; let serviceIndex = $index) {
+                    <div
+                      >
+                      <div class="row">
+                        <div ngbDropdown #myDropdown="ngbDropdown" [class.mt-2]="serviceIndex > 0" class="flex-grow-1">
+                          <div class="position-relative right-addon"
+                            [attr.aria-label]="ldnPattern.pattern + '.dropdown'">
+                            <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
+                            aria-hidden="true"></i>
+                            <input
+                              [attr.aria-label]="ldnPattern.pattern+'.dropdownanchor'"
+                              type="text"
+                              [readonly]="true"
+                              [ngClass]="{'border-danger': (getShownSectionErrors$(ldnPattern.pattern, serviceIndex) | async)?.length > 0}"
+                              class="form-control w-100 scrollable-dropdown-input"
+                              [value]="ldnServiceByPattern[ldnPattern.pattern].services[serviceIndex]?.name"
+                              (click)="myDropdown.open()"
+                              />
+                          </div>
+                          <div
+                            ngbDropdownMenu
+                            class="dropdown-menu scrollable-dropdown-menu w-100"
+                            aria-haspopup="true"
+                            aria-expanded="false"
+                            >
+                            <div
+                              class="scrollable-menu"
+                              role="listbox"
+                              infiniteScroll
+                              [infiniteScrollDistance]="2"
+                              [infiniteScrollThrottle]="50"
+                              [scrollWindow]="false"
+                              >
+                              @if ((filterServices(ldnPattern.pattern) | async)?.length === 0) {
+                                <button
+                                  class="dropdown-item collection-item text-truncate w-100"
+                                  >
+                                  {{'submission.section.section-coar-notify.dropdown.no-data' | translate}}
+                                </button>
+                              }
+                              @if ((filterServices(ldnPattern.pattern ) | async)?.length > 0) {
+                                <button
+                                  class="dropdown-item collection-item text-truncate w-100"
+                                  (click)="onChange(ldnPattern.pattern, serviceIndex, null)"
+                                  >
+                                  {{'submission.section.section-coar-notify.dropdown.select-none' | translate}}
+                                </button>
+                              }
+                              @for (serviceOption of filterServices(ldnPattern.pattern ) | async; track serviceOption) {
+                                <button
+                                  [ngClass]="{'bg-light': ldnServiceByPattern[ldnPattern.pattern ].services[serviceIndex]?.id === serviceOption.id}"
+                                  class="dropdown-item collection-item text-truncate w-100"
+                                  (click)="onChange(ldnPattern.pattern, serviceIndex, serviceOption)"
+                                  >
+                                  <b>
+                                    {{ serviceOption.name }}
+                                  </b>
+                                  <br />
+                                  {{ serviceOption.description }}
+                                </button>
+                              }
+                            </div>
+                          </div>
+                        </div>
+                        @if (ldnServiceByPattern[ldnPattern.pattern].services.length > 1) {
+                          <button
+                            type="button" [class.mt-2]="serviceIndex > 0"
+                            class="btn btn-secondary ms-2"
+                            role="button"
+                            title="{{'form.remove' | translate}}"
+                            [attr.aria-label]="'form.remove' | translate"
+                            (click)="removeService(ldnPattern, serviceIndex)"
+                            >
+                            <span><i class="fas fa-trash" aria-hidden="true"></i></span>
+                          </button>
+                        }
+                      </div>
+                      @if (!ldnServiceByPattern[ldnPattern.pattern].services[serviceIndex] &&
+                        serviceIndex === ldnServiceByPattern[ldnPattern.pattern].services.length -1) {
+                        <small
+                          class="row text-muted"
+                          >
+                          {{'submission.section.section-coar-notify.small.notification' | translate : {pattern : ldnPattern.pattern} }}
+                        </small>
+                      }
+                      @if ((getShownSectionErrors$(ldnPattern.pattern , serviceIndex) | async)?.length > 0) {
+                        @for (error of (getShownSectionErrors$(ldnPattern.pattern , serviceIndex) | async); track error) {
+                          <small class="row text-danger">
+                            {{ error.message | translate}}
+                          </small>
+                        }
+                      }
+                      @if (ldnServiceByPattern[ldnPattern.pattern].services[serviceIndex]) {
+                        <div
+                          class="row mt-1"
+                          >
+                          <div
+                            class="alert alert-info w-100 d-flex align-items-center flex-row"
+                            >
+                            <i class="fa-solid fa-circle-info fa-xl ms-2"></i>
+                            <div class="ms-4">
+                              <div>{{ 'submission.section.section-coar-notify.selection.description' | translate }}</div>
+                              @if (ldnServiceByPattern[ldnPattern.pattern].services[serviceIndex]?.description) {
+                                <div>
+                                  {{ ldnServiceByPattern[ldnPattern.pattern].services[serviceIndex].description }}
+                                </div>
+                              } @else {
+                                <span class="text-muted">
+                                  {{ 'submission.section.section-coar-notify.selection.no-description' | translate }}
+                                </span>
+                              }
+                            </div>
+                          </div>
+                        </div>
+                      }
+                      @if ((getShownSectionErrors$(ldnPattern.pattern, serviceIndex) | async)?.length > 0) {
+                        <div class="row">
+                          <div
+                            class="alert alert-danger w-100 d-flex align-items-center flex-row"
+                            >
+                            <div class="ms-4">
+                              <span>
+                                {{ 'submission.section.section-coar-notify.notification.error' | translate }}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      }
+                      <div class="row">
+                        @if (ldnPattern.multipleRequest && (serviceIndex === ldnServiceByPattern[ldnPattern.pattern].services.length - 1)) {
+                          <div
+                            (click)="addNewService(ldnPattern)"
+                            class="btn btn-link mt-2 ps-0"
+                            >
+                            <i class="fas fa-plus"></i>
+                            {{ 'submission.sections.general.add-more' | translate }}
+                          </div>
+                        }
+                      </div>
+                    </div>
+                  }
                 </div>
-              </div>
+              }
             </div>
-            <div class="row" *ngIf="(getShownSectionErrors$(ldnPattern.pattern, serviceIndex) | async)?.length > 0">
-              <div
-                class="alert alert-danger w-100 d-flex align-items-center flex-row"
-              >
-                <div class="ms-4">
-              <span>
-                {{ 'submission.section.section-coar-notify.notification.error' | translate }}
-              </span>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div *ngIf="ldnPattern.multipleRequest && (serviceIndex === ldnServiceByPattern[ldnPattern.pattern].services.length - 1)"
-                   (click)="addNewService(ldnPattern)"
-                   class="btn btn-link mt-2 ps-0"
-              >
-                <i class="fas fa-plus"></i>
-                {{ 'submission.sections.general.add-more' | translate }}
-              </div>
-            </div>
-          </div>
+          }
         </div>
-      </div>
-    </div>
-  </ng-container>
-    <ng-container *ngIf="!hasSectionData">
-    <p>
-      {{ 'submission.section.section-coar-notify.info.no-pattern' | translate }}
-    </p>
-  </ng-container>
-</div>
+      }
+    }
+    @if (!hasSectionData) {
+      <p>
+        {{ 'submission.section.section-coar-notify.info.no-pattern' | translate }}
+      </p>
+    }
+  </div>
diff --git a/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.html b/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.html
index 74d69dfaf8..1d436e1ab8 100644
--- a/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.html
+++ b/src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.html
@@ -1,90 +1,119 @@
 <div class="mb-3 border-bottom" data-test="collapse">
-    <div class="w-100 d-flex justify-content-between collapse-toggle" (click)="collapse.toggle()">
-        <div class="d-flex">
-            <button type="button" class="btn btn-link p-0 me-4" (click)="$event.preventDefault()"
-                [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
-                {{version.articleVersion | titlecase}} {{ 'submission.sections.sherpa.publisher.policy.version' |
-                translate
-                }}
-            </button>
-            <div>
-                <span *ngIf="!!version?.embargo && !!version?.embargo.amount;else noEmbargoTitle"> <i
-                        class="fas fa-hourglass-half"></i> {{version.embargo.amount}}
-                    {{version.embargo?.units[0]}}</span>
-                <ng-template #noEmbargoTitle>
-                    <span><i class="fas fa-hourglass-half"></i> {{
-                        'submission.sections.sherpa.publisher.policy.noembargo' | translate }}</span>
-                </ng-template>
+  <div class="w-100 d-flex justify-content-between collapse-toggle" (click)="collapse.toggle()">
+    <div class="d-flex">
+      <button type="button" class="btn btn-link p-0 me-4" (click)="$event.preventDefault()"
+        [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
+        {{version.articleVersion | titlecase}} {{ 'submission.sections.sherpa.publisher.policy.version' |
+        translate
+        }}
+      </button>
+      <div>
+        @if (!!version?.embargo && !!version?.embargo.amount) {
+          <span> <i
+          class="fas fa-hourglass-half"></i> {{version.embargo.amount}}
+        {{version.embargo?.units[0]}}</span>
+      } @else {
+        <span><i class="fas fa-hourglass-half"></i> {{
+      'submission.sections.sherpa.publisher.policy.noembargo' | translate }}</span>
+    }
 
-                <span class="m-1 ms-4">
-                    <i class="far fa-folder-open"></i>
-                    <span *ngIf="!!version?.locations && version.locations.length > 0; else noLocations">
-                        {{version.locations[0]}} <span
-                            *ngIf="version.locations.length > 1">+{{version.locations.length-1}}</span>
-                    </span>
-                    <ng-template #noLocations>
-                        <span>{{
-                            'submission.sections.sherpa.publisher.policy.nolocation' | translate }}</span>
-                    </ng-template>
-                </span>
-            </div>
-        </div>
-        <div class="d-inline-block">
-            <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
-            <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
-        </div>
-    </div>
-    <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
-        <div *ngIf="!!version" class="ms-4">
-            <div class="row" *ngIf="!!version?.embargo && !!version?.embargo.amount">
-                <div class="col-4">
-                    <p class="m-1"><i class="fas fa-hourglass-half"></i> {{
-                        'submission.sections.sherpa.publisher.policy.embargo' | translate }}</p>
-                </div>
-                <div class="col-6">
-                    <p class="m-1" *ngIf="!!version.embargo;else noEmbargo">{{version.embargo.amount}}
-                        {{version.embargo.units}}</p>
-                    <ng-template #noEmbargo>
-                        <p class="m-1">{{ 'submission.sections.sherpa.publisher.policy.noembargo' | translate }}</p>
-                    </ng-template>
-                </div>
-            </div>
-            <div class="row" *ngIf="!!version?.licenses && version.licenses.length > 0">
-                <div class="col-4">
-                    <p class="m-1"><i class="fas fa-certificate"></i> {{
-                        'submission.sections.sherpa.publisher.policy.license' | translate }}</p>
-                </div>
-                <div class="col-6">
-                    <p class="m-1" *ngFor="let license of version.licenses">{{license}}</p>
-                </div>
-            </div>
-            <div class="row" *ngIf="!!version?.prerequisites && version.prerequisites.length > 0">
-                <div class="col-4">
-                    <p class="m-1"><i class="fas fa-exclamation-circle"></i> {{
-                        'submission.sections.sherpa.publisher.policy.prerequisites' | translate }}</p>
-                </div>
-                <div class="col-6">
-                    <p class="m-1" *ngFor="let prerequisite of version.prerequisites">{{prerequisite}}</p>
-                </div>
-            </div>
-            <div class="row" *ngIf="!!version?.locations && version.locations.length > 0">
-                <div class="col-4">
-                    <p class="m-1"><i class="far fa-folder-open"></i> {{
-                        'submission.sections.sherpa.publisher.policy.location' | translate }}</p>
-                </div>
-                <div class="col-6">
-                    <p class="m-1" *ngFor="let location of version.locations">{{location}}</p>
-                </div>
-            </div>
-            <div class="row" *ngIf="!!version?.conditions && version.conditions.length > 0">
-                <div class="col-4">
-                    <p class="m-1"><i class="fas fa-tasks"></i> {{
-                        'submission.sections.sherpa.publisher.policy.conditions' | translate }}</p>
-                </div>
-                <div class="col-6">
-                    <p class="m-1" *ngFor="let condition of version.conditions">{{condition}}</p>
-                </div>
-            </div>
-        </div>
-    </div>
+    <span class="m-1 ms-4">
+      <i class="far fa-folder-open"></i>
+      @if (!!version?.locations && version.locations.length > 0) {
+        <span>
+          {{version.locations[0]}} @if (version.locations.length > 1) {
+          <span
+          >+{{version.locations.length-1}}</span>
+        }
+      </span>
+    } @else {
+      <span>{{
+      'submission.sections.sherpa.publisher.policy.nolocation' | translate }}</span>
+    }
+  </span>
+</div>
+</div>
+<div class="d-inline-block">
+  @if (collapse.collapsed) {
+    <span class="fas fa-chevron-down"></span>
+  }
+  @if (!collapse.collapsed) {
+    <span class="fas fa-chevron-up"></span>
+  }
+</div>
+</div>
+<div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
+  @if (!!version) {
+    <div class="ms-4">
+      @if (!!version?.embargo && !!version?.embargo.amount) {
+        <div class="row">
+          <div class="col-4">
+            <p class="m-1"><i class="fas fa-hourglass-half"></i> {{
+          'submission.sections.sherpa.publisher.policy.embargo' | translate }}</p>
+        </div>
+        <div class="col-6">
+          @if (!!version.embargo) {
+            <p class="m-1">{{version.embargo.amount}}
+            {{version.embargo.units}}</p>
+          } @else {
+            <p class="m-1">{{ 'submission.sections.sherpa.publisher.policy.noembargo' | translate }}</p>
+          }
+        </div>
+      </div>
+    }
+    @if (!!version?.licenses && version.licenses.length > 0) {
+      <div class="row">
+        <div class="col-4">
+          <p class="m-1"><i class="fas fa-certificate"></i> {{
+        'submission.sections.sherpa.publisher.policy.license' | translate }}</p>
+      </div>
+      <div class="col-6">
+        @for (license of version.licenses; track license) {
+          <p class="m-1">{{license}}</p>
+        }
+      </div>
+    </div>
+  }
+  @if (!!version?.prerequisites && version.prerequisites.length > 0) {
+    <div class="row">
+      <div class="col-4">
+        <p class="m-1"><i class="fas fa-exclamation-circle"></i> {{
+      'submission.sections.sherpa.publisher.policy.prerequisites' | translate }}</p>
+    </div>
+    <div class="col-6">
+      @for (prerequisite of version.prerequisites; track prerequisite) {
+        <p class="m-1">{{prerequisite}}</p>
+      }
+    </div>
+  </div>
+}
+@if (!!version?.locations && version.locations.length > 0) {
+  <div class="row">
+    <div class="col-4">
+      <p class="m-1"><i class="far fa-folder-open"></i> {{
+    'submission.sections.sherpa.publisher.policy.location' | translate }}</p>
+  </div>
+  <div class="col-6">
+    @for (location of version.locations; track location) {
+      <p class="m-1">{{location}}</p>
+    }
+  </div>
+</div>
+}
+@if (!!version?.conditions && version.conditions.length > 0) {
+  <div class="row">
+    <div class="col-4">
+      <p class="m-1"><i class="fas fa-tasks"></i> {{
+    'submission.sections.sherpa.publisher.policy.conditions' | translate }}</p>
+  </div>
+  <div class="col-6">
+    @for (condition of version.conditions; track condition) {
+      <p class="m-1">{{condition}}</p>
+    }
+  </div>
+</div>
+}
+</div>
+}
+</div>
 </div>
diff --git a/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.html b/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.html
index 36b9581182..f63c1dbe0b 100644
--- a/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.html
+++ b/src/app/submission/sections/sherpa-policies/metadata-information/metadata-information.component.html
@@ -1,39 +1,47 @@
 <div class="ms-4">
-    <div class="row" *ngIf="!!metadata?.id">
-        <div class="col-4">
-            <p class="m-1">{{ 'submission.sections.sherpa.record.information.id' | translate }}</p>
-        </div>
-        <div class="col-8">
-            <p class="m-1">{{metadata.id}}
-            </p>
-        </div>
+  @if (!!metadata?.id) {
+    <div class="row">
+      <div class="col-4">
+        <p class="m-1">{{ 'submission.sections.sherpa.record.information.id' | translate }}</p>
+      </div>
+      <div class="col-8">
+        <p class="m-1">{{metadata.id}}
+        </p>
+      </div>
     </div>
-    <div class="row" *ngIf="!!metadata?.dateCreated">
-        <div class="col-4">
-            <p class="m-1">{{ 'submission.sections.sherpa.record.information.date.created' | translate }}</p>
-        </div>
-        <div class="col-8">
-            <p class="m-1">{{metadata.dateCreated | date: 'd MMMM Y H:mm:ss zzzz' }}
-            </p>
-        </div>
+  }
+  @if (!!metadata?.dateCreated) {
+    <div class="row">
+      <div class="col-4">
+        <p class="m-1">{{ 'submission.sections.sherpa.record.information.date.created' | translate }}</p>
+      </div>
+      <div class="col-8">
+        <p class="m-1">{{metadata.dateCreated | date: 'd MMMM Y H:mm:ss zzzz' }}
+        </p>
+      </div>
     </div>
-    <div class="row" *ngIf="!!metadata?.dateModified">
-        <div class="col-4">
-            <p class="m-1">{{ 'submission.sections.sherpa.record.information.date.modified' | translate }}</p>
-        </div>
-        <div class="col-8">
-            <p class="m-1">{{metadata.dateModified| date: 'd MMMM Y H:mm:ss zzzz' }}
-            </p>
-        </div>
+  }
+  @if (!!metadata?.dateModified) {
+    <div class="row">
+      <div class="col-4">
+        <p class="m-1">{{ 'submission.sections.sherpa.record.information.date.modified' | translate }}</p>
+      </div>
+      <div class="col-8">
+        <p class="m-1">{{metadata.dateModified| date: 'd MMMM Y H:mm:ss zzzz' }}
+        </p>
+      </div>
     </div>
-    <div class="row" *ngIf="!!metadata?.uri">
-        <div class="col-4">
-            <p class="m-1">{{ 'submission.sections.sherpa.record.information.uri' | translate }}</p>
-        </div>
-        <div class="col-8">
-            <p class="m-1">
-                <a [href]="metadata.uri" target="_blank">{{metadata.uri}}</a>
-            </p>
-        </div>
+  }
+  @if (!!metadata?.uri) {
+    <div class="row">
+      <div class="col-4">
+        <p class="m-1">{{ 'submission.sections.sherpa.record.information.uri' | translate }}</p>
+      </div>
+      <div class="col-8">
+        <p class="m-1">
+          <a [href]="metadata.uri" target="_blank">{{metadata.uri}}</a>
+        </p>
+      </div>
     </div>
+  }
 </div>
diff --git a/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.html b/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.html
index 26da914ead..3f11712354 100644
--- a/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.html
+++ b/src/app/submission/sections/sherpa-policies/publication-information/publication-information.component.html
@@ -1,64 +1,82 @@
 <div class="ms-4">
-    <div class="row" *ngIf="!!journal?.titles && journal.titles.length > 0">
-        <div class="col-4">
-            <p class="m-1">{{'submission.sections.sherpa.publication.information.title' | translate}}</p>
-        </div>
-        <div class="col-4">
-            <p class="m-1" *ngFor="let title of journal.titles">{{title}}
-            </p>
-        </div>
+  @if (!!journal?.titles && journal.titles.length > 0) {
+    <div class="row">
+      <div class="col-4">
+        <p class="m-1">{{'submission.sections.sherpa.publication.information.title' | translate}}</p>
+      </div>
+      <div class="col-4">
+        @for (title of journal.titles; track title) {
+          <p class="m-1">{{title}}
+          </p>
+        }
+      </div>
     </div>
-    <div class="row" *ngIf="!!journal?.issns && journal.issns.length > 0">
-        <div class="col-4">
-            <p class="m-1">{{'submission.sections.sherpa.publication.information.issns' | translate}}</p>
-        </div>
-        <div class="col-4">
-            <p class="m-1" *ngFor="let issn of journal.issns">{{issn}}
-            </p>
-        </div>
+  }
+  @if (!!journal?.issns && journal.issns.length > 0) {
+    <div class="row">
+      <div class="col-4">
+        <p class="m-1">{{'submission.sections.sherpa.publication.information.issns' | translate}}</p>
+      </div>
+      <div class="col-4">
+        @for (issn of journal.issns; track issn) {
+          <p class="m-1">{{issn}}
+          </p>
+        }
+      </div>
     </div>
-    <div class="row" *ngIf="!!journal?.url">
-        <div class="col-4">
-            <p class="m-1">{{'submission.sections.sherpa.publication.information.url' | translate}}</p>
-        </div>
-        <div class="col-4">
-            <p class="m-1">
-                <a href="{{journal.url}}" target="_blank" rel="noopener noreferrer">
-                    {{journal.url}}
-                </a>
-            </p>
-        </div>
+  }
+  @if (!!journal?.url) {
+    <div class="row">
+      <div class="col-4">
+        <p class="m-1">{{'submission.sections.sherpa.publication.information.url' | translate}}</p>
+      </div>
+      <div class="col-4">
+        <p class="m-1">
+          <a href="{{journal.url}}" target="_blank" rel="noopener noreferrer">
+            {{journal.url}}
+          </a>
+        </p>
+      </div>
     </div>
-    <div class="row" *ngIf="!!journal?.publishers && journal.publishers.length > 0">
+  }
+  @if (!!journal?.publishers && journal.publishers.length > 0) {
+    <div class="row">
+      <div class="col-4">
+        <p class="m-1">{{'submission.sections.sherpa.publication.information.publishers' | translate}}</p>
+      </div>
+      @for (publisher of journal.publishers; track publisher) {
         <div class="col-4">
-            <p class="m-1">{{'submission.sections.sherpa.publication.information.publishers' | translate}}</p>
-        </div>
-        <div class="col-4" *ngFor="let publisher of journal.publishers">
-            <p class="m-1">
-                <a href="{{publisher.uri}}" target="_blank" rel="noopener noreferrer">
-                    {{publisher.name}}
-                </a>
-            </p>
+          <p class="m-1">
+            <a href="{{publisher.uri}}" target="_blank" rel="noopener noreferrer">
+              {{publisher.name}}
+            </a>
+          </p>
         </div>
+      }
     </div>
-    <div class="row" *ngIf="!!journal?.romeoPub">
-        <div class="col-4">
-            <p class="m-1">{{'submission.sections.sherpa.publication.information.romeoPub' | translate}}</p>
-        </div>
-        <div class="col-4">
-            <p class="m-1">
-                {{journal.romeoPub}}
-            </p>
-        </div>
+  }
+  @if (!!journal?.romeoPub) {
+    <div class="row">
+      <div class="col-4">
+        <p class="m-1">{{'submission.sections.sherpa.publication.information.romeoPub' | translate}}</p>
+      </div>
+      <div class="col-4">
+        <p class="m-1">
+          {{journal.romeoPub}}
+        </p>
+      </div>
     </div>
-    <div class="row" *ngIf="!!journal?.zetoPub">
-        <div class="col-4">
-            <p class="m-1">{{'submission.sections.sherpa.publication.information.zetoPub' | translate}}</p>
-        </div>
-        <div class="col-4">
-            <p class="m-1">
-                {{journal.zetoPub}}
-            </p>
-        </div>
+  }
+  @if (!!journal?.zetoPub) {
+    <div class="row">
+      <div class="col-4">
+        <p class="m-1">{{'submission.sections.sherpa.publication.information.zetoPub' | translate}}</p>
+      </div>
+      <div class="col-4">
+        <p class="m-1">
+          {{journal.zetoPub}}
+        </p>
+      </div>
     </div>
+  }
 </div>
diff --git a/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.html b/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.html
index 4e89a98aab..89eb987730 100644
--- a/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.html
+++ b/src/app/submission/sections/sherpa-policies/publisher-policy/publisher-policy.component.html
@@ -1,16 +1,22 @@
 <div class="ms-4">
-    <ds-content-accordion *ngFor="let permittedVersions of policy.permittedVersions" [version]="permittedVersions">
+  @for (permittedVersions of policy.permittedVersions; track permittedVersions) {
+    <ds-content-accordion [version]="permittedVersions">
     </ds-content-accordion>
-    <div class="row" *ngIf="!!policy?.urls">
-        <div class="col-12">
-            <p class="m-1">
-                {{'submission.sections.sherpa.publisher.policy.more.information' | translate}}
-            </p>
-            <ul>
-                <li *ngFor="let url of policy.urls | keyvalue">
-                    <a href="{{url.key}}" target="_blank" rel="noopener noreferrer">{{url.value}}</a>
-                </li>
-            </ul>
-        </div>
+  }
+  @if (!!policy?.urls) {
+    <div class="row">
+      <div class="col-12">
+        <p class="m-1">
+          {{'submission.sections.sherpa.publisher.policy.more.information' | translate}}
+        </p>
+        <ul>
+          @for (url of policy.urls | keyvalue; track url) {
+            <li>
+              <a href="{{url.key}}" target="_blank" rel="noopener noreferrer">{{url.value}}</a>
+            </li>
+          }
+        </ul>
+      </div>
     </div>
+  }
 </div>
diff --git a/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.html b/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.html
index 7b3da2d020..c13f2c71e9 100644
--- a/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.html
+++ b/src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.html
@@ -1,72 +1,89 @@
-<ds-alert [type]="'alert-info'" *ngIf="hasNoData()" [content]="'submission.sections.sherpa-policy.title-empty'">
-</ds-alert>
-
-<div *ngIf="!hasNoData()" class="d-flex flex-column flex-nowrap mt-2 mb-4">
-  <ds-alert [type]="'alert-info'" >
-    {{'submission.sections.sherpa.publisher.policy.description' | translate}}
+@if (hasNoData()) {
+  <ds-alert [type]="'alert-info'" [content]="'submission.sections.sherpa-policy.title-empty'">
   </ds-alert>
-  <div>
-    <button type="button" class="btn btn-secondary float-end" (click)="refresh()" data-test="refresh-btn">
-      <span><i class="fas fa-sync"></i> {{'submission.sections.sherpa.publisher.policy.refresh' | translate}} </span>
-    </button>
+}
+
+@if (!hasNoData()) {
+  <div class="d-flex flex-column flex-nowrap mt-2 mb-4">
+    <ds-alert [type]="'alert-info'" >
+      {{'submission.sections.sherpa.publisher.policy.description' | translate}}
+    </ds-alert>
+    <div>
+      <button type="button" class="btn btn-secondary float-end" (click)="refresh()" data-test="refresh-btn">
+        <span><i class="fas fa-sync"></i> {{'submission.sections.sherpa.publisher.policy.refresh' | translate}} </span>
+      </button>
+    </div>
   </div>
-</div>
+}
 
 <ng-container *ngVar="(sherpaPoliciesData$ | async)?.sherpaResponse as sherpaData">
-    <ng-container *ngIf="!hasNoData() && (!!sherpaData && !sherpaData.error)">
-        <ng-container *ngFor="let journal of sherpaData.journals;let j=index;">
-            <div class="mb-3 border-bottom" data-test="collapse">
-                <div class="w-100 d-flex justify-content-between collapse-toggle mb-3" (click)="collapse.toggle()">
-                    <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
-                        [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
-                        {{'submission.sections.sherpa.publication.information' | translate}}
-                    </button>
-                    <div class="d-inline-block">
-                        <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
-                        <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
-                    </div>
-                </div>
-                <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
-                    <ds-publication-information [journal]="journal"></ds-publication-information>
-                </div>
-            </div>
-            <div *ngFor="let policy of journal.policies; let p=index;" class="mb-3 border-bottom" data-test="collapse">
-                <div class="w-100 d-flex justify-content-between collapse-toggle mb-3" (click)="collapse.toggle()">
-                    <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
-                        [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
-                        {{'submission.sections.sherpa.publisher.policy' | translate}}
-                    </button>
-                    <div class="d-inline-block">
-                        <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
-                        <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
-                    </div>
-                </div>
-                <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
-                    <ds-publisher-policy [policy]="policy"></ds-publisher-policy>
-                </div>
-            </div>
-        </ng-container>
-
-        <div class="mb-3 border-bottom" data-test="collapse">
-            <div class="w-100 d-flex justify-content-between collapse-toggle mb-3" (click)="collapse.toggle()">
-                <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
-                    [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
-                    {{'submission.sections.sherpa.record.information' | translate}}
-                </button>
-                <div class="d-inline-block">
-                    <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
-                    <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
-                </div>
-            </div>
-            <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
-                <ds-metadata-information [metadata]="sherpaData.metadata"></ds-metadata-information>
-            </div>
+  @if (!hasNoData() && (!!sherpaData && !sherpaData.error)) {
+    @for (journal of sherpaData.journals; track journal; let j = $index) {
+      <div class="mb-3 border-bottom" data-test="collapse">
+        <div class="w-100 d-flex justify-content-between collapse-toggle mb-3" (click)="collapse.toggle()">
+          <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
+            [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
+            {{'submission.sections.sherpa.publication.information' | translate}}
+          </button>
+          <div class="d-inline-block">
+            @if (collapse.collapsed) {
+              <span class="fas fa-chevron-down"></span>
+            }
+            @if (!collapse.collapsed) {
+              <span class="fas fa-chevron-up"></span>
+            }
+          </div>
         </div>
-    </ng-container>
+        <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
+          <ds-publication-information [journal]="journal"></ds-publication-information>
+        </div>
+      </div>
+      @for (policy of journal.policies; track policy; let p = $index) {
+        <div class="mb-3 border-bottom" data-test="collapse">
+          <div class="w-100 d-flex justify-content-between collapse-toggle mb-3" (click)="collapse.toggle()">
+            <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
+              [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
+              {{'submission.sections.sherpa.publisher.policy' | translate}}
+            </button>
+            <div class="d-inline-block">
+              @if (collapse.collapsed) {
+                <span class="fas fa-chevron-down"></span>
+              }
+              @if (!collapse.collapsed) {
+                <span class="fas fa-chevron-up"></span>
+              }
+            </div>
+          </div>
+          <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
+            <ds-publisher-policy [policy]="policy"></ds-publisher-policy>
+          </div>
+        </div>
+      }
+    }
+    <div class="mb-3 border-bottom" data-test="collapse">
+      <div class="w-100 d-flex justify-content-between collapse-toggle mb-3" (click)="collapse.toggle()">
+        <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
+          [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
+          {{'submission.sections.sherpa.record.information' | translate}}
+        </button>
+        <div class="d-inline-block">
+          @if (collapse.collapsed) {
+            <span class="fas fa-chevron-down"></span>
+          }
+          @if (!collapse.collapsed) {
+            <span class="fas fa-chevron-up"></span>
+          }
+        </div>
+      </div>
+      <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
+        <ds-metadata-information [metadata]="sherpaData.metadata"></ds-metadata-information>
+      </div>
+    </div>
+  }
 
-    <ng-container *ngIf="!!sherpaData && sherpaData.error">
-        <ds-alert [type]="AlertTypeEnum.Error"
-            [content]="!!sherpaData.message ? sherpaData.message : 'submission.sections.sherpa.error.message'| translate">
-        </ds-alert>
-    </ng-container>
+  @if (!!sherpaData && sherpaData.error) {
+    <ds-alert [type]="AlertTypeEnum.Error"
+      [content]="!!sherpaData.message ? sherpaData.message : 'submission.sections.sherpa.error.message'| translate">
+    </ds-alert>
+  }
 </ng-container>
diff --git a/src/app/submission/sections/upload/accessConditions/submission-section-upload-access-conditions.component.html b/src/app/submission/sections/upload/accessConditions/submission-section-upload-access-conditions.component.html
index ddfe3e27ce..cb2bdfcbd5 100644
--- a/src/app/submission/sections/upload/accessConditions/submission-section-upload-access-conditions.component.html
+++ b/src/app/submission/sections/upload/accessConditions/submission-section-upload-access-conditions.component.html
@@ -1,8 +1,14 @@
-<ng-container *ngFor="let accessCondition of accessConditionsList">
-  <span *ngIf="accessCondition.action === 'DEFAULT_BITSTREAM_READ'" class="badge bg-primary mt-3 me-2">
-    {{accessCondition.name}} {{accessCondition.startDate}} {{accessCondition.endDate}}
-  </span>
-  <span *ngIf="accessCondition.name === 'lease'" class="badge bg-primary mt-3 me-2">{{accessCondition.name}} from {{accessCondition.endDate}}</span>
-  <span *ngIf="accessCondition.name === 'embargo'" class="badge bg-dark mt-3 me-2">{{accessCondition.name}} until {{accessCondition.startDate}}</span>
+@for (accessCondition of accessConditionsList; track accessCondition) {
+  @if (accessCondition.action === 'DEFAULT_BITSTREAM_READ') {
+    <span class="badge bg-primary mt-3 me-2">
+      {{accessCondition.name}} {{accessCondition.startDate}} {{accessCondition.endDate}}
+    </span>
+  }
+  @if (accessCondition.name === 'lease') {
+    <span class="badge bg-primary mt-3 me-2">{{accessCondition.name}} from {{accessCondition.endDate}}</span>
+  }
+  @if (accessCondition.name === 'embargo') {
+    <span class="badge bg-dark mt-3 me-2">{{accessCondition.name}} until {{accessCondition.startDate}}</span>
+  }
   <br>
-</ng-container>
+  }
diff --git a/src/app/submission/sections/upload/file/section-upload-file.component.html b/src/app/submission/sections/upload/file/section-upload-file.component.html
index da1200b8e4..876d00cd0f 100644
--- a/src/app/submission/sections/upload/file/section-upload-file.component.html
+++ b/src/app/submission/sections/upload/file/section-upload-file.component.html
@@ -1,18 +1,22 @@
-<ng-container *ngIf="fileData">
+@if (fileData) {
   <div class="row">
     <!-- Default switch -->
     <div class="col-md-2 d-flex justify-content-center align-items-center" >
       <div class="custom-control custom-switch">
         <input
-        type="checkbox"
-        class="custom-control-input"
-        id="primaryBitstream{{fileIndex}}"
-        [disabled]="processingSaveStatus$ | async"
-        [checked]="isPrimary"
-        (change)="togglePrimaryBitstream($event)">
+          type="checkbox"
+          class="custom-control-input"
+          id="primaryBitstream{{fileIndex}}"
+          [disabled]="processingSaveStatus$ | async"
+          [checked]="isPrimary"
+          (change)="togglePrimaryBitstream($event)">
         <label class="custom-control-label" for="primaryBitstream{{fileIndex}}">
-          <span class="sr-only" *ngIf="!isPrimary">{{'submission.sections.upload.primary.make' | translate:{ fileName: fileName } }}</span>
-          <span class="sr-only" *ngIf="isPrimary">{{'submission.sections.upload.primary.remove' | translate:{ fileName: fileName } }}</span>
+          @if (!isPrimary) {
+            <span class="sr-only">{{'submission.sections.upload.primary.make' | translate:{ fileName: fileName } }}</span>
+          }
+          @if (isPrimary) {
+            <span class="sr-only">{{'submission.sections.upload.primary.remove' | translate:{ fileName: fileName } }}</span>
+          }
         </label>
       </div>
     </div>
@@ -23,29 +27,33 @@
       <div class="float-end w-15">
         <ng-container>
           <ds-file-download-link [cssClasses]="'btn btn-link-focus'" [isBlank]="true"
-                                        [bitstream]="getBitstream()" [enableRequestACopy]="false">
+            [bitstream]="getBitstream()" [enableRequestACopy]="false">
             <i class="fa fa-download fa-2x text-normal" aria-hidden="true"></i>
           </ds-file-download-link>
           <button class="btn btn-link-focus"
-                  [attr.aria-label]="'submission.sections.upload.edit.title' | translate"
-                  title="{{ 'submission.sections.upload.edit.title' | translate }}"
-                  (click)="$event.preventDefault();editBitstreamData();">
+            [attr.aria-label]="'submission.sections.upload.edit.title' | translate"
+            title="{{ 'submission.sections.upload.edit.title' | translate }}"
+            (click)="$event.preventDefault();editBitstreamData();">
             <i class="fa fa-edit fa-2x text-normal"></i>
           </button>
           <button class="btn btn-link-focus"
-                  [attr.aria-label]="'submission.sections.upload.delete.confirm.title' | translate"
-                  title="{{ 'submission.sections.upload.delete.confirm.title' | translate }}"
-                  [dsBtnDisabled]="(processingDelete$ | async)"
-                  (click)="$event.preventDefault();confirmDelete(content);">
-            <i *ngIf="(processingDelete$ | async)" class="fas fa-circle-notch fa-spin fa-2x link-danger"></i>
-            <i *ngIf="(processingDelete$ | async) !== true" class="fa fa-trash fa-2x link-danger"></i>
+            [attr.aria-label]="'submission.sections.upload.delete.confirm.title' | translate"
+            title="{{ 'submission.sections.upload.delete.confirm.title' | translate }}"
+            [dsBtnDisabled]="(processingDelete$ | async)"
+            (click)="$event.preventDefault();confirmDelete(content);">
+            @if ((processingDelete$ | async)) {
+              <i class="fas fa-circle-notch fa-spin fa-2x link-danger"></i>
+            }
+            @if ((processingDelete$ | async) !== true) {
+              <i class="fa fa-trash fa-2x link-danger"></i>
+            }
           </button>
         </ng-container>
       </div>
       <div class="clearfix"></div>
     </div>
   </div>
-</ng-container>
+}
 
 <ng-template #content let-c="close" let-d="dismiss">
   <div class="modal-header">
@@ -58,8 +66,8 @@
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-secondary"
-            (click)="c('cancel')">{{ 'submission.sections.upload.delete.confirm.cancel' | translate }}</button>
+    (click)="c('cancel')">{{ 'submission.sections.upload.delete.confirm.cancel' | translate }}</button>
     <button type="button" class="btn btn-danger"
-            (click)="c('ok')">{{ 'submission.sections.upload.delete.confirm.submit' | translate }}</button>
+    (click)="c('ok')">{{ 'submission.sections.upload.delete.confirm.submit' | translate }}</button>
   </div>
 </ng-template>
diff --git a/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.html b/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.html
index 102987a9dd..1e3ee6333e 100644
--- a/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.html
+++ b/src/app/system-wide-alert/alert-banner/system-wide-alert-banner.component.html
@@ -1,21 +1,31 @@
-<div *ngIf="(systemWideAlert$ |async)?.active">
+@if ((systemWideAlert$ |async)?.active) {
+  <div>
     <div class="rounded-0 alert alert-warning w100 m-0 px-1">
-        <div class="container">
-            <span class="fw-bold">
-                <span *ngIf="(countDownDays|async) > 0 || (countDownHours| async) > 0 || (countDownMinutes|async) > 0 ">
-                    {{ 'system-wide-alert-banner.countdown.prefix' | translate }}
-                </span>
-                <span *ngIf="(countDownDays|async) > 0">
-                    {{ 'system-wide-alert-banner.countdown.days' | translate: { days: countDownDays|async } }}
-                </span>
-                <span *ngIf="(countDownDays|async) > 0 || (countDownHours| async) > 0 ">
-                    {{ 'system-wide-alert-banner.countdown.hours' | translate: { hours: countDownHours| async } }}
-                </span>
-                <span *ngIf="(countDownDays|async) > 0 || (countDownHours| async) > 0 || (countDownMinutes|async) > 0 ">
-                    {{ 'system-wide-alert-banner.countdown.minutes' | translate: { minutes: countDownMinutes|async } }}
-                </span>
+      <div class="container">
+        <span class="fw-bold">
+          @if ((countDownDays|async) > 0 || (countDownHours| async) > 0 || (countDownMinutes|async) > 0 ) {
+            <span>
+              {{ 'system-wide-alert-banner.countdown.prefix' | translate }}
             </span>
-            <span [innerHTML]="(systemWideAlert$ |async)?.message"></span>
-        </div>
+          }
+          @if ((countDownDays|async) > 0) {
+            <span>
+              {{ 'system-wide-alert-banner.countdown.days' | translate: { days: countDownDays|async } }}
+            </span>
+          }
+          @if ((countDownDays|async) > 0 || (countDownHours| async) > 0 ) {
+            <span>
+              {{ 'system-wide-alert-banner.countdown.hours' | translate: { hours: countDownHours| async } }}
+            </span>
+          }
+          @if ((countDownDays|async) > 0 || (countDownHours| async) > 0 || (countDownMinutes|async) > 0 ) {
+            <span>
+              {{ 'system-wide-alert-banner.countdown.minutes' | translate: { minutes: countDownMinutes|async } }}
+            </span>
+          }
+        </span>
+        <span [innerHTML]="(systemWideAlert$ |async)?.message"></span>
+      </div>
     </div>
-</div>
+  </div>
+}
diff --git a/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html
index 92dd91227b..f6a5573a74 100644
--- a/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html
+++ b/src/app/system-wide-alert/alert-form/system-wide-alert-form.component.html
@@ -1,94 +1,110 @@
 <div class="container">
-    <h1 id="header">{{'system-wide-alert.form.header' | translate}}</h1>
-    <div [formGroup]="alertForm" [class]="'ng-invalid'">
-        <div class="mb-3">
-            <div class="row mb-2">
-                <div class="col">
-                    <ui-switch [checkedLabel]="'system-wide-alert.form.label.active' | translate"
-                        [uncheckedLabel]="'system-wide-alert.form.label.inactive' | translate"
-                        [checked]="formActive.value" (change)="setActive($event)"></ui-switch>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col">
-                    <label class="form-label" for="formMessage">{{ 'system-wide-alert.form.label.message' | translate }}</label>
-                    <textarea id="formMessage" rows="5"
-                        [className]="(formMessage.invalid) && (formMessage.dirty || formMessage.touched) ? 'form-control is-invalid' :'form-control'"
-                        formControlName="formMessage">
-                </textarea>
-                    <div *ngIf="formMessage.invalid && (formMessage.dirty || formMessage.touched)"
-                        class="invalid-feedback show-feedback">
-                        <span *ngIf="formMessage.errors">
-                            {{ 'system-wide-alert.form.error.message' | translate }}
-                        </span>
-                    </div>
-                </div>
-            </div>
+  <h1 id="header">{{'system-wide-alert.form.header' | translate}}</h1>
+  <div [formGroup]="alertForm" [class]="'ng-invalid'">
+    <div class="mb-3">
+      <div class="row mb-2">
+        <div class="col">
+          <ui-switch [checkedLabel]="'system-wide-alert.form.label.active' | translate"
+            [uncheckedLabel]="'system-wide-alert.form.label.inactive' | translate"
+          [checked]="formActive.value" (change)="setActive($event)"></ui-switch>
         </div>
-    </div>
-    <div class="row">
-        <div class="col mb-2 d-flex align-items-end">
-            <ui-switch size="small" [ariaLabel]="'system-wide-alert.form.label.countdownTo.enable' | translate"
-                [checked]="counterEnabled$ |async" (change)="setCounterEnabled($event)"></ui-switch>
-            <span class="ms-2">{{ 'system-wide-alert.form.label.countdownTo.enable' | translate }}</span>
+      </div>
+      <div class="row">
+        <div class="col">
+          <label class="form-label" for="formMessage">{{ 'system-wide-alert.form.label.message' | translate }}</label>
+          <textarea id="formMessage" rows="5"
+            [className]="(formMessage.invalid) && (formMessage.dirty || formMessage.touched) ? 'form-control is-invalid' :'form-control'"
+            formControlName="formMessage">
+          </textarea>
+          @if (formMessage.invalid && (formMessage.dirty || formMessage.touched)) {
+            <div
+              class="invalid-feedback show-feedback">
+              @if (formMessage.errors) {
+                <span>
+                  {{ 'system-wide-alert.form.error.message' | translate }}
+                </span>
+              }
+            </div>
+          }
         </div>
+      </div>
     </div>
-    <div *ngIf="counterEnabled$ |async">
-        <div class="row">
-            <div class="col-sm-12 col-md-6">
-                <div class="input-group">
-                    <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="date"
-                        [minDate]="minDate" ngbDatepicker #d="ngbDatepicker" (ngModelChange)="updatePreviewTime()" />
-                    <button [attr.aria-label]="'system-wide-alert-form.select-date-by-calendar' | translate"
-                        (click)="d.toggle()" class="btn btn-outline-secondary fas fa-calendar" type="button">
-                    </button>
-                </div>
-            </div>
-            <div class="col-12 d-md-none">
-                <div class="input-group">
-                    <ngb-timepicker [(ngModel)]="time" (ngModelChange)="updatePreviewTime()"></ngb-timepicker>
-                </div>
-            </div>
-            <div class="d-none d-md-block col-md-6 timepicker-margin">
-                <div class="input-group">
-                    <ngb-timepicker [(ngModel)]="time" (ngModelChange)="updatePreviewTime()"></ngb-timepicker>
-                </div>
-            </div>
+  </div>
+  <div class="row">
+    <div class="col mb-2 d-flex align-items-end">
+      <ui-switch size="small" [ariaLabel]="'system-wide-alert.form.label.countdownTo.enable' | translate"
+      [checked]="counterEnabled$ |async" (change)="setCounterEnabled($event)"></ui-switch>
+      <span class="ms-2">{{ 'system-wide-alert.form.label.countdownTo.enable' | translate }}</span>
+    </div>
+  </div>
+  @if (counterEnabled$ |async) {
+    <div>
+      <div class="row">
+        <div class="col-sm-12 col-md-6">
+          <div class="input-group">
+            <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="date"
+              [minDate]="minDate" ngbDatepicker #d="ngbDatepicker" (ngModelChange)="updatePreviewTime()" />
+            <button [attr.aria-label]="'system-wide-alert-form.select-date-by-calendar' | translate"
+              (click)="d.toggle()" class="btn btn-outline-secondary fas fa-calendar" type="button">
+            </button>
+          </div>
         </div>
-    </div>
-    <div class="mb-2">
-        <span class="text-muted">{{ 'system-wide-alert.form.label.countdownTo.hint' | translate }}</span>
-    </div>
-    <div *ngIf="formMessage.value">
-        <div class="row">
-            <div class="col">
-                <label class="form-label">{{ 'system-wide-alert.form.label.preview' | translate }}</label>
-            </div>
+        <div class="col-12 d-md-none">
+          <div class="input-group">
+            <ngb-timepicker [(ngModel)]="time" (ngModelChange)="updatePreviewTime()"></ngb-timepicker>
+          </div>
         </div>
-        <div class="rounded-0 alert alert-warning">
-            <span class="fw-bold">
-                <span *ngIf="previewDays > 0 || previewHours > 0 || previewMinutes > 0 ">
-                    {{ 'system-wide-alert-banner.countdown.prefix' | translate }}
-                </span>
-                <span *ngIf="previewDays > 0">
-                    {{ 'system-wide-alert-banner.countdown.days' | translate: { days: previewDays } }}
-                </span>
-                <span *ngIf="previewDays > 0 || previewHours > 0 ">
-                    {{ 'system-wide-alert-banner.countdown.hours' | translate: { hours: previewHours } }}
-                </span>
-                <span *ngIf="previewDays > 0 || previewHours > 0 || previewMinutes > 0 ">
-                    {{ 'system-wide-alert-banner.countdown.minutes' | translate: { minutes: previewMinutes } }}
-                </span>
+        <div class="d-none d-md-block col-md-6 timepicker-margin">
+          <div class="input-group">
+            <ngb-timepicker [(ngModel)]="time" (ngModelChange)="updatePreviewTime()"></ngb-timepicker>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+  <div class="mb-2">
+    <span class="text-muted">{{ 'system-wide-alert.form.label.countdownTo.hint' | translate }}</span>
+  </div>
+  @if (formMessage.value) {
+    <div>
+      <div class="row">
+        <div class="col">
+          <label class="form-label">{{ 'system-wide-alert.form.label.preview' | translate }}</label>
+        </div>
+      </div>
+      <div class="rounded-0 alert alert-warning">
+        <span class="fw-bold">
+          @if (previewDays > 0 || previewHours > 0 || previewMinutes > 0 ) {
+            <span>
+              {{ 'system-wide-alert-banner.countdown.prefix' | translate }}
             </span>
-            <span [innerHTML]="formMessage.value"></span>
-        </div>
-    </div>
-    <div class="btn-row float-end space-children-mr mt-2">
-        <button (click)="back()" class="btn btn-outline-secondary">
-            <i class="fas fa-arrow-left"></i> {{ 'system-wide-alert.form.cancel' | translate }}
-        </button>
-        <button class="btn btn-primary" [dsBtnDisabled]="alertForm.invalid" (click)="save()">
-            <i class="fa fa-save"></i> {{ 'system-wide-alert.form.save' | translate }}
-        </button>
+          }
+          @if (previewDays > 0) {
+            <span>
+              {{ 'system-wide-alert-banner.countdown.days' | translate: { days: previewDays } }}
+            </span>
+          }
+          @if (previewDays > 0 || previewHours > 0 ) {
+            <span>
+              {{ 'system-wide-alert-banner.countdown.hours' | translate: { hours: previewHours } }}
+            </span>
+          }
+          @if (previewDays > 0 || previewHours > 0 || previewMinutes > 0 ) {
+            <span>
+              {{ 'system-wide-alert-banner.countdown.minutes' | translate: { minutes: previewMinutes } }}
+            </span>
+          }
+        </span>
+        <span [innerHTML]="formMessage.value"></span>
+      </div>
     </div>
+  }
+  <div class="btn-row float-end space-children-mr mt-2">
+    <button (click)="back()" class="btn btn-outline-secondary">
+      <i class="fas fa-arrow-left"></i> {{ 'system-wide-alert.form.cancel' | translate }}
+    </button>
+    <button class="btn btn-primary" [dsBtnDisabled]="alertForm.invalid" (click)="save()">
+      <i class="fa fa-save"></i> {{ 'system-wide-alert.form.save' | translate }}
+    </button>
+  </div>
 </div>
diff --git a/src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-action-rating/advanced-workflow-action-rating.component.html b/src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-action-rating/advanced-workflow-action-rating.component.html
index bd2ec5115b..4fe2049d97 100644
--- a/src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-action-rating/advanced-workflow-action-rating.component.html
+++ b/src/app/workflowitems-edit-page/advanced-workflow-action/advanced-workflow-action-rating/advanced-workflow-action-rating.component.html
@@ -1,43 +1,56 @@
 <div *ngVar="getAdvancedInfo(workflowAction$ | async) as advancedInfo">
-  <p *ngIf="advancedInfo?.descriptionRequired">
-    {{ 'advanced-workflow-action.rating.description-requiredDescription' | translate }}
-  </p>
-  <p *ngIf="!advancedInfo?.descriptionRequired">
-    {{ 'advanced-workflow-action.rating.description' | translate }}
-  </p>
+  @if (advancedInfo?.descriptionRequired) {
+    <p>
+      {{ 'advanced-workflow-action.rating.description-requiredDescription' | translate }}
+    </p>
+  }
+  @if (!advancedInfo?.descriptionRequired) {
+    <p>
+      {{ 'advanced-workflow-action.rating.description' | translate }}
+    </p>
+  }
 
-  <form (ngSubmit)="performAction()" *ngIf="ratingForm" [formGroup]="ratingForm">
-    <div class="mb-3">
-      <label class="control-label">
-        <span>{{ 'advanced-workflow-action.rating.form.review.label' | translate }}</span>
-        <span *ngIf="advancedInfo?.descriptionRequired">*</span>
-      </label>
-      <textarea [ngClass]="{ 'is-invalid' : isInvalid('review') }"
-                [required]="advancedInfo?.descriptionRequired" class="form-control" formControlName="review">
-      </textarea>
-      <small *ngIf="isInvalid('review')" class="invalid-feedback d-block">
-        {{ 'advanced-workflow-action.rating.form.review.error' | translate }}
-      </small>
-    </div>
-
-    <div class="mb-3">
-      <label class="control-label mb-1">
-        {{ 'advanced-workflow-action.rating.form.rating.label' | translate }}*
-      </label>
-      <div class="d-block">
-        <ngb-rating [max]="advancedInfo?.maxValue" [ngClass]="{ 'text-danger': isInvalid('rating') }"
-                    formControlName="rating">
-        </ngb-rating>
+  @if (ratingForm) {
+    <form (ngSubmit)="performAction()" [formGroup]="ratingForm">
+      <div class="mb-3">
+        <label class="control-label">
+          <span>{{ 'advanced-workflow-action.rating.form.review.label' | translate }}</span>
+          @if (advancedInfo?.descriptionRequired) {
+            <span>*</span>
+          }
+        </label>
+        <textarea [ngClass]="{ 'is-invalid' : isInvalid('review') }"
+          [required]="advancedInfo?.descriptionRequired" class="form-control" formControlName="review">
+        </textarea>
+        @if (isInvalid('review')) {
+          <small class="invalid-feedback d-block">
+            {{ 'advanced-workflow-action.rating.form.review.error' | translate }}
+          </small>
+        }
       </div>
-      <small *ngIf="isInvalid('rating')" class="invalid-feedback d-block">
-        {{ 'advanced-workflow-action.rating.form.rating.error' | translate }}
-      </small>
-    </div>
-  </form>
+      <div class="mb-3">
+        <label class="control-label mb-1">
+          {{ 'advanced-workflow-action.rating.form.rating.label' | translate }}*
+        </label>
+        <div class="d-block">
+          <ngb-rating [max]="advancedInfo?.maxValue" [ngClass]="{ 'text-danger': isInvalid('rating') }"
+            formControlName="rating">
+          </ngb-rating>
+        </div>
+        @if (isInvalid('rating')) {
+          <small class="invalid-feedback d-block">
+            {{ 'advanced-workflow-action.rating.form.rating.error' | translate }}
+          </small>
+        }
+      </div>
+    </form>
+  }
 
-  <ds-modify-item-overview *ngIf="item$ | async"
-                           [item]="item$ | async">
-  </ds-modify-item-overview>
+  @if (item$ | async) {
+    <ds-modify-item-overview
+      [item]="item$ | async">
+    </ds-modify-item-overview>
+  }
 
   <div class="d-flex flex-wrap justify-content-end">
     <button (click)="previousPage()" class="btn btn-default">
diff --git a/src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.ts b/src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.ts
index ffcb504a7f..e6f40363da 100644
--- a/src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.ts
+++ b/src/themes/custom/app/browse-by/browse-by-date/browse-by-date.component.ts
@@ -1,7 +1,4 @@
-import {
-  AsyncPipe,
-  NgIf,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -18,7 +15,6 @@ import { ThemedLoadingComponent } from '../../../../../app/shared/loading/themed
   standalone: true,
   imports: [
     AsyncPipe,
-    NgIf,
     TranslateModule,
     ThemedLoadingComponent,
     ThemedBrowseByComponent,
diff --git a/src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts b/src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
index 9b29bf93be..2d3137541e 100644
--- a/src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
+++ b/src/themes/custom/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts
@@ -1,7 +1,4 @@
-import {
-  AsyncPipe,
-  NgIf,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -18,7 +15,6 @@ import { ThemedLoadingComponent } from '../../../../../app/shared/loading/themed
   standalone: true,
   imports: [
     AsyncPipe,
-    NgIf,
     TranslateModule,
     ThemedLoadingComponent,
     ThemedBrowseByComponent,
diff --git a/src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.ts b/src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.ts
index 6a3b612b57..96e3dec322 100644
--- a/src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.ts
+++ b/src/themes/custom/app/browse-by/browse-by-title/browse-by-title.component.ts
@@ -1,7 +1,4 @@
-import {
-  AsyncPipe,
-  NgIf,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -18,7 +15,6 @@ import { ThemedLoadingComponent } from '../../../../../app/shared/loading/themed
   standalone: true,
   imports: [
     AsyncPipe,
-    NgIf,
     TranslateModule,
     ThemedLoadingComponent,
     ThemedBrowseByComponent,
diff --git a/src/themes/custom/app/profile-page/profile-page.component.ts b/src/themes/custom/app/profile-page/profile-page.component.ts
index 68292450fc..e5953f5ff2 100644
--- a/src/themes/custom/app/profile-page/profile-page.component.ts
+++ b/src/themes/custom/app/profile-page/profile-page.component.ts
@@ -1,7 +1,5 @@
 import {
   AsyncPipe,
-  NgForOf,
-  NgIf,
   NgTemplateOutlet,
 } from '@angular/common';
 import { Component } from '@angular/core';
@@ -31,8 +29,6 @@ import { VarDirective } from '../../../../app/shared/utils/var.directive';
     TranslateModule,
     ProfilePageResearcherFormComponent,
     VarDirective,
-    NgIf,
-    NgForOf,
     SuggestionsNotificationComponent,
     NgTemplateOutlet,
     PaginationComponent,
diff --git a/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts b/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts
index d1d2a4a1f0..7d0b39b9e7 100644
--- a/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts
+++ b/src/themes/custom/app/shared/dso-selector/modal-wrappers/create-community-parent-selector/create-community-parent-selector.component.ts
@@ -1,7 +1,4 @@
-import {
-  AsyncPipe,
-  NgIf,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -18,7 +15,6 @@ import { CreateCommunityParentSelectorComponent as BaseComponent } from '../../.
   imports: [
     AsyncPipe,
     DSOSelectorComponent,
-    NgIf,
     TranslateModule,
   ],
 })
diff --git a/src/themes/custom/app/shared/search/search-results/search-results.component.ts b/src/themes/custom/app/shared/search/search-results/search-results.component.ts
index b7c84f0fcc..0c831f7520 100644
--- a/src/themes/custom/app/shared/search/search-results/search-results.component.ts
+++ b/src/themes/custom/app/shared/search/search-results/search-results.component.ts
@@ -1,7 +1,4 @@
-import {
-  AsyncPipe,
-  NgIf,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
@@ -30,7 +27,6 @@ import { SearchResultsSkeletonComponent } from '../../../../../../app/shared/sea
   imports: [
     AsyncPipe,
     ErrorComponent,
-    NgIf,
     NgxSkeletonLoaderModule,
     ObjectCollectionComponent,
     RouterLink,
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
index 45e39d11ab..18de5dae5a 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.ts
@@ -1,7 +1,4 @@
-import {
-  AsyncPipe,
-  NgIf,
-} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -18,7 +15,7 @@ import { slideMobileNav } from '../../../../app/shared/animations/slide';
   styleUrls: ['header-navbar-wrapper.component.scss'],
   templateUrl: 'header-navbar-wrapper.component.html',
   standalone: true,
-  imports: [ThemedHeaderComponent, ThemedNavbarComponent, AsyncPipe, TranslateModule, NgIf],
+  imports: [ThemedHeaderComponent, ThemedNavbarComponent, AsyncPipe, TranslateModule],
   animations: [slideMobileNav],
 })
 export class HeaderNavbarWrapperComponent extends BaseComponent {
diff --git a/src/themes/dspace/app/header/header.component.html b/src/themes/dspace/app/header/header.component.html
index 27a506eb19..7007954e7d 100644
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -2,15 +2,17 @@
   <div class="container h-100 d-flex flex-row flex-wrap align-items-center justify-content-between gapx-3 gapy-2" id="main-site-header-container">
     <!-- Logo and navbar wrapper -->
     <div id="header-left"
-         [attr.role]="(isMobile$ | async) ? 'navigation' : 'presentation'"
-         [attr.aria-label]="(isMobile$ | async) ? ('nav.main.description' | translate) : null"
-         class="h-100 flex-fill d-flex flex-row flex-nowrap justify-content-start align-items-center gapx-3">
+      [attr.role]="(isMobile$ | async) ? 'navigation' : 'presentation'"
+      [attr.aria-label]="(isMobile$ | async) ? ('nav.main.description' | translate) : null"
+      class="h-100 flex-fill d-flex flex-row flex-nowrap justify-content-start align-items-center gapx-3">
       <a class="d-block my-2 my-md-0" routerLink="/home" [attr.aria-label]="'home.title' | translate">
         <img id="header-logo" src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
       </a>
-      <nav *ngIf="(isMobile$ | async) !== true" class="navbar navbar-expand p-0 align-items-stretch align-self-stretch" id="desktop-navbar" [attr.aria-label]="'nav.main.description' | translate">
-        <ds-navbar></ds-navbar>
-      </nav>
+      @if ((isMobile$ | async) !== true) {
+        <nav class="navbar navbar-expand p-0 align-items-stretch align-self-stretch" id="desktop-navbar" [attr.aria-label]="'nav.main.description' | translate">
+          <ds-navbar></ds-navbar>
+        </nav>
+      }
     </div>
     <!-- Search bar and other menus -->
     <div id="header-right" class="h-100 d-flex flex-row flex-nowrap justify-content-end align-items-center gapx-1 ms-auto">
@@ -22,12 +24,14 @@
         <ds-auth-nav-menu></ds-auth-nav-menu>
       </div>
 
-      <div id="mobile-navbar-toggler" class="d-block d-lg-none ms-3" *ngIf="(isMobile$ | async)">
-        <button id="navbar-toggler" class="btn btn-transparent" type="button" (click)="toggleNavbar()"
-                [attr.aria-label]="'nav.toggle' | translate" aria-controls="collapsible-mobile-navbar" [attr.aria-expanded]="(isNavBarCollapsed$ | async) !== true">
-          <span class="fas fa-bars fa-fw fa-xl toggler-icon" aria-hidden="true"></span>
-        </button>
-      </div>
+      @if ((isMobile$ | async)) {
+        <div id="mobile-navbar-toggler" class="d-block d-lg-none ms-3">
+          <button id="navbar-toggler" class="btn btn-transparent" type="button" (click)="toggleNavbar()"
+            [attr.aria-label]="'nav.toggle' | translate" aria-controls="collapsible-mobile-navbar" [attr.aria-expanded]="(isNavBarCollapsed$ | async) !== true">
+            <span class="fas fa-bars fa-fw fa-xl toggler-icon" aria-hidden="true"></span>
+          </button>
+        </div>
+      }
     </div>
   </div>
 </header>
diff --git a/src/themes/dspace/app/navbar/navbar.component.ts b/src/themes/dspace/app/navbar/navbar.component.ts
index 8cce626006..50ef8e21cf 100644
--- a/src/themes/dspace/app/navbar/navbar.component.ts
+++ b/src/themes/dspace/app/navbar/navbar.component.ts
@@ -2,8 +2,6 @@ import {
   AsyncPipe,
   NgClass,
   NgComponentOutlet,
-  NgFor,
-  NgIf,
 } from '@angular/common';
 import { Component } from '@angular/core';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
@@ -22,7 +20,7 @@ import { ThemedUserMenuComponent } from '../../../../app/shared/auth-nav-menu/us
   templateUrl: './navbar.component.html',
   animations: [slideMobileNav],
   standalone: true,
-  imports: [NgbDropdownModule, NgClass, NgIf, ThemedUserMenuComponent, NgFor, NgComponentOutlet, AsyncPipe, TranslateModule],
+  imports: [NgbDropdownModule, NgClass, ThemedUserMenuComponent, NgComponentOutlet, AsyncPipe, TranslateModule],
 })
 export class NavbarComponent extends BaseComponent {
 }