diff --git a/apps/microfrontend-platform-testing-app/src/app/app-shell/app-shell.component.html b/apps/microfrontend-platform-testing-app/src/app/app-shell/app-shell.component.html
index e6579e38..5994ebf7 100644
--- a/apps/microfrontend-platform-testing-app/src/app/app-shell/app-shell.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/app-shell/app-shell.component.html
@@ -1,29 +1,41 @@
 <header>
   <div class="title">
-    <img *ngIf="isPlatformHost" class="banner" src="scion-microfrontend-platform-banner.svg" alt="SCION Microfrontend Platform">
-    <span *ngIf="pageTitle" class="page-title">{{pageTitle}}</span>
+    @if (isPlatformHost) {
+      <img class="banner" src="scion-microfrontend-platform-banner.svg" alt="SCION Microfrontend Platform">
+    }
+    @if (pageTitle) {
+      <span class="page-title">{{pageTitle}}</span>
+    }
   </div>
   <div class="actions">
     <span class="angular-change-detection-indicator" title="Indicates that Angular is currently checking the application for changes." #angular_change_detection_indicator></span>
-    <span class="chip focus-within e2e-focus-within" title="This document or its embedded web content has received focus" *ngIf="focusMonitor.focusWithin$ | async">focus-within</span>
-    <span class="chip focus e2e-has-focus" *ngIf="focusMonitor.focus$ | async">has-focus</span>
+    @if (focusMonitor.focusWithin$ | async) {
+      <span class="chip focus-within e2e-focus-within" title="This document or its embedded web content has received focus">focus-within</span>
+    }
+    @if (focusMonitor.focus$ | async) {
+      <span class="chip focus e2e-has-focus">has-focus</span>
+    }
     <span class="chip app-name">{{appSymbolicName}}</span>
     <div class="separator"></div>
-    <label class="devtools-toggle" *ngIf="devToolsFormControl.enabled">
-      <sci-toggle-button [formControl]="devToolsFormControl" [class.selected]="devToolsFormControl.value"></sci-toggle-button>
-      DevTools
-    </label>
+    @if (devToolsFormControl.enabled) {
+      <label class="devtools-toggle">
+        <sci-toggle-button [formControl]="devToolsFormControl" [class.selected]="devToolsFormControl.value"/>
+        DevTools
+      </label>
+    }
   </div>
 </header>
 <sci-sashbox [direction]="'column'">
   <ng-template sciSash size="2">
     <sci-viewport>
-      <router-outlet #outlet=outlet (activate)="onRouteActivate(outlet.activatedRoute)"></router-outlet>
+      <router-outlet #outlet=outlet (activate)="onRouteActivate(outlet.activatedRoute)"/>
     </sci-viewport>
   </ng-template>
-  <ng-template sciSash size="1" *ngIf="devToolsFormControl.value">
-    <app-devtools></app-devtools>
-  </ng-template>
+  @if (devToolsFormControl.value) {
+    <ng-template sciSash size="1">
+      <app-devtools/>
+    </ng-template>
+  }
 </sci-sashbox>
 
 <!-- Captures Angular change detection cycles -->
diff --git a/apps/microfrontend-platform-testing-app/src/app/app-shell/app-shell.component.ts b/apps/microfrontend-platform-testing-app/src/app/app-shell/app-shell.component.ts
index 65bff001..d8fa545d 100644
--- a/apps/microfrontend-platform-testing-app/src/app/app-shell/app-shell.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/app-shell/app-shell.component.ts
@@ -14,7 +14,7 @@ import {tap} from 'rxjs/operators';
 import {ActivatedRoute, RouterOutlet} from '@angular/router';
 import {Defined} from '@scion/toolkit/util';
 import {Beans} from '@scion/toolkit/bean-manager';
