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/centers/create-center/create-center.component.html

@@ -6,35 +6,45 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
             <input matInput required formControlName="name" />
-            <mat-error *ngIf="centerForm.controls.name.hasError('required')">
-              {{ 'labels.inputs.Center Name' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-            <mat-error *ngIf="centerForm.controls.name.hasError('pattern')">
-              {{ 'labels.inputs.Center Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
-              {{ 'labels.inputs.begin with a special character or number' | translate }}
-            </mat-error>
+            @if (centerForm.controls.name.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Center Name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
+            @if (centerForm.controls.name.hasError('pattern')) {
+              <mat-error>
+                {{ 'labels.inputs.Center Name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+                {{ 'labels.inputs.begin with a special character or number' | translate }}
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
             <mat-select required formControlName="officeId">
-              <mat-option *ngFor="let office of officeData" [value]="office.id">
-                {{ office.name }}
-              </mat-option>
+              @for (office of officeData; track office) {
+                <mat-option [value]="office.id">
+                  {{ office.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="centerForm.controls.officeId.hasError('required')">
-              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (centerForm.controls.officeId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
-              <mat-option *ngFor="let staff of staffData" [value]="staff.id">
-                {{ staff.displayName }}
-              </mat-option>
+              @for (staff of staffData; track staff) {
+                <mat-option [value]="staff.id">
+                  {{ staff.displayName }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
 
@@ -42,23 +52,27 @@
             {{ 'labels.inputs.Active' | translate }}
           </mat-checkbox>
 
-          <mat-form-field *ngIf="this.centerForm.controls.active.value" (click)="activationDatePicker.open()">
-            <mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
-            <input
-              matInput
-              [min]="minDate"
-              [max]="maxDate"
-              [matDatepicker]="activationDatePicker"
-              required
-              formControlName="activationDate"
-            />
-            <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #activationDatePicker></mat-datepicker>
-            <mat-error *ngIf="centerForm.controls.activationDate.hasError('required')">
-              {{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (this.centerForm.controls.active.value) {
+            <mat-form-field (click)="activationDatePicker.open()">
+              <mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
+              <input
+                matInput
+                [min]="minDate"
+                [max]="maxDate"
+                [matDatepicker]="activationDatePicker"
+                required
+                formControlName="activationDate"
+              />
+              <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
+              <mat-datepicker #activationDatePicker></mat-datepicker>
+              @if (centerForm.controls.activationDate.hasError('required')) {
+                <mat-error>
+                  {{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
@@ -77,53 +91,63 @@
             />
             <mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #submittedOnDatePicker></mat-datepicker>
-            <mat-error *ngIf="centerForm.controls.submittedOnDate.hasError('required')">
-              {{ 'labels.inputs.Submission Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (centerForm.controls.submittedOnDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Submission Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Select and Add groups' | translate }}</mat-label>
             <mat-select [formControl]="groupChoice">
-              <mat-option *ngFor="let group of groupsData" [value]="group">
-                {{ group.name }}
-              </mat-option>
+              @for (group of groupsData; track group) {
+                <mat-option [value]="group">
+                  {{ group.name }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
 
         <div class="layout-row">
-          <div class="mat-table" *ngIf="groupChoice.value">
-            <div class="mat-header-row">
-              <div class="mat-header-cell">{{ 'labels.inputs.Group Details' | translate }}</div>
-              <button mat-icon-button (click)="addGroup()">
-                <fa-icon icon="plus"></fa-icon>
-              </button>
+          @if (groupChoice.value) {
+            <div class="mat-table">
+              <div class="mat-header-row">
+                <div class="mat-header-cell">{{ 'labels.inputs.Group Details' | translate }}</div>
+                <button mat-icon-button (click)="addGroup()">
+                  <fa-icon icon="plus"></fa-icon>
+                </button>
+              </div>
+              <div class="mat-row">
+                <div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
+                <div class="mat-cell">{{ groupChoice.value.name }}</div>
+              </div>
+              <div class="mat-row">
+                <div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
+                <div class="mat-cell">{{ groupChoice.value.id }}</div>
+              </div>
+              <div class="mat-row">
+                <div class="mat-cell">{{ 'labels.inputs.Office' | translate }}</div>
+                <div class="mat-cell">{{ groupChoice.value.officeName }}</div>
+              </div>
             </div>
-            <div class="mat-row">
-              <div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
-              <div class="mat-cell">{{ groupChoice.value.name }}</div>
-            </div>
-            <div class="mat-row">
-              <div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
-              <div class="mat-cell">{{ groupChoice.value.id }}</div>
-            </div>
-            <div class="mat-row">
-              <div class="mat-cell">{{ 'labels.inputs.Office' | translate }}</div>
-              <div class="mat-cell">{{ groupChoice.value.officeName }}</div>
-            </div>
-          </div>
+          }
 
-          <mat-nav-list *ngIf="groupMembers.length">
-            <h3 matSubheader>{{ 'labels.heading.Selected Groups' | translate }}</h3>
-            <div mat-list-item *ngFor="let group of groupMembers; index as i">
-              <button mat-icon-button (click)="removeGroup(i)">
-                <fa-icon icon="trash"></fa-icon>
-              </button>
-              <span matLine>{{ group.name }}</span>
-            </div>
-          </mat-nav-list>
+          @if (groupMembers.length) {
+            <mat-nav-list>
+              <h3 matSubheader>{{ 'labels.heading.Selected Groups' | translate }}</h3>
+              @for (group of groupMembers; track group; let i = $index) {
+                <div mat-list-item>
+                  <button mat-icon-button (click)="removeGroup(i)">
+                    <fa-icon icon="trash"></fa-icon>
+                  </button>
+                  <span matLine>{{ group.name }}</span>
+                </div>
+              }
+            </mat-nav-list>
+          }
         </div>
       </mat-card-content>