refactor(components): migrate to Angular's built-in control flow

apps/microfrontend-platform-devtools/src/app/app-details/app-details.component.html

@@ -1,79 +1,81 @@
-<ng-container *ngIf="application$ | async as application">
+@if (application$ | async; as application) {
   <section class="properties">
     <span>Name:</span>
     <span>{{application.name}} ({{application.symbolicName}})</span>
 
     <span>URL:</span>
     <a class="app-url" [href]="application.baseUrl" target="_blank">{{application.baseUrl}}</a>
 
-    <ng-container *ngIf="application.manifestUrl">
+    @if (application.manifestUrl) {
       <span>Manifest:</span>
       <a [href]="application.manifestUrl" target="_blank">{{application.manifestUrl}}</a>
-    </ng-container>
+    }
 
-    <ng-container *ngIf="application.platformVersion | async as version">
+    @if (application.platformVersion | async; as version) {
       <span>Version:</span>
       <a [href]="'https://www.npmjs.com/package/@scion/microfrontend-platform/v/' + version" target="_blank">
         &commat;scion/microfrontend-platform&commat;{{version}}
       </a>
-    </ng-container>
+    }
 
   </section>
   <sci-tabbar>
     <ng-template sciTab label="Capabilities" name="capabilities">
-      <section class="capabilities" *ngIf="capabilities$ | async as capabilities">
-        <sci-filter-field #capability_filter_field [formControl]="capabilityFilterFormControl"
-                          placeholder="Filter by type and qualifier, with multiple filter terms separated by space.">
-        </sci-filter-field>
-        <sci-viewport>
-          <sci-accordion (keydown)="capability_filter_field.focusAndApplyKeyboardEvent($event)">
-            <ng-container *ngFor="let capability of capabilities">
-              <ng-template sciAccordionItem [panel]="panel">
-                <devtools-capability-accordion-item [capability]="capability"></devtools-capability-accordion-item>
-              </ng-template>
+      @if (capabilities$ | async; as capabilities) {
+        <section class="capabilities">
+          <sci-filter-field #capability_filter_field [formControl]="capabilityFilterFormControl"
+                            placeholder="Filter by type and qualifier, with multiple filter terms separated by space."/>
+          <sci-viewport>
+            <sci-accordion (keydown)="capability_filter_field.focusAndApplyKeyboardEvent($event)">
+              @for (capability of capabilities; track capability) {
+                <ng-template sciAccordionItem [panel]="panel">
+                  <devtools-capability-accordion-item [capability]="capability"/>
+                </ng-template>
 
-              <ng-template #panel>
-                <devtools-capability-accordion-panel [capability]="capability"></devtools-capability-accordion-panel>
-              </ng-template>
-            </ng-container>
-          </sci-accordion>
-        </sci-viewport>
-      </section>
+                <ng-template #panel>
+                  <devtools-capability-accordion-panel [capability]="capability"/>
+                </ng-template>
+              }
+            </sci-accordion>
+          </sci-viewport>
+        </section>
+      }
     </ng-template>
     <ng-template sciTab label="Intentions" name="intentions">
-      <section class="intentions" *ngIf="intentions$ | async as intentions">
-        <sci-filter-field #intention_filter_field [formControl]="intentionFilterFormControl"
-                          placeholder="Filter by type and qualifier, with multiple filter terms separated by space.">
-        </sci-filter-field>
-        <sci-viewport>
-          <sci-accordion (keydown)="intention_filter_field.focusAndApplyKeyboardEvent($event)">
-            <ng-container *ngFor="let intention of intentions">
-              <ng-template sciAccordionItem [panel]="panel">
-                <devtools-intention-accordion-item [intention]="intention"></devtools-intention-accordion-item>
-              </ng-template>
+      @if (intentions$ | async; as intentions) {
+        <section class="intentions">
+          <sci-filter-field #intention_filter_field [formControl]="intentionFilterFormControl"
+                            placeholder="Filter by type and qualifier, with multiple filter terms separated by space."/>
+          <sci-viewport>
+            <sci-accordion (keydown)="intention_filter_field.focusAndApplyKeyboardEvent($event)">
+              @for (intention of intentions; track intention) {
+                <ng-template sciAccordionItem [panel]="panel">
+                  <devtools-intention-accordion-item [intention]="intention"/>
+                </ng-template>
 
-              <ng-template #panel>
-                <devtools-intention-accordion-panel [intention]="intention"></devtools-intention-accordion-panel>
-              </ng-template>
-            </ng-container>
-          </sci-accordion>
-        </sci-viewport>
-      </section>
+                <ng-template #panel>
+                  <devtools-intention-accordion-panel [intention]="intention"/>
+                </ng-template>
+              }
+            </sci-accordion>
+          </sci-viewport>
+        </section>
+      }
     </ng-template>
     <ng-template sciTab label="Dependencies">
       <sci-sashbox class="dependencies">
         <ng-template sciSash>
           <section class="required-applications">
             <header>Required Applications</header>
             <span class="description">Lists applications on which this application depends. The required capabilities are listed for each application.</span>
-            <devtools-required-capabilities [appSymbolicName]="application.symbolicName"></devtools-required-capabilities>
+            <devtools-required-capabilities [appSymbolicName]="application.symbolicName"/>
           </section>
         </ng-template>
         <ng-template sciSash>
           <section class="dependent-applications">
             <header>Dependent Applications</header>
             <span class="description">Lists applications that depend on this application. Dependent intentions are listed for each application.</span>
-            <devtools-dependent-intentions [appSymbolicName]="application.symbolicName"></devtools-dependent-intentions>
+            <devtools-dependent-intentions [appSymbolicName]="application.symbolicName"/>
           </section>
         </ng-template>
       </sci-sashbox>
@@ -85,46 +87,49 @@
           <span class="description">
             Controls whether this application can interact with the private capabilities of other apps. Disabling scope check is strongly discouraged. By default, scope check is enabled.
           </span>
-          <span class="chip" *ngIf="application.scopeCheckDisabled; else scopeCheckEnabled" title="Scope check is disabled for this application. This application can interact with private capabilities of other applications.">
+          @if (application.scopeCheckDisabled) {
+            <span class="chip" title="Scope check is disabled for this application. This application can interact with private capabilities of other applications.">
             Disabled
           </span>
-          <ng-template #scopeCheckEnabled>
+          } @else {
             <span class="chip default" title="Scope check is enabled for this application. This application cannot interact with private capabilities of other applications.">
               Default (enabled)
             </span>
-          </ng-template>
+          }
         </section>
 
         <section class="intent-register-api">
           <header>Intention Register API</header>
           <span class="description">
             Controls whether this application can register and unregister intentions dynamically at runtime. Enabling this API is strongly discouraged. By default, this API is disabled.
           </span>
-          <span class="chip default" *ngIf="application.intentionRegisterApiDisabled; else intentionRegisterApiEnabled" title="Intention register API is disabled for this application. This application has to declare intentions in its manifest.">
+          @if (application.intentionRegisterApiDisabled) {
+            <span class="chip default" title="Intention register API is disabled for this application. This application has to declare intentions in its manifest.">
             Default (disabled)
           </span>
-          <ng-template #intentionRegisterApiEnabled>
+          } @else {
             <span class="chip" title="Intention register API is enabled for this application. This application can register intentions dynamically at runtime.">
               Enabled
             </span>
-          </ng-template>
+          }
         </section>
 
         <section class="intention-check">
           <header>Intention Check</header>
           <span class="description">
             Controls whether this application can interact with the capabilities of other apps without having to declare respective intentions. Disabling intention check is strongly discouraged. By default, intention check is enabled.
           </span>
-          <span class="chip" *ngIf="application.intentionCheckDisabled; else intentionCheckEnabled" title="Intention check is disabled for this application. This application can issue intents for which it has not declared any intention.">
+          @if (application.intentionCheckDisabled) {
+            <span class="chip" title="Intention check is disabled for this application. This application can issue intents for which it has not declared any intention.">
             Disabled
           </span>
-          <ng-template #intentionCheckEnabled>
+          } @else {
             <span class="chip default" title="Intention check is enabled for this application. This application can only issue intents for which it has declared an intention in its manifest.">
               Default (enabled)
             </span>
-          </ng-template>
+          }
         </section>
       </section>
     </ng-template>
   </sci-tabbar>
-</ng-container>
+}