-import {AsyncPipe, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {SciSashboxComponent, SciSashDirective} from '@scion/components/sashbox';
 import {SciViewportComponent} from '@scion/components/viewport';
 import {DevToolsComponent} from '../devtools/devtools.component';
@@ -28,7 +28,6 @@ import {FormControl, ReactiveFormsModule} from '@angular/forms';
   styleUrls: ['./app-shell.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
     AsyncPipe,
     RouterOutlet,
     SciSashboxComponent,
diff --git a/apps/microfrontend-platform-testing-app/src/app/app.component.html b/apps/microfrontend-platform-testing-app/src/app/app.component.html
index 0680b43f..7dd570e8 100644
--- a/apps/microfrontend-platform-testing-app/src/app/app.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/app.component.html
@@ -1 +1 @@
-<router-outlet></router-outlet>
+<router-outlet/>
diff --git a/apps/microfrontend-platform-testing-app/src/app/browser-outlet/browser-outlet.component.html b/apps/microfrontend-platform-testing-app/src/app/browser-outlet/browser-outlet.component.html
index 59759dd2..0de50679 100644
--- a/apps/microfrontend-platform-testing-app/src/app/browser-outlet/browser-outlet.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/browser-outlet/browser-outlet.component.html
@@ -6,7 +6,9 @@
   <button type="button" class="e2e-settings" #settings_button title="Settings" (click)="onSettingsClick()" sciMaterialIcon>settings</button>
 
   <datalist id="app-entry-points">
-    <option *ngFor="let appEntryPoint of appEntryPoints" [value]="appEntryPoint.url">{{appEntryPoint.label}}</option>
+    @for (appEntryPoint of appEntryPoints; track appEntryPoint) {
+      <option [value]="appEntryPoint.url">{{appEntryPoint.label}}</option>
+    }
   </datalist>
 </form>
 
diff --git a/apps/microfrontend-platform-testing-app/src/app/browser-outlet/browser-outlet.component.ts b/apps/microfrontend-platform-testing-app/src/app/browser-outlet/browser-outlet.component.ts
index 7198efef..cd93cd77 100644
--- a/apps/microfrontend-platform-testing-app/src/app/browser-outlet/browser-outlet.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/browser-outlet/browser-outlet.component.ts
@@ -17,7 +17,6 @@ import {ActivatedRoute} from '@angular/router';
 import {Beans} from '@scion/toolkit/bean-manager';
 import {environment} from '../../environments/environment';
 import {TestingAppTopics} from '../testing-app.topics';
-import {NgFor} from '@angular/common';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {SciMaterialIconDirective} from '@scion/components.internal/material-icon';
 
@@ -31,7 +30,6 @@ import {SciMaterialIconDirective} from '@scion/components.internal/material-icon
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    NgFor,
     ReactiveFormsModule,
     SciMaterialIconDirective,
   ],
diff --git a/apps/microfrontend-platform-testing-app/src/app/browser-outlets/browser-outlets.component.html b/apps/microfrontend-platform-testing-app/src/app/browser-outlets/browser-outlets.component.html
index 660f134b..d818888a 100644
--- a/apps/microfrontend-platform-testing-app/src/app/browser-outlets/browser-outlets.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/browser-outlets/browser-outlets.component.html
@@ -1,5 +1,7 @@
 <sci-sashbox>
-  <ng-template sciSash *ngFor="let outletName of outletNames$ | async">
-    <app-browser-outlet [outletName]="outletName"></app-browser-outlet>
-  </ng-template>
+  @for (outletName of outletNames$ | async; track outletName) {
+    <ng-template sciSash>
+      <app-browser-outlet [outletName]="outletName"/>
+    </ng-template>
+  }
 </sci-sashbox>
diff --git a/apps/microfrontend-platform-testing-app/src/app/browser-outlets/browser-outlets.component.ts b/apps/microfrontend-platform-testing-app/src/app/browser-outlets/browser-outlets.component.ts
index 9c08589c..a63e23a5 100644
--- a/apps/microfrontend-platform-testing-app/src/app/browser-outlets/browser-outlets.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/browser-outlets/browser-outlets.component.ts
@@ -14,7 +14,7 @@ import {map} from 'rxjs/operators';
 import {coerceNumberProperty} from '@angular/cdk/coercion';
 import {UUID} from '@scion/toolkit/uuid';
 import {BrowserOutletComponent} from '../browser-outlet/browser-outlet.component';
-import {AsyncPipe, NgFor} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {SciSashboxComponent, SciSashDirective} from '@scion/components/sashbox';
 
 @Component({
@@ -23,7 +23,6 @@ import {SciSashboxComponent, SciSashDirective} from '@scion/components/sashbox';
   styleUrls: ['./browser-outlets.component.scss'],
   standalone: true,
   imports: [
-    NgFor,
     AsyncPipe,
     SciSashboxComponent,
     SciSashDirective,
diff --git a/apps/microfrontend-platform-testing-app/src/app/devtools/devtools.component.html b/apps/microfrontend-platform-testing-app/src/app/devtools/devtools.component.html
index 4d1a5cea..995ba21b 100644
--- a/apps/microfrontend-platform-testing-app/src/app/devtools/devtools.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/devtools/devtools.component.html
@@ -1,3 +1,3 @@
 <sci-router-outlet name="devtools">
-  <sci-throbber type="ellipsis"></sci-throbber>
+  <sci-throbber type="ellipsis"/>
 </sci-router-outlet>
diff --git a/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-capability/lookup-capability.component.html b/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-capability/lookup-capability.component.html
index a0e1fd8e..ac8afb98 100644
--- a/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-capability/lookup-capability.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-capability/lookup-capability.component.html
@@ -6,32 +6,35 @@
     <input [formControl]="form.controls.type" class="e2e-type">
   </sci-form-field>
   <sci-form-field label="Qualifier">
-    <sci-key-value-field [keyValueFormArray]="form.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"></sci-key-value-field>
+    <sci-key-value-field [keyValueFormArray]="form.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"/>
   </sci-form-field>
   <sci-form-field label="NilQualifier if empty">
-    <sci-checkbox [formControl]="form.controls.nilqualifierIfEmpty" class="e2e-nilqualifier-if-empty"></sci-checkbox>
+    <sci-checkbox [formControl]="form.controls.nilqualifierIfEmpty" class="e2e-nilqualifier-if-empty"/>
   </sci-form-field>
   <sci-form-field label="Application">
     <input [formControl]="form.controls.appSymbolicName" class="e2e-app-symbolic-name">
   </sci-form-field>
 
   <section class="buttons">
-    <button type="submit" *ngIf="!capabilities$" (click)="onLookup()" [disabled]="form.invalid" class="e2e-lookup" sci-primary>Lookup</button>
-    <button type="submit" *ngIf="capabilities$" (click)="onLookupCancel()" class="e2e-cancel-lookup" sci-primary>Cancel the lookup</button>
+    @if (!capabilities$) {
+      <button type="submit" (click)="onLookup()" [disabled]="form.invalid" class="e2e-lookup" sci-primary>Lookup</button>
+    } @else {
+      <button type="submit" (click)="onLookupCancel()" class="e2e-cancel-lookup" sci-primary>Cancel the lookup</button>
+    }
     <button type="button" (click)="onReset()" [disabled]="form.pristine" class="e2e-reset">Reset</button>
   </section>
 </form>
 
 <sci-list class="capabilities e2e-capabilities">
-  <ng-container *ngFor="let capability of capabilities$ | async">
+  @for (capability of capabilities$ | async; track capability) {
     <ng-template sciListItem>
       <section class="capability" [attr.data-e2e-capability]="capability | json">
-        <sci-qualifier-chip-list [qualifier]="capability.qualifier" [type]="capability.type"></sci-qualifier-chip-list>
+        <sci-qualifier-chip-list [qualifier]="capability.qualifier" [type]="capability.type"/>
         <span class="app">{{capability.metadata!.appSymbolicName}}</span>
         <span class="id">{{capability.metadata!.id}}</span>
         <span class="visibility">{{capability.private ? 'PRIVATE' : 'PUBLIC'}}</span>
         <button type="button" title="Copy capability to clipboard" (click)="onCopyToClipboard(capability)" sciMaterialIcon>content_copy</button>
       </section>
     </ng-template>
-  </ng-container>
+  }
 </sci-list>
diff --git a/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-capability/lookup-capability.component.ts b/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-capability/lookup-capability.component.ts
index 657c9226..3827ed30 100644
--- a/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-capability/lookup-capability.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-capability/lookup-capability.component.ts
@@ -15,7 +15,7 @@ import {Observable} from 'rxjs';
 import {finalize} from 'rxjs/operators';
 import {Beans} from '@scion/toolkit/bean-manager';
 import {Clipboard} from '@angular/cdk/clipboard';
-import {AsyncPipe, JsonPipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe, JsonPipe} from '@angular/common';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SciListComponent, SciListItemDirective} from '@scion/components.internal/list';
@@ -28,8 +28,6 @@ import {SciMaterialIconDirective} from '@scion/components.internal/material-icon
   styleUrls: ['./lookup-capability.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
     AsyncPipe,
     JsonPipe,
     ReactiveFormsModule,
diff --git a/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-intention/lookup-intention.component.html b/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-intention/lookup-intention.component.html
index d071f372..0e56ac8b 100644
--- a/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-intention/lookup-intention.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-intention/lookup-intention.component.html
@@ -6,30 +6,33 @@
     <input [formControl]="form.controls.type" class="e2e-type">
   </sci-form-field>
   <sci-form-field label="Qualifier">
-    <sci-key-value-field [keyValueFormArray]="form.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"></sci-key-value-field>
+    <sci-key-value-field [keyValueFormArray]="form.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"/>
   </sci-form-field>
   <sci-form-field label="NilQualifier if empty">
-    <sci-checkbox [formControl]="form.controls.nilqualifierIfEmpty" class="e2e-nilqualifier-if-empty"></sci-checkbox>
+    <sci-checkbox [formControl]="form.controls.nilqualifierIfEmpty" class="e2e-nilqualifier-if-empty"/>
   </sci-form-field>
   <sci-form-field label="Application">
     <input [formControl]="form.controls.appSymbolicName" class="e2e-app-symbolic-name">
   </sci-form-field>
 
   <section class="buttons">
-    <button type="submit" *ngIf="!intentions$" (click)="onLookup()" [disabled]="form.invalid" class="e2e-lookup" sci-primary>Lookup</button>
-    <button type="submit" *ngIf="intentions$" (click)="onLookupCancel()" class="e2e-cancel-lookup" sci-primary>Cancel the lookup</button>
+    @if (!intentions$) {
+      <button type="submit" (click)="onLookup()" [disabled]="form.invalid" class="e2e-lookup" sci-primary>Lookup</button>
+    } @else {
+      <button type="submit" (click)="onLookupCancel()" class="e2e-cancel-lookup" sci-primary>Cancel the lookup</button>
+    }
     <button type="button" (click)="onReset()" [disabled]="form.pristine" class="e2e-reset">Reset</button>
   </section>
 </form>
 
 <sci-list class="intentions e2e-intentions">
-  <ng-container *ngFor="let intention of intentions$ | async">
+  @for (intention of intentions$ | async; track intention) {
     <ng-template sciListItem>
       <section class="intention">
-        <sci-qualifier-chip-list [qualifier]="intention.qualifier" [type]="intention.type"></sci-qualifier-chip-list>
+        <sci-qualifier-chip-list [qualifier]="intention.qualifier" [type]="intention.type"/>
         <span class="app">{{intention.metadata!.appSymbolicName}}</span>
         <span class="id e2e-id">{{intention.metadata!.id}}</span>
       </section>
     </ng-template>
-  </ng-container>
+  }
 </sci-list>
diff --git a/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-intention/lookup-intention.component.ts b/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-intention/lookup-intention.component.ts
index 2bc7ed6e..ea3c4e14 100644
--- a/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-intention/lookup-intention.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/manifest/lookup-intention/lookup-intention.component.ts
@@ -14,7 +14,7 @@ import {KeyValueEntry, SciKeyValueFieldComponent} from '@scion/components.intern
 import {Observable} from 'rxjs';
 import {finalize} from 'rxjs/operators';
 import {Beans} from '@scion/toolkit/bean-manager';
-import {AsyncPipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SciListComponent, SciListItemDirective} from '@scion/components.internal/list';
@@ -26,8 +26,6 @@ import {SciQualifierChipListComponent} from '@scion/components.internal/qualifie
   styleUrls: ['./lookup-intention.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
     AsyncPipe,
     ReactiveFormsModule,
     SciFormFieldComponent,
diff --git a/apps/microfrontend-platform-testing-app/src/app/manifest/register-capability/register-capability.component.html b/apps/microfrontend-platform-testing-app/src/app/manifest/register-capability/register-capability.component.html
index 9567fd92..601591b5 100644
--- a/apps/microfrontend-platform-testing-app/src/app/manifest/register-capability/register-capability.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/manifest/register-capability/register-capability.component.html
@@ -5,26 +5,30 @@
       <input [formControl]="registerForm.controls.type" class="e2e-type">
     </sci-form-field>
     <sci-form-field label="Qualifier" direction="column">
-      <sci-key-value-field [keyValueFormArray]="registerForm.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"></sci-key-value-field>
+      <sci-key-value-field [keyValueFormArray]="registerForm.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"/>
     </sci-form-field>
     <sci-form-field label="Params" direction="column">
       <input [formControl]="registerForm.controls.params" class="e2e-params" placeholder="JSON Array, e.g., {{paramsPlaceholder | json}}">
     </sci-form-field>
     <sci-form-field label="Private" direction="column">
-      <sci-checkbox [formControl]="registerForm.controls.private" class="e2e-private"></sci-checkbox>
+      <sci-checkbox [formControl]="registerForm.controls.private" class="e2e-private"/>
     </sci-form-field>
     <sci-form-field label="Properties" direction="column">
-      <sci-key-value-field [keyValueFormArray]="registerForm.controls.properties" [addable]="true" [removable]="true" class="e2e-properties"></sci-key-value-field>
+      <sci-key-value-field [keyValueFormArray]="registerForm.controls.properties" [addable]="true" [removable]="true" class="e2e-properties"/>
     </sci-form-field>
     <button type="submit" (click)="onRegister()" [disabled]="registerForm.invalid" class="e2e-register" sci-primary>Register</button>
   </form>
 
-  <output class="error e2e-register-error" *ngIf="registerError">
-    {{registerError}}
-  </output>
-  <output class="response e2e-register-response" *ngIf="registerResponse">
-    Capability ID: <span class="e2e-capability-id">{{registerResponse}}</span>
-  </output>
+  @if (registerError) {
+    <output class="error e2e-register-error">
+      {{registerError}}
+    </output>
+  }
+  @if (registerResponse) {
+    <output class="response e2e-register-response">
+      Capability ID: <span class="e2e-capability-id">{{registerResponse}}</span>
+    </output>
+  }
 </section>
 
 <section class="unregister e2e-unregister">
@@ -37,10 +41,10 @@
       <input [formControl]="unregisterForm.controls.type" class="e2e-type">
     </sci-form-field>
     <sci-form-field label="Qualifier" direction="column">
-      <sci-key-value-field [keyValueFormArray]="unregisterForm.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"></sci-key-value-field>
+      <sci-key-value-field [keyValueFormArray]="unregisterForm.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"/>
     </sci-form-field>
     <sci-form-field label="NilQualifier if empty" direction="column">
-      <sci-checkbox [formControl]="unregisterForm.controls.nilqualifierIfEmpty" class="e2e-nilqualifier-if-empty"></sci-checkbox>
+      <sci-checkbox [formControl]="unregisterForm.controls.nilqualifierIfEmpty" class="e2e-nilqualifier-if-empty"/>
     </sci-form-field>
     <sci-form-field label="Application" direction="column">
       <input [formControl]="unregisterForm.controls.appSymbolicName" class="e2e-app-symbolic-name">
@@ -48,23 +52,27 @@
     <button type="submit" (click)="onUnregister()" [disabled]="unregisterForm.invalid" class="e2e-unregister" sci-primary>Unregister</button>
   </form>
 
-  <output class="error e2e-unregister-error" *ngIf="unregisterError">
-    {{unregisterError}}
-  </output>
-  <output class="response e2e-unregister-response" *ngIf="unregisterResponse">
-    {{unregisterResponse}}
-  </output>
+  @if (unregisterError) {
+    <output class="error e2e-unregister-error">
+      {{unregisterError}}
+    </output>
+  }
+  @if (unregisterResponse) {
+    <output class="response e2e-unregister-response">
+      {{unregisterResponse}}
+    </output>
+  }
 </section>
 
 <sci-list class="capabilities">
-  <ng-container *ngFor="let capability of capabilities$ | async">
+  @for (capability of capabilities$ | async; track capability) {
     <ng-template sciListItem>
       <section class="capability">
-        <sci-qualifier-chip-list [qualifier]="capability.qualifier" [type]="capability.type"></sci-qualifier-chip-list>
+        <sci-qualifier-chip-list [qualifier]="capability.qualifier" [type]="capability.type"/>
         <span class="app">{{capability.metadata!.appSymbolicName}}</span>
         <span class="id">{{capability.metadata!.id}}</span>
         <span class="visibility">{{capability.private ? 'PRIVATE' : 'PUBLIC'}}</span>
       </section>
     </ng-template>
-  </ng-container>
+  }
 </sci-list>
diff --git a/apps/microfrontend-platform-testing-app/src/app/manifest/register-capability/register-capability.component.ts b/apps/microfrontend-platform-testing-app/src/app/manifest/register-capability/register-capability.component.ts
index e47edff4..7902b36a 100644
--- a/apps/microfrontend-platform-testing-app/src/app/manifest/register-capability/register-capability.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/manifest/register-capability/register-capability.component.ts
@@ -13,7 +13,7 @@ import {APP_IDENTITY, Capability, ManifestObjectFilter, ManifestService, ParamDe
 import {KeyValueEntry, SciKeyValueFieldComponent} from '@scion/components.internal/key-value-field';
 import {Observable} from 'rxjs';
 import {Beans} from '@scion/toolkit/bean-manager';
-import {AsyncPipe, JsonPipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe, JsonPipe} from '@angular/common';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SciListComponent, SciListItemDirective} from '@scion/components.internal/list';
@@ -26,8 +26,6 @@ import {parseTypedValues} from '../../common/typed-value-parser.util';
   styleUrls: ['./register-capability.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
     AsyncPipe,
     JsonPipe,
     ReactiveFormsModule,
diff --git a/apps/microfrontend-platform-testing-app/src/app/manifest/register-intention/register-intention.component.html b/apps/microfrontend-platform-testing-app/src/app/manifest/register-intention/register-intention.component.html
index b3baee4f..c9f6c737 100644
--- a/apps/microfrontend-platform-testing-app/src/app/manifest/register-intention/register-intention.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/manifest/register-intention/register-intention.component.html
@@ -5,17 +5,21 @@
       <input [formControl]="registerForm.controls.type" class="e2e-type">
     </sci-form-field>
     <sci-form-field label="Qualifier" direction="column">
-      <sci-key-value-field [keyValueFormArray]="registerForm.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"></sci-key-value-field>
+      <sci-key-value-field [keyValueFormArray]="registerForm.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"/>
     </sci-form-field>
     <button type="submit" (click)="onRegister()" [disabled]="registerForm.invalid" class="e2e-register" sci-primary>Register</button>
   </form>
 
-  <output class="error e2e-register-error" *ngIf="registerError">
-    {{registerError}}
-  </output>
-  <output class="response e2e-register-response" *ngIf="registerResponse">
-    Intention ID: <span class="e2e-intention-id">{{registerResponse}}</span>
-  </output>
+  @if (registerError) {
+    <output class="error e2e-register-error">
+      {{registerError}}
+    </output>
+  }
+  @if (registerResponse) {
+    <output class="response e2e-register-response">
+      Intention ID: <span class="e2e-intention-id">{{registerResponse}}</span>
+    </output>
+  }
 </section>
 
 <section class="unregister e2e-unregister">
@@ -28,10 +32,10 @@
       <input [formControl]="unregisterForm.controls.type" class="e2e-type">
     </sci-form-field>
     <sci-form-field label="Qualifier" direction="column">
-      <sci-key-value-field [keyValueFormArray]="unregisterForm.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"></sci-key-value-field>
+      <sci-key-value-field [keyValueFormArray]="unregisterForm.controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"/>
     </sci-form-field>
     <sci-form-field label="NilQualifier if empty" direction="column">
-      <sci-checkbox [formControl]="unregisterForm.controls.nilqualifierIfEmpty" class="e2e-nilqualifier-if-empty"></sci-checkbox>
+      <sci-checkbox [formControl]="unregisterForm.controls.nilqualifierIfEmpty" class="e2e-nilqualifier-if-empty"/>
     </sci-form-field>
     <sci-form-field label="Application" direction="column">
       <input [formControl]="unregisterForm.controls.appSymbolicName" class="e2e-app-symbolic-name">
@@ -39,22 +43,26 @@
     <button type="submit" (click)="onUnregister()" [disabled]="unregisterForm.invalid" class="e2e-unregister" sci-primary>Unregister</button>
   </form>
 
-  <output class="error e2e-unregister-error" *ngIf="unregisterError">
-    {{unregisterError}}
-  </output>
-  <output class="response e2e-unregister-response" *ngIf="unregisterResponse">
-    {{unregisterResponse}}
-  </output>
+  @if (unregisterError) {
+    <output class="error e2e-unregister-error">
+      {{unregisterError}}
+    </output>
+  }
+  @if (unregisterResponse) {
+    <output class="response e2e-unregister-response">
+      {{unregisterResponse}}
+    </output>
+  }
 </section>
 
 <sci-list class="intentions">
-  <ng-container *ngFor="let intention of intentions$ | async">
+  @for (intention of intentions$ | async; track intention) {
     <ng-template sciListItem>
       <section class="intention">
-        <sci-qualifier-chip-list [qualifier]="intention.qualifier" [type]="intention.type"></sci-qualifier-chip-list>
+        <sci-qualifier-chip-list [qualifier]="intention.qualifier" [type]="intention.type"/>
         <span class="app">{{intention.metadata!.appSymbolicName}}</span>
         <span class="id">{{intention.metadata!.id}}</span>
       </section>
     </ng-template>
-  </ng-container>
+  }
 </sci-list>
diff --git a/apps/microfrontend-platform-testing-app/src/app/manifest/register-intention/register-intention.component.ts b/apps/microfrontend-platform-testing-app/src/app/manifest/register-intention/register-intention.component.ts
index f4cb7571..50faf7fd 100644
--- a/apps/microfrontend-platform-testing-app/src/app/manifest/register-intention/register-intention.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/manifest/register-intention/register-intention.component.ts
@@ -13,7 +13,7 @@ import {APP_IDENTITY, Intention, ManifestObjectFilter, ManifestService} from '@s
 import {KeyValueEntry, SciKeyValueFieldComponent} from '@scion/components.internal/key-value-field';
 import {Observable} from 'rxjs';
 import {Beans} from '@scion/toolkit/bean-manager';
-import {AsyncPipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SciListComponent, SciListItemDirective} from '@scion/components.internal/list';
@@ -25,8 +25,6 @@ import {SciQualifierChipListComponent} from '@scion/components.internal/qualifie
   styleUrls: ['./register-intention.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
     AsyncPipe,
     ReactiveFormsModule,
     SciFormFieldComponent,
diff --git a/apps/microfrontend-platform-testing-app/src/app/messaging/message-list-item/message-list-item.component.html b/apps/microfrontend-platform-testing-app/src/app/messaging/message-list-item/message-list-item.component.html
index a32a16e8..1b33d596 100644
--- a/apps/microfrontend-platform-testing-app/src/app/messaging/message-list-item/message-list-item.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/messaging/message-list-item/message-list-item.component.html
@@ -1,29 +1,26 @@
-<ng-container *ngIf="isTopicMessage; then topic_message_template else intent_message_template"></ng-container>
-<ng-template #topic_message_template>
+@if (isTopicMessage) {
   Topic:<span class="e2e-topic topic">{{topicMessage.topic}}</span>
-  <ng-container *ngIf="message.headers.get(MessageHeaders.ReplyTo) as replyTo">
+  @if (message.headers.get(MessageHeaders.ReplyTo); as replyTo) {
     replyTo: <span class="e2e-reply-to">{{replyTo}}</span>
-  </ng-container>
+  }
   Body: <span class="e2e-body">{{message.body}}</span>
-  <ng-container *ngIf="topicMessage.params && topicMessage.params.size">
+  @if (topicMessage.params && topicMessage.params.size) {
     Params:
-    <sci-key-value [object]="topicMessage.params" class="e2e-params"></sci-key-value>
-  </ng-container>
+    <sci-key-value [object]="topicMessage.params" class="e2e-params"/>
+  }
   Headers:
-  <sci-key-value [object]="message.headers" class="e2e-headers"></sci-key-value>
-</ng-template>
-
-<ng-template #intent_message_template>
+  <sci-key-value [object]="message.headers" class="e2e-headers"/>
+} @else {
   Type: <span class="e2e-intent-type intent-type">{{intentMessage.intent.type}}</span>
   Qualifier:
-  <sci-key-value [object]="intentMessage.intent.qualifier ?? {}" class="e2e-intent-qualifier"></sci-key-value>
+  <sci-key-value [object]="intentMessage.intent.qualifier ?? {}" class="e2e-intent-qualifier"/>
   Params:
-  <sci-key-value [object]="(intentMessage.intent.params | appAppendParamDataType) ?? {}" class="e2e-intent-params"></sci-key-value>
-  <ng-container *ngIf="message.headers.get(MessageHeaders.ReplyTo) as replyTo">
+  <sci-key-value [object]="(intentMessage.intent.params | appAppendParamDataType) ?? {}" class="e2e-intent-params"/>
+  @if (message.headers.get(MessageHeaders.ReplyTo); as replyTo) {
     replyTo: <span class="e2e-reply-to">{{replyTo}}</span>
-  </ng-container>
+  }
   Body: <span class="e2e-body">{{message.body}}</span>
   Headers:
-  <sci-key-value [object]="message.headers" class="e2e-headers"></sci-key-value>
+  <sci-key-value [object]="message.headers" class="e2e-headers"/>
   Capability ID: <span>{{intentMessage.capability.metadata!.id}}</span>
-</ng-template>
+}
diff --git a/apps/microfrontend-platform-testing-app/src/app/messaging/message-list-item/message-list-item.component.ts b/apps/microfrontend-platform-testing-app/src/app/messaging/message-list-item/message-list-item.component.ts
index 88322cdc..c1c6ff33 100644
--- a/apps/microfrontend-platform-testing-app/src/app/messaging/message-list-item/message-list-item.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/messaging/message-list-item/message-list-item.component.ts
@@ -9,7 +9,6 @@
  */
 import {Component, HostBinding, Input, OnChanges, SimpleChanges} from '@angular/core';
 import {IntentMessage, MessageHeaders, TopicMessage} from '@scion/microfrontend-platform';
-import {NgIf} from '@angular/common';
 import {AppendParamDataTypePipe} from '../append-param-data-type.pipe';
 import {SciKeyValueComponent} from '@scion/components.internal/key-value';
 
@@ -19,7 +18,6 @@ import {SciKeyValueComponent} from '@scion/components.internal/key-value';
   styleUrls: ['./message-list-item.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
     SciKeyValueComponent,
     AppendParamDataTypePipe,
   ],
diff --git a/apps/microfrontend-platform-testing-app/src/app/messaging/publish-message/publish-message.component.html b/apps/microfrontend-platform-testing-app/src/app/messaging/publish-message/publish-message.component.html
index ac03f10b..b5ef390b 100644
--- a/apps/microfrontend-platform-testing-app/src/app/messaging/publish-message/publish-message.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/messaging/publish-message/publish-message.component.html
@@ -6,25 +6,7 @@
     </select>
   </sci-form-field>
 
-  <ng-container *ngIf="isTopicFlavor(); then topic_template else intent_template"></ng-container>
-
-  <sci-form-field label="Message">
-    <textarea rows="10" [formControl]="form.controls.message" class="e2e-message"></textarea>
-  </sci-form-field>
-
-  <sci-form-field label="Headers">
-    <sci-key-value-field [keyValueFormArray]="form.controls.headers" [addable]="true" [removable]="true" class="e2e-headers"></sci-key-value-field>
-  </sci-form-field>
-
-  <sci-form-field label="Request-Reply">
-    <sci-checkbox [formControl]="form.controls.requestReply" class="e2e-request-reply"></sci-checkbox>
-  </sci-form-field>
-
-  <sci-form-field label="Retain">
-    <sci-checkbox [formControl]="form.controls.retain" class="e2e-retain"></sci-checkbox>
-  </sci-form-field>
-
-  <ng-template #topic_template>
+  @if (isTopicFlavor()) {
     <ng-container [formGroup]="form.controls.destination">
       <sci-form-field label="Topic *">
         <input [formControl]="(form.controls.destination | appAs:TopicMessageDestinationFormGroup).controls.topic" class="e2e-topic">
@@ -34,37 +16,59 @@
         </div>
       </sci-form-field>
     </ng-container>
-  </ng-template>
-
-  <ng-template #intent_template>
+  } @else {
     <ng-container [formGroup]="form.controls.destination">
       <sci-form-field label="Intent type *">
         <input [formControl]="(form.controls.destination | appAs:IntentMessageDestinationFromGroup).controls.type" class="e2e-intent-type">
       </sci-form-field>
-
       <sci-form-field label="Intent qualifier">
-        <sci-key-value-field [keyValueFormArray]="(form.controls.destination | appAs:IntentMessageDestinationFromGroup).controls.qualifier" [addable]="true" [removable]="true" class="e2e-intent-qualifier"></sci-key-value-field>
+        <sci-key-value-field [keyValueFormArray]="(form.controls.destination | appAs:IntentMessageDestinationFromGroup).controls.qualifier" [addable]="true" [removable]="true" class="e2e-intent-qualifier"/>
       </sci-form-field>
-
       <sci-form-field label="Intent params">
-        <sci-key-value-field [keyValueFormArray]="(form.controls.destination | appAs:IntentMessageDestinationFromGroup).controls.params" [addable]="true" [removable]="true" class="e2e-intent-params"></sci-key-value-field>
+        <sci-key-value-field [keyValueFormArray]="(form.controls.destination | appAs:IntentMessageDestinationFromGroup).controls.params" [addable]="true" [removable]="true" class="e2e-intent-params"/>
       </sci-form-field>
     </ng-container>
-  </ng-template>
+  }
+
+  <sci-form-field label="Message">
+    <textarea rows="10" [formControl]="form.controls.message" class="e2e-message"></textarea>
+  </sci-form-field>
+
+  <sci-form-field label="Headers">
+    <sci-key-value-field [keyValueFormArray]="form.controls.headers" [addable]="true" [removable]="true" class="e2e-headers"/>
+  </sci-form-field>
+
+  <sci-form-field label="Request-Reply">
+    <sci-checkbox [formControl]="form.controls.requestReply" class="e2e-request-reply"/>
+  </sci-form-field>
+
+  <sci-form-field label="Retain">
+    <sci-checkbox [formControl]="form.controls.retain" class="e2e-retain"/>
+  </sci-form-field>
+
+
 </form>
 
-<button type="button" (click)="onPublish()" *ngIf="!publishing" [disabled]="form.invalid" class="e2e-publish" sci-primary>{{isTopicFlavor() ? 'Publish message' : 'Issue intent'}}</button>
-<button type="button" (click)="onCancelPublish()" *ngIf="publishing" class="e2e-cancel" sci-primary>Cancel</button>
+@if (!publishing) {
+  <button type="button" (click)="onPublish()" [disabled]="form.invalid" class="e2e-publish" sci-primary>{{isTopicFlavor() ? 'Publish message' : 'Issue intent'}}</button>
+}
+@if (publishing) {
+  <button type="button" (click)="onCancelPublish()" class="e2e-cancel" sci-primary>Cancel</button>
+}
 
-<output class="publish-error e2e-publish-error" *ngIf="publishError">
-  {{publishError}}
-</output>
+@if (publishError) {
+  <output class="publish-error e2e-publish-error">
+    {{publishError}}
+  </output>
+}
 
-<ng-container *ngIf="isRequestReply() && publishing">
+@if (isRequestReply() && publishing) {
   <sci-list class="replies e2e-replies">
-    <ng-template sciListItem *ngFor="let reply of replies">
-      <app-message-list-item [message]="reply" [isTopicMessage]="true"></app-message-list-item>
-    </ng-template>
+    @for (reply of replies; track reply) {
+      <ng-template sciListItem>
+        <app-message-list-item [message]="reply" [isTopicMessage]="true"/>
+      </ng-template>
+    }
   </sci-list>
   <button type="button" class="e2e-clear-replies" (click)="onClear()">Clear</button>
-</ng-container>
+}
diff --git a/apps/microfrontend-platform-testing-app/src/app/messaging/publish-message/publish-message.component.ts b/apps/microfrontend-platform-testing-app/src/app/messaging/publish-message/publish-message.component.ts
index 24d5dbf7..2110ec51 100644
--- a/apps/microfrontend-platform-testing-app/src/app/messaging/publish-message/publish-message.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/messaging/publish-message/publish-message.component.ts
@@ -14,7 +14,7 @@ import {Subscription} from 'rxjs';
 import {distinctUntilChanged, finalize, startWith} from 'rxjs/operators';
 import {KeyValueEntry, SciKeyValueFieldComponent} from '@scion/components.internal/key-value-field';
 import {Beans} from '@scion/toolkit/bean-manager';
-import {AsyncPipe, NgFor, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {TopicSubscriberCountPipe} from '../topic-subscriber-count.pipe';
 import {MessageListItemComponent} from '../message-list-item/message-list-item.component';
@@ -31,9 +31,7 @@ import {parseTypedValues} from '../../common/typed-value-parser.util';
   styleUrls: ['./publish-message.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
     AsyncPipe,
-    NgFor,
     ReactiveFormsModule,
     SciFormFieldComponent,
     SciKeyValueFieldComponent,
diff --git a/apps/microfrontend-platform-testing-app/src/app/messaging/receive-message/receive-message.component.html b/apps/microfrontend-platform-testing-app/src/app/messaging/receive-message/receive-message.component.html
index a0f17825..e1b4dbd3 100644
--- a/apps/microfrontend-platform-testing-app/src/app/messaging/receive-message/receive-message.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/messaging/receive-message/receive-message.component.html
@@ -5,48 +5,49 @@
       <option [value]="MessagingFlavor.Intent">Intent</option>
     </select>
   </sci-form-field>
-  <ng-container *ngIf="isTopicMessaging(); then topic_template else intent_template"></ng-container>
-
-  <ng-template #topic_template>
+  @if (isTopicMessaging()) {
     <ng-container [formGroup]="form.controls.destination">
       <sci-form-field label="Topic *">
         <input [formControl]="(form.controls.destination | appAs:TopicMessageDestinationFormGroup).controls.topic" class="e2e-topic">
       </sci-form-field>
     </ng-container>
-  </ng-template>
-
-  <ng-template #intent_template>
+  } @else {
     <ng-container [formGroup]="form.controls.destination">
       <sci-form-field label="Intent type">
         <input [formControl]="(form.controls.destination | appAs:IntentMessageDestinationFromGroup).controls.type" class="e2e-intent-type">
       </sci-form-field>
-
       <sci-form-field label="Intent qualifier">
-        <sci-key-value-field [keyValueFormArray]="(form.controls.destination | appAs:IntentMessageDestinationFromGroup).controls.qualifier" [addable]="true" [removable]="true" class="e2e-intent-qualifier"></sci-key-value-field>
+        <sci-key-value-field [keyValueFormArray]="(form.controls.destination | appAs:IntentMessageDestinationFromGroup).controls.qualifier" [addable]="true" [removable]="true" class="e2e-intent-qualifier"/>
       </sci-form-field>
     </ng-container>
-  </ng-template>
+  }
+
+
 </form>
 
-<button (click)="onSubscribe()" *ngIf="!isSubscribed" [disabled]="form.invalid" class="e2e-subscribe" sci-primary>Subscribe</button>
-<button (click)="onUnsubscribe()" *ngIf="isSubscribed" class="e2e-unsubscribe" sci-primary>Unsubscribe</button>
+@if (!isSubscribed) {
+  <button (click)="onSubscribe()" [disabled]="form.invalid" class="e2e-subscribe" sci-primary>Subscribe</button>
+} @else {
+  <button (click)="onUnsubscribe()" class="e2e-unsubscribe" sci-primary>Unsubscribe</button>
+}
 
-<output class="subscribe-error" *ngIf="subscribeError">
-  {{subscribeError}}
-</output>
+@if (subscribeError) {
+  <output class="subscribe-error">
+    {{subscribeError}}
+  </output>
+}
 
 
-<ng-container *ngIf="isSubscribed">
+@if (isSubscribed) {
   <sci-list class="messages e2e-messages">
-    <ng-container *ngFor="let message of messages">
+    @for (message of messages; track message) {
       <ng-template sciListItem [actions]="message.headers.get(MessageHeaders.ReplyTo) ? [reply_action] : []">
-        <app-message-list-item [message]="message" [isTopicMessage]="isTopicMessaging()"></app-message-list-item>
+        <app-message-list-item [message]="message" [isTopicMessage]="isTopicMessaging()"/>
       </ng-template>
-
       <ng-template #reply_action>
         <button class="e2e-reply" title="Reply" (click)="onReply(message.headers.get(MessageHeaders.ReplyTo))" sciMaterialIcon>reply</button>
       </ng-template>
-    </ng-container>
+    }
   </sci-list>
   <button class="e2e-clear-messages" (click)="onClear()">Clear</button>
-</ng-container>
+}
diff --git a/apps/microfrontend-platform-testing-app/src/app/messaging/receive-message/receive-message.component.ts b/apps/microfrontend-platform-testing-app/src/app/messaging/receive-message/receive-message.component.ts
index d06b47d8..f2866ed3 100644
--- a/apps/microfrontend-platform-testing-app/src/app/messaging/receive-message/receive-message.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/messaging/receive-message/receive-message.component.ts
@@ -14,7 +14,6 @@ import {Subscription} from 'rxjs';
 import {distinctUntilChanged, finalize, startWith} from 'rxjs/operators';
 import {KeyValueEntry, SciKeyValueFieldComponent} from '@scion/components.internal/key-value-field';
 import {Beans} from '@scion/toolkit/bean-manager';
-import {NgFor, NgIf} from '@angular/common';
 import {MessageListItemComponent} from '../message-list-item/message-list-item.component';
 import {AppAsPipe} from '../../common/as.pipe';
 import {stringifyError} from '../../common/stringify-error.util';
@@ -29,8 +28,6 @@ import {SciMaterialIconDirective} from '@scion/components.internal/material-icon
   styleUrls: ['./receive-message.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
-    NgFor,
     ReactiveFormsModule,
     SciFormFieldComponent,
     SciKeyValueFieldComponent,
diff --git a/apps/microfrontend-platform-testing-app/src/app/outlet-context/context/context.component.html b/apps/microfrontend-platform-testing-app/src/app/outlet-context/context/context.component.html
index 5d310dcf..d43a5120 100644
--- a/apps/microfrontend-platform-testing-app/src/app/outlet-context/context/context.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/outlet-context/context/context.component.html
@@ -1,5 +1,7 @@
 <sci-list>
-  <ng-template sciListItem *ngFor="let entry of context$ | async | keyvalue">
-    <app-context-entry [name]="entry.key" [value]="entry.value | async"></app-context-entry>
-  </ng-template>
+  @for (entry of context$ | async | keyvalue; track entry) {
+    <ng-template sciListItem>
+      <app-context-entry [name]="entry.key" [value]="entry.value | async"/>
+    </ng-template>
+  }
 </sci-list>
diff --git a/apps/microfrontend-platform-testing-app/src/app/outlet-context/context/context.component.ts b/apps/microfrontend-platform-testing-app/src/app/outlet-context/context/context.component.ts
index 9c8a84d8..d79a3a59 100644
--- a/apps/microfrontend-platform-testing-app/src/app/outlet-context/context/context.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/outlet-context/context/context.component.ts
@@ -12,7 +12,7 @@ import {ContextService} from '@scion/microfrontend-platform';
 import {Observable, OperatorFunction} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {Beans} from '@scion/toolkit/bean-manager';
-import {AsyncPipe, KeyValuePipe, NgFor} from '@angular/common';
+import {AsyncPipe, KeyValuePipe} from '@angular/common';
 import {ContextEntryComponent} from '../../context-entry/context-entry.component';
 import {SciListComponent, SciListItemDirective} from '@scion/components.internal/list';
 
@@ -23,7 +23,6 @@ import {SciListComponent, SciListItemDirective} from '@scion/components.internal
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    NgFor,
     AsyncPipe,
     KeyValuePipe,
     SciListComponent,
diff --git a/apps/microfrontend-platform-testing-app/src/app/outlet-context/lookup-context-value/lookup-context-value.component.html b/apps/microfrontend-platform-testing-app/src/app/outlet-context/lookup-context-value/lookup-context-value.component.html
index ee8d15e0..1a6349cc 100644
--- a/apps/microfrontend-platform-testing-app/src/app/outlet-context/lookup-context-value/lookup-context-value.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/outlet-context/lookup-context-value/lookup-context-value.component.html
@@ -4,35 +4,42 @@
   </sci-form-field>
 
   <sci-form-field label="Collect">
-    <sci-checkbox class="e2e-collect-values" [formControl]="form.controls.collect"></sci-checkbox>
+    <sci-checkbox class="e2e-collect-values" [formControl]="form.controls.collect"/>
   </sci-form-field>
 
-  <button (click)="onSubscribe()" *ngIf="!isSubscribed" [disabled]="form.invalid" class="e2e-subscribe" sci-primary>Subscribe</button>
-  <button (click)="onUnsubscribe()" *ngIf="isSubscribed" class="e2e-unsubscribe">Unsubscribe</button>
+  @if (!isSubscribed) {
+    <button (click)="onSubscribe()" [disabled]="form.invalid" class="e2e-subscribe" sci-primary>Subscribe</button>
+  } @else {
+    <button (click)="onUnsubscribe()" class="e2e-unsubscribe">Unsubscribe</button>
+  }
 </form>
 
-<sci-sashbox class="context-value" *ngIf="isSubscribed">
-  <!-- Observe -->
-  <ng-template sciSash>
-    <section class="context-value">
-      <header>Observe:</header>
-      <output class="e2e-observe-value">
-        {{observeValue | json}}
-      </output>
-    </section>
-  </ng-template>
+@if (isSubscribed) {
+  <sci-sashbox class="context-value">
+    <!-- Observe -->
+    <ng-template sciSash>
+      <section class="context-value">
+        <header>Observe:</header>
+        <output class="e2e-observe-value">
+          {{observeValue | json}}
+        </output>
+      </section>
+    </ng-template>
 
-  <!-- Lookup -->
-  <ng-template sciSash>
-    <section class="context-value">
-      <header>Lookup:</header>
-      <output class="e2e-lookup-value">
-        {{lookupValue | json}}
-      </output>
-    </section>
-  </ng-template>
-</sci-sashbox>
+    <!-- Lookup -->
+    <ng-template sciSash>
+      <section class="context-value">
+        <header>Lookup:</header>
+        <output class="e2e-lookup-value">
+          {{lookupValue | json}}
+        </output>
+      </section>
+    </ng-template>
+  </sci-sashbox>
+}
 
-<output class="subscribe-error e2e-observe-error e2e-lookup-error" *ngIf="subscribeError">
-  {{subscribeError}}
-</output>
+@if (subscribeError) {
+  <output class="subscribe-error e2e-observe-error e2e-lookup-error">
+    {{subscribeError}}
+  </output>
+}
diff --git a/apps/microfrontend-platform-testing-app/src/app/outlet-context/lookup-context-value/lookup-context-value.component.ts b/apps/microfrontend-platform-testing-app/src/app/outlet-context/lookup-context-value/lookup-context-value.component.ts
index 5b40f714..5b866f05 100644
--- a/apps/microfrontend-platform-testing-app/src/app/outlet-context/lookup-context-value/lookup-context-value.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/outlet-context/lookup-context-value/lookup-context-value.component.ts
@@ -12,7 +12,7 @@ import {NonNullableFormBuilder, ReactiveFormsModule, Validators} from '@angular/
 import {Beans} from '@scion/toolkit/bean-manager';
 import {ContextService} from '@scion/microfrontend-platform';
 import {Subscription} from 'rxjs';
-import {JsonPipe, NgIf} from '@angular/common';
+import {JsonPipe} from '@angular/common';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {SciSashboxComponent, SciSashDirective} from '@scion/components/sashbox';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
@@ -24,7 +24,6 @@ import {SciFormFieldComponent} from '@scion/components.internal/form-field';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    NgIf,
     JsonPipe,
     ReactiveFormsModule,
     SciFormFieldComponent,
diff --git a/apps/microfrontend-platform-testing-app/src/app/outlet-router/outlet-router.component.html b/apps/microfrontend-platform-testing-app/src/app/outlet-router/outlet-router.component.html
index 4836daab..380f6bf1 100644
--- a/apps/microfrontend-platform-testing-app/src/app/outlet-router/outlet-router.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/outlet-router/outlet-router.component.html
@@ -3,27 +3,33 @@
     <input [formControl]="form.controls.outlet" class="e2e-outlet">
   </sci-form-field>
   <sci-form-field label="Use Intent">
-    <sci-checkbox [formControl]="form.controls.useIntent" class="e2e-use-intent"></sci-checkbox>
-  </sci-form-field>
-  <sci-form-field label="URL" *ngIf="!form.controls.useIntent.value">
-    <input [formControl]="(form.controls.destination | appAs:UrlDestinationFormGroup).controls.url" class="e2e-url">
-  </sci-form-field>
-  <sci-form-field label="Qualifier" *ngIf="form.controls.useIntent.value">
-    <sci-key-value-field [keyValueFormArray]="(form.controls.destination | appAs:IntentDestinationFormGroup).controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"></sci-key-value-field>
+    <sci-checkbox [formControl]="form.controls.useIntent" class="e2e-use-intent"/>
   </sci-form-field>
+  @if (form.controls.useIntent.value) {
+    <sci-form-field label="Qualifier">
+      <sci-key-value-field [keyValueFormArray]="(form.controls.destination | appAs:IntentDestinationFormGroup).controls.qualifier" [addable]="true" [removable]="true" class="e2e-qualifier"/>
+    </sci-form-field>
+  } @else {
+    <sci-form-field label="URL">
+      <input [formControl]="(form.controls.destination | appAs:UrlDestinationFormGroup).controls.url" class="e2e-url">
+    </sci-form-field>
+  }
+
   <sci-form-field label="Params">
-    <sci-key-value-field [keyValueFormArray]="form.controls.params" [addable]="true" [removable]="true" class="e2e-params"></sci-key-value-field>
+    <sci-key-value-field [keyValueFormArray]="form.controls.params" [addable]="true" [removable]="true" class="e2e-params"/>
   </sci-form-field>
   <sci-form-field label="Push State" title="Pushes a state to the browser's session history stack, allowing the user to use the back button to navigate back.">
-    <sci-checkbox [formControl]="form.controls.pushSessionHistoryState" class="e2e-push-state"></sci-checkbox>
+    <sci-checkbox [formControl]="form.controls.pushSessionHistoryState" class="e2e-push-state"/>
   </sci-form-field>
   <sci-form-field label="Show Splash" title="Shows a splash until the microfrontend signals readiness.">
-    <sci-checkbox [formControl]="form.controls.showSplash" class="e2e-show-splash"></sci-checkbox>
+    <sci-checkbox [formControl]="form.controls.showSplash" class="e2e-show-splash"/>
   </sci-form-field>
 
   <button type="submit" class="e2e-navigate" (click)="onNavigateClick()" [disabled]="form.invalid" sci-primary>Navigate</button>
 </form>
 
-<output class="navigate-error e2e-navigate-error" *ngIf="navigateError">
-  {{navigateError}}
-</output>
+@if (navigateError) {
+  <output class="navigate-error e2e-navigate-error">
+    {{navigateError}}
+  </output>
+}
diff --git a/apps/microfrontend-platform-testing-app/src/app/outlet-router/outlet-router.component.ts b/apps/microfrontend-platform-testing-app/src/app/outlet-router/outlet-router.component.ts
index 277dfd34..204cd041 100644
--- a/apps/microfrontend-platform-testing-app/src/app/outlet-router/outlet-router.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/outlet-router/outlet-router.component.ts
@@ -11,7 +11,6 @@ import {Component} from '@angular/core';
 import {FormArray, FormControl, FormGroup, NonNullableFormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';
 import {NavigationOptions, OutletRouter} from '@scion/microfrontend-platform';
 import {Beans} from '@scion/toolkit/bean-manager';
-import {NgIf} from '@angular/common';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {distinctUntilChanged, startWith} from 'rxjs/operators';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
@@ -26,7 +25,6 @@ import {KeyValueEntry, SciKeyValueFieldComponent} from '@scion/components.intern
   styleUrls: ['./outlet-router.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
     ReactiveFormsModule,
     SciFormFieldComponent,
     SciCheckboxComponent,
diff --git a/apps/microfrontend-platform-testing-app/src/app/platform-properties/platform-properties.component.html b/apps/microfrontend-platform-testing-app/src/app/platform-properties/platform-properties.component.html
index bed9ba20..a8a96f58 100644
--- a/apps/microfrontend-platform-testing-app/src/app/platform-properties/platform-properties.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/platform-properties/platform-properties.component.html
@@ -1 +1 @@
-<sci-key-value [object]="properties" class="e2e-properties"></sci-key-value>
+<sci-key-value [object]="properties" class="e2e-properties"/>
diff --git a/apps/microfrontend-platform-testing-app/src/app/preferred-size/preferred-size.component.html b/apps/microfrontend-platform-testing-app/src/app/preferred-size/preferred-size.component.html
index 8ed43f17..4e901118 100644
--- a/apps/microfrontend-platform-testing-app/src/app/preferred-size/preferred-size.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/preferred-size/preferred-size.component.html
@@ -1,30 +1,34 @@
 <form autocomplete="off" [formGroup]="form">
-  <!-- set the preferred size programmatically -->
-  <ng-container *ngIf="!isUseElementSize" [formGroup]="form.controls.preferredSize">
-    <sci-form-field label="Preferred width">
-      <input class="e2e-preferred-width" [formControl]="form.controls.preferredSize.controls.width" placeholder="Enter a value in pixel" title="Enter a value in pixel to be reported as preferred width, or an empty value to unset the preferred width.">
-    </sci-form-field>
-    <sci-form-field label="Preferred height">
-      <input class="e2e-preferred-height" [formControl]="form.controls.preferredSize.controls.height" placeholder="Enter a value in pixel" title="Enter a value in pixel to be reported as preferred height, or an empty value to unset the preferred height.">
-    </sci-form-field>
-  </ng-container>
-
-  <!-- set the preferred size by observing the component size -->
-  <ng-container *ngIf="isUseElementSize" [formGroup]="form.controls.cssSize">
-    <sci-form-field label="CSS width">
-      <input class="e2e-css-width" [formControl]="form.controls.cssSize.controls.width" placeholder="Enter a value in pixel" title="Enter a pixel value which is set as CSS variable for the element width, or an empty value to unset the CSS variable.">
-    </sci-form-field>
-    <sci-form-field label="CSS height">
-      <input class="e2e-css-height" [formControl]="form.controls.cssSize.controls.height" placeholder="Enter a value in pixel" title="Enter a pixel value which is set as CSS variable for the element height, or an empty value to unset the CSS variable.">
-    </sci-form-field>
-
-    <button (click)="onElementObservableBind()" *ngIf="!elementDimensionObservableBound" class="e2e-bind-element-observable" sci-primary>Bind the element as size observable</button>
-    <button (click)="onElementObservableUnbind()" *ngIf="elementDimensionObservableBound" class="e2e-unbind-element-observable" sci-primary>Unbind the element as size observable</button>
-    <button (click)="onElementUnmount()" class="e2e-unmount">Unmount the element from the DOM</button>
-  </ng-container>
+  @if (isUseElementSize) {
+    <!-- set the preferred size by observing the component size -->
+    <ng-container [formGroup]="form.controls.cssSize">
+      <sci-form-field label="CSS width">
+        <input class="e2e-css-width" [formControl]="form.controls.cssSize.controls.width" placeholder="Enter a value in pixel" title="Enter a pixel value which is set as CSS variable for the element width, or an empty value to unset the CSS variable.">
+      </sci-form-field>
+      <sci-form-field label="CSS height">
+        <input class="e2e-css-height" [formControl]="form.controls.cssSize.controls.height" placeholder="Enter a value in pixel" title="Enter a pixel value which is set as CSS variable for the element height, or an empty value to unset the CSS variable.">
+      </sci-form-field>
+      @if (!elementDimensionObservableBound) {
+        <button (click)="onElementObservableBind()" class="e2e-bind-element-observable" sci-primary>Bind the element as size observable</button>
+      } @else {
+        <button (click)="onElementObservableUnbind()" class="e2e-unbind-element-observable" sci-primary>Unbind the element as size observable</button>
+      }
+      <button (click)="onElementUnmount()" class="e2e-unmount">Unmount the element from the DOM</button>
+    </ng-container>
+  } @else {
+    <!-- set the preferred size programmatically -->
+    <ng-container [formGroup]="form.controls.preferredSize">
+      <sci-form-field label="Preferred width">
+        <input class="e2e-preferred-width" [formControl]="form.controls.preferredSize.controls.width" placeholder="Enter a value in pixel" title="Enter a value in pixel to be reported as preferred width, or an empty value to unset the preferred width.">
+      </sci-form-field>
+      <sci-form-field label="Preferred height">
+        <input class="e2e-preferred-height" [formControl]="form.controls.preferredSize.controls.height" placeholder="Enter a value in pixel" title="Enter a value in pixel to be reported as preferred height, or an empty value to unset the preferred height.">
+      </sci-form-field>
+    </ng-container>
+  }
 
   <sci-form-field label="Use element size" title="If checked, width and height are set as CSS variables on the element. In turn, the element fires a size change event which is reported as the outlet's preferred size.">
-    <sci-checkbox [formControl]="form.controls.useElementSize" class="e2e-use-element-size"></sci-checkbox>
+    <sci-checkbox [formControl]="form.controls.useElementSize" class="e2e-use-element-size"/>
   </sci-form-field>
 
   <button type="button" (click)="onResetClick()" class="e2e-reset">Reset</button>
diff --git a/apps/microfrontend-platform-testing-app/src/app/preferred-size/preferred-size.component.ts b/apps/microfrontend-platform-testing-app/src/app/preferred-size/preferred-size.component.ts
index e189d08b..f2bd2669 100644
--- a/apps/microfrontend-platform-testing-app/src/app/preferred-size/preferred-size.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/preferred-size/preferred-size.component.ts
@@ -11,7 +11,6 @@ import {ChangeDetectionStrategy, Component, ElementRef} from '@angular/core';
 import {NonNullableFormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';
 import {PreferredSizeService} from '@scion/microfrontend-platform';
 import {Beans} from '@scion/toolkit/bean-manager';
-import {NgIf} from '@angular/common';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
@@ -23,7 +22,6 @@ import {SciFormFieldComponent} from '@scion/components.internal/form-field';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    NgIf,
     ReactiveFormsModule,
     SciFormFieldComponent,
     SciCheckboxComponent,
diff --git a/apps/microfrontend-platform-testing-app/src/app/router-outlet-context/router-outlet-context.component.html b/apps/microfrontend-platform-testing-app/src/app/router-outlet-context/router-outlet-context.component.html
index dbeb4652..67f421d5 100644
--- a/apps/microfrontend-platform-testing-app/src/app/router-outlet-context/router-outlet-context.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/router-outlet-context/router-outlet-context.component.html
@@ -17,14 +17,14 @@ <h1>Define the context of this outlet</h1>
   </div>
 
   <sci-list class="context e2e-context">
-    <ng-container *ngFor="let entry of routerOutlet.contextValues$ | async | keyvalue">
+    @for (entry of routerOutlet.contextValues$ | async | keyvalue; track entry) {
       <ng-template sciListItem [actions]="remove_template">
-        <app-context-entry [name]="entry.key" [value]="entry.value"></app-context-entry>
+        <app-context-entry [name]="entry.key" [value]="entry.value"/>
       </ng-template>
 
       <ng-template #remove_template>
         <button class="e2e-remove" (click)="onRemoveClick(entry.key)" title="Remove this value from the outlet context" sciMaterialIcon>close</button>
       </ng-template>
-    </ng-container>
+    }
   </sci-list>
 </main>
diff --git a/apps/microfrontend-platform-testing-app/src/app/router-outlet-context/router-outlet-context.component.ts b/apps/microfrontend-platform-testing-app/src/app/router-outlet-context/router-outlet-context.component.ts
index 5f25c8d2..dea2090c 100644
--- a/apps/microfrontend-platform-testing-app/src/app/router-outlet-context/router-outlet-context.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/router-outlet-context/router-outlet-context.component.ts
@@ -12,7 +12,7 @@ import {NonNullableFormBuilder, ReactiveFormsModule, Validators} from '@angular/
 import {SciRouterOutletElement} from '@scion/microfrontend-platform';
 import {ConnectedPosition, Overlay, OverlayConfig, OverlayRef} from '@angular/cdk/overlay';
 import {ComponentPortal} from '@angular/cdk/portal';
-import {AsyncPipe, KeyValuePipe, NgFor} from '@angular/common';
+import {AsyncPipe, KeyValuePipe} from '@angular/common';
 import {A11yModule} from '@angular/cdk/a11y';
 import {ContextEntryComponent} from '../context-entry/context-entry.component';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
@@ -28,7 +28,6 @@ const OVERLAY_POSITION_SOUTH: ConnectedPosition = {originX: 'end', originY: 'bot
   styleUrls: ['./router-outlet-context.component.scss'],
   standalone: true,
   imports: [
-    NgFor,
     AsyncPipe,
     KeyValuePipe,
     A11yModule,
diff --git a/apps/microfrontend-platform-testing-app/src/app/router-outlet-settings/router-outlet-settings.component.html b/apps/microfrontend-platform-testing-app/src/app/router-outlet-settings/router-outlet-settings.component.html
index 88b085ce..111e8da5 100644
--- a/apps/microfrontend-platform-testing-app/src/app/router-outlet-settings/router-outlet-settings.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/router-outlet-settings/router-outlet-settings.component.html
@@ -2,17 +2,20 @@
   <li>
     <span class="label">Page scrolling</span>
     <span class="description">Enables native page scrolling in the embedded document</span>
-    <sci-toggle-button [formControl]="pageScrollingEnabledFormControl"></sci-toggle-button>
+    <sci-toggle-button [formControl]="pageScrollingEnabledFormControl"/>
   </li>
   <li class="e2e-preferred-size">
     <span class="label">Preferred size</span>
-    <span class="description" *ngIf="!preferredSize">
-      There is no preferred size set.
-    </span>
-    <span class="description" *ngIf="preferredSize">
-      The following preferred size is set:
-      <code class="preferred-size">{{preferredSize | json}}</code>
-    </span>
+    @if (preferredSize) {
+      <span class="description">
+        The following preferred size is set:
+        <code class="preferred-size">{{preferredSize | json}}</code>
+      </span>
+    } @else {
+      <span class="description">
+        There is no preferred size set.
+      </span>
+    }
     <button type="button" class="e2e-reset" (click)="onPreferredSizeResetClick()" [disabled]="!preferredSize" sci-primary>reset</button>
   </li>
 </ul>
diff --git a/apps/microfrontend-platform-testing-app/src/app/router-outlet-settings/router-outlet-settings.component.ts b/apps/microfrontend-platform-testing-app/src/app/router-outlet-settings/router-outlet-settings.component.ts
index d04e743f..9c542fbf 100644
--- a/apps/microfrontend-platform-testing-app/src/app/router-outlet-settings/router-outlet-settings.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/router-outlet-settings/router-outlet-settings.component.ts
@@ -11,7 +11,7 @@ import {Component, HostListener, Injector} from '@angular/core';
 import {PreferredSize, SciRouterOutletElement} from '@scion/microfrontend-platform';
 import {ConnectedPosition, Overlay, OverlayConfig, OverlayRef} from '@angular/cdk/overlay';
 import {ComponentPortal} from '@angular/cdk/portal';
-import {JsonPipe, NgIf, NgTemplateOutlet} from '@angular/common';
+import {JsonPipe, NgTemplateOutlet} from '@angular/common';
 import {A11yModule} from '@angular/cdk/a11y';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
 import {SciToggleButtonComponent} from '@scion/components.internal/toggle-button';
@@ -25,7 +25,6 @@ const OVERLAY_POSITION_SOUTH: ConnectedPosition = {originX: 'end', originY: 'bot
   styleUrls: ['./router-outlet-settings.component.scss'],
   standalone: true,
   imports: [
-    NgIf,
     JsonPipe,
     NgTemplateOutlet,
     A11yModule,
diff --git a/apps/microfrontend-platform-testing-app/src/app/router-outlet/router-outlet.component.html b/apps/microfrontend-platform-testing-app/src/app/router-outlet/router-outlet.component.html
index d2a5926e..a58c75a0 100644
--- a/apps/microfrontend-platform-testing-app/src/app/router-outlet/router-outlet.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/router-outlet/router-outlet.component.html
@@ -10,6 +10,8 @@
                    (activate)="onActivate($event)"
                    (deactivate)="onDeactivate($event)"
                    (focuswithin)="onFocusWithin($event)">
-  <sci-throbber type="ellipsis" class="e2e-slotted-content"></sci-throbber>
+  <sci-throbber type="ellipsis" class="e2e-slotted-content"/>
 </sci-router-outlet>
-<div class="empty-note e2e-empty" *ngIf="empty$ | async">Router Outlet is empty</div>
+@if (empty$ | async) {
+  <div class="empty-note e2e-empty">Router Outlet is empty</div>
+}
diff --git a/apps/microfrontend-platform-testing-app/src/app/router-outlet/router-outlet.component.ts b/apps/microfrontend-platform-testing-app/src/app/router-outlet/router-outlet.component.ts
index 00158781..30ffd677 100644
--- a/apps/microfrontend-platform-testing-app/src/app/router-outlet/router-outlet.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/router-outlet/router-outlet.component.ts
@@ -14,7 +14,7 @@ import {Overlay} from '@angular/cdk/overlay';
 import {SciRouterOutletElement} from '@scion/microfrontend-platform';
 import {RouterOutletSettingsComponent} from '../router-outlet-settings/router-outlet-settings.component';
 import {NEVER, Observable} from 'rxjs';
-import {AsyncPipe, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {SciThrobberComponent} from '@scion/components/throbber';
 import {SciMaterialIconDirective} from '@scion/components.internal/material-icon';
 
@@ -26,7 +26,6 @@ import {SciMaterialIconDirective} from '@scion/components.internal/material-icon
   standalone: true,
   schemas: [CUSTOM_ELEMENTS_SCHEMA], // required because <sci-router-outlet> is a custom element
   imports: [
-    NgIf,
     AsyncPipe,
     ReactiveFormsModule,
     SciThrobberComponent,
diff --git a/apps/microfrontend-platform-testing-app/src/app/test-pages/angular-zone-test-page/angular-zone-test-page.component.html b/apps/microfrontend-platform-testing-app/src/app/test-pages/angular-zone-test-page/angular-zone-test-page.component.html
index d131f352..f9cde56d 100644
--- a/apps/microfrontend-platform-testing-app/src/app/test-pages/angular-zone-test-page/angular-zone-test-page.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/test-pages/angular-zone-test-page/angular-zone-test-page.component.html
@@ -6,7 +6,7 @@
   </ng-template>
 
   <ng-template #panel1>
-    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.messageClient.observe}"></ng-container>
+    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.messageClient.observe}"/>
   </ng-template>
 
   <!-- MessageClient#request$ -->
@@ -15,7 +15,7 @@
   </ng-template>
 
   <ng-template #panel2>
-    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.messageClient.request}"></ng-container>
+    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.messageClient.request}"/>
   </ng-template>
 
   <!-- MessageClient#subscriberCount$ -->
@@ -24,7 +24,7 @@
   </ng-template>
 
   <ng-template #panel3>
-    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.messageClient.subscriberCount}"></ng-container>
+    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.messageClient.subscriberCount}"/>
   </ng-template>
 
   <!-- IntentClient#observe$ -->
@@ -33,7 +33,7 @@
   </ng-template>
 
   <ng-template #panel4>
-    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.intentClient.observe}"></ng-container>
+    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.intentClient.observe}"/>
   </ng-template>
 
   <!-- IntentClient#request$ -->
@@ -42,7 +42,7 @@
   </ng-template>
 
   <ng-template #panel5>
-    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.intentClient.request}"></ng-container>
+    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.intentClient.request}"/>
   </ng-template>
 
   <!-- ContextService#observe$ -->
@@ -51,7 +51,7 @@
   </ng-template>
 
   <ng-template #panel6>
-    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.contextService.observe}"></ng-container>
+    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.contextService.observe}"/>
   </ng-template>
 
   <!-- ContextService#names$ -->
@@ -60,7 +60,7 @@
   </ng-template>
 
   <ng-template #panel7>
-    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.contextService.names}"></ng-container>
+    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.contextService.names}"/>
   </ng-template>
 
   <!-- ManifestService#lookupCapabilities$ -->
@@ -69,7 +69,7 @@
   </ng-template>
 
   <ng-template #panel8>
-    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.manifestService.lookupCapabilities}"></ng-container>
+    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.manifestService.lookupCapabilities}"/>
   </ng-template>
 
   <!-- ManifestService#lookupIntentions$ -->
@@ -78,7 +78,7 @@
   </ng-template>
 
   <ng-template #panel9>
-    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.manifestService.lookupIntentions}"></ng-container>
+    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.manifestService.lookupIntentions}"/>
   </ng-template>
 
   <!-- FocusMonitor#focusWithin$ -->
@@ -87,7 +87,7 @@
   </ng-template>
 
   <ng-template #panel10>
-    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.focusMonitor.focusWithin}"></ng-container>
+    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.focusMonitor.focusWithin}"/>
   </ng-template>
 
   <!-- FocusMonitor#focus$ -->
