LNK-4673: update admin UI to angular21

Web/Admin.UI/package.json

@@ -10,18 +10,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "20.3.6",
-    "@angular/cdk": "20.2.9",
-    "@angular/common": "20.3.6",
-    "@angular/compiler": "20.3.6",
-    "@angular/core": "20.3.6",
-    "@angular/forms": "20.3.6",
-    "@angular/material": "20.2.9",
-    "@angular/platform-browser": "20.3.6",
-    "@angular/platform-browser-dynamic": "20.3.6",
-    "@angular/router": "20.3.6",
+    "@angular/animations": "21.1.0",
+    "@angular/cdk": "21.1.1",
+    "@angular/common": "21.1.0",
+    "@angular/compiler": "21.1.0",
+    "@angular/core": "21.1.0",
+    "@angular/forms": "21.1.0",
+    "@angular/material": "21.1.1",
+    "@angular/platform-browser": "21.1.0",
+    "@angular/platform-browser-dynamic": "21.1.0",
+    "@angular/router": "21.1.0",
     "@fireflysemantics/join": "^1.0.14",
-    "@fortawesome/angular-fontawesome": "^3.0.0",
+    "@fortawesome/angular-fontawesome": "^4.0.0",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "angular-oauth2-oidc": "^19.0.0",
     "chart.js": "^4.5.1",
@@ -40,9 +40,9 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^20.3.13",
-    "@angular/cli": "20.3.6",
-    "@angular/compiler-cli": "20.3.6",
+    "@angular/build": "^21.1.1",
+    "@angular/cli": "^21.1.1",
+    "@angular/compiler-cli": "21.1.0",
     "@types/crypto-js": "^4.1.1",
     "@types/d3": "^7.4.3",
     "@types/jasmine": "~5.1.13",

Web/Admin.UI/src/app/components/core/link-nav-bar/link-nav-bar.component.html

@@ -1,37 +1,46 @@
 <nav class="subnavbar">
   <ul class="subnav-menu">
-    <li class="subnav-item" *ngFor="let item of subnavItems" [class.dropdown]="item.children"
+    @for (item of subnavItems; track item) {
+      <li class="subnav-item" [class.dropdown]="item.children"
         [class.active]="item.children && isChildRouteActive(item.children)">
-      <!-- Top-level item -->
-      <a *ngIf="!item.children" [routerLink]="[item.path!]" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
-        {{ item.label }}
-      </a>
-
-      <!-- Dropdown item -->
-      <ng-container *ngIf="item.children">
-        <a role="button"
-           tabindex="0"
-           [attr.aria-haspopup]="true"
-           [attr.aria-expanded]="isChildRouteActive(item.children)">
-          {{ item.label }}
-          <div class="dropdown-icon">
-            <vd-icon filePath="../../../assets/icons/chevron-default.svg"></vd-icon>
-          </div>
-        </a>
-        <ul class="dropdown-menu">
-          <li *ngFor="let child of item.children">
-            <a *ngIf="child.path?.startsWith('/')" [routerLink]="[child.path]" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
-              {{ child.label }}
-            </a>
-            <a *ngIf="child.path && !child.path.startsWith('/')"
-               [href]="child.path"
-               [attr.target]="child.path.startsWith('http') ? '_blank' : null"
-               [attr.rel]="child.path.startsWith('http') ? 'noopener noreferrer' : null">
-              {{ child.label }}
-            </a>
-          </li>
-        </ul>
-      </ng-container>
-    </li>
+        <!-- Top-level item -->
+        @if (!item.children) {
+          <a [routerLink]="[item.path!]" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+            {{ item.label }}
+          </a>
+        }
+        <!-- Dropdown item -->
+        @if (item.children) {
+          <a role="button"
+            tabindex="0"
+            [attr.aria-haspopup]="true"
+            [attr.aria-expanded]="isChildRouteActive(item.children)">
+            {{ item.label }}
+            <div class="dropdown-icon">
+              <vd-icon filePath="../../../assets/icons/chevron-default.svg"></vd-icon>
+            </div>
+          </a>
+          <ul class="dropdown-menu">
+            @for (child of item.children; track child) {
+              <li>
+                @if (child.path?.startsWith('/')) {
+                  <a [routerLink]="[child.path]" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+                    {{ child.label }}
+                  </a>
+                }
+                @if (child.path && !child.path.startsWith('/')) {
+                  <a
+                    [href]="child.path"
+                    [attr.target]="child.path.startsWith('http') ? '_blank' : null"
+                    [attr.rel]="child.path.startsWith('http') ? 'noopener noreferrer' : null">
+                    {{ child.label }}
+                  </a>
+                }
+              </li>
+            }
+          </ul>
+        }
+      </li>
+    }
   </ul>
 </nav>

Web/Admin.UI/src/app/components/core/link-nav-bar/link-nav-bar.component.ts

@@ -1,5 +1,5 @@
 import { IsActiveMatchOptions, Router, RouterLink, RouterLinkActive } from '@angular/router';
-import { NgFor, NgIf } from '@angular/common';
+
 
 import { Component } from '@angular/core';
 import { VdIconComponent } from "../vd-icon/vd-icon.component";
@@ -16,10 +16,8 @@ export interface SubnavItem {
   imports: [
     RouterLink,
     RouterLinkActive,
-    VdIconComponent,
-    NgFor,
-    NgIf
-  ],
+    VdIconComponent
+],
   templateUrl: './link-nav-bar.component.html',
   styleUrls: ['./link-nav-bar.component.scss'],
   standalone: true,