apps/microfrontend-platform-devtools/src/app/app-details/app-details.component.ts

@@ -17,7 +17,7 @@ import {filterManifestObjects} from '../common/manifest-object-filter.utils';
 import {ShellService} from '../shell.service';
 import {NonNullableFormBuilder, ReactiveFormsModule} from '@angular/forms';
 import {SciTabbarComponent, SciTabDirective} from '@scion/components.internal/tabbar';
-import {AsyncPipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {SciViewportComponent} from '@scion/components/viewport';
 import {CapabilityAccordionItemComponent} from '../capability-accordion-item/capability-accordion-item.component';
 import {CapabilityAccordionPanelComponent} from '../capability-accordion-panel/capability-accordion-panel.component';
@@ -37,8 +37,6 @@ import {SciSashboxComponent, SciSashDirective} from '@scion/components/sashbox';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
     AsyncPipe,
     ReactiveFormsModule,
     SciTabbarComponent,

apps/microfrontend-platform-devtools/src/app/app-list-item/app-list-item.component.html

@@ -4,27 +4,33 @@
 
 <section class="chips">
   <!-- Capabilities -->
-  <a class="chip" *ngIf="capabilityCount$ | async as capabilityCount"
-     (click)="onCapabilitiesClick($event)"
-     href="">
-    {{capabilityCount}} {{capabilityCount === 1 ? 'capability' : 'capabilities'}}
-  </a>
+  @if (capabilityCount$ | async; as capabilityCount) {
+    <a class="chip"
+       (click)="onCapabilitiesClick($event)"
+       href="">
+      {{capabilityCount}} {{capabilityCount === 1 ? 'capability' : 'capabilities'}}
+    </a>
+  }
 
   <!-- Intentions -->
-  <a class="chip" *ngIf="intentionCount$ | async as intentionCount"
-     (click)="onIntentionsClick($event)"
-     href="">
-    {{intentionCount}} {{intentionCount === 1 ? 'intention' : 'intentions'}}
-  </a>
+  @if (intentionCount$ | async; as intentionCount) {
+    <a class="chip"
+       (click)="onIntentionsClick($event)"
+       href="">
+      {{intentionCount}} {{intentionCount === 1 ? 'intention' : 'intentions'}}
+    </a>
+  }
 
   <!-- Platform Version -->
-  <a *ngIf="application.platformVersion | async as version"
-     class="chip version"
-     [href]="'https://www.npmjs.com/package/@scion/microfrontend-platform/v/' + version"
-     [title]="'@scion/microfrontend-platform@' + version"
-     target="_blank">
-    v{{version}}
-  </a>
+  @if (application.platformVersion | async; as version) {
+    <a
+      class="chip version"
+      [href]="'https://www.npmjs.com/package/@scion/microfrontend-platform/v/' + version"
+      [title]="'@scion/microfrontend-platform@' + version"
+      target="_blank">
+      v{{version}}
+    </a>
+  }
 </section>
 
 <span class="action-indicator" sciMaterialIcon>

apps/microfrontend-platform-devtools/src/app/app-list-item/app-list-item.component.ts

@@ -13,7 +13,7 @@ import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {DevToolsManifestService} from '../dev-tools-manifest.service';
 import {Router} from '@angular/router';
-import {AsyncPipe, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {SciMaterialIconDirective} from '@scion/components.internal/material-icon';
 
 @Component({
@@ -23,7 +23,6 @@ import {SciMaterialIconDirective} from '@scion/components.internal/material-icon
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    NgIf,
     AsyncPipe,
     SciMaterialIconDirective,
   ],

apps/microfrontend-platform-devtools/src/app/app-list/app-list.component.html

@@ -1,10 +1,9 @@
 <sci-list (filter)="onAppFilter($event)" filterPosition="top">
-  <ng-container *ngFor="let application of applications$ | async; trackBy: trackByFn">
+  @for (application of applications$ | async; track application.symbolicName) {
     <ng-template sciListItem [key]="application.symbolicName">
       <devtools-app-list-item [application]="application"
                               [routerLink]="['/apps', {outlets: {details: [application.symbolicName]}}]"
-                              routerLinkActive="active">
-      </devtools-app-list-item>
+                              routerLinkActive="active"/>
     </ng-template>
-  </ng-container>
+  }
 </sci-list>

apps/microfrontend-platform-devtools/src/app/app-list/app-list.component.ts

@@ -14,7 +14,7 @@ import {map} from 'rxjs/operators';
 import {DevToolsManifestService} from '../dev-tools-manifest.service';
 import {sortArray} from '@scion/toolkit/operators';
 import {ShellService} from '../shell.service';
-import {AsyncPipe, NgFor} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {RouterLink, RouterLinkActive} from '@angular/router';
 import {AppListItemComponent} from '../app-list-item/app-list-item.component';
 import {SciListComponent, SciListItemDirective} from '@scion/components.internal/list';
@@ -26,7 +26,6 @@ import {SciListComponent, SciListItemDirective} from '@scion/components.internal
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    NgFor,
     AsyncPipe,
     RouterLink,
     RouterLinkActive,
@@ -50,10 +49,6 @@ export class AppListComponent {
       );
   }
 
-  public trackByFn(index: number, application: Application): string {
-    return application.symbolicName;
-  }
-
   public onAppFilter(appFilter: string): void {
     this._appFilter$.next(appFilter.toLowerCase());
   }

apps/microfrontend-platform-devtools/src/app/app.component.html

@@ -1,32 +1,39 @@
-<sci-sashbox *ngIf="connnectedToHost | async; else welcome_message">
-  <ng-template sciSash *ngIf="showPrimaryOutlet" size="1">
-    <aside>
-      <header>
-        <button class="menu" (click)="onOpenMenuClick()">
-          <span sciMaterialIcon>menu</span>
-          {{primaryTitle$ | async}}
-        </button>
-        <button class="collapse" *ngIf="showPrimaryOutlet && showDetailsOutlet" (click)="onCollapsePrimaryClick()" sciMaterialIcon>keyboard_arrow_left</button>
-      </header>
-      <router-outlet></router-outlet>
-    </aside>
-  </ng-template>
-
-  <ng-template sciSash *ngIf="showDetailsOutlet" size="4">
-    <main>
-      <header>
-        <button class="menu" *ngIf="!showPrimaryOutlet" (click)="onOpenMenuClick()" sciMaterialIcon>menu</button>
-        <button class="expand" *ngIf="!showPrimaryOutlet && showDetailsOutlet" (click)="onExpandPrimaryClick()" sciMaterialIcon>keyboard_arrow_right</button>
-        <span class="title" (dblclick)="onDetailsDblClick()">{{detailsTitle$ | async}}</span>
-      </header>
-      <router-outlet name="details"></router-outlet>
-    </main>
-  </ng-template>
-</sci-sashbox>
-
-<devtools-app-menu *ngIf="menuOpen" (close)="onMenuClose()"></devtools-app-menu>
-
-<ng-template #welcome_message>
+@if (connnectedToHost | async) {
+  <sci-sashbox>
+    @if (showPrimaryOutlet) {
+      <ng-template sciSash size="1">
+        <aside>
+          <header>
+            <button class="menu" (click)="onOpenMenuClick()">
+              <span sciMaterialIcon>menu</span>
+              {{primaryTitle$ | async}}
+            </button>
+            @if (showPrimaryOutlet && showDetailsOutlet) {
+              <button class="collapse" (click)="onCollapsePrimaryClick()" sciMaterialIcon>keyboard_arrow_left</button>
+            }
+          </header>
+          <router-outlet/>
+        </aside>
+      </ng-template>
+    }
+    @if (showDetailsOutlet) {
+      <ng-template sciSash size="4">
+        <main>
+          <header>
+            @if (!showPrimaryOutlet) {
+              <button class="menu" (click)="onOpenMenuClick()" sciMaterialIcon>menu</button>
+            }
+            @if (!showPrimaryOutlet && showDetailsOutlet) {
+              <button class="expand" (click)="onExpandPrimaryClick()" sciMaterialIcon>keyboard_arrow_right</button>
+            }
+            <span class="title" (dblclick)="onDetailsDblClick()">{{detailsTitle$ | async}}</span>
+          </header>
+          <router-outlet name="details"/>
+        </main>
+      </ng-template>
+    }
+  </sci-sashbox>
+} @else {
   <section class="welcome">
     <header>Welcome to SCION Microfrontend Platform DevTools</header>
     <p>Embed SCION DevTools as microfrontend in your application to inspect micro applications and their dependencies.</p>
@@ -36,4 +43,9 @@
     </p>
     <img src="scion-microfrontend-platform-logo.svg" alt="SCION Microfrontend Platform" class="logo">
   </section>
-</ng-template>
+}
+
+@if (menuOpen) {
+  <devtools-app-menu (close)="onMenuClose()"/>
+}
+