@@ -96,17 +96,19 @@
   </ng-template>
 
   <ng-template #panel11>
-    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.focusMonitor.focus}"></ng-container>
+    <ng-container *ngTemplateOutlet="test_template; context: {$implicit: tests.focusMonitor.focus}"/>
   </ng-template>
 </sci-accordion>
 
 <ng-template #test_template let-test>
   <section class="panel">
     <div class="run-in-angular-checkbox">
-      <sci-checkbox [(ngModel)]="test.runInAngular" class="e2e-run-inside-angular"></sci-checkbox>
+      <sci-checkbox [(ngModel)]="test.runInAngular" class="e2e-run-inside-angular"/>
       <span>Subscribe in NgZone</span>
     </div>
     <button (click)="test.onTestClick()" class="e2e-subscribe">Subscribe</button>
-    <output *ngFor="let emission of test.emissions" class="zone e2e-emission" [attr.data-zone]="emission.insideAngular ? 'inside-angular' : 'outside-angular'">{{emission.label}}</output>
+    @for (emission of test.emissions; track emission) {
+      <output class="zone e2e-emission" [attr.data-zone]="emission.insideAngular ? 'inside-angular' : 'outside-angular'">{{emission.label}}</output>
+    }
   </section>
 </ng-template>
diff --git a/apps/microfrontend-platform-testing-app/src/app/test-pages/angular-zone-test-page/angular-zone-test-page.component.ts b/apps/microfrontend-platform-testing-app/src/app/test-pages/angular-zone-test-page/angular-zone-test-page.component.ts
index 3ed93a19..ad9965b3 100644
--- a/apps/microfrontend-platform-testing-app/src/app/test-pages/angular-zone-test-page/angular-zone-test-page.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/test-pages/angular-zone-test-page/angular-zone-test-page.component.ts
@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 import {Component, inject, NgZone} from '@angular/core';
-import {NgFor, NgTemplateOutlet} from '@angular/common';
+import {NgTemplateOutlet} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {UUID} from '@scion/toolkit/uuid';
 import {finalize, take} from 'rxjs/operators';
