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/zitadel/users/view-user/view-user.component.html

@@ -7,27 +7,35 @@
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
     {{ 'labels.buttons.Delete' | translate }}
   </button>
-  <div
-    *ngIf="userData.isSelfServiceUser === 'USER_STATE_ACTIVE' || userData.isSelfServiceUser === 'USER_STATE_INACTIVE'"
-  >
-    <button mat-raised-button color="primary" (click)="changeUserPassword(userData.id)">
-      <fa-icon icon="cog" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Change Password' | translate }}
-    </button>
-  </div>
-  <div [ngSwitch]="userData.isSelfServiceUser">
-    <button *ngSwitchCase="'USER_STATE_ACTIVE'" mat-raised-button color="warn" (click)="desactiveUser(userData.id)">
-      <fa-icon icon="ban" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Disable' | translate }}
-    </button>
-    <button *ngSwitchCase="'USER_STATE_INACTIVE'" mat-raised-button color="primary" (click)="activeUser(userData.id)">
-      <fa-icon icon="check" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Reactivate' | translate }}
-    </button>
-    <button *ngSwitchDefault mat-raised-button color="primary" disabled>
-      <fa-icon icon="ban" class="m-r-10"></fa-icon>
-      {{ 'labels.buttons.Validate' | translate }}
-    </button>
+  @if (userData.isSelfServiceUser === 'USER_STATE_ACTIVE' || userData.isSelfServiceUser === 'USER_STATE_INACTIVE') {
+    <div>
+      <button mat-raised-button color="primary" (click)="changeUserPassword(userData.id)">
+        <fa-icon icon="cog" class="m-r-10"></fa-icon>
+        {{ 'labels.buttons.Change Password' | translate }}
+      </button>
+    </div>
+  }
+  <div>
+    @switch (userData.isSelfServiceUser) {
+      @case ('USER_STATE_ACTIVE') {
+        <button mat-raised-button color="warn" (click)="desactiveUser(userData.id)">
+          <fa-icon icon="ban" class="m-r-10"></fa-icon>
+          {{ 'labels.buttons.Disable' | translate }}
+        </button>
+      }
+      @case ('USER_STATE_INACTIVE') {
+        <button mat-raised-button color="primary" (click)="activeUser(userData.id)">
+          <fa-icon icon="check" class="m-r-10"></fa-icon>
+          {{ 'labels.buttons.Reactivate' | translate }}
+        </button>
+      }
+      @default {
+        <button mat-raised-button color="primary" disabled>
+          <fa-icon icon="ban" class="m-r-10"></fa-icon>
+          {{ 'labels.buttons.Validate' | translate }}
+        </button>
+      }
+    }
   </div>
 </div>
 
@@ -59,13 +67,17 @@
           {{ userData.lastname }}
         </div>
 
-        <div class="flex-50 mat-body-strong" *ngIf="userData.email">
-          {{ 'labels.inputs.Email' | translate }}
-        </div>
+        @if (userData.email) {
+          <div class="flex-50 mat-body-strong">
+            {{ 'labels.inputs.Email' | translate }}
+          </div>
+        }
 
-        <div class="flex-50" *ngIf="userData.email">
-          {{ userData.email }}
-        </div>
+        @if (userData.email) {
+          <div class="flex-50">
+            {{ userData.email }}
+          </div>
+        }
 
         <div class="flex-50 mat-body-strong">
           {{ 'labels.inputs.Office' | translate }}
@@ -80,9 +92,11 @@
         </div>
 
         <div class="flex-50">
-          <span *ngFor="let role of userData.selectedRoles">
-            {{ role.name }}
-          </span>
+          @for (role of userData.selectedRoles; track role) {
+            <span>
+              {{ role.name }}
+            </span>
+          }
         </div>
       </div>
 

src/app/zitadel/users/view-user/view-user.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
 
@@ -13,7 +13,6 @@ import { AuthService } from 'app/zitadel/auth.service';
 /** Custom Components */
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 import { ChangePasswordDialogComponent } from 'app/zitadel/shared/change-password-dialog/change-password-dialog.component';
-import { strings } from '@angular-devkit/schematics';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
@@ -30,6 +29,12 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
   ]
 })
 export class ViewUserComponent {
+  private usersService = inject(UsersServiceZitadel);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private dialog = inject(MatDialog);
+  private authService = inject(AuthService);
+
   /** User Data. */
   userData: any;
 
@@ -40,13 +45,7 @@ export class ViewUserComponent {
    * @param {Router} router Router for navigation.
    * @param {MatDialog} dialog Dialog reference.
    */
-  constructor(
-    private usersService: UsersServiceZitadel,
-    private route: ActivatedRoute,
-    private router: Router,
-    private dialog: MatDialog,
-    private authService: AuthService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { user: any }) => {
       const u = data.user.object?.result?.[0];