Angular Control Flow Migration

main/http_server/axe-os/src/app/components/design/theme-config.component.html

@@ -24,16 +24,20 @@ <h5 class="font-medium text-lg mb-2">Color Scheme</h5>
     <div class="w-full px-2 mb-6">
       <h5 class="font-medium text-lg mb-2">Theme Color</h5>
       <div class="flex flex-wrap gap-6">
-        <div *ngFor="let theme of themes" class="flex flex-col items-center text-center w-24">
-          <button [class.selected]="theme.primaryColor === currentColor"
-                  [style.--dot-bg]="theme.primaryColor"
-                  [style.backgroundColor]="'var(--dot-bg)'"
-                  class="color-dot w-8 h-8 rounded-full border-none flex items-center justify-center cursor-pointer transition transform hover:scale-110 active:scale-95"
-                  (click)="changeTheme(theme)">
-            <i *ngIf="theme.primaryColor === currentColor" class="pi pi-check text-white text-xs"></i>
-          </button>
-          <div class="mt-1 text-secondary">{{theme.name}}</div>
-        </div>
+        @for (theme of themes; track theme) {
+          <div class="flex flex-col items-center text-center w-24">
+            <button [class.selected]="theme.primaryColor === currentColor"
+              [style.--dot-bg]="theme.primaryColor"
+              [style.backgroundColor]="'var(--dot-bg)'"
+              class="color-dot w-8 h-8 rounded-full border-none flex items-center justify-center cursor-pointer transition transform hover:scale-110 active:scale-95"
+              (click)="changeTheme(theme)">
+              @if (theme.primaryColor === currentColor) {
+                <i class="pi pi-check text-white text-xs"></i>
+              }
+            </button>
+            <div class="mt-1 text-secondary">{{theme.name}}</div>
+          </div>
+        }
       </div>
     </div>
 
@@ -47,4 +51,3 @@ <h5 class="font-medium text-lg mb-2">Custom Color</h5>
     </div>
   </div>
 </div>
-

main/http_server/axe-os/src/app/components/dropdown/dropdown.component.ts

@@ -19,29 +19,30 @@ import { SelectOption } from '../../models/select-option.model';
         <span>{{ selectedOptionName }}</span>
         <i class="pi pi-chevron-down text-xs transition-transform duration-200" [class.rotate-180]="isOpen"></i>
       </div>
-
-      <ul
-        *ngIf="isOpen"
-        [class.bottom-full]="openUpward"
-        [class.mb-1]="openUpward"
-        [class.top-full]="!openUpward"
-        [class.mt-1]="!openUpward"
-        class="absolute z-50 left-0 w-full max-h-60 overflow-y-auto bg-bg-card border border-surface rounded shadow-lg list-none p-0 m-0"
-      >
-        <li
-          *ngFor="let option of options; trackBy: trackByOption; let i = index"
-          (mouseenter)="focusedIndex = i"
-          (mousedown)="$event.preventDefault()"
-          (click)="select(option, $event)"
-          class="px-3 py-2 cursor-pointer select-none"
-          [class.bg-primary]="i === focusedIndex"
-          [class.text-white]="i === focusedIndex"
-          [class.bg-bg-hover]="i !== focusedIndex && option.value === value"
-          [class.text-primary]="i !== focusedIndex && option.value === value"
+      @if (isOpen) {
+        <ul
+          [class.bottom-full]="openUpward"
+          [class.mb-1]="openUpward"
+          [class.top-full]="!openUpward"
+          [class.mt-1]="!openUpward"
+          class="absolute z-50 left-0 w-full max-h-60 overflow-y-auto bg-bg-card border border-surface rounded shadow-lg list-none p-0 m-0"
         >
-          {{ option.name || option.label }}
-        </li>
-      </ul>
+          @for (option of options; track option.value ?? $index; let i = $index) {
+            <li
+              (mouseenter)="focusedIndex = i"
+              (mousedown)="$event.preventDefault()"
+              (click)="select(option, $event)"
+              class="px-3 py-2 cursor-pointer select-none"
+              [class.bg-primary]="i === focusedIndex"
+              [class.text-white]="i === focusedIndex"
+              [class.bg-bg-hover]="i !== focusedIndex && option.value === value"
+              [class.text-primary]="i !== focusedIndex && option.value === value"
+            >
+              {{ option.name || option.label }}
+            </li>
+          }
+        </ul>
+      }
     </div>
   `,
   providers: [
@@ -214,4 +215,3 @@ export class DropdownComponent implements ControlValueAccessor {
     this.disabled = isDisabled;
   }
 }
-