@@ -24,7 +24,6 @@ import {SciAccordionComponent, SciAccordionItemDirective} from '@scion/component
   styleUrls: ['./angular-zone-test-page.component.scss'],
   standalone: true,
   imports: [
-    NgFor,
     NgTemplateOutlet,
     FormsModule,
     SciCheckboxComponent,
diff --git a/apps/microfrontend-platform-testing-app/src/app/test-pages/microfrontend/microfrontend.component.html b/apps/microfrontend-platform-testing-app/src/app/test-pages/microfrontend/microfrontend.component.html
index 302448dc..6745d6ce 100644
--- a/apps/microfrontend-platform-testing-app/src/app/test-pages/microfrontend/microfrontend.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/test-pages/microfrontend/microfrontend.component.html
@@ -10,12 +10,12 @@ <h2>Identities</h2>
 
 <section>
   <h2>URL matrix parameters</h2>
-  <sci-key-value [object]="(params$ | async) ?? {}" class="e2e-matrix-params"></sci-key-value>
+  <sci-key-value [object]="(params$ | async) ?? {}" class="e2e-matrix-params"/>
 </section>
 
 <section>
   <h2>URL query parameters</h2>
-  <sci-key-value [object]="(queryParams$ | async) ?? {}" class="e2e-query-params"></sci-key-value>
+  <sci-key-value [object]="(queryParams$ | async) ?? {}" class="e2e-query-params"/>
 </section>
 
 <section>
diff --git a/apps/microfrontend-platform-testing-app/src/app/test-pages/microfrontend/microfrontend.component.ts b/apps/microfrontend-platform-testing-app/src/app/test-pages/microfrontend/microfrontend.component.ts
index f20a43ad..6caecf5c 100644
--- a/apps/microfrontend-platform-testing-app/src/app/test-pages/microfrontend/microfrontend.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/test-pages/microfrontend/microfrontend.component.ts
@@ -12,7 +12,7 @@ import {UUID} from '@scion/toolkit/uuid';
 import {TestingAppService} from '../../testing-app.service';
 import {ActivatedRoute, Params} from '@angular/router';
 import {Observable} from 'rxjs';
-import {AsyncPipe, NgIf} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {SciFormFieldComponent} from '@scion/components.internal/form-field';
 import {SciKeyValueComponent} from '@scion/components.internal/key-value';
 
@@ -26,7 +26,6 @@ import {SciKeyValueComponent} from '@scion/components.internal/key-value';
     AsyncPipe,
     SciFormFieldComponent,
     SciKeyValueComponent,
-    NgIf,
   ],
 })
 export default class MicrofrontendComponent {
diff --git a/apps/microfrontend-platform-testing-app/src/app/test-pages/mouse-event-dispatch-test-page/mouse-event-dispatch-test-page.component.html b/apps/microfrontend-platform-testing-app/src/app/test-pages/mouse-event-dispatch-test-page/mouse-event-dispatch-test-page.component.html
index fefd855f..51804a67 100644
--- a/apps/microfrontend-platform-testing-app/src/app/test-pages/mouse-event-dispatch-test-page/mouse-event-dispatch-test-page.component.html
+++ b/apps/microfrontend-platform-testing-app/src/app/test-pages/mouse-event-dispatch-test-page/mouse-event-dispatch-test-page.component.html
@@ -1,19 +1,21 @@
 <div class="e2e-element element" tabindex="0" (mousedown)="!preventdefault_on_mousedown.isChecked">Element</div>
 
 <label class="prevent-default-on-mousedown-checkbox" for="prevent-default-on-mousedown">
-  <sci-checkbox class="e2e-prevent-default-on-mousedown" #preventdefault_on_mousedown id="prevent-default-on-mousedown"></sci-checkbox>
+  <sci-checkbox class="e2e-prevent-default-on-mousedown" #preventdefault_on_mousedown id="prevent-default-on-mousedown"/>
   <span>PreventDefault on Mousedown</span>
 </label>
 
 <section class="dispatched-mouse-events e2e-dispatched-mouse-events">
   <header>Received Dispatched Mouse Events</header>
   <sci-viewport>
-    <div *ngFor="let dispatchedEvent of dispatchedEvents" class="event e2e-event">
-      <span>{{dispatchedEvent.timestamp | date:'hh:mm:ss:SSS'}}</span><span class="e2e-type">{{dispatchedEvent.type}}</span>
-    </div>
+    @for (dispatchedEvent of dispatchedEvents; track dispatchedEvent) {
+      <div class="event e2e-event">
+        <span>{{dispatchedEvent.timestamp | date:'hh:mm:ss:SSS'}}</span><span class="e2e-type">{{dispatchedEvent.type}}</span>
+      </div>
+    }
   </sci-viewport>
   <label for="follow-tail">
-    <sci-checkbox [formControl]="followTailFormControl" id="follow-tail"></sci-checkbox>
+    <sci-checkbox [formControl]="followTailFormControl" id="follow-tail"/>
     <span>Follow tail</span>
   </label>
   <button (click)="onClearDispatchedEvent()" class="e2e-clear">Clear</button>
diff --git a/apps/microfrontend-platform-testing-app/src/app/test-pages/mouse-event-dispatch-test-page/mouse-event-dispatch-test-page.component.ts b/apps/microfrontend-platform-testing-app/src/app/test-pages/mouse-event-dispatch-test-page/mouse-event-dispatch-test-page.component.ts
index a47e6ade..dae945f8 100644
--- a/apps/microfrontend-platform-testing-app/src/app/test-pages/mouse-event-dispatch-test-page/mouse-event-dispatch-test-page.component.ts
+++ b/apps/microfrontend-platform-testing-app/src/app/test-pages/mouse-event-dispatch-test-page/mouse-event-dispatch-test-page.component.ts
@@ -9,7 +9,7 @@
  */
 import {ChangeDetectorRef, Component, DestroyRef, OnInit, ViewChild} from '@angular/core';
 import {fromEvent, merge} from 'rxjs';
-import {DatePipe, NgFor} from '@angular/common';
+import {DatePipe} from '@angular/common';
 import {SciViewportComponent} from '@scion/components/viewport';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {SciCheckboxComponent} from '@scion/components.internal/checkbox';
@@ -21,7 +21,6 @@ import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
   styleUrls: ['./mouse-event-dispatch-test-page.component.scss'],
   standalone: true,
   imports: [
-    NgFor,
     DatePipe,
     ReactiveFormsModule,
     SciViewportComponent,