Upgrading to Angular 20:

Replaced checked in package-lock.json by regenerated one.
Ran ng update @angular/core@20 @angular/cli@20
Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11
Ran npm install ngx-mat-select-search@^8.0.2.
Ran ng update @angular/material@20.
Updated all eslint and typescript to the latest versions.
Removed @angular-devkit/schematics.
Updated fontawesome.
Updated rxjs and tslib.
Moved required node version from 16 to 20.
Updated jest-preset-angular.
Set preserveWhitespaces to false.
Corrected two type declarations in two typescript files to make ng serve run without errors.
Removed unused angular-devkit/schematics from view-user.component.ts .
Updated list of supported browsers.
Upgraded prettier.
Ran prettier . --write the first time.
Ran prettier . --write the second time.
Ran ng generate @angular/core:inject with defaults, excepted a handful of files.
Fixed remaining eslint problems.
Added dist directory to ignores in eslint.config.js.
Let prettier fix formatting, almost everything is just line breaks.
Made htmlhint ignore @if and @for Angular constructs.
Updated node version in Github workflow to 22.12.0 (build.yml).
Updated .env.ts.
Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd.
Merged changes from dev into angular20 branch.

src/app/shared/tabs/entity-documents-tab/entity-documents-tab.component.html

@@ -9,59 +9,71 @@
     </div>
   </div>
 
-  <div *ngIf="entityDocuments?.length; else empty">
-    <div class="document-grid">
-      <div class="document-card" *ngFor="let document of entityDocuments; trackBy: trackByDocumentId">
-        <div
-          class="thumb"
-          [class.clickable]="isPreviewable(document)"
-          role="button"
-          tabindex="0"
-          [attr.aria-label]="('labels.buttons.Preview' | translate) + ': ' + document.name"
-          (keydown.enter)="isPreviewable(document) && openPreview(document)"
-          (keydown.space)="isPreviewable(document) && openPreview(document)"
-          (click)="isPreviewable(document) && openPreview(document)"
-        >
-          <ng-container *ngIf="previewThumbnails[document.id]; else placeholder">
-            <img [src]="previewThumbnails[document.id]" [alt]="document.name" [title]="document.name" loading="lazy" />
-          </ng-container>
-          <ng-template #placeholder>
-            <div class="placeholder">
-              <fa-icon icon="file"></fa-icon>
-              <span>{{ document.fileName || document.name }}</span>
-            </div>
-          </ng-template>
-          <div class="preview-overlay" *ngIf="isPreviewable(document)">
-            <fa-icon icon="eye"></fa-icon>
-          </div>
-        </div>
-        <div class="card-body">
-          <div class="title">{{ document.name }}</div>
-          <div class="meta" *ngIf="document.fileName">{{ document.fileName }}</div>
-          <div class="description" *ngIf="document.description">{{ document.description }}</div>
-          <div class="actions">
-            <button
-              mat-icon-button
-              color="warn"
-              (click)="deleteDocument(document.id, document.name)"
-              title="Delete"
-              [attr.aria-label]="'labels.buttons.Delete' | translate"
-              *mifosxHasPermission="'DELETE_DOCUMENT'"
+  @if (entityDocuments?.length) {
+    <div>
+      <div class="document-grid">
+        @for (document of entityDocuments; track trackByDocumentId($index, document)) {
+          <div class="document-card">
+            <div
+              class="thumb"
+              [class.clickable]="isPreviewable(document)"
+              role="button"
+              tabindex="0"
+              [attr.aria-label]="('labels.buttons.Preview' | translate) + ': ' + document.name"
+              (keydown.enter)="isPreviewable(document) && openPreview(document)"
+              (keydown.space)="isPreviewable(document) && openPreview(document)"
+              (click)="isPreviewable(document) && openPreview(document)"
             >
-              <fa-icon icon="times"></fa-icon>
-            </button>
+              @if (previewThumbnails[document.id]) {
+                <img
+                  [src]="previewThumbnails[document.id]"
+                  [alt]="document.name"
+                  [title]="document.name"
+                  loading="lazy"
+                />
+              } @else {
+                <div class="placeholder">
+                  <fa-icon icon="file"></fa-icon>
+                  <span>{{ document.fileName || document.name }}</span>
+                </div>
+              }
+              @if (isPreviewable(document)) {
+                <div class="preview-overlay">
+                  <fa-icon icon="eye"></fa-icon>
+                </div>
+              }
+            </div>
+            <div class="card-body">
+              <div class="title">{{ document.name }}</div>
+              @if (document.fileName) {
+                <div class="meta">{{ document.fileName }}</div>
+              }
+              @if (document.description) {
+                <div class="description">{{ document.description }}</div>
+              }
+              <div class="actions">
+                <button
+                  mat-icon-button
+                  color="warn"
+                  (click)="deleteDocument(document.id, document.name)"
+                  title="Delete"
+                  [attr.aria-label]="'labels.buttons.Delete' | translate"
+                  *mifosxHasPermission="'DELETE_DOCUMENT'"
+                >
+                  <fa-icon icon="times"></fa-icon>
+                </button>
+              </div>
+            </div>
           </div>
-        </div>
+        }
       </div>
     </div>
-  </div>
-
-  <ng-template #empty>
+  } @else {
     <div class="empty-state">
       <p>{{ 'labels.text.NoDocuments' | translate }}</p>
       <p class="muted">{{ 'labels.text.UploadDocumentHint' | translate }}</p>
     </div>
-  </ng-template>
+  }
 </div>
 
 <div #lightboxRoot class="document-lightbox-host"></div>

src/app/shared/tabs/entity-documents-tab/entity-documents-tab.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import lightGallery from 'lightgallery';
 import lgFullscreen from 'lightgallery/plugins/fullscreen';
@@ -27,6 +27,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EntityDocumentsTabComponent implements OnInit, OnDestroy {
+  dialog = inject(MatDialog);
+  private savingsService = inject(SavingsService);
+  private loansService = inject(LoansService);
+  private clientsService = inject(ClientsService);
+  private documentPreviewService = inject(DocumentPreviewService);
+
   @ViewChild('lightboxRoot', { static: true }) lightboxRoot: ElementRef<HTMLElement>;
 
   @Input() entityId: string;
@@ -44,14 +50,6 @@ export class EntityDocumentsTabComponent implements OnInit, OnDestroy {
     lgFullscreen
   ];
 
-  constructor(
-    public dialog: MatDialog,
-    private savingsService: SavingsService,
-    private loansService: LoansService,
-    private clientsService: ClientsService,
-    private documentPreviewService: DocumentPreviewService
-  ) {}
-
   ngOnInit(): void {
     this.prefetchThumbnails();
   }