diff --git a/guides/creating-a-custom-stepper-using-the-cdk-stepper.md b/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
index 615f241950dd..c116bfb92f40 100644
--- a/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
+++ b/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
@@ -45,14 +45,11 @@ This is the HTML template of our custom stepper component:
 
   <footer class="step-navigation-bar">
     <button class="nav-button" cdkStepperPrevious>&larr;</button>
-    <button
-      class="step"
-      *ngFor="let step of steps; let i = index;"
-      [ngClass]="{'active': selectedIndex === i}"
-      (click)="onClick(i)"
-    >
-      Step {{i + 1}}
-    </button>
+    @for (step of steps; track step) {
+      <button class="step" [class.active]="selectedIndex === $index" (click)="onClick(i)">
+        Step {{i + 1}}
+      </button>
+    }
     <button class="nav-button" cdkStepperNext>&rarr;</button>
   </footer>
 </section>
@@ -117,9 +114,11 @@ If you want to iterate over your steps and use your own custom component you can
 
 ```html
 <app-custom-stepper>
-  <cdk-step *ngFor="let step of mySteps; let stepIndex = index">
-    <my-step-component [step]="step"></my-step-component>
-  </cdk-step>
+  @for (step of mySteps; track step) {
+    <cdk-step>
+      <my-step-component [step]="$index"></my-step-component>
+    </cdk-step>
+  }
 </app-custom-stepper>
 ```
 
diff --git a/src/cdk-experimental/popover-edit/popover-edit.spec.ts b/src/cdk-experimental/popover-edit/popover-edit.spec.ts
index 950c572cc538..7a7b0bd1a605 100644
--- a/src/cdk-experimental/popover-edit/popover-edit.spec.ts
+++ b/src/cdk-experimental/popover-edit/popover-edit.spec.ts
@@ -194,18 +194,20 @@ abstract class BaseTestComponent {
       ${WEIGHT_EDIT_TEMPLATE}
     </ng-template>
 
-    <tr *ngFor="let element of elements">
-      <td> just a cell </td>
-
-      <td ${POPOVER_EDIT_DIRECTIVE_NAME}
-          [cdkPopoverEditContext]="element">
-        ${CELL_TEMPLATE}
-      </td>
-
-      <td ${POPOVER_EDIT_DIRECTIVE_WEIGHT}>
-        {{element.weight}}
-      </td>
-    </tr>
+    @for (element of elements; track element) {
+      <tr>
+        <td> just a cell </td>
+
+        <td ${POPOVER_EDIT_DIRECTIVE_NAME}
+            [cdkPopoverEditContext]="element">
+          ${CELL_TEMPLATE}
+        </td>
+
+        <td ${POPOVER_EDIT_DIRECTIVE_WEIGHT}>
+          {{element.weight}}
+        </td>
+      </tr>
+    }
   </table>
   `,
 })
@@ -220,25 +222,27 @@ class VanillaTableOutOfCell extends BaseTestComponent {
 @Component({
   template: `
   <table #table editable [dir]="direction">
-    <tr *ngFor="let element of elements">
-      <td> just a cell </td>
+    @for (element of elements; track element) {
+      <tr>
+        <td> just a cell </td>
 
-      <td ${POPOVER_EDIT_DIRECTIVE_NAME}>
-        ${CELL_TEMPLATE}
+        <td ${POPOVER_EDIT_DIRECTIVE_NAME}>
+          ${CELL_TEMPLATE}
 
-        <ng-template #nameEdit>
-          ${NAME_EDIT_TEMPLATE}
-        </ng-template>
-      </td>
+          <ng-template #nameEdit>
+            ${NAME_EDIT_TEMPLATE}
+          </ng-template>
+        </td>
 
-      <td ${POPOVER_EDIT_DIRECTIVE_WEIGHT}>
-        {{element.weight}}
+        <td ${POPOVER_EDIT_DIRECTIVE_WEIGHT}>
+          {{element.weight}}
 
-        <ng-template #weightEdit>
-          ${WEIGHT_EDIT_TEMPLATE}
-        </ng-template>
-      </td>
-    </tr>
+          <ng-template #weightEdit>
+            ${WEIGHT_EDIT_TEMPLATE}
+          </ng-template>
+        </td>
+      </tr>
+    }
   </table>
   `,
 })
diff --git a/src/cdk-experimental/selection/selection.spec.ts b/src/cdk-experimental/selection/selection.spec.ts
index 0a15f2bd45d1..757ee64cd85e 100644
--- a/src/cdk-experimental/selection/selection.spec.ts
+++ b/src/cdk-experimental/selection/selection.spec.ts
@@ -442,15 +442,17 @@ describe('cdkSelectionColumn with multiple = false', () => {
       <button cdkSelectAll #toggleAll="cdkSelectAll" (click)="toggleAll.toggle($event)">
         {{selectAllState(toggleAll.indeterminate | async, toggleAll.checked | async)}}
       </button>
-      <li *ngFor="let item of data; index as i">
-        <button cdkSelectionToggle #toggle="cdkSelectionToggle"
-            [cdkSelectionToggleValue]="item"
-            [cdkSelectionToggleIndex]="i"
-            (click)="toggle.toggle()">
-          {{(toggle.checked | async) ? 'checked' : 'unchecked'}}
-        </button>
-        {{item}}
-      </li>
+      @for (item of data; track item; let i = $index) {
+        <li>
+          <button cdkSelectionToggle #toggle="cdkSelectionToggle"
+              [cdkSelectionToggleValue]="item"
+              [cdkSelectionToggleIndex]="i"
+              (click)="toggle.toggle()">
+            {{(toggle.checked | async) ? 'checked' : 'unchecked'}}
+          </button>
+          {{item}}
+        </li>
+      }
     </ul>`,
 })
 class ListWithMultiSelection {
@@ -460,7 +462,10 @@ class ListWithMultiSelection {
 
   selectionChange?: SelectionChange<string>;
 
-  constructor(private readonly _elementRef: ElementRef, private readonly _cdr: ChangeDetectorRef) {}
+  constructor(
+    private readonly _elementRef: ElementRef,
+    private readonly _cdr: ChangeDetectorRef,
+  ) {}
 
   selectAllState(indeterminateState: boolean | null, checkedState: boolean | null): string {
     if (indeterminateState) {
@@ -502,15 +507,17 @@ class ListWithMultiSelection {
   template: `
     <ul cdkSelection [dataSource]="data" [cdkSelectionMultiple]="false"
         (cdkSelectionChange)="selectionChange = $event" >
-      <li *ngFor="let item of data; index as i">
-        <button cdkSelectionToggle #toggle="cdkSelectionToggle"
-            [cdkSelectionToggleValue]="item"
-            [cdkSelectionToggleIndex]="i"
-            (click)="toggle.toggle()">
-          {{(toggle.checked | async) ? 'checked' : 'unchecked'}}
-        </button>
-        {{item}}
-      </li>
+      @for (item of data; track item; let i = $index) {
+        <li>
+          <button cdkSelectionToggle #toggle="cdkSelectionToggle"
+              [cdkSelectionToggleValue]="item"
+              [cdkSelectionToggleIndex]="i"
+              (click)="toggle.toggle()">
+            {{(toggle.checked | async) ? 'checked' : 'unchecked'}}
+          </button>
+          {{item}}
+        </li>
+      }
     </ul>`,
 })
 class ListWithSingleSelection {
@@ -530,7 +537,10 @@ class ListWithSingleSelection {
     this._cdr.detectChanges();
   }
 
-  constructor(private readonly _elementRef: ElementRef, private readonly _cdr: ChangeDetectorRef) {}
+  constructor(
+    private readonly _elementRef: ElementRef,
+    private readonly _cdr: ChangeDetectorRef,
+  ) {}
 
   getSelectionToggle(index: number) {
     return this._elementRef.nativeElement.querySelectorAll('[cdkselectiontoggle]')[index];
@@ -585,7 +595,10 @@ class MultiSelectTableWithSelectionColumn {
     this._cdr.detectChanges();
   }
 
-  constructor(readonly elementRef: ElementRef, private readonly _cdr: ChangeDetectorRef) {}
+  constructor(
+    readonly elementRef: ElementRef,
+    private readonly _cdr: ChangeDetectorRef,
+  ) {}
 
   getSelectAll(): HTMLInputElement {
     return this.elementRef.nativeElement.querySelector('input[cdkselectall]');
@@ -632,7 +645,10 @@ class SingleSelectTableWithSelectionColumn {
     this._cdr.detectChanges();
   }
 
-  constructor(readonly elementRef: ElementRef, private readonly _cdr: ChangeDetectorRef) {}
+  constructor(
+    readonly elementRef: ElementRef,
+    private readonly _cdr: ChangeDetectorRef,
+  ) {}
 
   getSelectionToggle(index: number): HTMLInputElement {
     return this.elementRef.nativeElement.querySelectorAll('input[cdkselectiontoggle]')[index];
diff --git a/src/cdk-experimental/table-scroll-container/table-scroll-container.spec.ts b/src/cdk-experimental/table-scroll-container/table-scroll-container.spec.ts
index 1c152347c069..4fffaff7cfc9 100644
--- a/src/cdk-experimental/table-scroll-container/table-scroll-container.spec.ts
+++ b/src/cdk-experimental/table-scroll-container/table-scroll-container.spec.ts
@@ -247,13 +247,15 @@ class FakeDataSource extends DataSource<TestData> {
   template: `
     <div cdkTableScrollContainer>
     <table cdk-table [dataSource]="dataSource">
-      <ng-container [cdkColumnDef]="column" *ngFor="let column of columns"
-                    [sticky]="isStuck(stickyStartColumns, column)"
-                    [stickyEnd]="isStuck(stickyEndColumns, column)">
-        <th cdk-header-cell *cdkHeaderCellDef> Header {{column}} </th>
-        <td cdk-cell *cdkCellDef="let row"> {{column}} </td>
-        <td cdk-footer-cell *cdkFooterCellDef> Footer {{column}} </td>
-      </ng-container>
+      @for (column of columns; track column) {
+        <ng-container [cdkColumnDef]="column"
+                      [sticky]="isStuck(stickyStartColumns, column)"
+                      [stickyEnd]="isStuck(stickyEndColumns, column)">
+          <th cdk-header-cell *cdkHeaderCellDef> Header {{column}} </th>
+          <td cdk-cell *cdkCellDef="let row"> {{column}} </td>
+          <td cdk-footer-cell *cdkFooterCellDef> Footer {{column}} </td>
+        </ng-container>
+      }
 
       <tr cdk-header-row *cdkHeaderRowDef="columns; sticky: isStuck(stickyHeaders, 'header-1')">
       </tr>
diff --git a/src/cdk/a11y/focus-trap/focus-trap.spec.ts b/src/cdk/a11y/focus-trap/focus-trap.spec.ts
index 7c8bbfe0b76d..6038356b930a 100644
--- a/src/cdk/a11y/focus-trap/focus-trap.spec.ts
+++ b/src/cdk/a11y/focus-trap/focus-trap.spec.ts
@@ -339,10 +339,12 @@ class SimpleFocusTrap {
 
 const AUTO_FOCUS_TEMPLATE = `
   <button type="button">Toggle</button>
-  <div *ngIf="showTrappedRegion" cdkTrapFocus [cdkTrapFocusAutoCapture]="autoCaptureEnabled">
-    <input id="auto-capture-target">
-    <button>SAVE</button>
-  </div>
+  @if (showTrappedRegion) {
+    <div cdkTrapFocus [cdkTrapFocusAutoCapture]="autoCaptureEnabled">
+      <input id="auto-capture-target">
+      <button>SAVE</button>
+    </div>
+  }
 `;
 
 @Component({template: AUTO_FOCUS_TEMPLATE})
@@ -360,11 +362,13 @@ class FocusTrapWithAutoCaptureInShadowDom extends FocusTrapWithAutoCapture {}
 
 @Component({
   template: `
-    <div *ngIf="renderFocusTrap" [cdkTrapFocus]="_isFocusTrapEnabled">
-      <input>
-      <button>SAVE</button>
-    </div>
-    `,
+    @if (renderFocusTrap) {
+      <div [cdkTrapFocus]="_isFocusTrapEnabled">
+        <input>
+        <button>SAVE</button>
+      </div>
+    }
+  `,
 })
 class FocusTrapWithBindings {
   @ViewChild(CdkTrapFocus) focusTrapDirective: CdkTrapFocus;
diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts
index 8c5ca6a3d05b..3398aed91e2e 100644
--- a/src/cdk/drag-drop/directives/drag.spec.ts
+++ b/src/cdk/drag-drop/directives/drag.spec.ts
@@ -6,7 +6,7 @@ import {
   dispatchMouseEvent,
   dispatchTouchEvent,
   dispatchFakeEvent,
-} from '../../testing/private';
+} from '@angular/cdk/testing/private';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -6725,10 +6725,11 @@ class StandaloneDraggableWithPreDisabledHandle {
   template: `
     <div #dragElement cdkDrag
       style="width: 100px; height: 100px; background: red; position: relative">
-      <div
-        #handleElement
-        *ngIf="showHandle"
-        cdkDragHandle style="width: 10px; height: 10px; background: green;"></div>
+      @if (showHandle) {
+        <div
+          #handleElement
+          cdkDragHandle style="width: 10px; height: 10px; background: green;"></div>
+      }
     </div>
   `,
 })
@@ -6806,6 +6807,7 @@ class StandaloneDraggableWithMultipleHandles {
   @ViewChildren(CdkDragHandle) handles: QueryList<CdkDragHandle>;
 }
 
+// TODO(crisbeto): figure out why switch `*ngFor` with `@for` here causes a test failure.
 const DROP_ZONE_FIXTURE_TEMPLATE = `
   <div
     cdkDropList
@@ -6945,7 +6947,7 @@ class DraggableInScrollableParentContainer extends DraggableInDropZone implement
 }
 
 @Component({
-  // Note that we need the blank `ngSwitch` below to hit the code path that we're testing.
+  // Note that we need the blank `@if` below to hit the code path that we're testing.
   template: `
     <div
       cdkDropList
@@ -6955,16 +6957,17 @@ class DraggableInScrollableParentContainer extends DraggableInDropZone implement
       [cdkDropListData]="items"
       (cdkDropListSorted)="sortedSpy($event)"
       (cdkDropListDropped)="droppedSpy($event)">
-        <ng-container [ngSwitch]="true">
-          <div
-            *ngFor="let item of items"
-            cdkDrag
-            [cdkDragData]="item"
-            [cdkDragBoundary]="boundarySelector"
-            [style.height.px]="item.height"
-            [style.margin-bottom.px]="item.margin"
-            style="width: 100%; background: red;">{{item.value}}</div>
-        </ng-container>
+        @if (true) {
+          @for (item of items; track item) {
+            <div
+              cdkDrag
+              [cdkDragData]="item"
+              [cdkDragBoundary]="boundarySelector"
+              [style.height.px]="item.height"
+              [style.margin-bottom.px]="item.margin"
+              style="width: 100%; background: red;">{{item.value}}</div>
+          }
+        }
     </div>
   `,
 })
@@ -6993,12 +6996,13 @@ const HORIZONTAL_FIXTURE_TEMPLATE = `
     cdkDropListOrientation="horizontal"
     [cdkDropListData]="items"
     (cdkDropListDropped)="droppedSpy($event)">
-    <div
-      *ngFor="let item of items"
-      [style.width.px]="item.width"
-      [style.margin-right.px]="item.margin"
-      [cdkDragBoundary]="boundarySelector"
-      cdkDrag>{{item.value}}</div>
+    @for (item of items; track item) {
+      <div
+        [style.width.px]="item.width"
+        [style.margin-right.px]="item.margin"
+        [cdkDragBoundary]="boundarySelector"
+        cdkDrag>{{item.value}}</div>
+    }
   </div>
 `;
 
@@ -7058,26 +7062,29 @@ class DraggableInScrollableHorizontalDropZone extends DraggableInHorizontalDropZ
   }
 }
 
+// TODO(crisbeto): `*ngIf` here can be removed after updating to a version of Angular that includes
+// https://github.com/angular/angular/pull/52515
 @Component({
   template: `
     <div cdkDropList style="width: 100px; background: pink;">
-      <div
-        *ngFor="let item of items"
-        cdkDrag
-        [cdkDragConstrainPosition]="constrainPosition"
-        [cdkDragBoundary]="boundarySelector"
-        [cdkDragPreviewClass]="previewClass"
-        style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
-          {{item}}
-
-          <ng-container *ngIf="renderCustomPreview">
-            <ng-template cdkDragPreview [matchSize]="matchPreviewSize">
-              <div
-                class="custom-preview"
-                style="width: 50px; height: 50px; background: purple;">Custom preview</div>
-            </ng-template>
-          </ng-container>
-      </div>
+      @for (item of items; track item) {
+        <div
+          cdkDrag
+          [cdkDragConstrainPosition]="constrainPosition"
+          [cdkDragBoundary]="boundarySelector"
+          [cdkDragPreviewClass]="previewClass"
+          style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
+            {{item}}
+
+            <ng-container *ngIf="renderCustomPreview">
+              <ng-template cdkDragPreview [matchSize]="matchPreviewSize">
+                <div
+                  class="custom-preview"
+                  style="width: 50px; height: 50px; background: purple;">Custom preview</div>
+              </ng-template>
+            </ng-container>
+        </div>
+      }
     </div>
   `,
 })
@@ -7095,15 +7102,16 @@ class DraggableInDropZoneWithCustomPreview {
 @Component({
   template: `
     <div cdkDropList style="width: 100px; background: pink;">
-      <div
-        *ngFor="let item of items"
-        cdkDrag
-        [cdkDragConstrainPosition]="constrainPosition"
-        [cdkDragBoundary]="boundarySelector"
-        style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
-          {{item}}
-          <ng-template cdkDragPreview>Hello {{item}}</ng-template>
-      </div>
+      @for (item of items; track item) {
+        <div
+          cdkDrag
+          [cdkDragConstrainPosition]="constrainPosition"
+          [cdkDragBoundary]="boundarySelector"
+          style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
+            {{item}}
+            <ng-template cdkDragPreview>Hello {{item}}</ng-template>
+        </div>
+      }
     </div>
   `,
 })
@@ -7116,16 +7124,15 @@ class DraggableInDropZoneWithCustomTextOnlyPreview {
 @Component({
   template: `
     <div cdkDropList style="width: 100px; background: pink;">
-      <div
-        *ngFor="let item of items"
-        cdkDrag
-        style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
+      @for (item of items; track item) {
+        <div cdkDrag style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
           {{item}}
           <ng-template cdkDragPreview>
             <span>Hello</span>
             <span>{{item}}</span>
           </ng-template>
-      </div>
+        </div>
+      }
     </div>
   `,
 })
@@ -7141,16 +7148,17 @@ class DraggableInDropZoneWithCustomMultiNodePreview {
       cdkDropList
       (cdkDropListDropped)="droppedSpy($event)"
       style="width: 100px; background: pink;">
-      <div *ngFor="let item of items" cdkDrag
-        style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
+      @for (item of items; track item) {
+        <div cdkDrag style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
           {{item}}
-          <ng-container *ngIf="renderPlaceholder">
+          @if (renderPlaceholder) {
             <div
               class="custom-placeholder"
               [ngClass]="extraPlaceholderClass"
               *cdkDragPlaceholder>Custom placeholder</div>
-          </ng-container>
-      </div>
+          }
+        </div>
+      }
     </div>
   `,
   styles: [
@@ -7172,11 +7180,12 @@ class DraggableInDropZoneWithCustomPlaceholder {
 @Component({
   template: `
     <div cdkDropList style="width: 100px; background: pink;">
-      <div *ngFor="let item of items" cdkDrag
-        style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
+      @for (item of items; track item) {
+        <div cdkDrag style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
           {{item}}
           <ng-template cdkDragPlaceholder>Hello {{item}}</ng-template>
-      </div>
+        </div>
+      }
     </div>
   `,
 })
@@ -7188,14 +7197,15 @@ class DraggableInDropZoneWithCustomTextOnlyPlaceholder {
 @Component({
   template: `
     <div cdkDropList style="width: 100px; background: pink;">
-      <div *ngFor="let item of items" cdkDrag
-        style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
+      @for (item of items; track item) {
+        <div cdkDrag style="width: 100%; height: ${ITEM_HEIGHT}px; background: red;">
           {{item}}
           <ng-template cdkDragPlaceholder>
             <span>Hello</span>
             <span>{{item}}</span>
           </ng-template>
-      </div>
+        </div>
+      }
     </div>
   `,
 })
@@ -7229,11 +7239,12 @@ const CONNECTED_DROP_ZONES_TEMPLATE = `
     [cdkDropListConnectedTo]="[doneZone]"
     (cdkDropListDropped)="droppedSpy($event)"
     (cdkDropListEntered)="enteredSpy($event)">
-    <div
-      [cdkDragData]="item"
-      (cdkDragEntered)="itemEnteredSpy($event)"
-      *ngFor="let item of todo"
-      cdkDrag>{{item}}</div>
+    @for (item of todo; track item) {
+      <div
+        [cdkDragData]="item"
+        (cdkDragEntered)="itemEnteredSpy($event)"
+        cdkDrag>{{item}}</div>
+    }
   </div>
 
   <div
@@ -7243,11 +7254,12 @@ const CONNECTED_DROP_ZONES_TEMPLATE = `
     [cdkDropListConnectedTo]="[todoZone]"
     (cdkDropListDropped)="droppedSpy($event)"
     (cdkDropListEntered)="enteredSpy($event)">
-    <div
-      [cdkDragData]="item"
-      (cdkDragEntered)="itemEnteredSpy($event)"
-      *ngFor="let item of done"
-      cdkDrag>{{item}}</div>
+    @for (item of done; track item) {
+      <div
+        [cdkDragData]="item"
+        (cdkDragEntered)="itemEnteredSpy($event)"
+        cdkDrag>{{item}}</div>
+    }
   </div>
 
   <div
@@ -7256,11 +7268,12 @@ const CONNECTED_DROP_ZONES_TEMPLATE = `
     [cdkDropListData]="extra"
     (cdkDropListDropped)="droppedSpy($event)"
     (cdkDropListEntered)="enteredSpy($event)">
-    <div
-      [cdkDragData]="item"
-      (cdkDragEntered)="itemEnteredSpy($event)"
-      *ngFor="let item of extra"
-      cdkDrag>{{item}}</div>
+    @for (item of extra; track item) {
+      <div
+        [cdkDragData]="item"
+        (cdkDragEntered)="itemEnteredSpy($event)"
+        cdkDrag>{{item}}</div>
+    }
   </div>
 `;
 
@@ -7295,7 +7308,7 @@ class ConnectedDropZones implements AfterViewInit {
 @Component({
   encapsulation: ViewEncapsulation.ShadowDom,
   styles: CONNECTED_DROP_ZONES_STYLES,
-  template: `<div *ngIf="true">${CONNECTED_DROP_ZONES_TEMPLATE}</div>`,
+  template: `@if (true) {${CONNECTED_DROP_ZONES_TEMPLATE}}`,
 })
 class ConnectedDropZonesInsideShadowRootWithNgIf extends ConnectedDropZones {}
 
@@ -7323,14 +7336,18 @@ class ConnectedDropZonesInsideShadowRootWithNgIf extends ConnectedDropZones {}
         cdkDropList
         [cdkDropListData]="todo"
         (cdkDropListDropped)="droppedSpy($event)">
-        <div [cdkDragData]="item" *ngFor="let item of todo" cdkDrag>{{item}}</div>
+        @for (item of todo; track item) {
+  <div [cdkDragData]="item" cdkDrag>{{item}}</div>
+}
       </div>
 
       <div
         cdkDropList
         [cdkDropListData]="done"
         (cdkDropListDropped)="droppedSpy($event)">
-        <div [cdkDragData]="item" *ngFor="let item of done" cdkDrag>{{item}}</div>
+        @for (item of done; track item) {
+          <div [cdkDragData]="item" cdkDrag>{{item}}</div>
+        }
       </div>
     </div>
   `,
@@ -7445,10 +7462,12 @@ class DropListOnNgContainer {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <div cdkDropList style="width: 100px; background: pink;">
-      <div *ngFor="let item of items"
-        cdkDrag
-        [style.height.px]="item.height"
-        style="width: 100%; background: red;">{{item.value}}</div>
+      @for (item of items; track item) {
+        <div
+          cdkDrag
+          [style.height.px]="item.height"
+          style="width: 100%; background: red;">{{item.value}}</div>
+      }
     </div>
   `,
 })
@@ -7503,16 +7522,17 @@ class ConnectedWrappedDropZones {
       [cdkDropListData]="items"
       (cdkDropListSorted)="sortedSpy($event)"
       (cdkDropListDropped)="droppedSpy($event)">
-      <div
-        *ngFor="let item of items"
-        cdkDrag
-        [cdkDragData]="item"
-        [style.height.px]="item.height"
-        [style.margin-bottom.px]="item.margin"
-        style="width: 100%; background: red;">
-          {{item.value}}
-          <canvas width="100px" height="100px"></canvas>
-        </div>
+      @for (item of items; track item) {
+        <div
+          cdkDrag
+          [cdkDragData]="item"
+          [style.height.px]="item.height"
+          [style.margin-bottom.px]="item.margin"
+          style="width: 100%; background: red;">
+            {{item.value}}
+            <canvas width="100px" height="100px"></canvas>
+          </div>
+        }
     </div>
   `,
 })
@@ -7546,16 +7566,17 @@ class DraggableWithCanvasInDropZone extends DraggableInDropZone implements After
       [cdkDropListData]="items"
       (cdkDropListSorted)="sortedSpy($event)"
       (cdkDropListDropped)="droppedSpy($event)">
-      <div
-        *ngFor="let item of items"
-        cdkDrag
-        [cdkDragData]="item"
-        [style.height.px]="item.height"
-        [style.margin-bottom.px]="item.margin"
-        style="width: 100%; background: red;">
-          {{item.value}}
-          <canvas width="0" height="0"></canvas>
-        </div>
+      @for (item of items; track item) {
+        <div
+          cdkDrag
+          [cdkDragData]="item"
+          [style.height.px]="item.height"
+          [style.margin-bottom.px]="item.margin"
+          style="width: 100%; background: red;">
+            {{item.value}}
+            <canvas width="0" height="0"></canvas>
+          </div>
+        }
     </div>
   `,
 })
@@ -7576,7 +7597,9 @@ class PassthroughComponent {}
   selector: 'wrapped-drop-container',
   template: `
     <div cdkDropList [cdkDropListData]="items">
-      <div *ngFor="let item of items" cdkDrag>{{item}}</div>
+      @for (item of items; track item) {
+        <div cdkDrag>{{item}}</div>
+      }
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -7695,10 +7718,11 @@ class NestedDragsThroughTemplate {
   template: `
     <div cdkDropList class="drop-list" #outerList>
       <div cdkDropList class="drop-list" #innerList>
-        <div
-          *ngFor="let item of items"
-          cdkDrag
-          style="width: 100%; background: red; height: ${ITEM_HEIGHT}px;">{{item}}</div>
+        @for (item of items; track item) {
+          <div
+            cdkDrag
+            style="width: 100%; background: red; height: ${ITEM_HEIGHT}px;">{{item}}</div>
+        }
       </div>
     </div>
   `,
@@ -7743,13 +7767,14 @@ class PlainStandaloneDropList {
   ],
   template: `
     <div class="list" cdkDropList cdkDropListOrientation="horizontal">
-      <div *ngFor="let item of items" class="item" cdkDrag>
-        {{item}}
-
-        <ng-template cdkDragPreview [matchSize]="true">
-          <div class="item">{{item}}</div>
-        </ng-template>
-      </div>
+      @for (item of items; track item) {
+        <div class="item" cdkDrag>
+          {{item}}
+          <ng-template cdkDragPreview [matchSize]="true">
+            <div class="item">{{item}}</div>
+          </ng-template>
+        </div>
+      }
     </div>
   `,
 })
@@ -7768,11 +7793,12 @@ class DraggableInHorizontalFlexDropZoneWithMatchSizePreview {
       [cdkDropListConnectedTo]="[doneZone]"
       (cdkDropListDropped)="droppedSpy($event)"
       (cdkDropListEntered)="enteredSpy($event)">
-      <div
-        [cdkDragData]="item"
-        (cdkDragEntered)="itemEnteredSpy($event)"
-        *ngFor="let item of todo"
-        cdkDrag>{{item}}</div>
+      @for (item of todo; track item) {
+        <div
+          [cdkDragData]="item"
+          (cdkDragEntered)="itemEnteredSpy($event)"
+          cdkDrag>{{item}}</div>
+      }
     </div>
 
     <div
@@ -7785,11 +7811,12 @@ class DraggableInHorizontalFlexDropZoneWithMatchSizePreview {
 
       <div>Hello there</div>
       <div>
-        <div
-          [cdkDragData]="item"
-          (cdkDragEntered)="itemEnteredSpy($event)"
-          *ngFor="let item of done"
-          cdkDrag>{{item}}</div>
+        @for (item of done; track item) {
+          <div
+            [cdkDragData]="item"
+            (cdkDragEntered)="itemEnteredSpy($event)"
+            cdkDrag>{{item}}</div>
+        }
       </div>
     </div>
   `,
@@ -7824,21 +7851,22 @@ class DraggableWithAlternateRootAndSelfHandle {
       [cdkDropListData]="items"
       (cdkDropListSorted)="sortedSpy($event)"
       (cdkDropListDropped)="droppedSpy($event)">
-      <div
-        *ngFor="let item of items"
-        cdkDrag
-        [cdkDragData]="item"
-        [style.height.px]="item.height"
-        [style.margin-bottom.px]="item.margin"
-        style="width: 100%; background: red;">
-          {{item.value}}
-          <input [value]="inputValue"/>
-          <textarea [value]="inputValue"></textarea>
-          <select [value]="inputValue">
-            <option value="goodbye">Goodbye</option>
-            <option value="hello">Hello</option>
-          </select>
-        </div>
+      @for (item of items; track item) {
+        <div
+          cdkDrag
+          [cdkDragData]="item"
+          [style.height.px]="item.height"
+          [style.margin-bottom.px]="item.margin"
+          style="width: 100%; background: red;">
+            {{item.value}}
+            <input [value]="inputValue"/>
+            <textarea [value]="inputValue"></textarea>
+            <select [value]="inputValue">
+              <option value="goodbye">Goodbye</option>
+              <option value="hello">Hello</option>
+            </select>
+          </div>
+      }
     </div>
   `,
 })
@@ -7852,13 +7880,14 @@ class DraggableWithInputsInDropZone extends DraggableInDropZone {
       cdkDropList
       class="drop-list scroll-container"
       [cdkDropListData]="items">
-      <div
-        *ngFor="let item of items"
-        cdkDrag
-        [cdkDragData]="item">
-          {{item.id}}
-          <input type="radio" name="radio" [checked]="item.checked"/>
-        </div>
+      @for (item of items; track item) {
+        <div
+          cdkDrag
+          [cdkDragData]="item">
+            {{item.id}}
+            <input type="radio" name="radio" [checked]="item.checked"/>
+          </div>
+      }
     </div>
   `,
 })
diff --git a/src/cdk/drag-drop/drag-drop.md b/src/cdk/drag-drop/drag-drop.md
index 0c955660e0e1..bb8438e525d9 100644
--- a/src/cdk/drag-drop/drag-drop.md
+++ b/src/cdk/drag-drop/drag-drop.md
@@ -46,7 +46,9 @@ will be connected to all other lists automatically.
 ```html
 <div cdkDropListGroup>
   <!-- All lists in here will be connected. -->
-  <div cdkDropList *ngFor="let list of lists"></div>
+  @for (list of lists; track list) {
+    <div cdkDropList></div>
+  }
 </div>
 ```
 
@@ -58,9 +60,13 @@ or `cdkDropListData`, respectively. Events fired from both directives include th
 you to easily identify the origin of the drag or drop interaction.
 
 ```html
-<div cdkDropList [cdkDropListData]="list" *ngFor="let list of lists" (cdkDropListDropped)="drop($event)">
-  <div cdkDrag [cdkDragData]="item" *ngFor="let item of list"></div>
-</div>
+@for (list of lists; track list) {
+  <div cdkDropList [cdkDropListData]="list" (cdkDropListDropped)="drop($event)">
+    @for (item of list; track item) {
+      <div cdkDrag [cdkDragData]="item"></div>
+    }
+  </div>
+}
 ```
 
 ### Styling
diff --git a/src/cdk/listbox/listbox.spec.ts b/src/cdk/listbox/listbox.spec.ts
index 3a75f90bdb2d..a7a2c9837ce1 100644
--- a/src/cdk/listbox/listbox.spec.ts
+++ b/src/cdk/listbox/listbox.spec.ts
@@ -1004,7 +1004,9 @@ class ListboxWithFormControl {
 @Component({
   template: `
     <div cdkListbox [formControl]="formControl">
-      <div *ngFor="let option of options" [cdkOption]="option">{{option}}</div>
+      @for (option of options; track option) {
+        <div [cdkOption]="option">{{option}}</div>
+      }
     </div>
   `,
 })
@@ -1016,7 +1018,9 @@ class ListboxWithPreselectedFormControl {
 @Component({
   template: `
     <div cdkListbox [formControl]="formControl">
-      <div *ngFor="let option of options" [cdkOption]="option">{{option}}</div>
+      @for (option of options; track option) {
+        <div [cdkOption]="option">{{option}}</div>
+      }
     </div>
   `,
 })
@@ -1071,7 +1075,9 @@ class ListboxWithMultipleBoundValues {
 @Component({
   template: `
     <div cdkListbox [cdkListboxCompareWith]="fruitCompare">
-      <div *ngFor="let fruit of fruits" [cdkOption]="fruit">{{fruit.name}}</div>
+      @for (fruit of fruits; track fruit) {
+        <div [cdkOption]="fruit">{{fruit.name}}</div>
+      }
     </div>
   `,
 })
diff --git a/src/cdk/menu/pointer-focus-tracker.spec.ts b/src/cdk/menu/pointer-focus-tracker.spec.ts
index 0e8c2ca43467..afa8f7ddc3e2 100644
--- a/src/cdk/menu/pointer-focus-tracker.spec.ts
+++ b/src/cdk/menu/pointer-focus-tracker.spec.ts
@@ -108,7 +108,9 @@ class MockWrapper implements FocusableElement {
     <div>
       <wrapper>First</wrapper>
       <wrapper>Second</wrapper>
-      <wrapper *ngIf="showThird">Third</wrapper>
+      @if (showThird) {
+        <wrapper>Third</wrapper>
+      }
     </div>
   `,
 })
diff --git a/src/cdk/portal/portal.spec.ts b/src/cdk/portal/portal.spec.ts
index 2ac61c3cd067..df20e496453c 100644
--- a/src/cdk/portal/portal.spec.ts
+++ b/src/cdk/portal/portal.spec.ts
@@ -779,7 +779,10 @@ class ArbitraryViewContainerRefComponent {
   @ViewChild('template') template: TemplateRef<any>;
   @ViewChild(SaveParentNodeOnInit) saveParentNodeOnInit: SaveParentNodeOnInit;
 
-  constructor(public viewContainerRef: ViewContainerRef, public injector: Injector) {}
+  constructor(
+    public viewContainerRef: ViewContainerRef,
+    public injector: Injector,
+  ) {}
 }
 
 /** Test-bed component that contains a portal outlet and a couple of template portals. */
@@ -799,7 +802,9 @@ class ArbitraryViewContainerRefComponent {
 
   <ng-template cdk-portal>
     <ul>
-      <li *ngFor="let fruitName of fruits"> {{fruitName}} </li>
+      @for (fruitName of fruits; track fruitName) {
+        <li> {{fruitName}} </li>
+      }
     </ul>
   </ng-template>
 
@@ -825,7 +830,10 @@ class PortalTestApp {
   fruits = ['Apple', 'Pineapple', 'Durian'];
   attachedSpy = jasmine.createSpy('attached spy');
 
-  constructor(public viewContainerRef: ViewContainerRef, public injector: Injector) {}
+  constructor(
+    public viewContainerRef: ViewContainerRef,
+    public injector: Injector,
+  ) {}
 
   get cakePortal() {
     return this.portals.first;
diff --git a/src/cdk/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk/scrolling/virtual-scroll-viewport.spec.ts
index c61ec400f7d9..0b623dd0e36f 100644
--- a/src/cdk/scrolling/virtual-scroll-viewport.spec.ts
+++ b/src/cdk/scrolling/virtual-scroll-viewport.spec.ts
@@ -1419,9 +1419,9 @@ class VirtualScrollWithItemInjectingViewContainer {
 @Component({
   template: `
     <cdk-virtual-scroll-viewport [itemSize]="itemSize">
-      <ng-container *ngIf="renderVirtualFor">
+      @if (renderVirtualFor) {
         <div class="item" *cdkVirtualFor="let item of items; trackBy: trackBy">{{item}}</div>
-      </ng-container>
+      }
     </cdk-virtual-scroll-viewport>
   `,
   styles: [
diff --git a/src/cdk/table/table.spec.ts b/src/cdk/table/table.spec.ts
index 798e41234f4f..1ac2f5cb3dce 100644
--- a/src/cdk/table/table.spec.ts
+++ b/src/cdk/table/table.spec.ts
@@ -2419,13 +2419,15 @@ class StickyPositioningListenerTest implements StickyPositioningListener {
 @Component({
   template: `
     <cdk-table [dataSource]="dataSource" [dir]="dir">
-      <ng-container [cdkColumnDef]="column" *ngFor="let column of columns"
-                    [sticky]="isStuck(stickyStartColumns, column)"
-                    [stickyEnd]="isStuck(stickyEndColumns, column)">
-        <cdk-header-cell *cdkHeaderCellDef> Header {{column}} </cdk-header-cell>
-        <cdk-cell *cdkCellDef>{{column}}</cdk-cell>
-        <cdk-footer-cell *cdkFooterCellDef> Footer {{column}} </cdk-footer-cell>
-      </ng-container>
+      @for (column of columns; track column) {
+        <ng-container [cdkColumnDef]="column"
+                      [sticky]="isStuck(stickyStartColumns, column)"
+                      [stickyEnd]="isStuck(stickyEndColumns, column)">
+          <cdk-header-cell *cdkHeaderCellDef> Header {{column}} </cdk-header-cell>
+          <cdk-cell *cdkCellDef>{{column}}</cdk-cell>
+          <cdk-footer-cell *cdkFooterCellDef> Footer {{column}} </cdk-footer-cell>
+        </ng-container>
+      }
 
       <cdk-header-row *cdkHeaderRowDef="columns; sticky: isStuck(stickyHeaders, 'header-1')">
       </cdk-header-row>
@@ -2477,13 +2479,15 @@ class StickyFlexLayoutCdkTableApp extends StickyPositioningListenerTest {
 @Component({
   template: `
     <table cdk-table [dataSource]="dataSource">
-      <ng-container [cdkColumnDef]="column" *ngFor="let column of columns"
-                    [sticky]="isStuck(stickyStartColumns, column)"
-                    [stickyEnd]="isStuck(stickyEndColumns, column)">
-        <th cdk-header-cell *cdkHeaderCellDef> Header {{column}} </th>
-        <td cdk-cell *cdkCellDef="let row"> {{column}} </td>
-        <td cdk-footer-cell *cdkFooterCellDef> Footer {{column}} </td>
-      </ng-container>
+      @for (column of columns; track column) {
+        <ng-container [cdkColumnDef]="column"
+                      [sticky]="isStuck(stickyStartColumns, column)"
+                      [stickyEnd]="isStuck(stickyEndColumns, column)">
+          <th cdk-header-cell *cdkHeaderCellDef> Header {{column}} </th>
+          <td cdk-cell *cdkCellDef="let row"> {{column}} </td>
+          <td cdk-footer-cell *cdkFooterCellDef> Footer {{column}} </td>
+        </ng-container>
+      }
 
       <tr cdk-header-row *cdkHeaderRowDef="columns; sticky: isStuck(stickyHeaders, 'header-1')">
       </tr>
@@ -2532,10 +2536,12 @@ class StickyNativeLayoutCdkTableApp extends StickyPositioningListenerTest {
 @Component({
   template: `
     <cdk-table [dataSource]="dataSource">
-      <ng-container [cdkColumnDef]="column" *ngFor="let column of dynamicColumns">
-        <cdk-header-cell *cdkHeaderCellDef> {{column}} </cdk-header-cell>
-        <cdk-cell *cdkCellDef="let row"> {{column}} </cdk-cell>
-      </ng-container>
+      @for (column of dynamicColumns; track column) {
+        <ng-container [cdkColumnDef]="column">
+          <cdk-header-cell *cdkHeaderCellDef> {{column}} </cdk-header-cell>
+          <cdk-cell *cdkCellDef="let row"> {{column}} </cdk-cell>
+        </ng-container>
+      }
 
       <cdk-header-row *cdkHeaderRowDef="dynamicColumns"></cdk-header-row>
       <cdk-row *cdkRowDef="let row; columns: dynamicColumns;"></cdk-row>
@@ -3007,15 +3013,15 @@ class NativeHtmlTableWithColgroupAndCol {
 }
 
 @Component({
-  // Note that we need the `ngSwitch` below in order to surface the issue we're testing for.
+  // Note that we need the `@if` below in order to surface the issue we're testing for.
   template: `
     <cdk-table [dataSource]="dataSource">
-      <ng-container [ngSwitch]="true">
+      @if (true) {
         <ng-container cdkColumnDef="column_a">
           <cdk-header-cell *cdkHeaderCellDef> Column A</cdk-header-cell>
           <cdk-cell *cdkCellDef="let row"> {{row.a}}</cdk-cell>
         </ng-container>
-      </ng-container>
+      }
 
       <cdk-header-row *cdkHeaderRowDef="['column_a']"></cdk-header-row>
       <cdk-row *cdkRowDef="let row; columns: ['column_a']"></cdk-row>
diff --git a/src/cdk/testing/tests/test-main-component.html b/src/cdk/testing/tests/test-main-component.html
index 8ec6080aa042..263f6d235b5c 100644
--- a/src/cdk/testing/tests/test-main-component.html
+++ b/src/cdk/testing/tests/test-main-component.html
@@ -74,7 +74,9 @@ <h1 style="height: 100px; width: 200px;">Main Component</h1>
   </button>
   <span id="task-state-result" #taskStateResult></span>
 </div>
-<test-shadow-boundary *ngIf="_shadowDomSupported"></test-shadow-boundary>
+@if (_shadowDomSupported) {
+  <test-shadow-boundary></test-shadow-boundary>
+}
 
 
 <div
diff --git a/src/cdk/testing/tests/test-sub-component.ts b/src/cdk/testing/tests/test-sub-component.ts
index 545efeba0f7f..0eb519f75bdc 100644
--- a/src/cdk/testing/tests/test-sub-component.ts
+++ b/src/cdk/testing/tests/test-sub-component.ts
@@ -13,7 +13,9 @@ import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@ang
   template: `
       <h2>List of {{title}}</h2>
       <ul>
-        <li *ngFor="let item of items">{{item}}</li>
+        @for (item of items; track item) {
+          <li>{{item}}</li>
+        }
       </ul>`,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/cdk/tree/tree.spec.ts b/src/cdk/tree/tree.spec.ts
index fa6cff0a4075..c2c9e6abe55f 100644
--- a/src/cdk/tree/tree.spec.ts
+++ b/src/cdk/tree/tree.spec.ts
@@ -1383,13 +1383,13 @@ class SimpleCdkTreeApp {
 @Component({
   template: `
     <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
-      <ng-container [ngSwitch]="true">
+      @if (true) {
         <cdk-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
                       cdkTreeNodePadding [cdkTreeNodePaddingIndent]="indent"
                       cdkTreeNodeToggle>
                       {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
         </cdk-tree-node>
-      </ng-container>
+      }
     </cdk-tree>
   `,
 })
@@ -1500,9 +1500,11 @@ class CdkTreeAppWithToggle {
       <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
                             cdkTreeNodeToggle [cdkTreeNodeToggleRecursive]="toggleRecursively">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
-        <div *ngIf="treeControl.isExpanded(node)">
+        @if (treeControl.isExpanded(node)) {
+<div>
           <ng-template cdkTreeNodeOutlet></ng-template>
         </div>
+}
       </cdk-nested-tree-node>
     </cdk-tree>
   `,
diff --git a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.html b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.html
index df7be8b086d4..d2fb0ff05f3b 100644
--- a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.html
+++ b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.html
@@ -26,45 +26,47 @@
       </form>
     </div>
   </ng-template>
-  
+
   <tr>
     <th> No. </th>
     <th> First name </th>
     <th> Middle name </th>
     <th> Last name </th>
   </tr>
-  
-  <tr *ngFor="let person of persons">
-    <td> {{person.id}} </td>
 
-    <td [cdkPopoverEdit]="nameEdit"
-        [cdkPopoverEditContext]="{person: person, focus: 'firstName'}"
-        [cdkPopoverEditColspan]="{after: 2}">
-      {{person.firstName}}
-      
-      <span *cdkRowHoverContent>
-        <button cdkEditOpen>Edit</button>
-      </span>
-    </td>
-    
-    <td [cdkPopoverEdit]="nameEdit"
-        [cdkPopoverEditContext]="{person: person, focus: 'middleName'}"
-        [cdkPopoverEditColspan]="{before: 1, after: 1}">
-      {{person.middleName}}
-      
-      <span *cdkRowHoverContent>
-        <button cdkEditOpen>Edit</button>
-      </span>
-    </td>
-    
-    <td [cdkPopoverEdit]="nameEdit"
-        [cdkPopoverEditContext]="{person: person, focus: 'lastName'}"
-        [cdkPopoverEditColspan]="{before: 2}">
-      {{person.lastName}}
-      
-      <span *cdkRowHoverContent>
-        <button cdkEditOpen>Edit</button>
-      </span>
-    </td>
-  </tr>
+  @for (person of persons; track person) {
+    <tr>
+      <td> {{person.id}} </td>
+
+      <td [cdkPopoverEdit]="nameEdit"
+          [cdkPopoverEditContext]="{person: person, focus: 'firstName'}"
+          [cdkPopoverEditColspan]="{after: 2}">
+        {{person.firstName}}
+
+        <span *cdkRowHoverContent>
+          <button cdkEditOpen>Edit</button>
+        </span>
+      </td>
+
+      <td [cdkPopoverEdit]="nameEdit"
+          [cdkPopoverEditContext]="{person: person, focus: 'middleName'}"
+          [cdkPopoverEditColspan]="{before: 1, after: 1}">
+        {{person.middleName}}
+
+        <span *cdkRowHoverContent>
+          <button cdkEditOpen>Edit</button>
+        </span>
+      </td>
+
+      <td [cdkPopoverEdit]="nameEdit"
+          [cdkPopoverEditContext]="{person: person, focus: 'lastName'}"
+          [cdkPopoverEditColspan]="{before: 2}">
+        {{person.lastName}}
+
+        <span *cdkRowHoverContent>
+          <button cdkEditOpen>Edit</button>
+        </span>
+      </td>
+    </tr>
+  }
 </table>
diff --git a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.ts b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.ts
index f3fa86f5b5a5..d0168c103ca0 100644
--- a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.ts
+++ b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {NgForm, FormsModule} from '@angular/forms';
-import {NgFor} from '@angular/common';
 import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
 
 export interface Person {
@@ -30,7 +29,7 @@ const PERSON_DATA: Person[] = [
   styleUrls: ['cdk-popover-edit-cell-span-vanilla-table-example.css'],
   templateUrl: 'cdk-popover-edit-cell-span-vanilla-table-example.html',
   standalone: true,
-  imports: [CdkPopoverEditModule, FormsModule, NgFor],
+  imports: [CdkPopoverEditModule, FormsModule],
 })
 export class CdkPopoverEditCellSpanVanillaTableExample {
   readonly preservedValues = new WeakMap<Person, any>();
diff --git a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.html b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.html
index 13270f0a01f0..dcd780c5a16e 100644
--- a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.html
+++ b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.html
@@ -15,42 +15,44 @@
       </form>
     </div>
   </ng-template>
-  
+
   <tr>
     <th> No. </th>
     <th> Name </th>
     <th> Weight </th>
     <th> Symbol </th>
   </tr>
-  
-  <tr *ngFor="let element of elements">
-    <td> {{element.position}} </td>
-    
-    <td [cdkPopoverEdit]="nameEdit" cdkPopoverEditTabOut cdkEditOpen>
-      {{element.name}}
-      
-      <!-- This edit is defined in the cell and can implicitly access element -->
-      <ng-template #nameEdit>
-        <div style="background-color: white; width: 100%">
-          <form #f="ngForm"
-              cdkEditControl
-              cdkEditControlClickOutBehavior="submit"
-              (ngSubmit)="onSubmitName(element, f)"
-              [cdkEditControlPreservedFormValue]="preservedNameValues.get(element)"
-              (cdkEditControlPreservedFormValueChange)="preservedNameValues.set(element, $event)">
-            <input [ngModel]="element.name" name="name" required>
-            <br>
-            <button type="submit">Confirm</button>
-          </form>
-        </div>
-      </ng-template>
-    </td>
 
-    <td [cdkPopoverEdit]="weightEdit" [cdkPopoverEditContext]="element"
-        cdkPopoverEditTabOut cdkEditOpen>
-      {{element.weight}}
-    </td>
+  @for (element of elements; track element) {
+    <tr>
+      <td> {{element.position}} </td>
 
-    <td> {{element.symbol}} </td>
-  </tr>
+      <td [cdkPopoverEdit]="nameEdit" cdkPopoverEditTabOut cdkEditOpen>
+        {{element.name}}
+
+        <!-- This edit is defined in the cell and can implicitly access element -->
+        <ng-template #nameEdit>
+          <div style="background-color: white; width: 100%">
+            <form #f="ngForm"
+                cdkEditControl
+                cdkEditControlClickOutBehavior="submit"
+                (ngSubmit)="onSubmitName(element, f)"
+                [cdkEditControlPreservedFormValue]="preservedNameValues.get(element)"
+                (cdkEditControlPreservedFormValueChange)="preservedNameValues.set(element, $event)">
+              <input [ngModel]="element.name" name="name" required>
+              <br>
+              <button type="submit">Confirm</button>
+            </form>
+          </div>
+        </ng-template>
+      </td>
+
+      <td [cdkPopoverEdit]="weightEdit" [cdkPopoverEditContext]="element"
+          cdkPopoverEditTabOut cdkEditOpen>
+        {{element.weight}}
+      </td>
+
+      <td> {{element.symbol}} </td>
+    </tr>
+  }
 </table>
diff --git a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.ts b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.ts
index 322b160cb655..bb3fc4379565 100644
--- a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.ts
+++ b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {NgForm, FormsModule} from '@angular/forms';
-import {NgFor} from '@angular/common';
 import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
 
 export interface PeriodicElement {
@@ -41,7 +40,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
   styleUrls: ['cdk-popover-edit-tab-out-vanilla-table-example.css'],
   templateUrl: 'cdk-popover-edit-tab-out-vanilla-table-example.html',
   standalone: true,
-  imports: [CdkPopoverEditModule, FormsModule, NgFor],
+  imports: [CdkPopoverEditModule, FormsModule],
 })
 export class CdkPopoverEditTabOutVanillaTableExample {
   readonly preservedNameValues = new WeakMap<PeriodicElement, any>();
diff --git a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.html b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.html
index fe4d4dbd7912..4facc8c21aa5 100644
--- a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.html
+++ b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.html
@@ -19,51 +19,53 @@
       </form>
     </div>
   </ng-template>
-  
+
   <tr>
     <th> No. </th>
     <th> Name </th>
     <th> Weight </th>
     <th> Symbol </th>
   </tr>
-  
-  <tr *ngFor="let element of elements">
-    <td> {{element.position}} </td>
-    
-    <td [cdkPopoverEdit]="nameEdit">
-      {{element.name}}
-      
-      <!-- This edit is defined in the cell and can implicitly access element -->
-      <ng-template #nameEdit>
-        <div style="background-color: white; width: 100%">
-          <form #f="ngForm"
-              cdkEditControl
-              (ngSubmit)="onSubmitName(element, f)"
-              [cdkEditControlPreservedFormValue]="preservedNameValues.get(element)"
-              (cdkEditControlPreservedFormValueChange)="preservedNameValues.set(element, $event)">
-            Edit a:
-            <input [ngModel]="element.name" name="name" required>
-            <br>
-            <button type="submit">Confirm</button>
-            <button cdkEditRevert>Revert</button>
-            <button cdkEditClose>Close</button>
-          </form>
-        </div>
-      </ng-template>
 
-      <span *cdkRowHoverContent>
-        <button cdkEditOpen>Edit</button>
-      </span>
-    </td>
+  @for (element of elements; track element) {
+    <tr>
+      <td> {{element.position}} </td>
 
-    <td [cdkPopoverEdit]="weightEdit" [cdkPopoverEditContext]="element">
-      {{element.weight}}
-      
-      <span *cdkRowHoverContent>
-        <button cdkEditOpen>Edit</button>
-      </span>
-    </td>
+      <td [cdkPopoverEdit]="nameEdit">
+        {{element.name}}
 
-    <td> {{element.symbol}} </td>
-  </tr>
+        <!-- This edit is defined in the cell and can implicitly access element -->
+        <ng-template #nameEdit>
+          <div style="background-color: white; width: 100%">
+            <form #f="ngForm"
+                cdkEditControl
+                (ngSubmit)="onSubmitName(element, f)"
+                [cdkEditControlPreservedFormValue]="preservedNameValues.get(element)"
+                (cdkEditControlPreservedFormValueChange)="preservedNameValues.set(element, $event)">
+              Edit a:
+              <input [ngModel]="element.name" name="name" required>
+              <br>
+              <button type="submit">Confirm</button>
+              <button cdkEditRevert>Revert</button>
+              <button cdkEditClose>Close</button>
+            </form>
+          </div>
+        </ng-template>
+
+        <span *cdkRowHoverContent>
+          <button cdkEditOpen>Edit</button>
+        </span>
+      </td>
+
+      <td [cdkPopoverEdit]="weightEdit" [cdkPopoverEditContext]="element">
+        {{element.weight}}
+
+        <span *cdkRowHoverContent>
+          <button cdkEditOpen>Edit</button>
+        </span>
+      </td>
+
+      <td> {{element.symbol}} </td>
+    </tr>
+  }
 </table>
diff --git a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.ts b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.ts
index 7309eb186543..0e3c9f5e7cf2 100644
--- a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.ts
+++ b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {NgForm, FormsModule} from '@angular/forms';
-import {NgFor} from '@angular/common';
 import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
 
 export interface PeriodicElement {
@@ -41,7 +40,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
   styleUrls: ['cdk-popover-edit-vanilla-table-example.css'],
   templateUrl: 'cdk-popover-edit-vanilla-table-example.html',
   standalone: true,
-  imports: [CdkPopoverEditModule, FormsModule, NgFor],
+  imports: [CdkPopoverEditModule, FormsModule],
 })
 export class CdkPopoverEditVanillaTableExample {
   readonly preservedNameValues = new WeakMap<PeriodicElement, any>();
diff --git a/src/components-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.html b/src/components-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.html
index 8877ac3e1b25..610b3453d34f 100644
--- a/src/components-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.html
+++ b/src/components-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.html
@@ -5,40 +5,48 @@ <h3><code>native input</code></h3>
       [checked]="allToggler.checked | async"
       [indeterminate]="allToggler.indeterminate | async"
       (click)="allToggler.toggle($event)">
-  <li *ngFor="let item of data">
-    <input type="checkbox" cdkSelectionToggle #toggler="cdkSelectionToggle" [cdkSelectionToggleValue]="item"
-      [checked]="toggler.checked | async" (click)="toggler.toggle()">
-    {{item}}
-  </li>
+  @for (item of data; track item) {
+    <li>
+      <input type="checkbox" cdkSelectionToggle #toggler="cdkSelectionToggle" [cdkSelectionToggleValue]="item"
+        [checked]="toggler.checked | async" (click)="toggler.toggle()">
+      {{item}}
+    </li>
+  }
 </ul>
 
 <h3><code>mat-checkbox</code></h3>
 Selected: {{selected2}}
 <ul cdkSelection [dataSource]="data" [cdkSelectionMultiple]="true" (cdkSelectionChange)="selected2 = getCurrentSelected($event)">
   <mat-checkbox cdkSelectAll #toggle1="cdkSelectAll" [indeterminate]="toggle1.indeterminate | async"></mat-checkbox>
-  <li *ngFor="let item of data">
-    <mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item"></mat-checkbox>
-    {{item}}
-  </li>
+  @for (item of data; track item) {
+    <li>
+      <mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item"></mat-checkbox>
+      {{item}}
+    </li>
+  }
 </ul>
 
 <h3><code>Single select with mat-checkbox</code></h3>
 Selected: {{selected3}}
 <ul cdkSelection [dataSource]="data" [cdkSelectionMultiple]="false" (cdkSelectionChange)="selected3 = getCurrentSelected($event)">
-  <li *ngFor="let item of data">
-    <mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item"></mat-checkbox>
-    {{item}}
-  </li>
+  @for (item of data; track item) {
+    <li>
+      <mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item"></mat-checkbox>
+      {{item}}
+    </li>
+  }
 </ul>
 
 <h3><code>with trackBy</code></h3>
 Selected: {{selected4}}
 <ul cdkSelection [dataSource]="data" [cdkSelectionMultiple]="true" [trackBy]="trackByFn" (cdkSelectionChange)="selected4 = getCurrentSelected($event)">
   <mat-checkbox cdkSelectAll #toggle2="cdkSelectAll" [indeterminate]="toggle2.indeterminate | async"></mat-checkbox>
-  <li *ngFor="let item of data; index as i; trackBy: trackByFn">
-    <mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item" [cdkSelectionToggleIndex]="i"></mat-checkbox>
-    {{item}}
-  </li>
+  @for (item of data; track trackByFn($index)) {
+    <li>
+      <mat-checkbox cdkSelectionToggle [cdkSelectionToggleValue]="item" [cdkSelectionToggleIndex]="$index"></mat-checkbox>
+      {{item}}
+    </li>
+  }
 </ul>
 
 <button (click)="changeElementName()">Change element names and the already selected stays</button>
diff --git a/src/components-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.ts b/src/components-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.ts
index ea93bffe5a8a..ab0dedf7f6e6 100644
--- a/src/components-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.ts
+++ b/src/components-examples/cdk-experimental/selection/cdk-selection-list/cdk-selection-list-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {SelectionChange, CdkSelectionModule} from '@angular/cdk-experimental/selection';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 
@@ -10,7 +10,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
   selector: 'cdk-selection-list-example',
   templateUrl: 'cdk-selection-list-example.html',
   standalone: true,
-  imports: [CdkSelectionModule, NgFor, MatCheckboxModule, AsyncPipe],
+  imports: [CdkSelectionModule, MatCheckboxModule, AsyncPipe],
 })
 export class CdkSelectionListExample {
   data = ELEMENT_NAMES;
diff --git a/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.html b/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.html
index 0a02078fd51a..984d85a30d29 100644
--- a/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.html
+++ b/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.html
@@ -1,29 +1,31 @@
 <cdk-accordion class="example-accordion">
-  <cdk-accordion-item
-    *ngFor="let item of items; let index = index;"
-    #accordionItem="cdkAccordionItem"
-    class="example-accordion-item"
-    role="button"
-    tabindex="0"
-    [attr.id]="'accordion-header-' + index"
-    [attr.aria-expanded]="accordionItem.expanded"
-    [attr.aria-controls]="'accordion-body-' + index">
-    <div class="example-accordion-item-header" (click)="accordionItem.toggle()">
-      {{ item }}
-      <span class="example-accordion-item-description">
-        Click to {{ accordionItem.expanded ? 'close' : 'open' }}
-      </span>
-    </div>
-    <div
-      class="example-accordion-item-body"
-      role="region"
-      [style.display]="accordionItem.expanded ? '' : 'none'"
-      [attr.id]="'accordion-body-' + index"
-      [attr.aria-labelledby]="'accordion-header-' + index">
-      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis
-      excepturi incidunt ipsum deleniti labore, tempore non nam doloribus blanditiis
-      veritatis illo autem iure aliquid ullam rem tenetur deserunt velit culpa?
-    </div>
-  </cdk-accordion-item>
+  @for (item of items; track item; let index = $index) {
+    <cdk-accordion-item
+
+      #accordionItem="cdkAccordionItem"
+      class="example-accordion-item"
+      role="button"
+      tabindex="0"
+      [attr.id]="'accordion-header-' + index"
+      [attr.aria-expanded]="accordionItem.expanded"
+      [attr.aria-controls]="'accordion-body-' + index">
+      <div class="example-accordion-item-header" (click)="accordionItem.toggle()">
+        {{ item }}
+        <span class="example-accordion-item-description">
+          Click to {{ accordionItem.expanded ? 'close' : 'open' }}
+        </span>
+      </div>
+      <div
+        class="example-accordion-item-body"
+        role="region"
+        [style.display]="accordionItem.expanded ? '' : 'none'"
+        [attr.id]="'accordion-body-' + index"
+        [attr.aria-labelledby]="'accordion-header-' + index">
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis
+        excepturi incidunt ipsum deleniti labore, tempore non nam doloribus blanditiis
+        veritatis illo autem iure aliquid ullam rem tenetur deserunt velit culpa?
+      </div>
+    </cdk-accordion-item>
+  }
 </cdk-accordion>
 
diff --git a/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.ts b/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.ts
index 8210e1e591a5..2a6f6d75f3af 100644
--- a/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.ts
+++ b/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {CdkAccordionModule} from '@angular/cdk/accordion';
 
 /**
@@ -10,7 +9,7 @@ import {CdkAccordionModule} from '@angular/cdk/accordion';
   templateUrl: 'cdk-accordion-overview-example.html',
   styleUrls: ['cdk-accordion-overview-example.css'],
   standalone: true,
-  imports: [CdkAccordionModule, NgFor],
+  imports: [CdkAccordionModule],
 })
 export class CdkAccordionOverviewExample {
   items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
diff --git a/src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example-dialog.html b/src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example-dialog.html
index 80957156217c..ed8e220bd62f 100644
--- a/src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example-dialog.html
+++ b/src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example-dialog.html
@@ -3,13 +3,19 @@ <h1>Favorite Animal</h1>
   My favorite animal is:
   <ul>
     <li>
-      <span *ngIf="data.animal === 'panda'">&#10003;</span> Panda
+      @if (data.animal === 'panda') {
+        <span>&#10003;</span>
+      } Panda
     </li>
     <li>
-      <span *ngIf="data.animal === 'unicorn'">&#10003;</span> Unicorn
+      @if (data.animal === 'unicorn') {
+        <span>&#10003;</span>
+      } Unicorn
     </li>
     <li>
-      <span *ngIf="data.animal === 'lion'">&#10003;</span> Lion
+      @if (data.animal === 'lion') {
+        <span>&#10003;</span>
+      } Lion
     </li>
   </ul>
 </div>
diff --git a/src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example.ts b/src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example.ts
index eae2408e86a5..105ad82c6191 100644
--- a/src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example.ts
+++ b/src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example.ts
@@ -1,6 +1,5 @@
 import {Component, Inject} from '@angular/core';
 import {Dialog, DIALOG_DATA, DialogModule} from '@angular/cdk/dialog';
-import {NgIf} from '@angular/common';
 
 export interface DialogData {
   animal: 'panda' | 'unicorn' | 'lion';
@@ -33,7 +32,6 @@ export class CdkDialogDataExample {
   templateUrl: 'cdk-dialog-data-example-dialog.html',
   styleUrls: ['./cdk-dialog-data-example-dialog.css'],
   standalone: true,
-  imports: [NgIf],
 })
 export class CdkDialogDataExampleDialog {
   constructor(@Inject(DIALOG_DATA) public data: DialogData) {}
diff --git a/src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.html b/src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.html
index 80f3adcbf9e3..8bc87d66ac56 100644
--- a/src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.html
+++ b/src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.html
@@ -6,7 +6,9 @@
   <li>
     <button (click)="openDialog()">Pick one</button>
   </li>
-  <li *ngIf="animal">
-    You chose: <em>{{animal}}</em>
-  </li>
+  @if (animal) {
+    <li>
+      You chose: <em>{{animal}}</em>
+    </li>
+  }
 </ol>
diff --git a/src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.ts b/src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.ts
index 49828936cdd4..b6cc17829dea 100644
--- a/src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.ts
+++ b/src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.ts
@@ -1,6 +1,5 @@
 import {Component, Inject} from '@angular/core';
 import {Dialog, DialogRef, DIALOG_DATA, DialogModule} from '@angular/cdk/dialog';
-import {NgIf} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 
 export interface DialogData {
@@ -15,7 +14,7 @@ export interface DialogData {
   selector: 'cdk-dialog-overview-example',
   templateUrl: 'cdk-dialog-overview-example.html',
   standalone: true,
-  imports: [FormsModule, NgIf, DialogModule],
+  imports: [FormsModule, DialogModule],
 })
 export class CdkDialogOverviewExample {
   animal: string | undefined;
@@ -44,5 +43,8 @@ export class CdkDialogOverviewExample {
   imports: [FormsModule],
 })
 export class CdkDialogOverviewExampleDialog {
-  constructor(public dialogRef: DialogRef<string>, @Inject(DIALOG_DATA) public data: DialogData) {}
+  constructor(
+    public dialogRef: DialogRef<string>,
+    @Inject(DIALOG_DATA) public data: DialogData,
+  ) {}
 }
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.html
index edd8d80438ea..327ae1f986d9 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.html
@@ -7,7 +7,9 @@ <h2>To do</h2>
       [cdkDropListData]="todo"
       class="example-list"
       (cdkDropListDropped)="drop($event)">
-      <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
+      @for (item of todo; track item) {
+        <div class="example-box" cdkDrag>{{item}}</div>
+      }
     </div>
   </div>
 
@@ -19,7 +21,9 @@ <h2>Done</h2>
       [cdkDropListData]="done"
       class="example-list"
       (cdkDropListDropped)="drop($event)">
-      <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
+      @for (item of done; track item) {
+        <div class="example-box" cdkDrag>{{item}}</div>
+      }
     </div>
   </div>
 </div>
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts
index 8b9396684dd6..cae54929724d 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {
   CdkDragDrop,
   CdkDrag,
@@ -17,7 +16,7 @@ import {
   templateUrl: 'cdk-drag-drop-connected-sorting-group-example.html',
   styleUrls: ['cdk-drag-drop-connected-sorting-group-example.css'],
   standalone: true,
-  imports: [CdkDropListGroup, CdkDropList, NgFor, CdkDrag],
+  imports: [CdkDropListGroup, CdkDropList, CdkDrag],
 })
 export class CdkDragDropConnectedSortingGroupExample {
   todo = ['Get to work', 'Pick up groceries', 'Go home', 'Fall asleep'];
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html
index ed67f2935414..44cd97cf460e 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.html
@@ -8,7 +8,9 @@ <h2>To do</h2>
     [cdkDropListConnectedTo]="[doneList]"
     class="example-list"
     (cdkDropListDropped)="drop($event)">
-    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
+    @for (item of todo; track item) {
+      <div class="example-box" cdkDrag>{{item}}</div>
+    }
   </div>
 </div>
 
@@ -22,7 +24,9 @@ <h2>Done</h2>
     [cdkDropListConnectedTo]="[todoList]"
     class="example-list"
     (cdkDropListDropped)="drop($event)">
-    <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
+    @for (item of done; track item) {
+      <div class="example-box" cdkDrag>{{item}}</div>
+    }
   </div>
 </div>
 
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.ts
index 6287bb5c36a8..00055e1d5d17 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {
   CdkDragDrop,
   moveItemInArray,
@@ -16,7 +15,7 @@ import {
   templateUrl: 'cdk-drag-drop-connected-sorting-example.html',
   styleUrls: ['cdk-drag-drop-connected-sorting-example.css'],
   standalone: true,
-  imports: [CdkDropList, NgFor, CdkDrag],
+  imports: [CdkDropList, CdkDrag],
 })
 export class CdkDragDropConnectedSortingExample {
   todo = ['Get to work', 'Pick up groceries', 'Go home', 'Fall asleep'];
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.html
index 68994b543234..f0673cd2abe7 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.html
@@ -1,6 +1,8 @@
 <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
-  <div class="example-box" *ngFor="let movie of movies" cdkDrag>
-    <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
-    {{movie}}
-  </div>
+  @for (movie of movies; track movie) {
+    <div class="example-box" cdkDrag>
+      <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
+      {{movie}}
+    </div>
+  }
 </div>
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.ts
index 01d0ae213469..6ce72bc70a37 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.ts
@@ -6,7 +6,6 @@ import {
   CdkDropList,
   moveItemInArray,
 } from '@angular/cdk/drag-drop';
-import {NgFor} from '@angular/common';
 
 /**
  * @title Drag&Drop custom placeholder
@@ -16,7 +15,7 @@ import {NgFor} from '@angular/common';
   templateUrl: 'cdk-drag-drop-custom-placeholder-example.html',
   styleUrls: ['cdk-drag-drop-custom-placeholder-example.css'],
   standalone: true,
-  imports: [CdkDropList, NgFor, CdkDrag, CdkDragPlaceholder],
+  imports: [CdkDropList, CdkDrag, CdkDragPlaceholder],
 })
 export class CdkDragDropCustomPlaceholderExample {
   movies = [
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html
index a6a717fb8746..5072331e4076 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.html
@@ -1,6 +1,8 @@
 <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
-  <div class="example-box" *ngFor="let movie of movies" cdkDrag>
-    {{movie.title}}
-    <img *cdkDragPreview [src]="movie.poster" [alt]="movie.title">
-  </div>
+  @for (movie of movies; track movie) {
+    <div class="example-box" cdkDrag>
+      {{movie.title}}
+      <img *cdkDragPreview [src]="movie.poster" [alt]="movie.title">
+    </div>
+  }
 </div>
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.ts
index 05c81f1514cd..de89682ba474 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {
   CdkDragDrop,
   CdkDropList,
@@ -16,7 +15,7 @@ import {
   templateUrl: 'cdk-drag-drop-custom-preview-example.html',
   styleUrls: ['cdk-drag-drop-custom-preview-example.css'],
   standalone: true,
-  imports: [CdkDropList, NgFor, CdkDrag, CdkDragPreview],
+  imports: [CdkDropList, CdkDrag, CdkDragPreview],
 })
 export class CdkDragDropCustomPreviewExample {
   // tslint:disable:max-line-length
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.html
index 1e9383b04beb..ee6b133d578b 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.html
@@ -8,7 +8,9 @@ <h2>Available items</h2>
       class="example-list"
       cdkDropListSortingDisabled
       (cdkDropListDropped)="drop($event)">
-      <div class="example-box" *ngFor="let item of items" cdkDrag>{{item}}</div>
+      @for (item of items; track item) {
+        <div class="example-box" cdkDrag>{{item}}</div>
+      }
     </div>
   </div>
 
@@ -20,7 +22,9 @@ <h2>Shopping basket</h2>
       [cdkDropListData]="basket"
       class="example-list"
       (cdkDropListDropped)="drop($event)">
-      <div class="example-box" *ngFor="let item of basket" cdkDrag>{{item}}</div>
+      @for (item of basket; track item) {
+        <div class="example-box" cdkDrag>{{item}}</div>
+      }
     </div>
   </div>
 </div>
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.ts
index 625e2dac3b88..5978eee1d5d0 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {
   CdkDrag,
   CdkDragDrop,
@@ -17,7 +16,7 @@ import {
   templateUrl: 'cdk-drag-drop-disabled-sorting-example.html',
   styleUrls: ['cdk-drag-drop-disabled-sorting-example.css'],
   standalone: true,
-  imports: [CdkDropListGroup, CdkDropList, NgFor, CdkDrag],
+  imports: [CdkDropListGroup, CdkDropList, CdkDrag],
 })
 export class CdkDragDropDisabledSortingExample {
   items = ['Carrots', 'Tomatoes', 'Onions', 'Apples', 'Avocados'];
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.html
index d258da1b47de..75c0f30f1624 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.html
@@ -1,7 +1,8 @@
 <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
-  <div
-    class="example-box"
-    *ngFor="let item of items"
-    cdkDrag
-    [cdkDragDisabled]="item.disabled">{{item.value}}</div>
+  @for (item of items; track item) {
+    <div
+      class="example-box"
+      cdkDrag
+      [cdkDragDisabled]="item.disabled">{{item.value}}</div>
+  }
 </div>
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.ts
index 95512519c67e..a9bc78fe7921 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
-import {NgFor} from '@angular/common';
 
 /**
  * @title Drag&Drop disabled
@@ -10,7 +9,7 @@ import {NgFor} from '@angular/common';
   templateUrl: 'cdk-drag-drop-disabled-example.html',
   styleUrls: ['cdk-drag-drop-disabled-example.css'],
   standalone: true,
-  imports: [CdkDropList, NgFor, CdkDrag],
+  imports: [CdkDropList, CdkDrag],
 })
 export class CdkDragDropDisabledExample {
   items = [
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.html
index d8d02e342bb9..258fb3c5d8ce 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.html
@@ -9,11 +9,12 @@ <h2>Available numbers</h2>
     class="example-list"
     (cdkDropListDropped)="drop($event)"
     [cdkDropListEnterPredicate]="noReturnPredicate">
-    <div
-      class="example-box"
-      *ngFor="let number of all"
-      [cdkDragData]="number"
-      cdkDrag>{{number}}</div>
+    @for (number of all; track number) {
+      <div
+          class="example-box"
+          [cdkDragData]="number"
+          cdkDrag>{{number}}</div>
+    }
   </div>
 </div>
 
@@ -28,11 +29,12 @@ <h2>Even numbers</h2>
     class="example-list"
     (cdkDropListDropped)="drop($event)"
     [cdkDropListEnterPredicate]="evenPredicate">
-    <div
-      class="example-box"
-      *ngFor="let number of even"
-      cdkDrag
-      [cdkDragData]="number">{{number}}</div>
+    @for (number of even; track number) {
+      <div
+          class="example-box"
+          cdkDrag
+          [cdkDragData]="number">{{number}}</div>
+    }
   </div>
 </div>
 
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.ts
index 0f761795970a..2db8c906b9a2 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {
   CdkDragDrop,
   moveItemInArray,
@@ -16,7 +15,7 @@ import {
   templateUrl: 'cdk-drag-drop-enter-predicate-example.html',
   styleUrls: ['cdk-drag-drop-enter-predicate-example.css'],
   standalone: true,
-  imports: [CdkDropList, NgFor, CdkDrag],
+  imports: [CdkDropList, CdkDrag],
 })
 export class CdkDragDropEnterPredicateExample {
   all = [1, 2, 3, 4, 5, 6, 7, 8, 9];
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html
index d32505ba1a15..f476de2fa1a2 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.html
@@ -1,3 +1,5 @@
 <div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
-  <div class="example-box" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div>
+  @for (timePeriod of timePeriods; track timePeriod) {
+    <div class="example-box" cdkDrag>{{timePeriod}}</div>
+  }
 </div>
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.ts
index 3eb91457a54d..2b6193cba1bf 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray} from '@angular/cdk/drag-drop';
 
 /**
@@ -10,7 +9,7 @@ import {CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray} from '@angular/cdk/d
   templateUrl: 'cdk-drag-drop-horizontal-sorting-example.html',
   styleUrls: ['cdk-drag-drop-horizontal-sorting-example.css'],
   standalone: true,
-  imports: [CdkDropList, NgFor, CdkDrag],
+  imports: [CdkDropList, CdkDrag],
 })
 export class CdkDragDropHorizontalSortingExample {
   timePeriods = [
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.html
index 34c2d6711dc7..1e97c0c37e49 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.html
@@ -3,9 +3,10 @@
   class="example-list"
   (cdkDropListDropped)="drop($event)"
   [cdkDropListSortPredicate]="sortPredicate">
-  <div
-    class="example-box"
-    *ngFor="let number of numbers"
-    [cdkDragData]="number"
-    cdkDrag>{{number}}</div>
+  @for (number of numbers; track number) {
+    <div
+      class="example-box"
+      [cdkDragData]="number"
+      cdkDrag>{{number}}</div>
+  }
 </div>
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.ts
index 8fa2a25d9692..86f8f2a8edd0 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {CdkDragDrop, moveItemInArray, CdkDrag, CdkDropList} from '@angular/cdk/drag-drop';
 
 /**
@@ -10,7 +9,7 @@ import {CdkDragDrop, moveItemInArray, CdkDrag, CdkDropList} from '@angular/cdk/d
   templateUrl: 'cdk-drag-drop-sort-predicate-example.html',
   styleUrls: ['cdk-drag-drop-sort-predicate-example.css'],
   standalone: true,
-  imports: [CdkDropList, NgFor, CdkDrag],
+  imports: [CdkDropList, CdkDrag],
 })
 export class CdkDragDropSortPredicateExample {
   numbers = [1, 2, 3, 4, 5, 6, 7, 8];
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html
index 699c95cf9c7b..d240babbfc3d 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.html
@@ -1,3 +1,5 @@
 <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
-  <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
+  @for (movie of movies; track movie) {
+    <div class="example-box" cdkDrag>{{movie}}</div>
+  }
 </div>
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.ts
index 35a8e31a51d7..5674fc049ad4 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {CdkDragDrop, CdkDropList, CdkDrag, moveItemInArray} from '@angular/cdk/drag-drop';
-import {NgFor} from '@angular/common';
 
 /**
  * @title Drag&Drop sorting
@@ -10,7 +9,7 @@ import {NgFor} from '@angular/common';
   templateUrl: 'cdk-drag-drop-sorting-example.html',
   styleUrls: ['cdk-drag-drop-sorting-example.css'],
   standalone: true,
-  imports: [CdkDropList, NgFor, CdkDrag],
+  imports: [CdkDropList, CdkDrag],
 })
 export class CdkDragDropSortingExample {
   movies = [
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.html b/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.html
index 26cd1eba7ed9..1cecc7c5f695 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.html
+++ b/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.html
@@ -8,11 +8,9 @@
       cdkListboxUseActiveDescendant
       aria-labelledby="example-spatula-label"
       class="example-listbox">
-    <li *ngFor="let feature of features"
-        [cdkOption]="feature"
-        class="example-option">
-      {{feature}}
-    </li>
+    @for (feature of features; track feature) {
+      <li [cdkOption]="feature" class="example-option">{{feature}}</li>
+    }
   </ul>
   <!-- #enddocregion listbox -->
 </div>
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.ts
index 5d1c5f36c88b..5e979318bc79 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
 
 /** @title Listbox with aria-activedescendant. */
@@ -9,7 +8,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   templateUrl: 'cdk-listbox-activedescendant-example.html',
   styleUrls: ['cdk-listbox-activedescendant-example.css'],
   standalone: true,
-  imports: [CdkListbox, NgFor, CdkOption],
+  imports: [CdkListbox, CdkOption],
 })
 export class CdkListboxActivedescendantExample {
   features = ['Hydrodynamic', 'Port & Starboard Attachments', 'Turbo Drive'];
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.html b/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.html
index 088bf43edab2..471dceff9461 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.html
+++ b/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.html
@@ -9,14 +9,14 @@
       (cdkListboxValueChange)="appointment = $event.value"
       aria-labelledby="example-appointment-label"
       class="example-listbox">
-    <li *ngFor="let time of slots"
-        [cdkOption]="time"
-        class="example-option">
-      {{formatTime(time)}}
-    </li>
+    @for (time of slots; track time) {
+      <li [cdkOption]="time" class="example-option">{{formatTime(time)}}</li>
+    }
   </ul>
   <!-- #enddocregion listbox -->
 </div>
-<p *ngIf="appointment[0]">
-  Your appointment  is scheduled for <strong>{{formatAppointment() | json}}</strong>&nbsp;
-</p>
+@if (appointment[0]) {
+  <p>
+    Your appointment is scheduled for <strong>{{formatAppointment() | json}}</strong>&nbsp;
+  </p>
+}
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.ts
index 9a1e2103c828..fc79ef4ac178 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {NgFor, NgIf, JsonPipe} from '@angular/common';
+import {JsonPipe} from '@angular/common';
 import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
 
 const today = new Date();
@@ -19,7 +19,7 @@ const formatter = new Intl.DateTimeFormat(undefined, {
   templateUrl: 'cdk-listbox-compare-with-example.html',
   styleUrls: ['cdk-listbox-compare-with-example.css'],
   standalone: true,
-  imports: [CdkListbox, NgFor, CdkOption, NgIf, JsonPipe],
+  imports: [CdkListbox, CdkOption, JsonPipe],
 })
 export class CdkListboxCompareWithExample {
   slots = [12, 13, 14, 15].map(
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.html b/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.html
index 5cc648351875..391e26f1a7b2 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.html
+++ b/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.html
@@ -6,16 +6,18 @@
       [formControl]="signCtrl"
       aria-labelledby="example-zodiac-sign-label"
       class="example-listbox">
-    <li *ngFor="let sign of signs"
-        [cdkOption]="sign"
-        class="example-option">
-      {{sign}}
-    </li>
+    @for (sign of signs; track sign) {
+      <li [cdkOption]="sign" class="example-option">{{sign}}</li>
+    }
   </ul>
 </div>
-<div class="example-listbox-errors" *ngIf="invalid | async">
-  <p *ngFor="let error of getErrors()">{{error}}</p>
-</div>
+@if (invalid | async) {
+  <div class="example-listbox-errors">
+    @for (error of getErrors(); track error) {
+      <p>{{error}}</p>
+    }
+  </div>
+}
 <p>
   Your zodiac sign is: <strong>{{signCtrl.value | json}}</strong>&nbsp;
   <button (click)="signCtrl.setValue(['Cat'])">Set: Cat</button>&nbsp;
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.ts
index ff6e9c215d57..a8ca73893fb4 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.ts
@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {FormControl, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {map} from 'rxjs/operators';
 import {Observable} from 'rxjs';
-import {NgFor, NgIf, AsyncPipe, JsonPipe} from '@angular/common';
+import {AsyncPipe, JsonPipe} from '@angular/common';
 import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
 
 /** @title Listbox with forms validation. */
@@ -12,16 +12,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   templateUrl: 'cdk-listbox-forms-validation-example.html',
   styleUrls: ['cdk-listbox-forms-validation-example.css'],
   standalone: true,
-  imports: [
-    CdkListbox,
-    FormsModule,
-    ReactiveFormsModule,
-    NgFor,
-    CdkOption,
-    NgIf,
-    AsyncPipe,
-    JsonPipe,
-  ],
+  imports: [CdkListbox, FormsModule, ReactiveFormsModule, CdkOption, AsyncPipe, JsonPipe],
 })
 export class CdkListboxFormsValidationExample {
   signs = [
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.html b/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.html
index 08b362fb333b..5b5e6f19b386 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.html
+++ b/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.html
@@ -6,10 +6,8 @@
     cdkListboxOrientation="horizontal"
     aria-labelledby="example-shirt-size-label"
     class="example-listbox">
-  <li *ngFor="let size of sizes"
-      [cdkOption]="size"
-      class="example-option">
-    {{size}}
-  </li>
+  @for (size of sizes; track size) {
+    <li [cdkOption]="size" class="example-option">{{size}}</li>
+  }
 </ul>
 <!-- #enddocregion listbox -->
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.ts
index d77a424be855..efbdcabce378 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
 
 /** @title Horizontal listbox */
@@ -9,7 +8,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   templateUrl: 'cdk-listbox-horizontal-example.html',
   styleUrls: ['cdk-listbox-horizontal-example.css'],
   standalone: true,
-  imports: [CdkListbox, NgFor, CdkOption],
+  imports: [CdkListbox, CdkOption],
 })
 export class CdkListboxHorizontalExample {
   sizes = ['XS', 'S', 'M', 'L', 'XL'];
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.html b/src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.html
index 49b8588c8ab7..5f102c98f005 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.html
+++ b/src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.html
@@ -7,11 +7,9 @@
       [formControl]="languageCtrl"
       aria-labelledby="example-language-label"
       class="example-listbox">
-    <li *ngFor="let language of languages"
-        [cdkOption]="language"
-        class="example-option">
-      {{language}}
-    </li>
+    @for (language of languages; track language) {
+      <li [cdkOption]="language" class="example-option">{{language}}</li>
+    }
   </ul>
   <!-- #enddocregion listbox -->
 </div>
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.ts
index cd39f4c44278..ffa5a9b8d58a 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NgFor, JsonPipe} from '@angular/common';
+import {JsonPipe} from '@angular/common';
 import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
 
 /** @title Listbox with reactive forms. */
@@ -10,7 +10,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   templateUrl: 'cdk-listbox-reactive-forms-example.html',
   styleUrls: ['cdk-listbox-reactive-forms-example.css'],
   standalone: true,
-  imports: [CdkListbox, FormsModule, ReactiveFormsModule, NgFor, CdkOption, JsonPipe],
+  imports: [CdkListbox, FormsModule, ReactiveFormsModule, CdkOption, JsonPipe],
 })
 export class CdkListboxReactiveFormsExample {
   languages = ['C++', 'Java', 'JavaScript', 'Python', 'TypeScript'];
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.html b/src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.html
index be65ce12ef62..a342812b74a7 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.html
+++ b/src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.html
@@ -8,11 +8,9 @@
       [(ngModel)]="order"
       aria-labelledby="example-toppings-label"
       class="example-listbox">
-    <li *ngFor="let topping of toppings"
-        [cdkOption]="topping"
-        class="example-option">
-      {{topping}}
-    </li>
+    @for (topping of toppings; track topping) {
+      <li [cdkOption]="topping" class="example-option">{{topping}}</li>
+    }
   </ul>
   <!-- #enddocregion listbox -->
 </div>
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.ts
index 3d429e15272c..d563594683a2 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {NgFor, JsonPipe} from '@angular/common';
+import {JsonPipe} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
 
@@ -10,7 +10,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   templateUrl: 'cdk-listbox-template-forms-example.html',
   styleUrls: ['cdk-listbox-template-forms-example.css'],
   standalone: true,
-  imports: [CdkListbox, FormsModule, NgFor, CdkOption, JsonPipe],
+  imports: [CdkListbox, FormsModule, CdkOption, JsonPipe],
 })
 export class CdkListboxTemplateFormsExample {
   toppings = ['Extra Cheese', 'Mushrooms', 'Pepperoni', 'Sausage'];
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.html b/src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.html
index a5ecd604914b..ecc594508f71 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.html
+++ b/src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.html
@@ -8,11 +8,9 @@
       (cdkListboxValueChange)="starter = $event.value"
       aria-labelledby="example-starter-pokemon-label"
       class="example-listbox">
-    <li *ngFor="let pokemon of starters"
-        [cdkOption]="pokemon"
-        class="example-option">
-      {{pokemon}}
-    </li>
+    @for (pokemon of starters; track pokemon) {
+      <li [cdkOption]="pokemon" class="example-option">{{pokemon}}</li>
+    }
   </ul>
   <!-- #enddocregion listbox -->
 </div>
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.ts
index 3cc0140cf403..df90e254246e 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {NgFor, JsonPipe} from '@angular/common';
+import {JsonPipe} from '@angular/common';
 import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
 
 /** @title Listbox with value binding. */
@@ -9,7 +9,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   templateUrl: 'cdk-listbox-value-binding-example.html',
   styleUrls: ['cdk-listbox-value-binding-example.css'],
   standalone: true,
-  imports: [CdkListbox, NgFor, CdkOption, JsonPipe],
+  imports: [CdkListbox, CdkOption, JsonPipe],
 })
 export class CdkListboxValueBindingExample {
   starters = ['Sprigatito', 'Fuecoco', 'Quaxly'];
diff --git a/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.html b/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.html
index b553bf7a6c1b..5941d6fdf55e 100644
--- a/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.html
+++ b/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.html
@@ -21,14 +21,15 @@
     <hr />
     <div cdkMenuGroup>
       <!-- #docregion size-items -->
-      <button
-          *ngFor="let size of sizes"
-          cdkMenuItemRadio
-          class="example-menu-item"
-          [cdkMenuItemChecked]="size === selectedSize"
-          (cdkMenuItemTriggered)="selectedSize = size">
-        {{size}}
-      </button>
+      @for (size of sizes; track size) {
+        <button
+            cdkMenuItemRadio
+            class="example-menu-item"
+            [cdkMenuItemChecked]="size === selectedSize"
+            (cdkMenuItemTriggered)="selectedSize = size">
+          {{size}}
+        </button>
+      }
       <!-- #enddocregion size-items -->
     </div>
     <hr />
diff --git a/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.ts b/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.ts
index e68e5a7baec7..c9ae902bffa7 100644
--- a/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.ts
+++ b/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {
   CdkMenu,
   CdkMenuItem,
@@ -20,7 +19,6 @@ import {
     CdkMenu,
     CdkMenuItemCheckbox,
     CdkMenuGroup,
-    NgFor,
     CdkMenuItemRadio,
     CdkMenuItem,
   ],
diff --git a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.html b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.html
index 0020c02846a5..016b70b3c70d 100644
--- a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.html
+++ b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.html
@@ -1,9 +1,11 @@
-<ng-container *ngIf="shouldRun">
+@if (shouldRun) {
   <div class="example-header">Content before</div>
   <cdk-virtual-scroll-viewport scrollWindow itemSize="50">
     <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
   </cdk-virtual-scroll-viewport>
   <div class="example-footer">Content after</div>
-</ng-container>
+}
 
-<div *ngIf="!shouldRun">Please open on StackBlitz to see result</div>
+@if (!shouldRun) {
+  <div>Please open on StackBlitz to see result</div>
+}
diff --git a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.ts b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.ts
index 85ea301d4074..8b8de163953a 100644
--- a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.ts
+++ b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.ts
@@ -1,5 +1,4 @@
 import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
-import {NgIf} from '@angular/common';
 import {ScrollingModule} from '@angular/cdk/scrolling';
 
 /** @title Virtual scrolling window */
@@ -9,7 +8,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
   templateUrl: 'cdk-virtual-scroll-window-scrolling-example.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [NgIf, ScrollingModule],
+  imports: [ScrollingModule],
 })
 export class CdkVirtualScrollWindowScrollingExample {
   @Input() shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host);
diff --git a/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts b/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts
index d21e092b0381..19d1fb595847 100644
--- a/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts
+++ b/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts
@@ -1,6 +1,6 @@
 import {Component, forwardRef} from '@angular/core';
 import {CdkStepper, CdkStepperModule} from '@angular/cdk/stepper';
-import {NgTemplateOutlet, NgFor} from '@angular/common';
+import {NgTemplateOutlet} from '@angular/common';
 
 /** @title A custom CDK stepper without a form */
 @Component({
@@ -19,7 +19,7 @@ export class CdkCustomStepperWithoutFormExample {}
   styleUrls: ['./example-custom-stepper.css'],
   providers: [{provide: CdkStepper, useExisting: CustomStepper}],
   standalone: true,
-  imports: [NgTemplateOutlet, CdkStepperModule, NgFor],
+  imports: [NgTemplateOutlet, CdkStepperModule],
 })
 export class CustomStepper extends CdkStepper {
   selectStepByIndex(index: number): void {
diff --git a/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/example-custom-stepper.html b/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/example-custom-stepper.html
index f3cb23972f5d..625c72b8bf92 100644
--- a/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/example-custom-stepper.html
+++ b/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/example-custom-stepper.html
@@ -7,14 +7,12 @@ <h2>Step {{ selectedIndex + 1 }}/{{ steps.length }}</h2>
 
   <footer class="example-step-navigation-bar">
     <button class="example-nav-button" cdkStepperPrevious>&larr;</button>
-    <button
-      class="example-step"
-      [class.example-active]="selectedIndex === i"
-      *ngFor="let step of steps; let i = index"
-      (click)="selectStepByIndex(i)"
-    >
-      Step {{ i + 1 }}
-    </button>
+    @for (step of steps; track step; let i = $index) {
+      <button
+        class="example-step"
+        [class.example-active]="selectedIndex === i"
+        (click)="selectStepByIndex(i)">Step {{ i + 1 }}</button>
+    }
     <button class="example-nav-button" cdkStepperNext>&rarr;</button>
   </footer>
 </section>
diff --git a/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts b/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts
index 6b422e4a414a..16a8f9a20d04 100644
--- a/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts
+++ b/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts
@@ -1,7 +1,7 @@
 import {Component, forwardRef} from '@angular/core';
 import {CdkStepper, CdkStepperModule} from '@angular/cdk/stepper';
 import {FormBuilder, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NgTemplateOutlet, NgFor} from '@angular/common';
+import {NgTemplateOutlet} from '@angular/common';
 
 /** @title A custom CDK linear stepper with forms */
 @Component({
@@ -39,7 +39,7 @@ export class CdkLinearStepperWithFormExample {
   styleUrls: ['./example-custom-linear-stepper.css'],
   providers: [{provide: CdkStepper, useExisting: CustomLinearStepper}],
   standalone: true,
-  imports: [NgTemplateOutlet, CdkStepperModule, NgFor],
+  imports: [NgTemplateOutlet, CdkStepperModule],
 })
 export class CustomLinearStepper extends CdkStepper {
   selectStepByIndex(index: number): void {
diff --git a/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/example-custom-linear-stepper.html b/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/example-custom-linear-stepper.html
index ec97b13bf0f4..70bc88308cc0 100644
--- a/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/example-custom-linear-stepper.html
+++ b/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/example-custom-linear-stepper.html
@@ -7,14 +7,12 @@ <h2>Step {{selectedIndex + 1}}/{{steps.length}}</h2>
 
   <footer class="example-step-navigation-bar">
     <button class="example-nav-button" cdkStepperPrevious>&larr;</button>
-    <button
-      class="example-step"
-      [class.example-active]="selectedIndex === i"
-      *ngFor="let step of steps; let i = index"
-      (click)="selectStepByIndex(i)"
-    >
-      Step {{ i + 1 }}
-    </button>
+    @for (step of steps; track step; let i = $index) {
+      <button
+        class="example-step"
+        [class.example-active]="selectedIndex === i"
+        (click)="selectStepByIndex(i)">Step {{ i + 1 }}</button>
+    }
     <button class="example-nav-button" cdkStepperNext>&rarr;</button>
   </footer>
 </section>
diff --git a/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.html b/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.html
index 9942f27a0852..1d2b160fe1ff 100644
--- a/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.html
+++ b/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.html
@@ -2,12 +2,16 @@
   <mat-form-field>
     <mat-label>First name</mat-label>
     <input matInput (cdkAutofill)="firstNameAutofilled = $event.isAutofilled">
-    <mat-hint *ngIf="firstNameAutofilled">Autofilled!</mat-hint>
+    @if (firstNameAutofilled) {
+      <mat-hint>Autofilled!</mat-hint>
+    }
   </mat-form-field>
   <mat-form-field>
     <mat-label>Last name</mat-label>
     <input matInput (cdkAutofill)="lastNameAutofilled = $event.isAutofilled">
-    <mat-hint *ngIf="lastNameAutofilled">Autofilled!</mat-hint>
+    @if (lastNameAutofilled) {
+      <mat-hint>Autofilled!</mat-hint>
+    }
   </mat-form-field>
   <button mat-raised-button>Submit</button>
 </form>
diff --git a/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.ts b/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.ts
index 73e0fc67cc51..2762b18a9a00 100644
--- a/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.ts
+++ b/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
-import {NgIf} from '@angular/common';
 import {TextFieldModule} from '@angular/cdk/text-field';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -11,7 +10,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   templateUrl: './text-field-autofill-directive-example.html',
   styleUrls: ['./text-field-autofill-directive-example.css'],
   standalone: true,
-  imports: [MatFormFieldModule, MatInputModule, TextFieldModule, NgIf, MatButtonModule],
+  imports: [MatFormFieldModule, MatInputModule, TextFieldModule, MatButtonModule],
 })
 export class TextFieldAutofillDirectiveExample {
   firstNameAutofilled: boolean;
diff --git a/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.html b/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.html
index e9ae5d687871..22087273e8cd 100644
--- a/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.html
+++ b/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.html
@@ -2,12 +2,16 @@
   <mat-form-field>
     <mat-label>First name</mat-label>
     <input matInput #first>
-    <mat-hint *ngIf="firstNameAutofilled">Autofilled!</mat-hint>
+    @if (firstNameAutofilled) {
+      <mat-hint>Autofilled!</mat-hint>
+    }
   </mat-form-field>
   <mat-form-field>
     <mat-label>Last name</mat-label>
     <input matInput #last>
-    <mat-hint *ngIf="lastNameAutofilled">Autofilled!</mat-hint>
+    @if (lastNameAutofilled) {
+      <mat-hint>Autofilled!</mat-hint>
+    }
   </mat-form-field>
   <button mat-raised-button>Submit</button>
 </form>
diff --git a/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.ts b/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.ts
index 880a0882e534..61026ad8baaa 100644
--- a/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.ts
+++ b/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.ts
@@ -1,7 +1,6 @@
 import {AutofillMonitor} from '@angular/cdk/text-field';
 import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
-import {NgIf} from '@angular/common';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -11,7 +10,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   templateUrl: './text-field-autofill-monitor-example.html',
   styleUrls: ['./text-field-autofill-monitor-example.css'],
   standalone: true,
-  imports: [MatFormFieldModule, MatInputModule, NgIf, MatButtonModule],
+  imports: [MatFormFieldModule, MatInputModule, MatButtonModule],
 })
 export class TextFieldAutofillMonitorExample implements AfterViewInit, OnDestroy {
   @ViewChild('first', {read: ElementRef}) firstName: ElementRef<HTMLElement>;
diff --git a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.html b/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.html
index 4a4c076025bd..414532d5a1c7 100644
--- a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.html
+++ b/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.html
@@ -70,11 +70,11 @@ <h2 mat-edit-title>Name</h2>
         </div>
       </ng-template>
 
-      <ng-container *ngIf="nameEditEnabled">
+      @if (nameEditEnabled) {
         <span *matRowHoverContent>
           <button mat-icon-button matEditOpen><mat-icon>edit</mat-icon></button>
         </span>
-      </ng-container>
+      }
     </td>
   </ng-container>
 
@@ -99,10 +99,9 @@ <h2 mat-edit-title>Name</h2>
                   [ngModel]="[element.type]"
                   (selectionChange)="f.ngSubmit.emit()"
                   aria-label="Element type">
-                <mat-list-option *ngFor="let type of TYPES"
-                    [value]="type">
-                  {{type}}
-                </mat-list-option>
+                @for (type of TYPES; track type) {
+                  <mat-list-option [value]="type">{{type}}</mat-list-option>
+                }
               </mat-selection-list>
             </div>
           </form>
@@ -155,11 +154,11 @@ <h2 mat-edit-title>Name</h2>
               <mat-selection-list [ngModel]="element.fantasyCounterparts"
                   name="fantasyCounterparts"
                   aria-label="Fantasy Element Counterparts">
-                <mat-list-option *ngFor="let fantasyElement of FANTASY_ELEMENTS"
+                @for (fantasyElement of FANTASY_ELEMENTS; track fantasyElement) {
+                  <mat-list-option
                     [value]="fantasyElement"
-                    checkboxPosition="before">
-                  {{fantasyElement}}
-                </mat-list-option>
+                    checkboxPosition="before">{{fantasyElement}}</mat-list-option>
+                }
               </mat-selection-list>
             </div>
             <div mat-edit-actions>
diff --git a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts b/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts
index a3aaafd0b58e..1e051a32a336 100644
--- a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts
+++ b/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts
@@ -5,7 +5,6 @@ import {NgForm, FormsModule} from '@angular/forms';
 import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
 import {BehaviorSubject, Observable} from 'rxjs';
 import {MatListModule} from '@angular/material/list';
-import {NgIf, NgFor} from '@angular/common';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
@@ -218,9 +217,7 @@ const FANTASY_ELEMENTS: readonly FantasyElement[] = [
     MatButtonModule,
     MatIconModule,
     MatCheckboxModule,
-    NgIf,
     MatListModule,
-    NgFor,
     MatSnackBarModule,
   ],
 })
diff --git a/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.html b/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.html
index bec0b35b1cc5..5c7a9b02ea85 100644
--- a/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.html
+++ b/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.html
@@ -5,40 +5,48 @@ <h3><code>native input</code></h3>
       [checked]="allToggler.checked | async"
       [indeterminate]="allToggler.indeterminate | async"
       (click)="allToggler.toggle($event)">
-  <li *ngFor="let item of data">
-    <input type="checkbox" matSelectionToggle #toggler="matSelectionToggle" [matSelectionToggleValue]="item"
-      [checked]="toggler.checked | async" (click)="toggler.toggle()">
-    {{item}}
-  </li>
+  @for (item of data; track item) {
+    <li>
+      <input type="checkbox" matSelectionToggle #toggler="matSelectionToggle" [matSelectionToggleValue]="item"
+        [checked]="toggler.checked | async" (click)="toggler.toggle()">
+      {{item}}
+    </li>
+  }
 </ul>
 
 <h3><code>mat-checkbox</code></h3>
 Selected: {{selected2}}
 <ul matSelection [dataSource]="data" [matSelectionMultiple]="true" (matSelectionChange)="selected2 = getCurrentSelected($event)">
   <mat-checkbox matSelectAll #toggle1="matSelectAll" [indeterminate]="toggle1.indeterminate | async"></mat-checkbox>
-  <li *ngFor="let item of data">
+  @for (item of data; track item) {
+  <li>
     <mat-checkbox matSelectionToggle [matSelectionToggleValue]="item"></mat-checkbox>
     {{item}}
   </li>
+}
 </ul>
 
 <h3><code>Single select with mat-checkbox</code></h3>
 Selected: {{selected3}}
 <ul matSelection [dataSource]="data" [matSelectionMultiple]="false" (matSelectionChange)="selected3 = getCurrentSelected($event)">
-  <li *ngFor="let item of data">
-    <mat-checkbox matSelectionToggle [matSelectionToggleValue]="item"></mat-checkbox>
-    {{item}}
-  </li>
+  @for (item of data; track item) {
+    <li>
+      <mat-checkbox matSelectionToggle [matSelectionToggleValue]="item"></mat-checkbox>
+      {{item}}
+    </li>
+  }
 </ul>
 
 <h3><code>with trackBy</code></h3>
 Selected: {{selected4}}
 <ul matSelection [dataSource]="data" [matSelectionMultiple]="true" [trackBy]="trackByFn" (matSelectionChange)="selected4 = getCurrentSelected($event)">
   <mat-checkbox matSelectAll #toggle2="matSelectAll" [indeterminate]="toggle2.indeterminate | async"></mat-checkbox>
-  <li *ngFor="let item of data; index as i; trackBy: trackByFn">
-    <mat-checkbox matSelectionToggle [matSelectionToggleValue]="item" [matSelectionToggleIndex]="i"></mat-checkbox>
-    {{item}}
-  </li>
+  @for (item of data; track trackByFn(i, item); let i = $index) {
+    <li>
+      <mat-checkbox matSelectionToggle [matSelectionToggleValue]="item" [matSelectionToggleIndex]="i"></mat-checkbox>
+      {{item}}
+    </li>
+  }
 </ul>
 
 <button (click)="changeElementName()">Change element names and the already selected stays</button>
diff --git a/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.ts b/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.ts
index 96c43c5bf9d0..94e9eedb7a3a 100644
--- a/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.ts
+++ b/src/components-examples/material-experimental/selection/mat-selection-list/mat-selection-list-example.ts
@@ -1,7 +1,7 @@
 import {SelectionChange} from '@angular/cdk-experimental/selection';
 import {Component} from '@angular/core';
 import {MatCheckboxModule} from '@angular/material/checkbox';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {MatSelectionModule} from '@angular/material-experimental/selection';
 
 /**
@@ -11,7 +11,7 @@ import {MatSelectionModule} from '@angular/material-experimental/selection';
   selector: 'mat-selection-list-example',
   templateUrl: 'mat-selection-list-example.html',
   standalone: true,
-  imports: [MatSelectionModule, NgFor, MatCheckboxModule, AsyncPipe],
+  imports: [MatSelectionModule, MatCheckboxModule, AsyncPipe],
 })
 export class MatSelectionListExample {
   data = ELEMENT_NAMES;
diff --git a/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html b/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html
index cfa15480831c..e1abe1ad5a4c 100644
--- a/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.html
@@ -8,9 +8,9 @@
            [formControl]="myControl"
            [matAutocomplete]="auto">
     <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
-      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
-        {{option}}
-      </mat-option>
+      @for (option of filteredOptions | async; track option) {
+        <mat-option [value]="option">{{option}}</mat-option>
+      }
     </mat-autocomplete>
   </mat-form-field>
 </form>
diff --git a/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts b/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
index a8093b37e76f..8f18898d8903 100644
--- a/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -21,7 +21,6 @@ import {MatFormFieldModule} from '@angular/material/form-field';
     MatInputModule,
     MatAutocompleteModule,
     ReactiveFormsModule,
-    NgFor,
     AsyncPipe,
   ],
 })
diff --git a/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.html b/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.html
index 455d42ef963b..479304681f7a 100644
--- a/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.html
@@ -3,9 +3,9 @@
     <mat-label>Assignee</mat-label>
     <input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
     <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
-      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
-        {{option.name}}
-      </mat-option>
+      @for (option of filteredOptions | async; track option) {
+        <mat-option [value]="option">{{option.name}}</mat-option>
+      }
     </mat-autocomplete>
   </mat-form-field>
 </form>
diff --git a/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts b/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts
index 5fc1a62c84fe..40394477d82e 100644
--- a/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts
@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -25,7 +25,6 @@ export interface User {
     MatInputModule,
     MatAutocompleteModule,
     ReactiveFormsModule,
-    NgFor,
     AsyncPipe,
   ],
 })
diff --git a/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.html b/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.html
index 1562b3c8387b..8ac756c675af 100644
--- a/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.html
@@ -8,9 +8,9 @@
            [formControl]="myControl"
            [matAutocomplete]="auto">
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
-        {{option}}
-      </mat-option>
+      @for (option of filteredOptions | async; track option) {
+        <mat-option [value]="option">{{option}}</mat-option>
+      }
     </mat-autocomplete>
   </mat-form-field>
 </form>
diff --git a/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts b/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts
index 20088741e197..17d9d844e5bf 100644
--- a/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts
@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -21,7 +21,6 @@ import {MatFormFieldModule} from '@angular/material/form-field';
     MatInputModule,
     MatAutocompleteModule,
     ReactiveFormsModule,
-    NgFor,
     AsyncPipe,
   ],
 })
diff --git a/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.html b/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.html
index 9ec82cd88899..e0af7691b679 100644
--- a/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.html
@@ -1,5 +1,7 @@
 <mat-autocomplete #autocomplete="matAutocomplete">
-  <mat-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</mat-option>
+  @for (state of states; track state) {
+    <mat-option [value]="state.code">{{ state.name }}</mat-option>
+  }
 </mat-autocomplete>
 
 <input id="plain" [matAutocomplete]="autocomplete">
diff --git a/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.ts b/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.ts
index d3848a54d31b..2dac7916eb30 100644
--- a/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 
 /**
@@ -9,7 +8,7 @@ import {MatAutocompleteModule} from '@angular/material/autocomplete';
   selector: 'autocomplete-harness-example',
   templateUrl: 'autocomplete-harness-example.html',
   standalone: true,
-  imports: [MatAutocompleteModule, NgFor],
+  imports: [MatAutocompleteModule],
 })
 export class AutocompleteHarnessExample {
   states = [
diff --git a/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.html b/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.html
index 8e0ccdea8130..8181071dec7a 100644
--- a/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.html
@@ -8,11 +8,13 @@
            [matAutocomplete]="autoGroup">
 <!-- #docregion mat-autocomplete -->
       <mat-autocomplete #autoGroup="matAutocomplete">
-        <mat-optgroup *ngFor="let group of stateGroupOptions | async" [label]="group.letter">
-          <mat-option *ngFor="let name of group.names" [value]="name">
-            {{name}}
-          </mat-option>
-      </mat-optgroup>
+        @for (group of stateGroupOptions | async; track group) {
+          <mat-optgroup [label]="group.letter">
+            @for (name of group.names; track name) {
+              <mat-option [value]="name">{{name}}</mat-option>
+            }
+          </mat-optgroup>
+        }
     </mat-autocomplete>
 <!-- #enddocregion mat-autocomplete -->
   </mat-form-field>
diff --git a/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts b/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts
index 055013753108..f413f5755fae 100644
--- a/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts
@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {FormBuilder, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {startWith, map} from 'rxjs/operators';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -31,7 +31,6 @@ export const _filter = (opt: string[], value: string): string[] => {
     MatFormFieldModule,
     MatInputModule,
     MatAutocompleteModule,
-    NgFor,
     AsyncPipe,
   ],
 })
diff --git a/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.html b/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.html
index 9a828b98a80f..51c22a153544 100644
--- a/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.html
@@ -6,11 +6,13 @@
            [matAutocomplete]="auto"
            [formControl]="stateCtrl">
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
-        <img alt="" class="example-option-img" [src]="state.flag" height="25">
-        <span>{{state.name}}</span> |
-        <small>Population: {{state.population}}</small>
-      </mat-option>
+      @for (state of filteredStates | async; track state) {
+        <mat-option [value]="state.name">
+          <img alt="" class="example-option-img" [src]="state.flag" height="25">
+          <span>{{state.name}}</span> |
+          <small>Population: {{state.population}}</small>
+        </mat-option>
+      }
     </mat-autocomplete>
   </mat-form-field>
 
diff --git a/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts b/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts
index e8fefe1dd766..a2ef5ca19243 100644
--- a/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts
@@ -3,7 +3,7 @@ import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -28,7 +28,6 @@ export interface State {
     MatInputModule,
     MatAutocompleteModule,
     ReactiveFormsModule,
-    NgFor,
     MatSlideToggleModule,
     AsyncPipe,
   ],
diff --git a/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.html b/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.html
index 1f94451ba956..d830477d23ca 100644
--- a/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.html
@@ -5,8 +5,8 @@
          [matAutocomplete]="auto"
          class="example-input">
   <mat-autocomplete #auto="matAutocomplete">
-    <mat-option *ngFor="let street of filteredStreets | async" [value]="street">
-      {{street}}
-    </mat-option>
+    @for (street of filteredStreets | async; track street) {
+      <mat-option [value]="street">{{street}}</mat-option>
+    }
   </mat-autocomplete>
 </form>
diff --git a/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts b/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts
index 5e043b281bc4..168a3b18204c 100644
--- a/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts
@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {startWith, map} from 'rxjs/operators';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 
 /**
@@ -13,7 +13,7 @@ import {MatAutocompleteModule} from '@angular/material/autocomplete';
   templateUrl: 'autocomplete-plain-input-example.html',
   styleUrls: ['autocomplete-plain-input-example.css'],
   standalone: true,
-  imports: [FormsModule, MatAutocompleteModule, ReactiveFormsModule, NgFor, AsyncPipe],
+  imports: [FormsModule, MatAutocompleteModule, ReactiveFormsModule, AsyncPipe],
 })
 export class AutocompletePlainInputExample implements OnInit {
   control = new FormControl('');
diff --git a/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.html b/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.html
index e5c96b37e9d3..e219ae709ab9 100644
--- a/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.html
@@ -12,9 +12,9 @@
            (input)="filter()"
            (focus)="filter()">
     <mat-autocomplete requireSelection #auto="matAutocomplete">
-      <mat-option *ngFor="let option of filteredOptions" [value]="option">
-        {{option}}
-      </mat-option>
+      @for (option of filteredOptions; track option) {
+        <mat-option [value]="option">{{option}}</mat-option>
+      }
     </mat-autocomplete>
   </mat-form-field>
 </form>
diff --git a/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts b/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts
index 5da4fc881088..42d322fbfd70 100644
--- a/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts
@@ -1,6 +1,6 @@
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -19,7 +19,6 @@ import {MatFormFieldModule} from '@angular/material/form-field';
     MatInputModule,
     MatAutocompleteModule,
     ReactiveFormsModule,
-    NgFor,
     AsyncPipe,
   ],
 })
diff --git a/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.html b/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.html
index a8332e050ee1..c3a57bceb82d 100644
--- a/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.html
+++ b/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.html
@@ -11,9 +11,9 @@
 <!-- #enddocregion input -->
 <!-- #docregion mat-autocomplete -->
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let option of options" [value]="option">
-        {{option}}
-      </mat-option>
+      @for (option of options; track option) {
+        <mat-option [value]="option">{{option}}</mat-option>
+      }
     </mat-autocomplete>
 <!-- #enddocregion mat-autocomplete -->
   </mat-form-field>
diff --git a/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts b/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts
index 18ee25c3dde5..1cd58ba7ceef 100644
--- a/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NgFor} from '@angular/common';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -19,7 +18,6 @@ import {MatFormFieldModule} from '@angular/material/form-field';
     MatInputModule,
     MatAutocompleteModule,
     ReactiveFormsModule,
-    NgFor,
   ],
 })
 export class AutocompleteSimpleExample {
diff --git a/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.html b/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.html
index 89f364c1fea8..ff06d1f31192 100644
--- a/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.html
+++ b/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.html
@@ -15,13 +15,15 @@
   </span>
   <span class="example-list-section">
     <ul>
-      <li *ngFor="let subtask of task.subtasks">
-        <mat-checkbox [(ngModel)]="subtask.completed"
-                      [color]="subtask.color"
-                      (ngModelChange)="updateAllComplete()">
-          {{subtask.name}}
-        </mat-checkbox>
-      </li>
+      @for (subtask of task.subtasks; track subtask) {
+        <li>
+          <mat-checkbox [(ngModel)]="subtask.completed"
+                        [color]="subtask.color"
+                        (ngModelChange)="updateAllComplete()">
+            {{subtask.name}}
+          </mat-checkbox>
+        </li>
+      }
     </ul>
   </span>
 </section>
diff --git a/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.ts b/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.ts
index 8a9dc89df453..1449ee250f02 100644
--- a/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.ts
+++ b/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.ts
@@ -1,7 +1,6 @@
 import {Component} from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
 import {FormsModule} from '@angular/forms';
-import {NgFor} from '@angular/common';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 
 export interface Task {
@@ -19,7 +18,7 @@ export interface Task {
   templateUrl: 'checkbox-overview-example.html',
   styleUrls: ['checkbox-overview-example.css'],
   standalone: true,
-  imports: [MatCheckboxModule, NgFor, FormsModule],
+  imports: [MatCheckboxModule, FormsModule],
 })
 export class CheckboxOverviewExample {
   task: Task = {
diff --git a/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html b/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html
index e8fa8d73bfc3..0e9f4a806f2b 100644
--- a/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html
+++ b/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.html
@@ -2,21 +2,23 @@
   <mat-form-field class="example-chip-list">
     <mat-label>Favorite Fruits</mat-label>
     <mat-chip-grid #chipGrid aria-label="Fruit selection">
-      <mat-chip-row *ngFor="let fruit of fruits" (removed)="remove(fruit)">
-        {{fruit}}
-        <button matChipRemove [attr.aria-label]="'remove ' + fruit">
-          <mat-icon>cancel</mat-icon>
-        </button>
-      </mat-chip-row>
+      @for (fruit of fruits; track fruit) {
+        <mat-chip-row (removed)="remove(fruit)">
+          {{fruit}}
+          <button matChipRemove [attr.aria-label]="'remove ' + fruit">
+            <mat-icon>cancel</mat-icon>
+          </button>
+        </mat-chip-row>
+      }
     </mat-chip-grid>
     <input placeholder="New Fruit..." #fruitInput [formControl]="fruitCtrl"
       [matChipInputFor]="chipGrid" [matAutocomplete]="auto"
       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
       (matChipInputTokenEnd)="add($event)"/>
     <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
-      <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
-        {{fruit}}
-      </mat-option>
+      @for (fruit of filteredFruits | async; track fruit) {
+        <mat-option [value]="fruit">{{fruit}}</mat-option>
+      }
     </mat-autocomplete>
   </mat-form-field>
 </form>
diff --git a/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts b/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts
index 9b6a27fad8bb..71b023377968 100644
--- a/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts
+++ b/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts
@@ -6,7 +6,7 @@ import {MatChipInputEvent, MatChipsModule} from '@angular/material/chips';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 import {MatIconModule} from '@angular/material/icon';
-import {NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {LiveAnnouncer} from '@angular/cdk/a11y';
 
@@ -22,7 +22,6 @@ import {LiveAnnouncer} from '@angular/cdk/a11y';
     FormsModule,
     MatFormFieldModule,
     MatChipsModule,
-    NgFor,
     MatIconModule,
     MatAutocompleteModule,
     ReactiveFormsModule,
diff --git a/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.html b/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.html
index b695a45e3d31..774899b66afc 100644
--- a/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.html
+++ b/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.html
@@ -1,12 +1,9 @@
 <mat-chip-set
   class="example-chip"
-  cdkDropList 
+  cdkDropList
   cdkDropListOrientation="horizontal"
   (cdkDropListDropped)="drop($event)">
-  <mat-chip
-    class="example-box"
-    cdkDrag
-    *ngFor="let vegetable of vegetables">
-    {{vegetable.name}}
-  </mat-chip>
+  @for (vegetable of vegetables; track vegetable) {
+    <mat-chip class="example-box" cdkDrag>{{vegetable.name}}</mat-chip>
+  }
 </mat-chip-set>
diff --git a/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.ts b/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.ts
index 1c5d60a490d0..130f643518cb 100644
--- a/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.ts
+++ b/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {CdkDragDrop, moveItemInArray, CdkDrag, CdkDropList} from '@angular/cdk/drag-drop';
-import {NgFor} from '@angular/common';
 import {MatChipsModule} from '@angular/material/chips';
 
 export interface Vegetable {
@@ -15,7 +14,7 @@ export interface Vegetable {
   templateUrl: 'chips-drag-drop-example.html',
   styleUrls: ['chips-drag-drop-example.css'],
   standalone: true,
-  imports: [MatChipsModule, CdkDropList, NgFor, CdkDrag],
+  imports: [MatChipsModule, CdkDropList, CdkDrag],
 })
 export class ChipsDragDropExample {
   vegetables: Vegetable[] = [
diff --git a/src/components-examples/material/chips/chips-form-control/chips-form-control-example.html b/src/components-examples/material/chips/chips-form-control/chips-form-control-example.html
index 72631a4b7cd7..d1dfeddd6c2c 100644
--- a/src/components-examples/material/chips/chips-form-control/chips-form-control-example.html
+++ b/src/components-examples/material/chips/chips-form-control/chips-form-control-example.html
@@ -8,12 +8,14 @@
 <mat-form-field class="example-form-field">
   <mat-label>Video keywords</mat-label>
   <mat-chip-grid #chipGrid aria-label="Enter keywords" [formControl]="formControl" >
-    <mat-chip-row *ngFor="let keyword of keywords" (removed)="removeKeyword(keyword)">
-      {{keyword}}
-      <button matChipRemove aria-label="'remove ' + keyword">
-        <mat-icon>cancel</mat-icon>
-      </button>
-    </mat-chip-row>
+    @for (keyword of keywords; track keyword) {
+      <mat-chip-row (removed)="removeKeyword(keyword)">
+        {{keyword}}
+        <button matChipRemove aria-label="'remove ' + keyword">
+          <mat-icon>cancel</mat-icon>
+        </button>
+      </mat-chip-row>
+    }
   </mat-chip-grid>
   <input placeholder="New keyword..."
           [matChipInputFor]="chipGrid"
diff --git a/src/components-examples/material/chips/chips-form-control/chips-form-control-example.ts b/src/components-examples/material/chips/chips-form-control/chips-form-control-example.ts
index b636165a1e85..edeccabf92b0 100644
--- a/src/components-examples/material/chips/chips-form-control/chips-form-control-example.ts
+++ b/src/components-examples/material/chips/chips-form-control/chips-form-control-example.ts
@@ -2,7 +2,6 @@ import {Component, inject} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatChipInputEvent, MatChipsModule} from '@angular/material/chips';
 import {MatIconModule} from '@angular/material/icon';
-import {NgFor} from '@angular/common';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatButtonModule} from '@angular/material/button';
 import {LiveAnnouncer} from '@angular/cdk/a11y';
@@ -21,7 +20,6 @@ import {LiveAnnouncer} from '@angular/cdk/a11y';
     MatChipsModule,
     FormsModule,
     ReactiveFormsModule,
-    NgFor,
     MatIconModule,
   ],
 })
diff --git a/src/components-examples/material/chips/chips-input/chips-input-example.html b/src/components-examples/material/chips/chips-input/chips-input-example.html
index 36b777baa9a7..e7eb968e48f7 100644
--- a/src/components-examples/material/chips/chips-input/chips-input-example.html
+++ b/src/components-examples/material/chips/chips-input/chips-input-example.html
@@ -1,16 +1,18 @@
 <mat-form-field class="example-chip-list">
   <mat-label>Favorite Fruits</mat-label>
   <mat-chip-grid #chipGrid aria-label="Enter fruits">
-    <mat-chip-row *ngFor="let fruit of fruits"
-                  (removed)="remove(fruit)"
-                  [editable]="true"
-                  (edited)="edit(fruit, $event)"
-                  [aria-description]="'press enter to edit ' + fruit.name">
-      {{fruit.name}}
-      <button matChipRemove [attr.aria-label]="'remove ' + fruit.name">
-        <mat-icon>cancel</mat-icon>
-      </button>
-    </mat-chip-row>
+    @for (fruit of fruits; track fruit) {
+      <mat-chip-row
+        (removed)="remove(fruit)"
+        [editable]="true"
+        (edited)="edit(fruit, $event)"
+        [aria-description]="'press enter to edit ' + fruit.name">
+        {{fruit.name}}
+        <button matChipRemove [attr.aria-label]="'remove ' + fruit.name">
+          <mat-icon>cancel</mat-icon>
+        </button>
+      </mat-chip-row>
+    }
     <input placeholder="New fruit..."
            [matChipInputFor]="chipGrid"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
diff --git a/src/components-examples/material/chips/chips-input/chips-input-example.ts b/src/components-examples/material/chips/chips-input/chips-input-example.ts
index 0d45c1973f97..57446f60bb49 100644
--- a/src/components-examples/material/chips/chips-input/chips-input-example.ts
+++ b/src/components-examples/material/chips/chips-input/chips-input-example.ts
@@ -2,7 +2,6 @@ import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {Component, inject} from '@angular/core';
 import {MatChipEditedEvent, MatChipInputEvent, MatChipsModule} from '@angular/material/chips';
 import {MatIconModule} from '@angular/material/icon';
-import {NgFor} from '@angular/common';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {LiveAnnouncer} from '@angular/cdk/a11y';
 
@@ -18,7 +17,7 @@ export interface Fruit {
   templateUrl: 'chips-input-example.html',
   styleUrls: ['chips-input-example.css'],
   standalone: true,
-  imports: [MatFormFieldModule, MatChipsModule, NgFor, MatIconModule],
+  imports: [MatFormFieldModule, MatChipsModule, MatIconModule],
 })
 export class ChipsInputExample {
   addOnBlur = true;
diff --git a/src/components-examples/material/chips/chips-stacked/chips-stacked-example.html b/src/components-examples/material/chips/chips-stacked/chips-stacked-example.html
index 93e63752e6fa..22b676f0ee49 100644
--- a/src/components-examples/material/chips/chips-stacked/chips-stacked-example.html
+++ b/src/components-examples/material/chips/chips-stacked/chips-stacked-example.html
@@ -1,5 +1,5 @@
 <mat-chip-listbox class="mat-mdc-chip-set-stacked" aria-label="Color selection">
-  <mat-chip-option *ngFor="let chip of availableColors" selected [color]="chip.color">
-    {{chip.name}}
-  </mat-chip-option>
-</mat-chip-listbox>
\ No newline at end of file
+  @for (chip of availableColors; track chip) {
+    <mat-chip-option selected [color]="chip.color">{{chip.name}}</mat-chip-option>
+  }
+</mat-chip-listbox>
diff --git a/src/components-examples/material/chips/chips-stacked/chips-stacked-example.ts b/src/components-examples/material/chips/chips-stacked/chips-stacked-example.ts
index 798e825d2c5f..0dde8fe84408 100644
--- a/src/components-examples/material/chips/chips-stacked/chips-stacked-example.ts
+++ b/src/components-examples/material/chips/chips-stacked/chips-stacked-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
-import {NgFor} from '@angular/common';
 import {MatChipsModule} from '@angular/material/chips';
 
 export interface ChipColor {
@@ -16,7 +15,7 @@ export interface ChipColor {
   templateUrl: 'chips-stacked-example.html',
   styleUrls: ['chips-stacked-example.css'],
   standalone: true,
-  imports: [MatChipsModule, NgFor],
+  imports: [MatChipsModule],
 })
 export class ChipsStackedExample {
   availableColors: ChipColor[] = [
diff --git a/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html b/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html
index 34b60d753dee..7d218f08c524 100644
--- a/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html
+++ b/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.html
@@ -8,8 +8,12 @@
   <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-date-range-picker #picker></mat-date-range-picker>
 
-  <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
-  <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
+  @if (range.controls.start.hasError('matStartDateInvalid')) {
+    <mat-error>Invalid start date</mat-error>
+  }
+  @if (range.controls.end.hasError('matEndDateInvalid')) {
+    <mat-error>Invalid end date</mat-error>
+  }
 </mat-form-field>
 
 <p>Selected range: {{range.value | json}}</p>
diff --git a/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.ts b/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.ts
index 2074169d3cfa..b1b4d92a3460 100644
--- a/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.ts
+++ b/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.ts
@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {FormGroup, FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NgIf, JsonPipe} from '@angular/common';
+import {JsonPipe} from '@angular/common';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatNativeDateModule} from '@angular/material/core';
@@ -15,7 +15,6 @@ import {MatNativeDateModule} from '@angular/material/core';
     MatDatepickerModule,
     FormsModule,
     ReactiveFormsModule,
-    NgIf,
     JsonPipe,
     MatNativeDateModule,
   ],
diff --git a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html
index 208548d84935..1dc59fb2450d 100644
--- a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html
+++ b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html
@@ -8,5 +8,7 @@
 </mat-form-field>
 
 <div class="example-events">
-  <div *ngFor="let e of events">{{e}}</div>
+  @for (e of events; track e) {
+    <div>{{e}}</div>
+  }
 </div>
diff --git a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.ts b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.ts
index 55c8a89fe8f3..beed6b8c22ad 100644
--- a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.ts
+++ b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {MatDatepickerInputEvent, MatDatepickerModule} from '@angular/material/datepicker';
-import {NgFor} from '@angular/common';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatNativeDateModule} from '@angular/material/core';
@@ -11,7 +10,7 @@ import {MatNativeDateModule} from '@angular/material/core';
   templateUrl: 'datepicker-events-example.html',
   styleUrls: ['datepicker-events-example.css'],
   standalone: true,
-  imports: [MatFormFieldModule, MatInputModule, MatNativeDateModule, MatDatepickerModule, NgFor],
+  imports: [MatFormFieldModule, MatInputModule, MatNativeDateModule, MatDatepickerModule],
 })
 export class DatepickerEventsExample {
   events: string[] = [];
diff --git a/src/components-examples/material/dialog/dialog-data/dialog-data-example-dialog.html b/src/components-examples/material/dialog/dialog-data/dialog-data-example-dialog.html
index 6d263bacf3c9..25b007c49e65 100644
--- a/src/components-examples/material/dialog/dialog-data/dialog-data-example-dialog.html
+++ b/src/components-examples/material/dialog/dialog-data/dialog-data-example-dialog.html
@@ -3,13 +3,19 @@ <h1 mat-dialog-title>Favorite Animal</h1>
   My favorite animal is:
   <ul>
     <li>
-      <span *ngIf="data.animal === 'panda'">&#10003;</span> Panda
+      @if (data.animal === 'panda') {
+        <span>&#10003;</span>
+      } Panda
     </li>
     <li>
-      <span *ngIf="data.animal === 'unicorn'">&#10003;</span> Unicorn
+      @if (data.animal === 'unicorn') {
+        <span>&#10003;</span>
+      } Unicorn
     </li>
     <li>
-      <span *ngIf="data.animal === 'lion'">&#10003;</span> Lion
+      @if (data.animal === 'lion') {
+        <span>&#10003;</span>
+      } Lion
     </li>
   </ul>
 </div>
diff --git a/src/components-examples/material/dialog/dialog-data/dialog-data-example.ts b/src/components-examples/material/dialog/dialog-data/dialog-data-example.ts
index 54a160dc3dea..4b604892a7b2 100644
--- a/src/components-examples/material/dialog/dialog-data/dialog-data-example.ts
+++ b/src/components-examples/material/dialog/dialog-data/dialog-data-example.ts
@@ -1,6 +1,5 @@
 import {Component, Inject} from '@angular/core';
 import {MatDialog, MAT_DIALOG_DATA, MatDialogModule} from '@angular/material/dialog';
-import {NgIf} from '@angular/common';
 import {MatButtonModule} from '@angular/material/button';
 
 export interface DialogData {
@@ -32,7 +31,7 @@ export class DialogDataExample {
   selector: 'dialog-data-example-dialog',
   templateUrl: 'dialog-data-example-dialog.html',
   standalone: true,
-  imports: [MatDialogModule, NgIf],
+  imports: [MatDialogModule],
 })
 export class DialogDataExampleDialog {
   constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
diff --git a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html
index 5e7be5d347ca..c3f033499dad 100644
--- a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html
+++ b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.html
@@ -8,7 +8,7 @@
   <li>
     <button mat-raised-button (click)="openDialog()">Pick one</button>
   </li>
-  <li *ngIf="animal">
-    You chose: <em>{{animal}}</em>
-  </li>
+  @if (animal) {
+    <li>You chose: <em>{{animal}}</em></li>
+  }
 </ol>
diff --git a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.ts b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.ts
index 218ed8d512fc..84a6739e3ad9 100644
--- a/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.ts
+++ b/src/components-examples/material/dialog/dialog-overview/dialog-overview-example.ts
@@ -1,6 +1,5 @@
 import {Component, Inject} from '@angular/core';
 import {MatDialog, MAT_DIALOG_DATA, MatDialogRef, MatDialogModule} from '@angular/material/dialog';
-import {NgIf} from '@angular/common';
 import {MatButtonModule} from '@angular/material/button';
 import {FormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
@@ -18,14 +17,7 @@ export interface DialogData {
   selector: 'dialog-overview-example',
   templateUrl: 'dialog-overview-example.html',
   standalone: true,
-  imports: [
-    MatFormFieldModule,
-    MatInputModule,
-    FormsModule,
-    MatButtonModule,
-    NgIf,
-    MatDialogModule,
-  ],
+  imports: [MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatDialogModule],
 })
 export class DialogOverviewExample {
   animal: string;
diff --git a/src/components-examples/material/form-field/form-field-error/form-field-error-example.html b/src/components-examples/material/form-field/form-field-error/form-field-error-example.html
index 4e19231827fa..56c5be722ebf 100644
--- a/src/components-examples/material/form-field/form-field-error/form-field-error-example.html
+++ b/src/components-examples/material/form-field/form-field-error/form-field-error-example.html
@@ -2,6 +2,8 @@
   <mat-form-field>
     <mat-label>Enter your email</mat-label>
     <input matInput placeholder="pat@example.com" [formControl]="email" required>
-    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
+    @if (email.invalid) {
+      <mat-error>{{getErrorMessage()}}</mat-error>
+    }
   </mat-form-field>
 </div>
diff --git a/src/components-examples/material/form-field/form-field-error/form-field-error-example.ts b/src/components-examples/material/form-field/form-field-error/form-field-error-example.ts
index 46f771017105..c5a18580672e 100644
--- a/src/components-examples/material/form-field/form-field-error/form-field-error-example.ts
+++ b/src/components-examples/material/form-field/form-field-error/form-field-error-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {FormControl, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NgIf} from '@angular/common';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -10,7 +9,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   templateUrl: 'form-field-error-example.html',
   styleUrls: ['form-field-error-example.css'],
   standalone: true,
-  imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, NgIf],
+  imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule],
 })
 export class FormFieldErrorExample {
   email = new FormControl('', [Validators.required, Validators.email]);
diff --git a/src/components-examples/material/grid-list/grid-list-dynamic/grid-list-dynamic-example.html b/src/components-examples/material/grid-list/grid-list-dynamic/grid-list-dynamic-example.html
index c79507b49a6f..48eb283308bc 100644
--- a/src/components-examples/material/grid-list/grid-list-dynamic/grid-list-dynamic-example.html
+++ b/src/components-examples/material/grid-list/grid-list-dynamic/grid-list-dynamic-example.html
@@ -1,9 +1,8 @@
 <mat-grid-list cols="4" rowHeight="100px">
-  <mat-grid-tile
-      *ngFor="let tile of tiles"
+  @for (tile of tiles; track tile) {
+    <mat-grid-tile
       [colspan]="tile.cols"
       [rowspan]="tile.rows"
-      [style.background]="tile.color">
-    {{tile.text}}
-  </mat-grid-tile>
+      [style.background]="tile.color">{{tile.text}}</mat-grid-tile>
+  }
 </mat-grid-list>
diff --git a/src/components-examples/material/grid-list/grid-list-dynamic/grid-list-dynamic-example.ts b/src/components-examples/material/grid-list/grid-list-dynamic/grid-list-dynamic-example.ts
index 6c2c35145277..a48a547a3842 100644
--- a/src/components-examples/material/grid-list/grid-list-dynamic/grid-list-dynamic-example.ts
+++ b/src/components-examples/material/grid-list/grid-list-dynamic/grid-list-dynamic-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {MatGridListModule} from '@angular/material/grid-list';
 
 export interface Tile {
@@ -16,7 +15,7 @@ export interface Tile {
   selector: 'grid-list-dynamic-example',
   templateUrl: 'grid-list-dynamic-example.html',
   standalone: true,
-  imports: [MatGridListModule, NgFor],
+  imports: [MatGridListModule],
 })
 export class GridListDynamicExample {
   tiles: Tile[] = [
diff --git a/src/components-examples/material/input/input-clearable/input-clearable-example.html b/src/components-examples/material/input/input-clearable/input-clearable-example.html
index 82e3c9fc48cd..3d7d9a985f9d 100644
--- a/src/components-examples/material/input/input-clearable/input-clearable-example.html
+++ b/src/components-examples/material/input/input-clearable/input-clearable-example.html
@@ -1,7 +1,9 @@
 <mat-form-field class="example-form-field">
   <mat-label>Clearable input</mat-label>
   <input matInput type="text" [(ngModel)]="value">
-  <button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
-    <mat-icon>close</mat-icon>
-  </button>
+  @if (value) {
+    <button matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
+      <mat-icon>close</mat-icon>
+    </button>
+  }
 </mat-form-field>
diff --git a/src/components-examples/material/input/input-clearable/input-clearable-example.ts b/src/components-examples/material/input/input-clearable/input-clearable-example.ts
index 326826be3ee7..4daccba02bf0 100644
--- a/src/components-examples/material/input/input-clearable/input-clearable-example.ts
+++ b/src/components-examples/material/input/input-clearable/input-clearable-example.ts
@@ -1,7 +1,6 @@
 import {Component} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
-import {NgIf} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -14,7 +13,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   templateUrl: './input-clearable-example.html',
   styleUrls: ['./input-clearable-example.css'],
   standalone: true,
-  imports: [MatFormFieldModule, MatInputModule, FormsModule, NgIf, MatButtonModule, MatIconModule],
+  imports: [MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatIconModule],
 })
 export class InputClearableExample {
   value = 'Clear me';
diff --git a/src/components-examples/material/input/input-error-state-matcher/input-error-state-matcher-example.html b/src/components-examples/material/input/input-error-state-matcher/input-error-state-matcher-example.html
index fecd22f0c4bf..a40618bf738d 100644
--- a/src/components-examples/material/input/input-error-state-matcher/input-error-state-matcher-example.html
+++ b/src/components-examples/material/input/input-error-state-matcher/input-error-state-matcher-example.html
@@ -4,11 +4,11 @@
     <input type="email" matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher"
            placeholder="Ex. pat@example.com">
     <mat-hint>Errors appear instantly!</mat-hint>
-    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
-      Please enter a valid email address
-    </mat-error>
-    <mat-error *ngIf="emailFormControl.hasError('required')">
-      Email is <strong>required</strong>
-    </mat-error>
+    @if (emailFormControl.hasError('email') && !emailFormControl.hasError('required')) {
+      <mat-error>Please enter a valid email address</mat-error>
+    }
+    @if (emailFormControl.hasError('required')) {
+      <mat-error>Email is <strong>required</strong></mat-error>
+    }
   </mat-form-field>
 </form>
diff --git a/src/components-examples/material/input/input-error-state-matcher/input-error-state-matcher-example.ts b/src/components-examples/material/input/input-error-state-matcher/input-error-state-matcher-example.ts
index 17d969377565..690a8b6da144 100644
--- a/src/components-examples/material/input/input-error-state-matcher/input-error-state-matcher-example.ts
+++ b/src/components-examples/material/input/input-error-state-matcher/input-error-state-matcher-example.ts
@@ -8,7 +8,6 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 import {ErrorStateMatcher} from '@angular/material/core';
-import {NgIf} from '@angular/common';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -26,7 +25,7 @@ export class MyErrorStateMatcher implements ErrorStateMatcher {
   templateUrl: './input-error-state-matcher-example.html',
   styleUrls: ['./input-error-state-matcher-example.css'],
   standalone: true,
-  imports: [FormsModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, NgIf],
+  imports: [FormsModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
 })
 export class InputErrorStateMatcherExample {
   emailFormControl = new FormControl('', [Validators.required, Validators.email]);
diff --git a/src/components-examples/material/input/input-errors/input-errors-example.html b/src/components-examples/material/input/input-errors/input-errors-example.html
index 12cd2e99961b..bb4afaae5f3e 100644
--- a/src/components-examples/material/input/input-errors/input-errors-example.html
+++ b/src/components-examples/material/input/input-errors/input-errors-example.html
@@ -2,11 +2,11 @@
   <mat-form-field class="example-full-width">
     <mat-label>Email</mat-label>
     <input type="email" matInput [formControl]="emailFormControl" placeholder="Ex. pat@example.com">
-    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
-      Please enter a valid email address
-    </mat-error>
-    <mat-error *ngIf="emailFormControl.hasError('required')">
-      Email is <strong>required</strong>
-    </mat-error>
+    @if (emailFormControl.hasError('email') && !emailFormControl.hasError('required')) {
+      <mat-error>Please enter a valid email address</mat-error>
+    }
+    @if (emailFormControl.hasError('required')) {
+      <mat-error>Email is <strong>required</strong></mat-error>
+    }
   </mat-form-field>
 </form>
diff --git a/src/components-examples/material/input/input-errors/input-errors-example.ts b/src/components-examples/material/input/input-errors/input-errors-example.ts
index 6d2a6acfd3a2..c23f6b83ced6 100644
--- a/src/components-examples/material/input/input-errors/input-errors-example.ts
+++ b/src/components-examples/material/input/input-errors/input-errors-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {FormControl, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NgIf} from '@angular/common';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -12,7 +11,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   templateUrl: 'input-errors-example.html',
   styleUrls: ['input-errors-example.css'],
   standalone: true,
-  imports: [FormsModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, NgIf],
+  imports: [FormsModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
 })
 export class InputErrorsExample {
   emailFormControl = new FormControl('', [Validators.required, Validators.email]);
diff --git a/src/components-examples/material/list/list-sections/list-sections-example.html b/src/components-examples/material/list/list-sections/list-sections-example.html
index 98156571a877..644a37e844d2 100644
--- a/src/components-examples/material/list/list-sections/list-sections-example.html
+++ b/src/components-examples/material/list/list-sections/list-sections-example.html
@@ -1,15 +1,19 @@
 <mat-list>
   <div mat-subheader>Folders</div>
-  <mat-list-item *ngFor="let folder of folders">
-    <mat-icon matListItemIcon>folder</mat-icon>
-    <div matListItemTitle>{{folder.name}}</div>
-    <div matListItemLine>{{folder.updated | date}}</div>
-  </mat-list-item>
+  @for (folder of folders; track folder) {
+    <mat-list-item>
+      <mat-icon matListItemIcon>folder</mat-icon>
+      <div matListItemTitle>{{folder.name}}</div>
+      <div matListItemLine>{{folder.updated | date}}</div>
+    </mat-list-item>
+  }
   <mat-divider></mat-divider>
   <div mat-subheader>Notes</div>
-  <mat-list-item *ngFor="let note of notes">
-    <mat-icon matListItemIcon>note</mat-icon>
-    <div matListItemTitle>{{note.name}}</div>
-    <div matListItemLine>{{note.updated | date}}</div>
-  </mat-list-item>
+  @for (note of notes; track note) {
+    <mat-list-item>
+      <mat-icon matListItemIcon>note</mat-icon>
+      <div matListItemTitle>{{note.name}}</div>
+      <div matListItemLine>{{note.updated | date}}</div>
+    </mat-list-item>
+  }
 </mat-list>
diff --git a/src/components-examples/material/list/list-sections/list-sections-example.ts b/src/components-examples/material/list/list-sections/list-sections-example.ts
index 0bdbf01af0d6..a6b2bc21ae01 100644
--- a/src/components-examples/material/list/list-sections/list-sections-example.ts
+++ b/src/components-examples/material/list/list-sections/list-sections-example.ts
@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {NgFor, DatePipe} from '@angular/common';
+import {DatePipe} from '@angular/common';
 import {MatListModule} from '@angular/material/list';
 
 export interface Section {
@@ -17,7 +17,7 @@ export interface Section {
   styleUrls: ['list-sections-example.css'],
   templateUrl: 'list-sections-example.html',
   standalone: true,
-  imports: [MatListModule, NgFor, MatIconModule, MatDividerModule, DatePipe],
+  imports: [MatListModule, MatIconModule, MatDividerModule, DatePipe],
 })
 export class ListSectionsExample {
   folders: Section[] = [
diff --git a/src/components-examples/material/list/list-selection/list-selection-example.html b/src/components-examples/material/list/list-selection/list-selection-example.html
index d068febecc21..a269256b20a8 100644
--- a/src/components-examples/material/list/list-selection/list-selection-example.html
+++ b/src/components-examples/material/list/list-selection/list-selection-example.html
@@ -1,7 +1,7 @@
 <mat-selection-list #shoes>
-  <mat-list-option *ngFor="let shoe of typesOfShoes">
-    {{shoe}}
-  </mat-list-option>
+  @for (shoe of typesOfShoes; track shoe) {
+    <mat-list-option>{{shoe}}</mat-list-option>
+  }
 </mat-selection-list>
 
 <p>
diff --git a/src/components-examples/material/list/list-selection/list-selection-example.ts b/src/components-examples/material/list/list-selection/list-selection-example.ts
index 2d5c04ecb1a5..2209654a7771 100644
--- a/src/components-examples/material/list/list-selection/list-selection-example.ts
+++ b/src/components-examples/material/list/list-selection/list-selection-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {MatListModule} from '@angular/material/list';
 
 /**
@@ -9,7 +8,7 @@ import {MatListModule} from '@angular/material/list';
   selector: 'list-selection-example',
   templateUrl: 'list-selection-example.html',
   standalone: true,
-  imports: [MatListModule, NgFor],
+  imports: [MatListModule],
 })
 export class ListSelectionExample {
   typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
diff --git a/src/components-examples/material/list/list-single-selection/list-single-selection-example.html b/src/components-examples/material/list/list-single-selection/list-single-selection-example.html
index c08d6106d477..0c653bd3b6da 100644
--- a/src/components-examples/material/list/list-single-selection/list-single-selection-example.html
+++ b/src/components-examples/material/list/list-single-selection/list-single-selection-example.html
@@ -1,7 +1,7 @@
 <mat-selection-list #shoes [multiple]="false">
-  <mat-list-option *ngFor="let shoe of typesOfShoes" [value]="shoe">
-    {{shoe}}
-  </mat-list-option>
+  @for (shoe of typesOfShoes; track shoe) {
+    <mat-list-option [value]="shoe">{{shoe}}</mat-list-option>
+  }
 </mat-selection-list>
 
 <p>
diff --git a/src/components-examples/material/list/list-single-selection/list-single-selection-example.ts b/src/components-examples/material/list/list-single-selection/list-single-selection-example.ts
index c9a06a75e45c..c848f921fe8c 100644
--- a/src/components-examples/material/list/list-single-selection/list-single-selection-example.ts
+++ b/src/components-examples/material/list/list-single-selection/list-single-selection-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {MatListModule} from '@angular/material/list';
 
 /**
@@ -9,7 +8,7 @@ import {MatListModule} from '@angular/material/list';
   selector: 'list-single-selection-example',
   templateUrl: 'list-single-selection-example.html',
   standalone: true,
-  imports: [MatListModule, NgFor],
+  imports: [MatListModule],
 })
 export class ListSingleSelectionExample {
   typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
diff --git a/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.html b/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.html
index 1e658b2cced3..100f7afff8fc 100644
--- a/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.html
+++ b/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.html
@@ -35,18 +35,22 @@ <h2 class="example-h2">Progress bar configuration</h2>
       </mat-radio-group>
     </section>
 
-    <section class="example-section" *ngIf="mode === 'determinate' || mode === 'buffer'">
-      <label class="example-margin">Progress:</label>
-      <mat-slider class="example-margin">
-        <input type="range" [(ngModel)]="value" matSliderThumb>
-      </mat-slider>
-    </section>
-    <section class="example-section" *ngIf="mode === 'buffer'">
-      <label class="example-margin">Buffer:</label>
-      <mat-slider class="example-margin">
-        <input type="range" [(ngModel)]="bufferValue" matSliderThumb>
-      </mat-slider>
-    </section>
+    @if (mode === 'determinate' || mode === 'buffer') {
+      <section class="example-section">
+        <label class="example-margin">Progress:</label>
+        <mat-slider class="example-margin">
+          <input type="range" [(ngModel)]="value" matSliderThumb>
+        </mat-slider>
+      </section>
+    }
+    @if (mode === 'buffer') {
+      <section class="example-section">
+        <label class="example-margin">Buffer:</label>
+        <mat-slider class="example-margin">
+          <input type="range" [(ngModel)]="bufferValue" matSliderThumb>
+        </mat-slider>
+      </section>
+    }
   </mat-card-content>
 </mat-card>
 
diff --git a/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.ts b/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.ts
index 34fccfdc820e..0bf1fb2e69d1 100644
--- a/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.ts
+++ b/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.ts
@@ -2,7 +2,6 @@ import {Component} from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
 import {ProgressBarMode, MatProgressBarModule} from '@angular/material/progress-bar';
 import {MatSliderModule} from '@angular/material/slider';
-import {NgIf} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {MatRadioModule} from '@angular/material/radio';
 import {MatCardModule} from '@angular/material/card';
@@ -15,14 +14,7 @@ import {MatCardModule} from '@angular/material/card';
   templateUrl: 'progress-bar-configurable-example.html',
   styleUrls: ['progress-bar-configurable-example.css'],
   standalone: true,
-  imports: [
-    MatCardModule,
-    MatRadioModule,
-    FormsModule,
-    NgIf,
-    MatSliderModule,
-    MatProgressBarModule,
-  ],
+  imports: [MatCardModule, MatRadioModule, FormsModule, MatSliderModule, MatProgressBarModule],
 })
 export class ProgressBarConfigurableExample {
   color: ThemePalette = 'primary';
diff --git a/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.html b/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.html
index 8de6e3fdc460..27c9712774d0 100644
--- a/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.html
+++ b/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.html
@@ -29,12 +29,14 @@ <h2 class="example-h2">Progress spinner configuration</h2>
       </mat-radio-group>
     </section>
 
-    <section class="example-section" *ngIf="mode === 'determinate'">
-      <label class="example-margin">Progress:</label>
-      <mat-slider class="example-margin">
-        <input type="range" [(ngModel)]="value" matSliderThumb>
-      </mat-slider>
-    </section>
+    @if (mode === 'determinate') {
+      <section class="example-section">
+        <label class="example-margin">Progress:</label>
+        <mat-slider class="example-margin">
+          <input type="range" [(ngModel)]="value" matSliderThumb>
+        </mat-slider>
+      </section>
+    }
   </mat-card-content>
 </mat-card>
 
diff --git a/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.ts b/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.ts
index 9317f7cac678..a6cf3c5a6b6c 100644
--- a/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.ts
+++ b/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.ts
@@ -2,7 +2,6 @@ import {Component} from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
 import {ProgressSpinnerMode, MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSliderModule} from '@angular/material/slider';
-import {NgIf} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {MatRadioModule} from '@angular/material/radio';
 import {MatCardModule} from '@angular/material/card';
@@ -15,14 +14,7 @@ import {MatCardModule} from '@angular/material/card';
   templateUrl: 'progress-spinner-configurable-example.html',
   styleUrls: ['progress-spinner-configurable-example.css'],
   standalone: true,
-  imports: [
-    MatCardModule,
-    MatRadioModule,
-    FormsModule,
-    NgIf,
-    MatSliderModule,
-    MatProgressSpinnerModule,
-  ],
+  imports: [MatCardModule, MatRadioModule, FormsModule, MatSliderModule, MatProgressSpinnerModule],
 })
 export class ProgressSpinnerConfigurableExample {
   color: ThemePalette = 'primary';
diff --git a/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.html b/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.html
index 5369faa5589b..2908217637ae 100644
--- a/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.html
+++ b/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.html
@@ -3,8 +3,8 @@
   aria-labelledby="example-radio-group-label"
   class="example-radio-group"
   [(ngModel)]="favoriteSeason">
-  <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
-    {{season}}
-  </mat-radio-button>
+  @for (season of seasons; track season) {
+    <mat-radio-button class="example-radio-button" [value]="season">{{season}}</mat-radio-button>
+  }
 </mat-radio-group>
 <div>Your favorite season is: {{favoriteSeason}}</div>
diff --git a/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.ts b/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.ts
index c2ecf4d85d95..6af67740ee0f 100644
--- a/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.ts
+++ b/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {MatRadioModule} from '@angular/material/radio';
 
@@ -11,7 +10,7 @@ import {MatRadioModule} from '@angular/material/radio';
   templateUrl: 'radio-ng-model-example.html',
   styleUrls: ['radio-ng-model-example.css'],
   standalone: true,
-  imports: [MatRadioModule, FormsModule, NgFor],
+  imports: [MatRadioModule, FormsModule],
 })
 export class RadioNgModelExample {
   favoriteSeason: string;
diff --git a/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.html b/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.html
index e768a8908899..522a6b329b9a 100644
--- a/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.html
+++ b/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.html
@@ -3,10 +3,14 @@
   <mat-select [formControl]="toppings" multiple>
     <mat-select-trigger>
       {{toppings.value?.[0] || ''}}
-      <span *ngIf="(toppings.value?.length || 0) > 1" class="example-additional-selection">
-        (+{{(toppings.value?.length || 0) - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}})
-      </span>
+      @if ((toppings.value?.length || 0) > 1) {
+        <span class="example-additional-selection">
+          (+{{(toppings.value?.length || 0) - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}})
+        </span>
+      }
     </mat-select-trigger>
-    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
+    @for (topping of toppingList; track topping) {
+  <mat-option [value]="topping">{{topping}}</mat-option>
+}
   </mat-select>
 </mat-form-field>
diff --git a/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.ts b/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.ts
index 40f94c5e9476..98fbd0cf8f8c 100644
--- a/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.ts
+++ b/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NgIf, NgFor} from '@angular/common';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -10,7 +9,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   templateUrl: 'select-custom-trigger-example.html',
   styleUrls: ['select-custom-trigger-example.css'],
   standalone: true,
-  imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule, NgIf, NgFor],
+  imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule],
 })
 export class SelectCustomTriggerExample {
   toppings = new FormControl('');
diff --git a/src/components-examples/material/select/select-error-state-matcher/select-error-state-matcher-example.html b/src/components-examples/material/select/select-error-state-matcher/select-error-state-matcher-example.html
index 9e5f17b1a027..8e4c2143599e 100644
--- a/src/components-examples/material/select/select-error-state-matcher/select-error-state-matcher-example.html
+++ b/src/components-examples/material/select/select-error-state-matcher/select-error-state-matcher-example.html
@@ -7,10 +7,12 @@ <h4>mat-select</h4>
     <mat-option value="invalid">Invalid option</mat-option>
   </mat-select>
   <mat-hint>Errors appear instantly!</mat-hint>
-  <mat-error *ngIf="selected.hasError('required')">You must make a selection</mat-error>
-  <mat-error *ngIf="selected.hasError('pattern') && !selected.hasError('required')">
-    Your selection is invalid
-  </mat-error>
+  @if (selected.hasError('required')) {
+    <mat-error>You must make a selection</mat-error>
+  }
+  @if (selected.hasError('pattern') && !selected.hasError('required')) {
+    <mat-error>Your selection is invalid</mat-error>
+  }
 </mat-form-field>
 
 <h4>native html select</h4>
@@ -21,8 +23,10 @@ <h4>native html select</h4>
     <option value="valid" selected>Valid option</option>
     <option value="invalid">Invalid option</option>
   </select>
-  <mat-error *ngIf="nativeSelectFormControl.hasError('required')">You must make a selection</mat-error>
-  <mat-error *ngIf="nativeSelectFormControl.hasError('pattern') && !nativeSelectFormControl.hasError('required')">
-    Your selection is invalid
-  </mat-error>
+  @if (nativeSelectFormControl.hasError('required')) {
+    <mat-error>You must make a selection</mat-error>
+  }
+  @if (nativeSelectFormControl.hasError('pattern') && !nativeSelectFormControl.hasError('required')) {
+    <mat-error>Your selection is invalid</mat-error>
+  }
 </mat-form-field>
diff --git a/src/components-examples/material/select/select-error-state-matcher/select-error-state-matcher-example.ts b/src/components-examples/material/select/select-error-state-matcher/select-error-state-matcher-example.ts
index 6b6bdc8e5adb..5d590fc02348 100644
--- a/src/components-examples/material/select/select-error-state-matcher/select-error-state-matcher-example.ts
+++ b/src/components-examples/material/select/select-error-state-matcher/select-error-state-matcher-example.ts
@@ -9,7 +9,6 @@ import {
 } from '@angular/forms';
 import {ErrorStateMatcher} from '@angular/material/core';
 import {MatInputModule} from '@angular/material/input';
-import {NgIf} from '@angular/common';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -26,14 +25,7 @@ export class MyErrorStateMatcher implements ErrorStateMatcher {
   selector: 'select-error-state-matcher-example',
   templateUrl: 'select-error-state-matcher-example.html',
   standalone: true,
-  imports: [
-    MatFormFieldModule,
-    MatSelectModule,
-    FormsModule,
-    ReactiveFormsModule,
-    NgIf,
-    MatInputModule,
-  ],
+  imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule, MatInputModule],
 })
 export class SelectErrorStateMatcherExample {
   selected = new FormControl('valid', [Validators.required, Validators.pattern('valid')]);
diff --git a/src/components-examples/material/select/select-form/select-form-example.html b/src/components-examples/material/select/select-form/select-form-example.html
index f2b02b6a4e56..3b04b2847f74 100644
--- a/src/components-examples/material/select/select-form/select-form-example.html
+++ b/src/components-examples/material/select/select-form/select-form-example.html
@@ -3,9 +3,9 @@ <h4>mat-select</h4>
   <mat-form-field>
     <mat-label>Favorite food</mat-label>
     <mat-select [(ngModel)]="selectedValue" name="food">
-      <mat-option *ngFor="let food of foods" [value]="food.value">
-        {{food.viewValue}}
-      </mat-option>
+      @for (food of foods; track food) {
+        <mat-option [value]="food.value">{{food.viewValue}}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <p> Selected food: {{selectedValue}} </p>
@@ -14,9 +14,9 @@ <h4>native html select</h4>
     <mat-label>Favorite car</mat-label>
     <select matNativeControl [(ngModel)]="selectedCar" name="car">
       <option value="" selected></option>
-      <option *ngFor="let car of cars" [value]="car.value">
-        {{car.viewValue}}
-      </option>
+      @for (car of cars; track car) {
+        <option [value]="car.value">{{car.viewValue}}</option>
+      }
     </select>
   </mat-form-field>
   <p> Selected car: {{selectedCar}} </p>
diff --git a/src/components-examples/material/select/select-form/select-form-example.ts b/src/components-examples/material/select/select-form/select-form-example.ts
index 5e87a68ea320..e06de0971da4 100644
--- a/src/components-examples/material/select/select-form/select-form-example.ts
+++ b/src/components-examples/material/select/select-form/select-form-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {MatInputModule} from '@angular/material/input';
-import {NgFor} from '@angular/common';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {FormsModule} from '@angular/forms';
@@ -22,7 +21,7 @@ interface Car {
   selector: 'select-form-example',
   templateUrl: 'select-form-example.html',
   standalone: true,
-  imports: [FormsModule, MatFormFieldModule, MatSelectModule, NgFor, MatInputModule],
+  imports: [FormsModule, MatFormFieldModule, MatSelectModule, MatInputModule],
 })
 export class SelectFormExample {
   selectedValue: string;
diff --git a/src/components-examples/material/select/select-harness/select-harness-example.html b/src/components-examples/material/select/select-harness/select-harness-example.html
index e41f610c08d1..687e19334a62 100644
--- a/src/components-examples/material/select/select-harness/select-harness-example.html
+++ b/src/components-examples/material/select/select-harness/select-harness-example.html
@@ -1,8 +1,8 @@
 <mat-form-field>
   <mat-label>Favorite food</mat-label>
   <mat-select>
-    <mat-option *ngFor="let food of foods" [value]="food.value">
-      {{food.viewValue}}
-    </mat-option>
+    @for (food of foods; track food) {
+      <mat-option [value]="food.value">{{food.viewValue}}</mat-option>
+    }
   </mat-select>
 </mat-form-field>
diff --git a/src/components-examples/material/select/select-harness/select-harness-example.ts b/src/components-examples/material/select/select-harness/select-harness-example.ts
index 5c7347f61b31..d1ea9f2108fa 100644
--- a/src/components-examples/material/select/select-harness/select-harness-example.ts
+++ b/src/components-examples/material/select/select-harness/select-harness-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -10,7 +9,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   selector: 'select-harness-example',
   templateUrl: 'select-harness-example.html',
   standalone: true,
-  imports: [MatFormFieldModule, MatSelectModule, NgFor],
+  imports: [MatFormFieldModule, MatSelectModule],
 })
 export class SelectHarnessExample {
   foods = [
diff --git a/src/components-examples/material/select/select-hint-error/select-hint-error-example.html b/src/components-examples/material/select/select-hint-error/select-hint-error-example.html
index d10b0d422ea4..75909c429dc0 100644
--- a/src/components-examples/material/select/select-hint-error/select-hint-error-example.html
+++ b/src/components-examples/material/select/select-hint-error/select-hint-error-example.html
@@ -3,11 +3,13 @@ <h4>mat select</h4>
   <mat-label>Favorite animal</mat-label>
   <mat-select [formControl]="animalControl" required>
     <mat-option>--</mat-option>
-    <mat-option *ngFor="let animal of animals" [value]="animal">
-      {{animal.name}}
-    </mat-option>
+    @for (animal of animals; track animal) {
+      <mat-option [value]="animal">{{animal.name}}</mat-option>
+    }
   </mat-select>
-  <mat-error *ngIf="animalControl.hasError('required')">Please choose an animal</mat-error>
+  @if (animalControl.hasError('required')) {
+    <mat-error>Please choose an animal</mat-error>
+  }
   <mat-hint>{{animalControl.value?.sound}}</mat-hint>
 </mat-form-field>
 
@@ -20,9 +22,9 @@ <h4>native html select</h4>
     <option value="mercedes">Mercedes</option>
     <option value="audi">Audi</option>
   </select>
-  <mat-error *ngIf="selectFormControl.hasError('required')">
-    This field is required
-  </mat-error>
+  @if (selectFormControl.hasError('required')) {
+    <mat-error>This field is required</mat-error>
+  }
   <mat-hint>You can pick up your favorite car here</mat-hint>
 </mat-form-field>
 
diff --git a/src/components-examples/material/select/select-hint-error/select-hint-error-example.ts b/src/components-examples/material/select/select-hint-error/select-hint-error-example.ts
index 653d4958ba15..736d88f74557 100644
--- a/src/components-examples/material/select/select-hint-error/select-hint-error-example.ts
+++ b/src/components-examples/material/select/select-hint-error/select-hint-error-example.ts
@@ -1,7 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl, Validators, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
-import {NgFor, NgIf} from '@angular/common';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -15,15 +14,7 @@ interface Animal {
   selector: 'select-hint-error-example',
   templateUrl: 'select-hint-error-example.html',
   standalone: true,
-  imports: [
-    MatFormFieldModule,
-    MatSelectModule,
-    FormsModule,
-    ReactiveFormsModule,
-    NgFor,
-    NgIf,
-    MatInputModule,
-  ],
+  imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule, MatInputModule],
 })
 export class SelectHintErrorExample {
   animalControl = new FormControl<Animal | null>(null, Validators.required);
diff --git a/src/components-examples/material/select/select-initial-value/select-initial-value-example.html b/src/components-examples/material/select/select-initial-value/select-initial-value-example.html
index a1cf4d269b7a..40d617b8346e 100644
--- a/src/components-examples/material/select/select-initial-value/select-initial-value-example.html
+++ b/src/components-examples/material/select/select-initial-value/select-initial-value-example.html
@@ -3,7 +3,9 @@ <h4>Basic mat-select with initial value</h4>
   <mat-label>Favorite Food</mat-label>
   <mat-select [(value)]="selectedFood">
     <mat-option></mat-option>
-    <mat-option [value]="option.value" *ngFor="let option of foods">{{ option.viewValue }}</mat-option>
+    @for (option of foods; track option) {
+      <mat-option [value]="option.value">{{ option.viewValue }}</mat-option>
+    }
   </mat-select>
 </mat-form-field>
 <p>You selected: {{selectedFood}}</p>
@@ -13,8 +15,10 @@ <h4>Basic native select with initial value</h4>
   <mat-label>Favorite Car</mat-label>
   <select matNativeControl (change)="selectCar($event)">
     <option value=""></option>
-    <option *ngFor="let option of cars" [value]="option.value"
+    @for (option of cars; track option) {
+      <option [value]="option.value"
             [selected]="selectedCar === option.value">{{ option.viewValue }}</option>
+    }
   </select>
 </mat-form-field>
 <p>You selected: {{selectedCar}}</p>
diff --git a/src/components-examples/material/select/select-initial-value/select-initial-value-example.ts b/src/components-examples/material/select/select-initial-value/select-initial-value-example.ts
index 0688b7f3539f..dfa6782a0eef 100644
--- a/src/components-examples/material/select/select-initial-value/select-initial-value-example.ts
+++ b/src/components-examples/material/select/select-initial-value/select-initial-value-example.ts
@@ -1,7 +1,6 @@
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
-import {NgFor} from '@angular/common';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -22,7 +21,7 @@ interface Car {
   selector: 'select-initial-value-example',
   templateUrl: 'select-initial-value-example.html',
   standalone: true,
-  imports: [MatFormFieldModule, MatSelectModule, NgFor, MatInputModule, FormsModule],
+  imports: [MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule],
 })
 export class SelectInitialValueExample {
   foods: Food[] = [
diff --git a/src/components-examples/material/select/select-multiple/select-multiple-example.html b/src/components-examples/material/select/select-multiple/select-multiple-example.html
index 2f617c7221fc..1387a62bd98c 100644
--- a/src/components-examples/material/select/select-multiple/select-multiple-example.html
+++ b/src/components-examples/material/select/select-multiple/select-multiple-example.html
@@ -1,6 +1,8 @@
 <mat-form-field>
   <mat-label>Toppings</mat-label>
   <mat-select [formControl]="toppings" multiple>
-    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
+    @for (topping of toppingList; track topping) {
+      <mat-option [value]="topping">{{topping}}</mat-option>
+    }
   </mat-select>
 </mat-form-field>
diff --git a/src/components-examples/material/select/select-multiple/select-multiple-example.ts b/src/components-examples/material/select/select-multiple/select-multiple-example.ts
index 9d9368ab49ab..e3994c7eeec8 100644
--- a/src/components-examples/material/select/select-multiple/select-multiple-example.ts
+++ b/src/components-examples/material/select/select-multiple/select-multiple-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NgFor} from '@angular/common';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -9,7 +8,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   selector: 'select-multiple-example',
   templateUrl: 'select-multiple-example.html',
   standalone: true,
-  imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule, NgFor],
+  imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule],
 })
 export class SelectMultipleExample {
   toppings = new FormControl('');
diff --git a/src/components-examples/material/select/select-optgroup/select-optgroup-example.html b/src/components-examples/material/select/select-optgroup/select-optgroup-example.html
index 6482720884ee..df813e5aae53 100644
--- a/src/components-examples/material/select/select-optgroup/select-optgroup-example.html
+++ b/src/components-examples/material/select/select-optgroup/select-optgroup-example.html
@@ -3,12 +3,14 @@ <h4>mat-select</h4>
   <mat-label>Pokemon</mat-label>
   <mat-select [formControl]="pokemonControl">
     <mat-option>-- None --</mat-option>
-    <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
-                  [disabled]="group.disabled">
-      <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
-        {{pokemon.viewValue}}
-      </mat-option>
-    </mat-optgroup>
+    @for (group of pokemonGroups; track group) {
+      <mat-optgroup [label]="group.name"
+                    [disabled]="group.disabled">
+        @for (pokemon of group.pokemon; track pokemon) {
+          <mat-option [value]="pokemon.value">{{pokemon.viewValue}}</mat-option>
+        }
+      </mat-optgroup>
+    }
   </mat-select>
 </mat-form-field>
 
diff --git a/src/components-examples/material/select/select-optgroup/select-optgroup-example.ts b/src/components-examples/material/select/select-optgroup/select-optgroup-example.ts
index ee9c68e9a00b..58704a50f630 100644
--- a/src/components-examples/material/select/select-optgroup/select-optgroup-example.ts
+++ b/src/components-examples/material/select/select-optgroup/select-optgroup-example.ts
@@ -1,7 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
-import {NgFor} from '@angular/common';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -21,14 +20,7 @@ interface PokemonGroup {
   selector: 'select-optgroup-example',
   templateUrl: 'select-optgroup-example.html',
   standalone: true,
-  imports: [
-    MatFormFieldModule,
-    MatSelectModule,
-    FormsModule,
-    ReactiveFormsModule,
-    NgFor,
-    MatInputModule,
-  ],
+  imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule, MatInputModule],
 })
 export class SelectOptgroupExample {
   pokemonControl = new FormControl('');
diff --git a/src/components-examples/material/select/select-overview/select-overview-example.html b/src/components-examples/material/select/select-overview/select-overview-example.html
index d7df8280eee0..7c3edf7a3a4a 100644
--- a/src/components-examples/material/select/select-overview/select-overview-example.html
+++ b/src/components-examples/material/select/select-overview/select-overview-example.html
@@ -2,9 +2,9 @@ <h4>Basic mat-select</h4>
 <mat-form-field>
   <mat-label>Favorite food</mat-label>
   <mat-select>
-    <mat-option *ngFor="let food of foods" [value]="food.value">
-      {{food.viewValue}}
-    </mat-option>
+    @for (food of foods; track food) {
+      <mat-option [value]="food.value">{{food.viewValue}}</mat-option>
+    }
   </mat-select>
 </mat-form-field>
 
diff --git a/src/components-examples/material/select/select-overview/select-overview-example.ts b/src/components-examples/material/select/select-overview/select-overview-example.ts
index 99ff745ba3ea..58de4dea6016 100644
--- a/src/components-examples/material/select/select-overview/select-overview-example.ts
+++ b/src/components-examples/material/select/select-overview/select-overview-example.ts
@@ -1,7 +1,6 @@
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
-import {NgFor} from '@angular/common';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -17,7 +16,7 @@ interface Food {
   selector: 'select-overview-example',
   templateUrl: 'select-overview-example.html',
   standalone: true,
-  imports: [MatFormFieldModule, MatSelectModule, NgFor, MatInputModule, FormsModule],
+  imports: [MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule],
 })
 export class SelectOverviewExample {
   foods: Food[] = [
diff --git a/src/components-examples/material/select/select-reactive-form/select-reactive-form-example.html b/src/components-examples/material/select/select-reactive-form/select-reactive-form-example.html
index cd7458a8e5af..f3b0bd18ceb0 100644
--- a/src/components-examples/material/select/select-reactive-form/select-reactive-form-example.html
+++ b/src/components-examples/material/select/select-reactive-form/select-reactive-form-example.html
@@ -4,9 +4,9 @@ <h4>mat-select</h4>
     <mat-label>Favorite Food</mat-label>
     <mat-select [formControl]="foodControl" name="food">
       <mat-option>None</mat-option>
-      <mat-option *ngFor="let food of foods" [value]="food.value">
-        {{food.viewValue}}
-      </mat-option>
+      @for (food of foods; track food) {
+        <mat-option [value]="food.value">{{food.viewValue}}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <p>Selected: {{foodControl.value}}</p>
@@ -15,9 +15,9 @@ <h4>Native select</h4>
     <mat-label>Favorite Car</mat-label>
     <select matNativeControl [formControl]="carControl" name="car">
       <option value="">None</option>
-      <option *ngFor="let car of cars" [value]="car.value">
-        {{car.viewValue}}
-      </option>
+      @for (car of cars; track car) {
+        <option [value]="car.value">{{car.viewValue}}</option>
+      }
     </select>
   </mat-form-field>
   <p>Selected: {{carControl.value}}</p>
diff --git a/src/components-examples/material/select/select-reactive-form/select-reactive-form-example.ts b/src/components-examples/material/select/select-reactive-form/select-reactive-form-example.ts
index 816341b06dff..67f07d8003ba 100644
--- a/src/components-examples/material/select/select-reactive-form/select-reactive-form-example.ts
+++ b/src/components-examples/material/select/select-reactive-form/select-reactive-form-example.ts
@@ -1,7 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
-import {NgFor} from '@angular/common';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -22,14 +21,7 @@ interface Car {
   selector: 'select-reactive-form-example',
   templateUrl: 'select-reactive-form-example.html',
   standalone: true,
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    NgFor,
-    MatInputModule,
-  ],
+  imports: [FormsModule, ReactiveFormsModule, MatFormFieldModule, MatSelectModule, MatInputModule],
 })
 export class SelectReactiveFormExample {
   foods: Food[] = [
diff --git a/src/components-examples/material/select/select-reset/select-reset-example.html b/src/components-examples/material/select/select-reset/select-reset-example.html
index e0f734507aab..0b89556937b1 100644
--- a/src/components-examples/material/select/select-reset/select-reset-example.html
+++ b/src/components-examples/material/select/select-reset/select-reset-example.html
@@ -3,7 +3,9 @@ <h4>mat-select</h4>
   <mat-label>State</mat-label>
   <mat-select>
     <mat-option>None</mat-option>
-    <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
+    @for (state of states; track state) {
+      <mat-option [value]="state">{{state}}</mat-option>
+    }
   </mat-select>
 </mat-form-field>
 
diff --git a/src/components-examples/material/select/select-reset/select-reset-example.ts b/src/components-examples/material/select/select-reset/select-reset-example.ts
index 1275ecdad9f2..b1fca8b81469 100644
--- a/src/components-examples/material/select/select-reset/select-reset-example.ts
+++ b/src/components-examples/material/select/select-reset/select-reset-example.ts
@@ -1,7 +1,6 @@
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
-import {NgFor} from '@angular/common';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -10,7 +9,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   selector: 'select-reset-example',
   templateUrl: 'select-reset-example.html',
   standalone: true,
-  imports: [MatFormFieldModule, MatSelectModule, NgFor, MatInputModule, FormsModule],
+  imports: [MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule],
 })
 export class SelectResetExample {
   states: string[] = [
diff --git a/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.html b/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.html
index f9326a3846f3..98e69a1c2c1d 100644
--- a/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.html
+++ b/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.html
@@ -1,7 +1,9 @@
 <mat-drawer-container class="example-container" autosize>
   <mat-drawer #drawer class="example-sidenav" mode="side">
     <p>Auto-resizing sidenav</p>
-    <p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
+    @if (showFiller) {
+      <p>Lorem, ipsum dolor sit amet consectetur.</p>
+    }
     <button (click)="showFiller = !showFiller" mat-raised-button>
       Toggle extra text
     </button>
diff --git a/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.ts b/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.ts
index 8d7cc2a368a0..d6eea4d561e3 100644
--- a/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
-import {NgIf} from '@angular/common';
 import {MatSidenavModule} from '@angular/material/sidenav';
 
 /**
@@ -11,7 +10,7 @@ import {MatSidenavModule} from '@angular/material/sidenav';
   templateUrl: 'sidenav-autosize-example.html',
   styleUrls: ['sidenav-autosize-example.css'],
   standalone: true,
-  imports: [MatSidenavModule, NgIf, MatButtonModule],
+  imports: [MatSidenavModule, MatButtonModule],
 })
 export class SidenavAutosizeExample {
   showFiller = false;
diff --git a/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.html b/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.html
index e9542d34307c..e6b0821ca811 100644
--- a/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.html
+++ b/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.html
@@ -1,36 +1,39 @@
-<mat-sidenav-container class="example-container" *ngIf="shouldRun" [hasBackdrop]="hasBackdrop.value">
-  <mat-sidenav #sidenav [mode]="mode.value!" [position]="position.value!">
-    <p><button mat-button (click)="sidenav.toggle()">Toggle</button></p>
-    <p>
-      <label>Test input for drawer<input/></label>
-    </p>
-  </mat-sidenav>
+@if (shouldRun) {
+  <mat-sidenav-container class="example-container" [hasBackdrop]="hasBackdrop.value">
+    <mat-sidenav #sidenav [mode]="mode.value!" [position]="position.value!">
+      <p><button mat-button (click)="sidenav.toggle()">Toggle</button></p>
+      <p>
+        <label>Test input for drawer<input/></label>
+      </p>
+    </mat-sidenav>
 
-  <mat-sidenav-content>
-    <p><button mat-button (click)="sidenav.toggle()">Toggle</button></p>
-    <p>
-      <mat-radio-group class="example-radio-group" [formControl]="mode">
-        <label>Mode:</label>
-        <mat-radio-button value="over">Over</mat-radio-button>
-        <mat-radio-button value="side">Side</mat-radio-button>
-        <mat-radio-button value="push">Push</mat-radio-button>
-      </mat-radio-group>
-      <mat-radio-group class="example-radio-group" [formControl]="hasBackdrop">
-        <label>Has Backdrop:</label>
-        <mat-radio-button [value]="null">Default</mat-radio-button>
-        <mat-radio-button [value]="true">true</mat-radio-button>
-        <mat-radio-button [value]="false">false</mat-radio-button>
-      </mat-radio-group>
-      <mat-radio-group class="example-radio-group" [formControl]="position">
-        <label>Position:</label>
-        <mat-radio-button value="start">Start</mat-radio-button>
-        <mat-radio-button value="end">End</mat-radio-button>
-      </mat-radio-group>
-    </p>
-    <p>
-      <label>Test input for drawer content<input/></label>
-    </p>
-  </mat-sidenav-content>
-</mat-sidenav-container>
+    <mat-sidenav-content>
+      <p><button mat-button (click)="sidenav.toggle()">Toggle</button></p>
+      <p>
+        <mat-radio-group class="example-radio-group" [formControl]="mode">
+          <label>Mode:</label>
+          <mat-radio-button value="over">Over</mat-radio-button>
+          <mat-radio-button value="side">Side</mat-radio-button>
+          <mat-radio-button value="push">Push</mat-radio-button>
+        </mat-radio-group>
+        <mat-radio-group class="example-radio-group" [formControl]="hasBackdrop">
+          <label>Has Backdrop:</label>
+          <mat-radio-button [value]="null">Default</mat-radio-button>
+          <mat-radio-button [value]="true">true</mat-radio-button>
+          <mat-radio-button [value]="false">false</mat-radio-button>
+        </mat-radio-group>
+        <mat-radio-group class="example-radio-group" [formControl]="position">
+          <label>Position:</label>
+          <mat-radio-button value="start">Start</mat-radio-button>
+          <mat-radio-button value="end">End</mat-radio-button>
+        </mat-radio-group>
+      </p>
+      <p>
+        <label>Test input for drawer content<input/></label>
+      </p>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+} @else {
+  <div>Please open on Stackblitz to see result</div>
+}
 
-<div *ngIf="!shouldRun">Please open on Stackblitz to see result</div>
diff --git a/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.ts b/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.ts
index f397fcd2d04d..b8361413683c 100644
--- a/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgIf} from '@angular/common';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatDrawerMode, MatSidenavModule} from '@angular/material/sidenav';
 import {MatRadioModule} from '@angular/material/radio';
@@ -12,14 +11,7 @@ import {ConfigurableFocusTrapFactory, FocusTrapFactory} from '@angular/cdk/a11y'
   templateUrl: 'sidenav-configurable-focus-trap-example.html',
   styleUrls: ['sidenav-configurable-focus-trap-example.css'],
   standalone: true,
-  imports: [
-    NgIf,
-    MatSidenavModule,
-    MatButtonModule,
-    MatRadioModule,
-    FormsModule,
-    ReactiveFormsModule,
-  ],
+  imports: [MatSidenavModule, MatButtonModule, MatRadioModule, FormsModule, ReactiveFormsModule],
   providers: [{provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory}],
 })
 export class SidenavConfigurableFocusTrapExample {
diff --git a/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.html b/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.html
index 4d861c83410c..fada970cd015 100644
--- a/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.html
+++ b/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.html
@@ -1,13 +1,15 @@
-<mat-sidenav-container
-    class="example-container" (backdropClick)="close('backdrop')" *ngIf="shouldRun">
-  <mat-sidenav #sidenav (keydown.escape)="close('escape')" disableClose>
-    <p><button mat-button (click)="close('toggle button')">Toggle</button></p>
-  </mat-sidenav>
+@if (shouldRun) {
+  <mat-sidenav-container
+      class="example-container" (backdropClick)="close('backdrop')">
+    <mat-sidenav #sidenav (keydown.escape)="close('escape')" disableClose>
+      <p><button mat-button (click)="close('toggle button')">Toggle</button></p>
+    </mat-sidenav>
 
-  <mat-sidenav-content>
-    <p><button mat-button (click)="sidenav.open()">Open</button></p>
-    <p>Closed due to: {{reason}}</p>
-  </mat-sidenav-content>
-</mat-sidenav-container>
-
-<div *ngIf="!shouldRun">Please open on Stackblitz to see result</div>
+    <mat-sidenav-content>
+      <p><button mat-button (click)="sidenav.open()">Open</button></p>
+      <p>Closed due to: {{reason}}</p>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+} @else {
+  <div>Please open on Stackblitz to see result</div>
+}
diff --git a/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.ts b/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.ts
index 67361e126f2e..7f21079abbae 100644
--- a/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.ts
@@ -1,7 +1,6 @@
 import {Component, ViewChild} from '@angular/core';
 import {MatSidenav, MatSidenavModule} from '@angular/material/sidenav';
 import {MatButtonModule} from '@angular/material/button';
-import {NgIf} from '@angular/common';
 
 /** @title Sidenav with custom escape and backdrop click behavior */
 @Component({
@@ -9,7 +8,7 @@ import {NgIf} from '@angular/common';
   templateUrl: 'sidenav-disable-close-example.html',
   styleUrls: ['sidenav-disable-close-example.css'],
   standalone: true,
-  imports: [NgIf, MatSidenavModule, MatButtonModule],
+  imports: [MatSidenavModule, MatButtonModule],
 })
 export class SidenavDisableCloseExample {
   @ViewChild('sidenav') sidenav: MatSidenav;
diff --git a/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.html b/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.html
index d43ed7fe251a..9880c28eddb1 100644
--- a/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.html
+++ b/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.html
@@ -1,4 +1,4 @@
-<ng-container *ngIf="shouldRun">
+@if (shouldRun) {
   <mat-toolbar class="example-header">Header</mat-toolbar>
 
   <mat-sidenav-container class="example-container">
@@ -23,6 +23,6 @@
   </mat-sidenav-container>
 
   <mat-toolbar class="example-footer">Footer</mat-toolbar>
-</ng-container>
-
-<div *ngIf="!shouldRun">Please open on StackBlitz to see result</div>
+} @else {
+  <div>Please open on StackBlitz to see result</div>
+}
diff --git a/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts b/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts
index 893e2080ed17..3ad9ff1e2db2 100644
--- a/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts
@@ -6,7 +6,6 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatInputModule} from '@angular/material/input';
-import {NgIf} from '@angular/common';
 
 /** @title Fixed sidenav */
 @Component({
@@ -15,7 +14,6 @@ import {NgIf} from '@angular/common';
   styleUrls: ['sidenav-fixed-example.css'],
   standalone: true,
   imports: [
-    NgIf,
     MatToolbarModule,
     MatSidenavModule,
     FormsModule,
diff --git a/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.html b/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.html
index d26f9dee6fb5..04f8b534ac73 100644
--- a/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.html
+++ b/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.html
@@ -1,27 +1,30 @@
-<mat-sidenav-container class="example-container" *ngIf="shouldRun">
-  <mat-sidenav #sidenav [mode]="mode.value || 'over'">
-    <p><button mat-button (click)="sidenav.toggle()">Toggle</button></p>
-    <p>
-      <mat-radio-group class="example-radio-group" [formControl]="mode">
-        <label>Mode:</label>
-        <mat-radio-button value="over">Over</mat-radio-button>
-        <mat-radio-button value="side">Side</mat-radio-button>
-        <mat-radio-button value="push">Push</mat-radio-button>
-      </mat-radio-group>
-    </p>
-  </mat-sidenav>
+@if (shouldRun) {
+  <mat-sidenav-container class="example-container">
+    <mat-sidenav #sidenav [mode]="mode.value || 'over'">
+      <p><button mat-button (click)="sidenav.toggle()">Toggle</button></p>
+      <p>
+        <mat-radio-group class="example-radio-group" [formControl]="mode">
+          <label>Mode:</label>
+          <mat-radio-button value="over">Over</mat-radio-button>
+          <mat-radio-button value="side">Side</mat-radio-button>
+          <mat-radio-button value="push">Push</mat-radio-button>
+        </mat-radio-group>
+      </p>
+    </mat-sidenav>
 
-  <mat-sidenav-content>
-    <p><button mat-button (click)="sidenav.toggle()">Toggle</button></p>
-    <p>
-      <mat-radio-group class="example-radio-group" [formControl]="mode">
-        <label>Mode:</label>
-        <mat-radio-button value="over">Over</mat-radio-button>
-        <mat-radio-button value="side">Side</mat-radio-button>
-        <mat-radio-button value="push">Push</mat-radio-button>
-      </mat-radio-group>
-    </p>
-  </mat-sidenav-content>
-</mat-sidenav-container>
+    <mat-sidenav-content>
+      <p><button mat-button (click)="sidenav.toggle()">Toggle</button></p>
+      <p>
+        <mat-radio-group class="example-radio-group" [formControl]="mode">
+          <label>Mode:</label>
+          <mat-radio-button value="over">Over</mat-radio-button>
+          <mat-radio-button value="side">Side</mat-radio-button>
+          <mat-radio-button value="push">Push</mat-radio-button>
+        </mat-radio-group>
+      </p>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+} @else {
+  <div>Please open on Stackblitz to see result</div>
+}
 
-<div *ngIf="!shouldRun">Please open on Stackblitz to see result</div>
diff --git a/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.ts b/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.ts
index 55412ee2d2df..cd02ec9c7aa2 100644
--- a/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgIf} from '@angular/common';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatDrawerMode, MatSidenavModule} from '@angular/material/sidenav';
 import {MatRadioModule} from '@angular/material/radio';
@@ -11,14 +10,7 @@ import {MatButtonModule} from '@angular/material/button';
   templateUrl: 'sidenav-mode-example.html',
   styleUrls: ['sidenav-mode-example.css'],
   standalone: true,
-  imports: [
-    NgIf,
-    MatSidenavModule,
-    MatButtonModule,
-    MatRadioModule,
-    FormsModule,
-    ReactiveFormsModule,
-  ],
+  imports: [MatSidenavModule, MatButtonModule, MatRadioModule, FormsModule, ReactiveFormsModule],
 })
 export class SidenavModeExample {
   mode = new FormControl('over' as MatDrawerMode);
diff --git a/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.html b/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.html
index 82cf9382b03c..f82321e94337 100644
--- a/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.html
+++ b/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.html
@@ -1,17 +1,22 @@
-<mat-sidenav-container class="example-container" *ngIf="shouldRun">
-  <mat-sidenav #sidenav mode="side" [(opened)]="opened" (opened)="events.push('open!')"
-               (closed)="events.push('close!')">
-    Sidenav content
-  </mat-sidenav>
+@if (shouldRun) {
+  <mat-sidenav-container class="example-container">
+    <mat-sidenav #sidenav mode="side" [(opened)]="opened" (opened)="events.push('open!')"
+                (closed)="events.push('close!')">
+      Sidenav content
+    </mat-sidenav>
 
-  <mat-sidenav-content>
-    <p><mat-checkbox [(ngModel)]="opened">sidenav.opened</mat-checkbox></p>
-    <p><button mat-button (click)="sidenav.toggle()">sidenav.toggle()</button></p>
-    <p>Events:</p>
-    <div class="example-events">
-      <div *ngFor="let e of events">{{e}}</div>
-    </div>
-  </mat-sidenav-content>
-</mat-sidenav-container>
+    <mat-sidenav-content>
+      <p><mat-checkbox [(ngModel)]="opened">sidenav.opened</mat-checkbox></p>
+      <p><button mat-button (click)="sidenav.toggle()">sidenav.toggle()</button></p>
+      <p>Events:</p>
+      <div class="example-events">
+        @for (e of events; track e) {
+          <div>{{e}}</div>
+        }
+      </div>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+} @else {
+  <div>Please open on Stackblitz to see result</div>
+}
 
-<div *ngIf="!shouldRun">Please open on Stackblitz to see result</div>
diff --git a/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.ts b/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.ts
index b7c095783a7f..c49a7a5521bf 100644
--- a/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.ts
@@ -3,7 +3,6 @@ import {MatButtonModule} from '@angular/material/button';
 import {FormsModule} from '@angular/forms';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatSidenavModule} from '@angular/material/sidenav';
-import {NgIf, NgFor} from '@angular/common';
 
 /** @title Sidenav open & close behavior */
 @Component({
@@ -11,7 +10,7 @@ import {NgIf, NgFor} from '@angular/common';
   templateUrl: 'sidenav-open-close-example.html',
   styleUrls: ['sidenav-open-close-example.css'],
   standalone: true,
-  imports: [NgIf, MatSidenavModule, MatCheckboxModule, FormsModule, MatButtonModule, NgFor],
+  imports: [MatSidenavModule, MatCheckboxModule, FormsModule, MatButtonModule],
 })
 export class SidenavOpenCloseExample {
   events: string[] = [];
diff --git a/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.html b/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.html
index bb50d519621e..acbdbe728516 100644
--- a/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.html
+++ b/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.html
@@ -1,6 +1,8 @@
-<mat-sidenav-container class="example-container" *ngIf="shouldRun">
-  <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
-  <mat-sidenav-content>Main content</mat-sidenav-content>
-</mat-sidenav-container>
-
-<div *ngIf="!shouldRun">Please open on Stackblitz to see result</div>
+@if (shouldRun) {
+  <mat-sidenav-container class="example-container">
+    <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
+    <mat-sidenav-content>Main content</mat-sidenav-content>
+  </mat-sidenav-container>
+} @else {
+  <div>Please open on Stackblitz to see result</div>
+}
diff --git a/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.ts b/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.ts
index 76bd2bd42a80..b9ee6ac6ac98 100644
--- a/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {MatSidenavModule} from '@angular/material/sidenav';
-import {NgIf} from '@angular/common';
 
 /** @title Basic sidenav */
 @Component({
@@ -8,7 +7,7 @@ import {NgIf} from '@angular/common';
   templateUrl: 'sidenav-overview-example.html',
   styleUrls: ['sidenav-overview-example.css'],
   standalone: true,
-  imports: [NgIf, MatSidenavModule],
+  imports: [MatSidenavModule],
 })
 export class SidenavOverviewExample {
   shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host);
diff --git a/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.html b/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.html
index d45f0e8cb0a1..3319e1452401 100644
--- a/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.html
+++ b/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.html
@@ -1,7 +1,9 @@
-<mat-sidenav-container class="example-container" *ngIf="shouldRun">
-  <mat-sidenav opened mode="side">Start content</mat-sidenav>
-  <mat-sidenav opened mode="side" position="end">End content</mat-sidenav>
-  Implicit main content
-</mat-sidenav-container>
-
-<div *ngIf="!shouldRun">Please open on Stackblitz to see result</div>
+@if (shouldRun) {
+  <mat-sidenav-container class="example-container">
+    <mat-sidenav opened mode="side">Start content</mat-sidenav>
+    <mat-sidenav opened mode="side" position="end">End content</mat-sidenav>
+    Implicit main content
+  </mat-sidenav-container>
+} @else {
+  <div>Please open on Stackblitz to see result</div>
+}
diff --git a/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.ts b/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.ts
index 3169bcaf54d0..250d7611486b 100644
--- a/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {MatSidenavModule} from '@angular/material/sidenav';
-import {NgIf} from '@angular/common';
 
 /** @title Implicit main content with two sidenavs */
 @Component({
@@ -8,7 +7,7 @@ import {NgIf} from '@angular/common';
   templateUrl: 'sidenav-position-example.html',
   styleUrls: ['sidenav-position-example.css'],
   standalone: true,
-  imports: [NgIf, MatSidenavModule],
+  imports: [MatSidenavModule],
 })
 export class SidenavPositionExample {
   shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host);
diff --git a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html
index b12947dfd237..7a51a65fc95f 100644
--- a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html
+++ b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.html
@@ -1,22 +1,28 @@
-<div class="example-container" [class.example-is-mobile]="mobileQuery.matches" *ngIf="shouldRun">
-  <mat-toolbar color="primary" class="example-toolbar">
-    <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
-    <h1 class="example-app-name">Responsive App</h1>
-  </mat-toolbar>
+@if (shouldRun) {
+  <div class="example-container" [class.example-is-mobile]="mobileQuery.matches">
+    <mat-toolbar color="primary" class="example-toolbar">
+      <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
+      <h1 class="example-app-name">Responsive App</h1>
+    </mat-toolbar>
 
-  <mat-sidenav-container class="example-sidenav-container"
-                         [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
-    <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
-                 [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
-      <mat-nav-list>
-        <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
-      </mat-nav-list>
-    </mat-sidenav>
+    <mat-sidenav-container class="example-sidenav-container"
+                          [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
+      <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
+                  [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
+        <mat-nav-list>
+          @for (nav of fillerNav; track nav) {
+            <a mat-list-item routerLink=".">{{nav}}</a>
+          }
+        </mat-nav-list>
+      </mat-sidenav>
 
-    <mat-sidenav-content>
-      <p *ngFor="let content of fillerContent">{{content}}</p>
-    </mat-sidenav-content>
-  </mat-sidenav-container>
-</div>
-
-<div *ngIf="!shouldRun">Please open on Stackblitz to see result</div>
+      <mat-sidenav-content>
+        @for (content of fillerContent; track content) {
+    <p>{{content}}</p>
+  }
+      </mat-sidenav-content>
+    </mat-sidenav-container>
+  </div>
+} @else {
+  <div>Please open on Stackblitz to see result</div>
+}
diff --git a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts
index d5953f61b831..89287e19af34 100644
--- a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts
@@ -5,7 +5,6 @@ import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import {MatToolbarModule} from '@angular/material/toolbar';
-import {NgIf, NgFor} from '@angular/common';
 
 /** @title Responsive sidenav */
 @Component({
@@ -13,15 +12,7 @@ import {NgIf, NgFor} from '@angular/common';
   templateUrl: 'sidenav-responsive-example.html',
   styleUrls: ['sidenav-responsive-example.css'],
   standalone: true,
-  imports: [
-    NgIf,
-    MatToolbarModule,
-    MatButtonModule,
-    MatIconModule,
-    MatSidenavModule,
-    MatListModule,
-    NgFor,
-  ],
+  imports: [MatToolbarModule, MatButtonModule, MatIconModule, MatSidenavModule, MatListModule],
 })
 export class SidenavResponsiveExample implements OnDestroy {
   mobileQuery: MediaQueryList;
diff --git a/src/components-examples/material/sort/sort-harness/sort-harness-example.html b/src/components-examples/material/sort/sort-harness/sort-harness-example.html
index 377a0bc51923..b269a5ea4d65 100644
--- a/src/components-examples/material/sort/sort-harness/sort-harness-example.html
+++ b/src/components-examples/material/sort/sort-harness/sort-harness-example.html
@@ -7,11 +7,13 @@
     <th mat-sort-header="protein">Protein</th>
   </tr>
 
-  <tr *ngFor="let dessert of sortedData">
-    <td>{{dessert.name}}</td>
-    <td>{{dessert.calories}}</td>
-    <td>{{dessert.fat}}</td>
-    <td>{{dessert.carbs}}</td>
-    <td>{{dessert.protein}}</td>
-  </tr>
+  @for (dessert of sortedData; track dessert) {
+    <tr>
+      <td>{{dessert.name}}</td>
+      <td>{{dessert.calories}}</td>
+      <td>{{dessert.fat}}</td>
+      <td>{{dessert.carbs}}</td>
+      <td>{{dessert.protein}}</td>
+    </tr>
+  }
 </table>
diff --git a/src/components-examples/material/sort/sort-harness/sort-harness-example.ts b/src/components-examples/material/sort/sort-harness/sort-harness-example.ts
index 10f8833a8ca5..90fad6b82d64 100644
--- a/src/components-examples/material/sort/sort-harness/sort-harness-example.ts
+++ b/src/components-examples/material/sort/sort-harness/sort-harness-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {Sort, MatSortModule} from '@angular/material/sort';
-import {NgFor} from '@angular/common';
 
 /**
  * @title Testing with MatSortHarness
@@ -9,7 +8,7 @@ import {NgFor} from '@angular/common';
   selector: 'sort-harness-example',
   templateUrl: 'sort-harness-example.html',
   standalone: true,
-  imports: [MatSortModule, NgFor],
+  imports: [MatSortModule],
 })
 export class SortHarnessExample {
   disableThirdHeader = false;
diff --git a/src/components-examples/material/sort/sort-overview/sort-overview-example.html b/src/components-examples/material/sort/sort-overview/sort-overview-example.html
index 2b970af18c6a..94591483711a 100644
--- a/src/components-examples/material/sort/sort-overview/sort-overview-example.html
+++ b/src/components-examples/material/sort/sort-overview/sort-overview-example.html
@@ -7,11 +7,13 @@
     <th mat-sort-header="protein">Protein (g)</th>
   </tr>
 
-  <tr *ngFor="let dessert of sortedData">
-    <td>{{dessert.name}}</td>
-    <td>{{dessert.calories}}</td>
-    <td>{{dessert.fat}}</td>
-    <td>{{dessert.carbs}}</td>
-    <td>{{dessert.protein}}</td>
-  </tr>
+  @for (dessert of sortedData; track dessert) {
+    <tr>
+      <td>{{dessert.name}}</td>
+      <td>{{dessert.calories}}</td>
+      <td>{{dessert.fat}}</td>
+      <td>{{dessert.carbs}}</td>
+      <td>{{dessert.protein}}</td>
+    </tr>
+  }
 </table>
diff --git a/src/components-examples/material/sort/sort-overview/sort-overview-example.ts b/src/components-examples/material/sort/sort-overview/sort-overview-example.ts
index f233e5ac556f..4a42ae23586a 100644
--- a/src/components-examples/material/sort/sort-overview/sort-overview-example.ts
+++ b/src/components-examples/material/sort/sort-overview/sort-overview-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {Sort, MatSortModule} from '@angular/material/sort';
-import {NgFor} from '@angular/common';
 
 export interface Dessert {
   calories: number;
@@ -18,7 +17,7 @@ export interface Dessert {
   templateUrl: 'sort-overview-example.html',
   styleUrls: ['sort-overview-example.css'],
   standalone: true,
-  imports: [MatSortModule, NgFor],
+  imports: [MatSortModule],
 })
 export class SortOverviewExample {
   desserts: Dessert[] = [
diff --git a/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.html b/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.html
index 07bb9f8670a3..c108f1673094 100644
--- a/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.html
+++ b/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.html
@@ -4,12 +4,11 @@
   class="demo-radio-group"
   [(ngModel)]="optionalLabelText"
   (ngModelChange)="updateOptionalLabel()">
-  <mat-radio-button
-    class="demo-radio-button"
-    *ngFor="let optionalLabelTextChoice of optionalLabelTextChoices"
-    [value]="optionalLabelTextChoice">
-    {{optionalLabelTextChoice}}
-  </mat-radio-button>
+  @for (optionalLabelTextChoice of optionalLabelTextChoices; track optionalLabelTextChoice) {
+    <mat-radio-button
+      class="demo-radio-button"
+      [value]="optionalLabelTextChoice">{{optionalLabelTextChoice}}</mat-radio-button>
+  }
 </mat-radio-group>
 <mat-stepper class="demo-stepper" #stepper>
   <mat-step [stepControl]="firstFormGroup">
diff --git a/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts b/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts
index bbaf8c8b4a76..305f4ff45daa 100644
--- a/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts
+++ b/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts
@@ -4,7 +4,6 @@ import {MatStepperIntl, MatStepperModule} from '@angular/material/stepper';
 import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
-import {NgFor} from '@angular/common';
 import {MatRadioModule} from '@angular/material/radio';
 
 @Injectable()
@@ -25,7 +24,6 @@ export class StepperIntl extends MatStepperIntl {
   imports: [
     MatRadioModule,
     FormsModule,
-    NgFor,
     MatStepperModule,
     ReactiveFormsModule,
     MatFormFieldModule,
@@ -43,7 +41,10 @@ export class StepperIntlExample {
     secondCtrl: ['', Validators.required],
   });
 
-  constructor(private _formBuilder: FormBuilder, private _matStepperIntl: MatStepperIntl) {}
+  constructor(
+    private _formBuilder: FormBuilder,
+    private _matStepperIntl: MatStepperIntl,
+  ) {}
 
   updateOptionalLabel() {
     this._matStepperIntl.optionalLabel = this.optionalLabelText;
diff --git a/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.html b/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.html
index 3db8423dcf64..cba6751334d8 100644
--- a/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.html
+++ b/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.html
@@ -1,7 +1,11 @@
-<ng-container [ngSwitch]="stepperOrientation | async">
-  <div *ngSwitchCase="'horizontal'">Make your screen smaller to see a vertical stepper</div>
-  <div *ngSwitchCase="'vertical'">Make your screen larger to see a horizontal stepper</div>
-</ng-container>
+@switch (stepperOrientation | async) {
+  @case ('horizontal') {
+    <div>Make your screen smaller to see a vertical stepper</div>
+  }
+  @case ('vertical') {
+    <div>Make your screen larger to see a horizontal stepper</div>
+  }
+}
 
 <mat-stepper
   class="example-stepper"
diff --git a/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.ts b/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.ts
index c7a928604cc5..54ac4af1c201 100644
--- a/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.ts
+++ b/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.ts
@@ -7,7 +7,7 @@ import {map} from 'rxjs/operators';
 import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
-import {NgSwitch, NgSwitchCase, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 
 /**
  * @title Stepper responsive
@@ -18,8 +18,6 @@ import {NgSwitch, NgSwitchCase, AsyncPipe} from '@angular/common';
   styleUrls: ['stepper-responsive-example.css'],
   standalone: true,
   imports: [
-    NgSwitch,
-    NgSwitchCase,
     MatStepperModule,
     FormsModule,
     ReactiveFormsModule,
@@ -41,7 +39,10 @@ export class StepperResponsiveExample {
   });
   stepperOrientation: Observable<StepperOrientation>;
 
-  constructor(private _formBuilder: FormBuilder, breakpointObserver: BreakpointObserver) {
+  constructor(
+    private _formBuilder: FormBuilder,
+    breakpointObserver: BreakpointObserver,
+  ) {
     this.stepperOrientation = breakpointObserver
       .observe('(min-width: 800px)')
       .pipe(map(({matches}) => (matches ? 'horizontal' : 'vertical')));
diff --git a/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.html b/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.html
index 9d2fcac7ac34..11f1e22047a7 100644
--- a/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.html
+++ b/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.html
@@ -3,10 +3,12 @@
 <button mat-raised-button (click)="shuffle()"> Shuffle </button>
 
 <table mat-table [dataSource]="data" class="mat-elevation-z8">
-  <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
-    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
-    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
-  </ng-container>
+  @for (column of displayedColumns; track column) {
+    <ng-container [matColumnDef]="column">
+      <th mat-header-cell *matHeaderCellDef> {{column}} </th>
+      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
+    </ng-container>
+  }
 
   <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
   <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
diff --git a/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.ts b/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.ts
index a89b508d9976..acb4b6dd04d9 100644
--- a/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.ts
+++ b/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {MatTableModule} from '@angular/material/table';
 import {MatButtonModule} from '@angular/material/button';
 
@@ -31,7 +30,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
   styleUrls: ['table-dynamic-columns-example.css'],
   templateUrl: 'table-dynamic-columns-example.html',
   standalone: true,
-  imports: [MatButtonModule, MatTableModule, NgFor],
+  imports: [MatButtonModule, MatTableModule],
 })
 export class TableDynamicColumnsExample {
   displayedColumns: string[] = ['name', 'weight', 'symbol', 'position'];
diff --git a/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.html b/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.html
index 132dcd9f3f2f..2b3080096152 100644
--- a/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.html
+++ b/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.html
@@ -1,16 +1,21 @@
 <table mat-table
        [dataSource]="dataSource" multiTemplateDataRows
        class="mat-elevation-z8">
-  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
-    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
-    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
-  </ng-container>
+  @for (column of columnsToDisplay; track column) {
+    <ng-container matColumnDef="{{column}}">
+      <th mat-header-cell *matHeaderCellDef> {{column}} </th>
+      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
+    </ng-container>
+  }
   <ng-container matColumnDef="expand">
     <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
     <td mat-cell *matCellDef="let element">
       <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
-        <mat-icon *ngIf="expandedElement !== element">keyboard_arrow_down</mat-icon>
-        <mat-icon *ngIf="expandedElement === element">keyboard_arrow_up</mat-icon>
+        @if (expandedElement === element) {
+          <mat-icon>keyboard_arrow_up</mat-icon>
+        } @else {
+          <mat-icon>keyboard_arrow_down</mat-icon>
+        }
       </button>
     </td>
   </ng-container>
diff --git a/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.ts b/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.ts
index 27f8278cc003..3d2ee793e40a 100644
--- a/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.ts
+++ b/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.ts
@@ -2,7 +2,6 @@ import {Component} from '@angular/core';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
-import {NgFor, NgIf} from '@angular/common';
 import {MatTableModule} from '@angular/material/table';
 
 /**
@@ -20,7 +19,7 @@ import {MatTableModule} from '@angular/material/table';
     ]),
   ],
   standalone: true,
-  imports: [MatTableModule, NgFor, MatButtonModule, NgIf, MatIconModule],
+  imports: [MatTableModule, MatButtonModule, MatIconModule],
 })
 export class TableExpandableRowsExample {
   dataSource = ELEMENT_DATA;
diff --git a/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.html b/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.html
index c1b5fa29128f..110b906e2b9f 100644
--- a/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.html
+++ b/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.html
@@ -1,12 +1,14 @@
 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
-  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
-    <th mat-header-cell *matHeaderCellDef>
-      {{column.header}}
-    </th>
-    <td mat-cell *matCellDef="let row">
-      {{column.cell(row)}}
-    </td>
-  </ng-container>
+  @for (column of columns; track column) {
+    <ng-container [matColumnDef]="column.columnDef">
+      <th mat-header-cell *matHeaderCellDef>
+        {{column.header}}
+      </th>
+      <td mat-cell *matCellDef="let row">
+        {{column.cell(row)}}
+      </td>
+    </ng-container>
+  }
 
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
diff --git a/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.ts b/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.ts
index b2916d90fa68..4689722972ac 100644
--- a/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.ts
+++ b/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {MatTableModule} from '@angular/material/table';
 
 export interface PeriodicElement {
@@ -23,14 +22,14 @@ const ELEMENT_DATA: PeriodicElement[] = [
 ];
 
 /**
- * @title Table with columns defined using ngFor instead of statically written in the template.
+ * @title Table with columns defined using a for loop instead of statically written in the template.
  */
 @Component({
   selector: 'table-generated-columns-example',
   styleUrls: ['table-generated-columns-example.css'],
   templateUrl: 'table-generated-columns-example.html',
   standalone: true,
-  imports: [MatTableModule, NgFor],
+  imports: [MatTableModule],
 })
 export class TableGeneratedColumnsExample {
   columns = [
diff --git a/src/components-examples/material/table/table-http/table-http-example.html b/src/components-examples/material/table/table-http/table-http-example.html
index 355ae60b0ff2..a30712cafa22 100644
--- a/src/components-examples/material/table/table-http/table-http-example.html
+++ b/src/components-examples/material/table/table-http/table-http-example.html
@@ -1,11 +1,16 @@
 <div class="example-container mat-elevation-z8">
-  <div class="example-loading-shade"
-       *ngIf="isLoadingResults || isRateLimitReached">
-    <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
-    <div class="example-rate-limit-reached" *ngIf="isRateLimitReached">
-      GitHub's API rate limit has been reached. It will be reset in one minute.
+  @if (isLoadingResults || isRateLimitReached) {
+    <div class="example-loading-shade">
+      @if (isLoadingResults) {
+        <mat-spinner></mat-spinner>
+      }
+      @if (isRateLimitReached) {
+        <div class="example-rate-limit-reached">
+          GitHub's API rate limit has been reached. It will be reset in one minute.
+        </div>
+      }
     </div>
-  </div>
+  }
 
   <div class="example-table-container">
 
diff --git a/src/components-examples/material/table/table-http/table-http-example.ts b/src/components-examples/material/table/table-http/table-http-example.ts
index 168367832c73..daf8dc01f8c0 100644
--- a/src/components-examples/material/table/table-http/table-http-example.ts
+++ b/src/components-examples/material/table/table-http/table-http-example.ts
@@ -6,7 +6,7 @@ import {merge, Observable, of as observableOf} from 'rxjs';
 import {catchError, map, startWith, switchMap} from 'rxjs/operators';
 import {MatTableModule} from '@angular/material/table';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {NgIf, DatePipe} from '@angular/common';
+import {DatePipe} from '@angular/common';
 
 /**
  * @title Table retrieving data through HTTP
@@ -16,14 +16,7 @@ import {NgIf, DatePipe} from '@angular/common';
   styleUrls: ['table-http-example.css'],
   templateUrl: 'table-http-example.html',
   standalone: true,
-  imports: [
-    NgIf,
-    MatProgressSpinnerModule,
-    MatTableModule,
-    MatSortModule,
-    MatPaginatorModule,
-    DatePipe,
-  ],
+  imports: [MatProgressSpinnerModule, MatTableModule, MatSortModule, MatPaginatorModule, DatePipe],
 })
 export class TableHttpExample implements AfterViewInit {
   displayedColumns: string[] = ['created', 'state', 'number', 'title'];
diff --git a/src/components-examples/material/table/table-row-binding/table-row-binding-example.html b/src/components-examples/material/table/table-row-binding/table-row-binding-example.html
index d8ecfda58fd4..26e24ab03718 100644
--- a/src/components-examples/material/table/table-row-binding/table-row-binding-example.html
+++ b/src/components-examples/material/table/table-row-binding/table-row-binding-example.html
@@ -38,12 +38,12 @@ <h3>
   </h3>
 </div>
 
-<div *ngIf="!clickedRows.size">
-  Clicked rows will be logged here
-</div>
+@if (!clickedRows.size) {
+  <div>Clicked rows will be logged here</div>
+}
 
 <ul>
-  <li *ngFor="let clickedRow of clickedRows">
-    Clicked on {{clickedRow.name}}
-  </li>
+  @for (clickedRow of clickedRows; track clickedRow) {
+    <li>Clicked on {{clickedRow.name}}</li>
+  }
 </ul>
diff --git a/src/components-examples/material/table/table-row-binding/table-row-binding-example.ts b/src/components-examples/material/table/table-row-binding/table-row-binding-example.ts
index bf6d22faa22e..4b5f58f6a236 100644
--- a/src/components-examples/material/table/table-row-binding/table-row-binding-example.ts
+++ b/src/components-examples/material/table/table-row-binding/table-row-binding-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgIf, NgFor} from '@angular/common';
 import {MatTableModule} from '@angular/material/table';
 
 export interface PeriodicElement {
@@ -30,7 +29,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
   styleUrls: ['table-row-binding-example.css'],
   templateUrl: 'table-row-binding-example.html',
   standalone: true,
-  imports: [MatTableModule, NgIf, NgFor],
+  imports: [MatTableModule],
 })
 export class TableRowBindingExample {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
diff --git a/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.html b/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.html
index 2914a3087f20..c9d1430b595b 100644
--- a/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.html
+++ b/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.html
@@ -36,43 +36,45 @@
 </div>
 
 <section class="example-container mat-elevation-z8" tabindex="0">
-  <mat-table [dataSource]="dataSource" *ngFor="let table of tables">
-    <ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
-      <mat-header-cell *matHeaderCellDef> Position </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
-      <mat-footer-cell *matFooterCellDef> Position Footer </mat-footer-cell>
-    </ng-container>
+  @for (table of tables; track table) {
+    <mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
+        <mat-header-cell *matHeaderCellDef> Position </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
+        <mat-footer-cell *matFooterCellDef> Position Footer </mat-footer-cell>
+      </ng-container>
 
-    <ng-container matColumnDef="name" [sticky]="isSticky(stickyColumns, 'name')">
-      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
-      <mat-footer-cell *matFooterCellDef> Name Footer </mat-footer-cell>
-    </ng-container>
+      <ng-container matColumnDef="name" [sticky]="isSticky(stickyColumns, 'name')">
+        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
+        <mat-footer-cell *matFooterCellDef> Name Footer </mat-footer-cell>
+      </ng-container>
 
-    <ng-container matColumnDef="weight" [stickyEnd]="isSticky(stickyColumns, 'weight')">
-      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
-      <mat-footer-cell *matFooterCellDef> Weight Footer </mat-footer-cell>
-    </ng-container>
+      <ng-container matColumnDef="weight" [stickyEnd]="isSticky(stickyColumns, 'weight')">
+        <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
+        <mat-footer-cell *matFooterCellDef> Weight Footer </mat-footer-cell>
+      </ng-container>
 
-    <ng-container matColumnDef="symbol" [stickyEnd]="isSticky(stickyColumns, 'symbol')">
-      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
-      <mat-footer-cell *matFooterCellDef> Symbol Footer </mat-footer-cell>
-    </ng-container>
+      <ng-container matColumnDef="symbol" [stickyEnd]="isSticky(stickyColumns, 'symbol')">
+        <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
+        <mat-footer-cell *matFooterCellDef> Symbol Footer </mat-footer-cell>
+      </ng-container>
 
-    <ng-container matColumnDef="filler">
-      <mat-header-cell *matHeaderCellDef> Filler header cell </mat-header-cell>
-      <mat-cell *matCellDef="let element"> Filler data cell </mat-cell>
-      <mat-footer-cell *matFooterCellDef> Filler footer cell </mat-footer-cell>
-    </ng-container>
+      <ng-container matColumnDef="filler">
+        <mat-header-cell *matHeaderCellDef> Filler header cell </mat-header-cell>
+        <mat-cell *matCellDef="let element"> Filler data cell </mat-cell>
+        <mat-footer-cell *matFooterCellDef> Filler footer cell </mat-footer-cell>
+      </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-1')"></mat-header-row>
-    <mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-2')"></mat-header-row>
+      <mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-1')"></mat-header-row>
+      <mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-2')"></mat-header-row>
 
-    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
 
-    <mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></mat-footer-row>
-    <mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></mat-footer-row>
-  </mat-table>
+      <mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></mat-footer-row>
+      <mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></mat-footer-row>
+    </mat-table>
+  }
 </section>
diff --git a/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts b/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts
index b3df9c3a82e7..601b475fefa7 100644
--- a/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts
+++ b/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {MatButtonToggleGroup, MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatTableModule} from '@angular/material/table';
 import {MatButtonModule} from '@angular/material/button';
@@ -12,7 +11,7 @@ import {MatButtonModule} from '@angular/material/button';
   styleUrls: ['table-sticky-complex-flex-example.css'],
   templateUrl: 'table-sticky-complex-flex-example.html',
   standalone: true,
-  imports: [MatButtonModule, MatButtonToggleModule, NgFor, MatTableModule],
+  imports: [MatButtonModule, MatButtonToggleModule, MatTableModule],
 })
 export class TableStickyComplexFlexExample {
   displayedColumns: string[] = [];
diff --git a/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html b/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html
index 2f5c1e7260f6..3a52339e40b7 100644
--- a/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html
+++ b/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html
@@ -36,43 +36,45 @@
 </div>
 
 <section class="example-container mat-elevation-z8" tabindex="0">
-  <table mat-table [dataSource]="dataSource" *ngFor="let table of tables">
-    <ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
-      <th mat-header-cell *matHeaderCellDef> Position </th>
-      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
-      <td mat-footer-cell *matFooterCellDef> Position Footer </td>
-    </ng-container>
+  @for (table of tables; track table) {
+    <table mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
+        <th mat-header-cell *matHeaderCellDef> Position </th>
+        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+        <td mat-footer-cell *matFooterCellDef> Position Footer </td>
+      </ng-container>
 
-    <ng-container matColumnDef="name" [sticky]="isSticky(stickyColumns, 'name')">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
-      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-      <td mat-footer-cell *matFooterCellDef> Name Footer </td>
-    </ng-container>
+      <ng-container matColumnDef="name" [sticky]="isSticky(stickyColumns, 'name')">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+        <td mat-footer-cell *matFooterCellDef> Name Footer </td>
+      </ng-container>
 
-    <ng-container matColumnDef="weight" [stickyEnd]="isSticky(stickyColumns, 'weight')">
-      <th mat-header-cell *matHeaderCellDef> Weight </th>
-      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
-      <td mat-footer-cell *matFooterCellDef> Weight Footer </td>
-    </ng-container>
+      <ng-container matColumnDef="weight" [stickyEnd]="isSticky(stickyColumns, 'weight')">
+        <th mat-header-cell *matHeaderCellDef> Weight </th>
+        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+        <td mat-footer-cell *matFooterCellDef> Weight Footer </td>
+      </ng-container>
 
-    <ng-container matColumnDef="symbol" [stickyEnd]="isSticky(stickyColumns, 'symbol')">
-      <th mat-header-cell *matHeaderCellDef> Symbol </th>
-      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
-      <td mat-footer-cell *matFooterCellDef> Symbol Footer </td>
-    </ng-container>
+      <ng-container matColumnDef="symbol" [stickyEnd]="isSticky(stickyColumns, 'symbol')">
+        <th mat-header-cell *matHeaderCellDef> Symbol </th>
+        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+        <td mat-footer-cell *matFooterCellDef> Symbol Footer </td>
+      </ng-container>
 
-    <ng-container matColumnDef="filler">
-      <th mat-header-cell *matHeaderCellDef> Filler header cell </th>
-      <td mat-cell *matCellDef="let element"> Filler data cell </td>
-      <td mat-footer-cell *matFooterCellDef> Filler footer cell </td>
-    </ng-container>
+      <ng-container matColumnDef="filler">
+        <th mat-header-cell *matHeaderCellDef> Filler header cell </th>
+        <td mat-cell *matCellDef="let element"> Filler data cell </td>
+        <td mat-footer-cell *matFooterCellDef> Filler footer cell </td>
+      </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-1')"></tr>
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-2')"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-1')"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-2')"></tr>
 
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 
-    <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></tr>
-    <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></tr>
-  </table>
+      <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></tr>
+      <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></tr>
+    </table>
+  }
 </section>
diff --git a/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.ts b/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.ts
index a5a6a92cf984..a1a505fe81db 100644
--- a/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.ts
+++ b/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {MatButtonToggleGroup, MatButtonToggleModule} from '@angular/material/button-toggle';
 import {MatTableModule} from '@angular/material/table';
 import {MatButtonModule} from '@angular/material/button';
@@ -12,7 +11,7 @@ import {MatButtonModule} from '@angular/material/button';
   styleUrls: ['table-sticky-complex-example.css'],
   templateUrl: 'table-sticky-complex-example.html',
   standalone: true,
-  imports: [MatButtonModule, MatButtonToggleModule, NgFor, MatTableModule],
+  imports: [MatButtonModule, MatButtonToggleModule, MatTableModule],
 })
 export class TableStickyComplexExample {
   displayedColumns: string[] = [];
diff --git a/src/components-examples/material/tabs/tab-group-async/tab-group-async-example.html b/src/components-examples/material/tabs/tab-group-async/tab-group-async-example.html
index c1f93438ca1a..a011ccc70408 100644
--- a/src/components-examples/material/tabs/tab-group-async/tab-group-async-example.html
+++ b/src/components-examples/material/tabs/tab-group-async/tab-group-async-example.html
@@ -1,10 +1,12 @@
-<ng-container *ngIf="(asyncTabs | async) === null">
+@if ((asyncTabs | async) === null) {
   Loading tabs...
-</ng-container>
+}
 
 <mat-tab-group>
-  <mat-tab *ngFor="let tab of asyncTabs | async">
-    <ng-template mat-tab-label>{{tab.label}}</ng-template>
-    {{tab.content}}
-  </mat-tab>
+  @for (tab of asyncTabs | async; track tab) {
+    <mat-tab>
+      <ng-template mat-tab-label>{{tab.label}}</ng-template>
+      {{tab.content}}
+    </mat-tab>
+  }
 </mat-tab-group>
diff --git a/src/components-examples/material/tabs/tab-group-async/tab-group-async-example.ts b/src/components-examples/material/tabs/tab-group-async/tab-group-async-example.ts
index 1553ccb896d5..77392bddcb67 100644
--- a/src/components-examples/material/tabs/tab-group-async/tab-group-async-example.ts
+++ b/src/components-examples/material/tabs/tab-group-async/tab-group-async-example.ts
@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 import {Observable, Observer} from 'rxjs';
 import {MatTabsModule} from '@angular/material/tabs';
-import {NgIf, NgFor, AsyncPipe} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 
 export interface ExampleTab {
   label: string;
@@ -15,7 +15,7 @@ export interface ExampleTab {
   selector: 'tab-group-async-example',
   templateUrl: 'tab-group-async-example.html',
   standalone: true,
-  imports: [NgIf, MatTabsModule, NgFor, AsyncPipe],
+  imports: [MatTabsModule, AsyncPipe],
 })
 export class TabGroupAsyncExample {
   asyncTabs: Observable<ExampleTab[]>;
diff --git a/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.html b/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.html
index a4f04d26946b..a50d28597e30 100644
--- a/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.html
+++ b/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.html
@@ -14,14 +14,16 @@
 
 <mat-tab-group [selectedIndex]="selected.value"
                (selectedIndexChange)="selected.setValue($event)">
-  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
-    Contents for {{tab}} tab
+  @for (tab of tabs; track tab; let index = $index) {
+    <mat-tab [label]="tab">
+      Contents for {{tab}} tab
 
-    <button mat-raised-button
-            class="example-delete-tab-button"
-            [disabled]="tabs.length === 1"
-            (click)="removeTab(index)">
-      Delete Tab
-    </button>
-  </mat-tab>
+      <button mat-raised-button
+              class="example-delete-tab-button"
+              [disabled]="tabs.length === 1"
+              (click)="removeTab(index)">
+        Delete Tab
+      </button>
+    </mat-tab>
+  }
 </mat-tab-group>
diff --git a/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.ts b/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.ts
index b943f47fb7e2..a16bc9159558 100644
--- a/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.ts
+++ b/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.ts
@@ -1,6 +1,5 @@
 import {Component} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {NgFor} from '@angular/common';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatButtonModule} from '@angular/material/button';
@@ -23,7 +22,6 @@ import {MatFormFieldModule} from '@angular/material/form-field';
     MatButtonModule,
     MatCheckboxModule,
     MatTabsModule,
-    NgFor,
   ],
 })
 export class TabGroupDynamicExample {
diff --git a/src/components-examples/material/tabs/tab-group-paginated/tab-group-paginated-example.html b/src/components-examples/material/tabs/tab-group-paginated/tab-group-paginated-example.html
index d6cf4166e8f6..fe8f6264d46c 100644
--- a/src/components-examples/material/tabs/tab-group-paginated/tab-group-paginated-example.html
+++ b/src/components-examples/material/tabs/tab-group-paginated/tab-group-paginated-example.html
@@ -1,3 +1,5 @@
 <mat-tab-group>
-  <mat-tab [label]="tab" *ngFor="let tab of lotsOfTabs">Content</mat-tab>
-</mat-tab-group>
\ No newline at end of file
+  @for (tab of lotsOfTabs; track tab) {
+    <mat-tab [label]="tab">Content</mat-tab>
+  }
+</mat-tab-group>
diff --git a/src/components-examples/material/tabs/tab-group-paginated/tab-group-paginated-example.ts b/src/components-examples/material/tabs/tab-group-paginated/tab-group-paginated-example.ts
index 00fc787758e9..48f86b5c6e77 100644
--- a/src/components-examples/material/tabs/tab-group-paginated/tab-group-paginated-example.ts
+++ b/src/components-examples/material/tabs/tab-group-paginated/tab-group-paginated-example.ts
@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {NgFor} from '@angular/common';
 import {MatTabsModule} from '@angular/material/tabs';
 
 /**
@@ -9,7 +8,7 @@ import {MatTabsModule} from '@angular/material/tabs';
   selector: 'tab-group-paginated-example',
   templateUrl: 'tab-group-paginated-example.html',
   standalone: true,
-  imports: [MatTabsModule, NgFor],
+  imports: [MatTabsModule],
 })
 export class TabGroupPaginatedExample {
   lotsOfTabs = new Array(30).fill(0).map((_, index) => `Tab ${index}`);
diff --git a/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html b/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html
index ff20e1723701..b3f3d959cac8 100644
--- a/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html
+++ b/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.html
@@ -1,8 +1,10 @@
 <!-- #docregion mat-tab-nav -->
 <nav mat-tab-nav-bar [backgroundColor]="background" [tabPanel]="tabPanel">
-  <a mat-tab-link *ngFor="let link of links"
-     (click)="activeLink = link"
-     [active]="activeLink == link"> {{link}} </a>
+  @for (link of links; track link) {
+    <a mat-tab-link
+      (click)="activeLink = link"
+      [active]="activeLink == link"> {{link}} </a>
+  }
   <a mat-tab-link disabled>Disabled Link</a>
 </nav>
 <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
diff --git a/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts b/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts
index 3efbe1a2a184..244dcc462d89 100644
--- a/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts
+++ b/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts
@@ -1,7 +1,6 @@
 import {Component} from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
 import {MatButtonModule} from '@angular/material/button';
-import {NgFor} from '@angular/common';
 import {MatTabsModule} from '@angular/material/tabs';
 
 /**
@@ -12,7 +11,7 @@ import {MatTabsModule} from '@angular/material/tabs';
   templateUrl: 'tab-nav-bar-basic-example.html',
   styleUrls: ['tab-nav-bar-basic-example.css'],
   standalone: true,
-  imports: [MatTabsModule, NgFor, MatButtonModule],
+  imports: [MatTabsModule, MatButtonModule],
 })
 export class TabNavBarBasicExample {
   links = ['First', 'Second', 'Third'];
diff --git a/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.html b/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.html
index 583f84211476..193542e1326c 100644
--- a/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.html
+++ b/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.html
@@ -1,9 +1,9 @@
 <mat-form-field>
   <mat-label>Tooltip position</mat-label>
   <mat-select [formControl]="position">
-    <mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
-      {{positionOption}}
-    </mat-option>
+    @for (positionOption of positionOptions; track positionOption) {
+      <mat-option [value]="positionOption">{{positionOption}}</mat-option>
+    }
   </mat-select>
 </mat-form-field>
 
diff --git a/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.ts b/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.ts
index c850de5e80da..404d00b35c06 100644
--- a/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.ts
+++ b/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.ts
@@ -3,7 +3,6 @@ import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {TooltipPosition, MatTooltipModule} from '@angular/material/tooltip';
 import {MatButtonModule} from '@angular/material/button';
 import {CdkScrollable} from '@angular/cdk/scrolling';
-import {NgFor} from '@angular/common';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -20,7 +19,6 @@ import {MatFormFieldModule} from '@angular/material/form-field';
     MatSelectModule,
     FormsModule,
     ReactiveFormsModule,
-    NgFor,
     CdkScrollable,
     MatButtonModule,
     MatTooltipModule,
diff --git a/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.html b/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.html
index 09459eb63cea..7c1c1d959729 100644
--- a/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.html
+++ b/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.html
@@ -1,9 +1,9 @@
 <mat-form-field class="example-user-input">
   <mat-label>Tooltip position</mat-label>
   <mat-select [formControl]="position">
-    <mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
-      {{positionOption}}
-    </mat-option>
+    @for (positionOption of positionOptions; track positionOption) {
+      <mat-option [value]="positionOption">{{positionOption}}</mat-option>
+    }
   </mat-select>
 </mat-form-field>
 
diff --git a/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.ts b/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.ts
index 9546f66a41da..f4d49df6a117 100644
--- a/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.ts
+++ b/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.ts
@@ -2,7 +2,6 @@ import {Component} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {TooltipPosition, MatTooltipModule} from '@angular/material/tooltip';
 import {MatButtonModule} from '@angular/material/button';
-import {NgFor} from '@angular/common';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule} from '@angular/material/form-field';
 
@@ -19,7 +18,6 @@ import {MatFormFieldModule} from '@angular/material/form-field';
     MatSelectModule,
     FormsModule,
     ReactiveFormsModule,
-    NgFor,
     MatButtonModule,
     MatTooltipModule,
   ],
diff --git a/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.html b/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.html
index 4fe64405b046..83b50b116e49 100644
--- a/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.html
+++ b/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.html
@@ -11,8 +11,10 @@
       </mat-icon>
     </button>
     {{node.item}}
-    <mat-progress-bar *ngIf="node.isLoading"
-                      mode="indeterminate"
-                      class="example-tree-progress-bar"></mat-progress-bar>
+    @if (node.isLoading) {
+      <mat-progress-bar
+          mode="indeterminate"
+          class="example-tree-progress-bar"></mat-progress-bar>
+    }
   </mat-tree-node>
 </mat-tree>
diff --git a/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts b/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts
index 53b74dc52add..c783ec46ce65 100644
--- a/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts
+++ b/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts
@@ -4,7 +4,6 @@ import {Component, Injectable} from '@angular/core';
 import {BehaviorSubject, merge, Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
-import {NgIf} from '@angular/common';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import {MatTreeModule} from '@angular/material/tree';
@@ -142,7 +141,7 @@ export class DynamicDataSource implements DataSource<DynamicFlatNode> {
   templateUrl: 'tree-dynamic-example.html',
   styleUrls: ['tree-dynamic-example.css'],
   standalone: true,
-  imports: [MatTreeModule, MatButtonModule, MatIconModule, NgIf, MatProgressBarModule],
+  imports: [MatTreeModule, MatButtonModule, MatIconModule, MatProgressBarModule],
 })
 export class TreeDynamicExample {
   constructor(database: DynamicDatabase) {
diff --git a/src/dev-app/autocomplete/autocomplete-demo.html b/src/dev-app/autocomplete/autocomplete-demo.html
index 6bbe1e9bec6c..9296652d082f 100644
--- a/src/dev-app/autocomplete/autocomplete-demo.html
+++ b/src/dev-app/autocomplete/autocomplete-demo.html
@@ -21,11 +21,12 @@
       [hideSingleSelectionIndicator]="reactiveHideSingleSelectionIndicator"
       [autoActiveFirstOption]="reactiveAutoActiveFirstOption"
       [requireSelection]="reactiveRequireSelection">
-      <mat-option *ngFor="let state of reactiveStates; let index = index" [value]="state"
-        [disabled]="reactiveIsStateDisabled(state.index)">
-        <span>{{ state.name }}</span>
-        <span class="demo-secondary-text"> ({{ state.code }}) </span>
-      </mat-option>
+      @for (state of reactiveStates; track state; let index = $index) {
+        <mat-option [value]="state" [disabled]="reactiveIsStateDisabled(state.index)">
+          <span>{{ state.name }}</span>
+          <span class="demo-secondary-text"> ({{ state.code }}) </span>
+        </mat-option>
+      }
     </mat-autocomplete>
 
     <p>
@@ -66,21 +67,25 @@
     <div>Template-driven value (currentState): {{ currentState }}</div>
     <div>Template-driven dirty: {{ modelDir ? modelDir.dirty : false }}</div>
 
-    <!-- Added an ngIf below to test that autocomplete works with ngIf -->
-    <mat-form-field *ngIf="true" [color]="templateStatesTheme">
-      <mat-label>State</mat-label>
-      <input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
-        (ngModelChange)="tdStates = filterStates(currentState)" [disabled]="tdDisabled">
-      <mat-autocomplete #tdAuto="matAutocomplete"
-        [hideSingleSelectionIndicator]="templateHideSingleSelectionIndicator"
-        [autoActiveFirstOption]="templateAutoActiveFirstOption"
-        [requireSelection]="templateRequireSelection">
-        <mat-option *ngFor="let state of tdStates" [value]="state.name"
-          [disabled]="templateIsStateDisabled(state.index)">
-          <span>{{ state.name }}</span>
-        </mat-option>
-      </mat-autocomplete>
-    </mat-form-field>
+    <!-- Added an @if below to test that autocomplete works with @if -->
+    @if (true) {
+      <mat-form-field [color]="templateStatesTheme">
+        <mat-label>State</mat-label>
+        <input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
+          (ngModelChange)="tdStates = filterStates(currentState)" [disabled]="tdDisabled">
+        <mat-autocomplete #tdAuto="matAutocomplete"
+          [hideSingleSelectionIndicator]="templateHideSingleSelectionIndicator"
+          [autoActiveFirstOption]="templateAutoActiveFirstOption"
+          [requireSelection]="templateRequireSelection">
+          @for (state of tdStates; track state) {
+            <mat-option [value]="state.name"
+              [disabled]="templateIsStateDisabled(state.index)">
+              <span>{{ state.name }}</span>
+            </mat-option>
+          }
+        </mat-autocomplete>
+      </mat-form-field>
+    }
 
     <p>
       <button mat-button (click)="clearTemplateState()">RESET</button>
@@ -89,9 +94,9 @@
         TOGGLE DISABLED
       </button>
       <select [(ngModel)]="templateStatesTheme">
-        <option *ngFor="let theme of availableThemes" [value]="theme.value">
-          {{theme.name}}
-        </option>
+        @for (theme of availableThemes; track theme) {
+          <option [value]="theme.value">{{theme.name}}</option>
+        }
       </select>
     </p>
     <p>
@@ -141,8 +146,11 @@
 </div>
 
 <mat-autocomplete #groupedAuto="matAutocomplete">
-  <mat-optgroup *ngFor="let group of filteredGroupedStates"
-    [label]="'States starting with ' + group.letter">
-    <mat-option *ngFor="let state of group.states" [value]="state.name">{{ state.name }}</mat-option>
-  </mat-optgroup>
+  @for (group of filteredGroupedStates; track group) {
+    <mat-optgroup [label]="'States starting with ' + group.letter">
+      @for (state of group.states; track state) {
+        <mat-option [value]="state.name">{{ state.name }}</mat-option>
+      }
+    </mat-optgroup>
+  }
 </mat-autocomplete>
diff --git a/src/dev-app/autocomplete/autocomplete-demo.ts b/src/dev-app/autocomplete/autocomplete-demo.ts
index 08a9a9df027c..af551041dcde 100644
--- a/src/dev-app/autocomplete/autocomplete-demo.ts
+++ b/src/dev-app/autocomplete/autocomplete-demo.ts
@@ -224,9 +224,9 @@ export class AutocompleteDemo {
         <mat-label>T-Shirt Size</mat-label>
         <input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentSize" name="size">
         <mat-autocomplete #tdAuto="matAutocomplete">
-          <mat-option *ngFor="let size of sizes" [value]="size">
-            {{size}}
-          </mat-option>
+          @for (size of sizes; track size) {
+            <mat-option [value]="size">{{size}}</mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
 
diff --git a/src/dev-app/badge/badge-demo.html b/src/dev-app/badge/badge-demo.html
index f25109539acf..9de265315fa1 100644
--- a/src/dev-app/badge/badge-demo.html
+++ b/src/dev-app/badge/badge-demo.html
@@ -54,9 +54,9 @@ <h3>Size</h3>
 
   <div class="demo-badge">
     <h3>Text</h3>
-    <span [matBadge]="badgeContent" matBadgeOverlap="false" *ngIf="visible">
-      Hello
-    </span>
+    @if (visible) {
+      <span [matBadge]="badgeContent" matBadgeOverlap="false">Hello</span>
+    }
 
     <span matBadge="11111" matBadgeOverlap="false">
       Hello
diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo.html b/src/dev-app/bottom-sheet/bottom-sheet-demo.html
index 7201ea582a44..e473b19169b9 100644
--- a/src/dev-app/bottom-sheet/bottom-sheet-demo.html
+++ b/src/dev-app/bottom-sheet/bottom-sheet-demo.html
@@ -36,10 +36,12 @@ <h2>Options</h2>
 
 <ng-template let-bottomSheetRef="bottomSheetRef">
   <mat-nav-list>
-    <mat-list-item (click)="bottomSheetRef.dismiss()" *ngFor="let action of [1, 2, 3]">
-      <mat-icon matListItemIcon>folder</mat-icon>
-      <span matListItemTitle>Action {{ action }}</span>
-      <span matLine>Description</span>
-    </mat-list-item>
+    @for (action of [1, 2, 3]; track action) {
+      <mat-list-item (click)="bottomSheetRef.dismiss()">
+        <mat-icon matListItemIcon>folder</mat-icon>
+        <span matListItemTitle>Action {{ action }}</span>
+        <span matLine>Description</span>
+      </mat-list-item>
+    }
   </mat-nav-list>
 </ng-template>
diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts
index 7e6b58a7d446..6f1e7fe52d97 100644
--- a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts
+++ b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts
@@ -70,10 +70,12 @@ export class BottomSheetDemo {
 @Component({
   template: `
     <mat-nav-list>
-      <a href="#" mat-list-item (click)="handleClick($event)" *ngFor="let action of [1, 2, 3]">
-        <span matListItemTitle>Action {{ action }}</span>
-        <span matListItemLine>Description</span>
-      </a>
+      @for (action of [1, 2, 3]; track action) {
+        <a href="#" mat-list-item (click)="handleClick($event)">
+          <span matListItemTitle>Action {{ action }}</span>
+          <span matListItemLine>Description</span>
+        </a>
+      }
     </mat-nav-list>
   `,
   standalone: true,
diff --git a/src/dev-app/button-toggle/button-toggle-demo.html b/src/dev-app/button-toggle/button-toggle-demo.html
index a6db320b7973..b2cfc8186f3e 100644
--- a/src/dev-app/button-toggle/button-toggle-demo.html
+++ b/src/dev-app/button-toggle/button-toggle-demo.html
@@ -83,9 +83,9 @@ <h1>Single Toggle</h1>
 <h1>Dynamic Exclusive Selection</h1>
 <section>
   <mat-button-toggle-group name="pies" [(ngModel)]="favoritePie" [vertical]="isVertical">
-    <mat-button-toggle *ngFor="let pie of pieOptions" [value]="pie">
-      {{pie}}
-    </mat-button-toggle>
+    @for (pie of pieOptions; track pie) {
+      <mat-button-toggle [value]="pie">{{pie}}</mat-button-toggle>
+    }
   </mat-button-toggle-group>
   <p>Your favorite type of pie is: {{favoritePie}}</p>
 </section>
diff --git a/src/dev-app/cdk-menu/cdk-menu-demo.html b/src/dev-app/cdk-menu/cdk-menu-demo.html
index ed790605b587..545b4ca0ce6e 100644
--- a/src/dev-app/cdk-menu/cdk-menu-demo.html
+++ b/src/dev-app/cdk-menu/cdk-menu-demo.html
@@ -145,48 +145,44 @@ <h3>Radio items</h3>
 
   <ng-template #sizeMenu>
     <div class="example-menu" cdkMenu>
-      <button
-          *ngFor="let size of sizes"
+      @for (size of sizes; track size) {
+        <button
           cdkMenuItemRadio
           [cdkMenuItemChecked]="selectedSize === size"
-          (cdkMenuItemTriggered)="selectedSize = size">
-        {{size}}
-      </button>
+          (cdkMenuItemTriggered)="selectedSize = size">{{size}}</button>
+      }
     </div>
   </ng-template>
 
   <ng-template #colorMenu>
     <div class="example-menu" cdkMenu>
       <div cdkMenuGroup>
-        <button
-            *ngFor="let color of colors"
+        @for (color of colors; track color) {
+          <button
             cdkMenuItemRadio
             [cdkMenuItemChecked]="selectedColor === color"
-            (cdkMenuItemTriggered)="selectedColor = color">
-          {{color}}
-        </button>
+            (cdkMenuItemTriggered)="selectedColor = color">{{color}}</button>
+        }
       </div>
     </div>
   </ng-template>
 
   <ng-template #sizeAndColorMenu>
     <div class="example-menu" cdkMenu>
-      <button
-          *ngFor="let size of sizes"
+      @for (size of sizes; track size) {
+        <button
           cdkMenuItemRadio
           [cdkMenuItemChecked]="selectedSize === size"
-          (cdkMenuItemTriggered)="selectedSize = size">
-        {{size}}
-      </button>
+          (cdkMenuItemTriggered)="selectedSize = size">{{size}}</button>
+      }
       <hr />
       <div cdkMenuGroup>
-        <button
-            *ngFor="let color of colors"
+        @for (color of colors; track color) {
+          <button
             cdkMenuItemRadio
             [cdkMenuItemChecked]="selectedColor === color"
-            (cdkMenuItemTriggered)="selectedColor = color">
-          {{color}}
-        </button>
+            (cdkMenuItemTriggered)="selectedColor = color">{{color}}</button>
+        }
       </div>
     </div>
   </ng-template>
diff --git a/src/dev-app/checkbox/checkbox-demo.html b/src/dev-app/checkbox/checkbox-demo.html
index ce19e105b890..8bd338ef7ae5 100644
--- a/src/dev-app/checkbox/checkbox-demo.html
+++ b/src/dev-app/checkbox/checkbox-demo.html
@@ -151,7 +151,9 @@ <h5>Click action: check-indeterminate</h5>
         [indeterminate]="demoIndeterminate"
         (change)="demoChecked = $event.checked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [checked] & (change)</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [checked] & (change)
+        }
     </mat-checkbox>
     <mat-checkbox
         [required]="demoRequired"
@@ -167,7 +169,9 @@ <h5>Click action: check-indeterminate</h5>
         [indeterminate]="demoIndeterminate"
         [(ngModel)]="demoChecked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [(ngModel)]</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [(ngModel)]
+        }
     </mat-checkbox>
   </div>
   <div clickActionCheck>
@@ -187,7 +191,9 @@ <h5>Click action: check</h5>
         [indeterminate]="demoIndeterminate"
         (change)="demoChecked = $event.checked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [checked] & (change)</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [checked] & (change)
+        }
     </mat-checkbox>
     <mat-checkbox
         [required]="demoRequired"
@@ -203,7 +209,9 @@ <h5>Click action: check</h5>
         [indeterminate]="demoIndeterminate"
         [(ngModel)]="demoChecked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [(ngModel)]</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [(ngModel)]
+        }
     </mat-checkbox>
   </div>
   <div clickActionNoop>
@@ -223,7 +231,9 @@ <h5>Click action: noop</h5>
         [indeterminate]="demoIndeterminate"
         (change)="demoChecked = $event.checked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [checked] & (change)</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [checked] & (change)
+        }
     </mat-checkbox>
     <mat-checkbox
         [required]="demoRequired"
@@ -239,7 +249,9 @@ <h5>Click action: noop</h5>
         [indeterminate]="demoIndeterminate"
         [(ngModel)]="demoChecked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [(ngModel)]</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [(ngModel)]
+        }
     </mat-checkbox>
   </div>
   <div animationsNoop>
@@ -259,7 +271,9 @@ <h5>No animations</h5>
         [indeterminate]="demoIndeterminate"
         (change)="demoChecked = $event.checked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [checked] & (change)</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [checked] & (change)
+        }
     </mat-checkbox>
     <mat-checkbox
         [required]="demoRequired"
@@ -275,7 +289,9 @@ <h5>No animations</h5>
         [indeterminate]="demoIndeterminate"
         [(ngModel)]="demoChecked"
         (indeterminateChange)="demoIndeterminate = $event">
-      <ng-container *ngIf="!demoHideLabel">Checkbox w/ [(ngModel)]</ng-container>
+        @if (!demoHideLabel) {
+          Checkbox w/ [(ngModel)]
+        }
     </mat-checkbox>
   </div>
 </div>
diff --git a/src/dev-app/checkbox/nested-checklist.html b/src/dev-app/checkbox/nested-checklist.html
index 6a4ab3e617ab..7e41027b7fa7 100644
--- a/src/dev-app/checkbox/nested-checklist.html
+++ b/src/dev-app/checkbox/nested-checklist.html
@@ -1,18 +1,23 @@
 <h2>Tasks</h2>
 <ul>
-  <li *ngFor="let task of tasks">
-    <mat-checkbox [(ngModel)]="task.completed"
-                 [checked]="allComplete(task)"
-                 [indeterminate]="someComplete(task.subtasks)"
-                 (change)="setAllCompleted(task.subtasks, $event.checked)">
-      <h3>{{task.name}}</h3>
-    </mat-checkbox>
-    <ul>
-      <li *ngFor="let subtask of task.subtasks">
-        <mat-checkbox [(ngModel)]="subtask.completed">
-          {{subtask.name}}
-        </mat-checkbox>
-      </li>
-    </ul>
-  </li>
+  @for (task of tasks; track task) {
+    <li>
+      <mat-checkbox
+        [(ngModel)]="task.completed"
+        [checked]="allComplete(task)"
+        [indeterminate]="someComplete(task.subtasks)"
+        (change)="setAllCompleted(task.subtasks, $event.checked)">
+        <h3>{{task.name}}</h3>
+      </mat-checkbox>
+      <ul>
+        @for (subtask of task.subtasks; track subtask) {
+          <li>
+            <mat-checkbox [(ngModel)]="subtask.completed">
+              {{subtask.name}}
+            </mat-checkbox>
+          </li>
+        }
+      </ul>
+    </li>
+  }
 </ul>
diff --git a/src/dev-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html
index 894a2a2c60b1..60b2ded6ec09 100644
--- a/src/dev-app/chips/chips-demo.html
+++ b/src/dev-app/chips/chips-demo.html
@@ -95,13 +95,15 @@ <h4>With avatar, icons, and color</h4>
       <h4>With Events</h4>
 
       <mat-chip-set>
-        <mat-chip highlighted="true" color="warn" *ngIf="visible"
-                 (destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
-          With Events
-          <button matChipRemove aria-label="Remove chip">
-            <mat-icon>cancel</mat-icon>
-          </button>
-        </mat-chip>
+        @if (visible) {
+          <mat-chip highlighted="true" color="warn"
+                  (destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
+            With Events
+            <button matChipRemove aria-label="Remove chip">
+              <mat-icon>cancel</mat-icon>
+            </button>
+          </mat-chip>
+        }
       </mat-chip-set>
       <div>{{message}}</div>
 
@@ -122,19 +124,27 @@ <h4>With Events</h4>
       <h4>Single selection</h4>
 
       <mat-chip-listbox multiple="false" [disabled]="disabledListboxes">
-        <mat-chip-option *ngFor="let shirtSize of shirtSizes" [disabled]="shirtSize.disabled">
-          {{shirtSize.label}}
-          <mat-chip-avatar *ngIf="listboxesWithAvatar">{{shirtSize.avatar}}</mat-chip-avatar>
-        </mat-chip-option>
+        @for (shirtSize of shirtSizes; track shirtSize) {
+            <mat-chip-option [disabled]="shirtSize.disabled">
+              {{shirtSize.label}}
+              @if (listboxesWithAvatar) {
+                <mat-chip-avatar>{{shirtSize.avatar}}</mat-chip-avatar>
+              }
+            </mat-chip-option>
+          }
       </mat-chip-listbox>
 
       <h4>Multi selection</h4>
 
       <mat-chip-listbox multiple="true" [disabled]="disabledListboxes">
-        <mat-chip-option *ngFor="let hint of restaurantHints" [selected]="hint.selected">
-          <mat-chip-avatar *ngIf="listboxesWithAvatar">{{hint.avatar}}</mat-chip-avatar>
-          {{hint.label}}
-        </mat-chip-option>
+        @for (hint of restaurantHints; track hint) {
+          <mat-chip-option [selected]="hint.selected">
+            @if (listboxesWithAvatar) {
+              <mat-chip-avatar>{{hint.avatar}}</mat-chip-avatar>
+            }
+            {{hint.label}}
+          </mat-chip-option>
+        }
       </mat-chip-listbox>
 
     </mat-card-content>
@@ -163,15 +173,17 @@ <h4>Input is last child of chip grid</h4>
       <mat-form-field class="demo-has-chip-list">
         <mat-label>New Contributor...</mat-label>
         <mat-chip-grid #chipGrid1 [(ngModel)]="selectedPeople" required [disabled]="disableInputs">
-          <mat-chip-row *ngFor="let person of people"
-                   [editable]="editable"
-                   (removed)="remove(person)"
-                   (edited)="edit(person, $event)">
-            {{person.name}}
-            <button matChipRemove aria-label="Remove contributor">
-              <mat-icon>cancel</mat-icon>
-            </button>
-          </mat-chip-row>
+          @for (person of people; track person) {
+            <mat-chip-row
+              [editable]="editable"
+              (removed)="remove(person)"
+              (edited)="edit(person, $event)">
+              {{person.name}}
+              <button matChipRemove aria-label="Remove contributor">
+                <mat-icon>cancel</mat-icon>
+              </button>
+            </mat-chip-row>
+          }
           <input [disabled]="disableInputs"
                  [matChipInputFor]="chipGrid1"
                  [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
@@ -185,12 +197,14 @@ <h4>Input is next sibling child of chip grid</h4>
       <mat-form-field>
         <mat-label>New Contributor...</mat-label>
         <mat-chip-grid #chipGrid2 [(ngModel)]="selectedPeople" required [disabled]="disableInputs">
-          <mat-chip-row *ngFor="let person of people" (removed)="remove(person)">
-            {{person.name}}
-            <button matChipRemove aria-label="Remove contributor">
-              <mat-icon>cancel</mat-icon>
-            </button>
-          </mat-chip-row>
+          @for (person of people; track person) {
+            <mat-chip-row (removed)="remove(person)">
+              {{person.name}}
+              <button matChipRemove aria-label="Remove contributor">
+                <mat-icon>cancel</mat-icon>
+              </button>
+            </mat-chip-row>
+          }
         </mat-chip-grid>
         <input [matChipInputFor]="chipGrid2"
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
@@ -221,32 +235,30 @@ <h4>Stacked</h4>
       </p>
 
       <mat-chip-set class="mat-mdc-chip-set-stacked">
-        <mat-chip *ngFor="let aColor of availableColors" highlighted="true"
-                  [color]="aColor.color">
-          {{aColor.name}}
-        </mat-chip>
+        @for (aColor of availableColors; track aColor) {
+          <mat-chip highlighted="true" [color]="aColor.color">{{aColor.name}}</mat-chip>
+        }
       </mat-chip-set>
 
       <h4>NgModel with multi selection</h4>
 
       <mat-chip-listbox [multiple]="true" [(ngModel)]="selectedColors">
-        <mat-chip-option *ngFor="let aColor of availableColors" [color]="aColor.color"
-                 [value]="aColor.name">
-          {{aColor.name}}
-        </mat-chip-option>
+        @for (aColor of availableColors; track aColor) {
+          <mat-chip-option [color]="aColor.color" [value]="aColor.name">{{aColor.name}}</mat-chip-option>
+        }
       </mat-chip-listbox>
 
       The selected colors are
-      <span *ngFor="let color of selectedColors; let isLast=last">
-        {{color}}{{isLast ? '' : ', '}}</span>.
+      @for (color of selectedColors; track color; let isLast = $last) {
+        <span>{{color}}{{isLast ? '' : ', '}}</span>
+      }
 
       <h4>NgModel with single selection</h4>
 
       <mat-chip-listbox [(ngModel)]="selectedColor">
-        <mat-chip-option *ngFor="let aColor of availableColors" [color]="aColor.color"
-                 [value]="aColor.name">
-          {{aColor.name}}
-        </mat-chip-option>
+        @for (aColor of availableColors; track aColor) {
+          <mat-chip-option [color]="aColor.color" [value]="aColor.name">{{aColor.name}}</mat-chip-option>
+        }
       </mat-chip-listbox>
 
       The selected color is {{selectedColor}}.
@@ -254,21 +266,22 @@ <h4>NgModel with single selection</h4>
       <h4>Single selection without checkmark selection indicator.</h4>
 
       <mat-chip-listbox [(ngModel)]="selectedColor" [hideSingleSelectionIndicator]="true">
-        <mat-chip-option *ngFor="let aColor of availableColors" [color]="aColor.color"
-                 [value]="aColor.name">
-          {{aColor.name}}
-        </mat-chip-option>
+        @for (aColor of availableColors; track aColor) {
+          <mat-chip-option [color]="aColor.color" [value]="aColor.name">{{aColor.name}}</mat-chip-option>
+        }
       </mat-chip-listbox>
 
       <h4>Single selection with decorative icons.</h4>
 
       <mat-chip-listbox [(ngModel)]="selectedColor" [hideSingleSelectionIndicator]="true">
-        <mat-chip-option *ngFor="let aColor of availableColors" [color]="aColor.color"
-                 [value]="aColor.name">
-          <mat-icon matChipAvatar>home</mat-icon>
-          {{aColor.name}}
-          <mat-icon matChipTrailingIcon>star</mat-icon>
-        </mat-chip-option>
+        @for (aColor of availableColors; track aColor) {
+          <mat-chip-option [color]="aColor.color"
+                  [value]="aColor.name">
+            <mat-icon matChipAvatar>home</mat-icon>
+            {{aColor.name}}
+            <mat-icon matChipTrailingIcon>star</mat-icon>
+          </mat-chip-option>
+        }
       </mat-chip-listbox>
 
       The selected color is {{selectedColor}}.
@@ -276,11 +289,13 @@ <h4>Single selection with decorative icons.</h4>
       <h4>Single selection with stacked appearance.</h4>
 
       <mat-chip-listbox [(ngModel)]="selectedColor" class="mat-mdc-chip-set-stacked">
-        <mat-chip-option *ngFor="let aColor of availableColors" [color]="aColor.color"
-                 [value]="aColor.name">
-          {{aColor.name}}
-          <mat-icon matChipTrailingIcon>star</mat-icon>
-        </mat-chip-option>
+        @for (aColor of availableColors; track aColor) {
+          <mat-chip-option [color]="aColor.color"
+                  [value]="aColor.name">
+            {{aColor.name}}
+            <mat-icon matChipTrailingIcon>star</mat-icon>
+          </mat-chip-option>
+        }
       </mat-chip-listbox>
 
       The selected color is {{selectedColor}}.
diff --git a/src/dev-app/connected-overlay/connected-overlay-demo.html b/src/dev-app/connected-overlay/connected-overlay-demo.html
index c0d6bee6f8f6..ebdcea4a2014 100644
--- a/src/dev-app/connected-overlay/connected-overlay-demo.html
+++ b/src/dev-app/connected-overlay/connected-overlay-demo.html
@@ -111,7 +111,11 @@ <h2>Options</h2>
 <ng-template #overlay>
   <div class="demo-overlay-connected-overlay">
     <div style="overflow: auto;">
-      <ul><li *ngFor="let item of itemArray; index as i">{{itemText}} {{i}}</li></ul>
+      <ul>
+        @for (item of itemArray; track item; let i = $index) {
+          <li>{{itemText}} {{i}}</li>
+        }
+      </ul>
     </div>
   </div>
 </ng-template>
diff --git a/src/dev-app/datepicker/datepicker-demo.html b/src/dev-app/datepicker/datepicker-demo.html
index ccbb216015fe..f2132816a6c5 100644
--- a/src/dev-app/datepicker/datepicker-demo.html
+++ b/src/dev-app/datepicker/datepicker-demo.html
@@ -21,10 +21,12 @@ <h2>Options</h2>
         [disabled]="inputDisabled" [max]="maxDate">
     <mat-datepicker-toggle matSuffix [for]="minDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #minDatePicker [touchUi]="touch" [disabled]="datepickerDisabled">
-      <mat-datepicker-actions *ngIf="showActions">
-        <button mat-button matDatepickerCancel>Cancel</button>
-        <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
-      </mat-datepicker-actions>
+      @if (showActions) {
+        <mat-datepicker-actions>
+          <button mat-button matDatepickerCancel>Cancel</button>
+          <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
+        </mat-datepicker-actions>
+      }
     </mat-datepicker>
   </mat-form-field>
   <mat-form-field color="accent">
@@ -33,10 +35,12 @@ <h2>Options</h2>
         [disabled]="inputDisabled" [min]="minDate">
     <mat-datepicker-toggle matSuffix [for]="maxDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #maxDatePicker [touchUi]="touch" [disabled]="datepickerDisabled">
-      <mat-datepicker-actions *ngIf="showActions">
-        <button mat-button matDatepickerCancel>Cancel</button>
-        <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
-      </mat-datepicker-actions>
+      @if (showActions) {
+        <mat-datepicker-actions>
+          <button mat-button matDatepickerCancel>Cancel</button>
+          <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
+        </mat-datepicker-actions>
+      }
     </mat-datepicker>
   </mat-form-field>
 </p>
@@ -47,10 +51,12 @@ <h2>Options</h2>
         [disabled]="inputDisabled">
     <mat-datepicker-toggle matSuffix [for]="startAtPicker"></mat-datepicker-toggle>
     <mat-datepicker #startAtPicker [touchUi]="touch" [disabled]="datepickerDisabled">
-      <mat-datepicker-actions *ngIf="showActions">
-        <button mat-button matDatepickerCancel>Cancel</button>
-        <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
-      </mat-datepicker-actions>
+      @if (showActions) {
+        <mat-datepicker-actions>
+          <button mat-button matDatepickerCancel>Cancel</button>
+          <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
+        </mat-datepicker-actions>
+      }
     </mat-datepicker>
   </mat-form-field>
 </p>
@@ -78,17 +84,27 @@ <h2>Result</h2>
         [startAt]="startAt"
         [startView]="yearView ? 'year' : 'month'"
         [color]="color">
-      <mat-datepicker-actions *ngIf="showActions">
-        <button mat-button matDatepickerCancel>Cancel</button>
-        <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
-      </mat-datepicker-actions>
+      @if (showActions) {
+        <mat-datepicker-actions>
+          <button mat-button matDatepickerCancel>Cancel</button>
+          <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
+        </mat-datepicker-actions>
+      }
     </mat-datepicker>
-    <mat-error *ngIf="resultPickerModel.hasError('matDatepickerParse')">
-      "{{resultPickerModel.getError('matDatepickerParse').text}}" is not a valid date!
-    </mat-error>
-    <mat-error *ngIf="resultPickerModel.hasError('matDatepickerMin')">Too early!</mat-error>
-    <mat-error *ngIf="resultPickerModel.hasError('matDatepickerMax')">Too late!</mat-error>
-    <mat-error *ngIf="resultPickerModel.hasError('matDatepickerFilter')">Date unavailable!</mat-error>
+    @if (resultPickerModel.hasError('matDatepickerParse')) {
+      <mat-error>
+        "{{resultPickerModel.getError('matDatepickerParse').text}}" is not a valid date!
+      </mat-error>
+    }
+    @if (resultPickerModel.hasError('matDatepickerMin')) {
+      <mat-error>Too early!</mat-error>
+    }
+    @if (resultPickerModel.hasError('matDatepickerMax')) {
+      <mat-error>Too late!</mat-error>
+    }
+    @if (resultPickerModel.hasError('matDatepickerFilter')) {
+      <mat-error>Date unavailable!</mat-error>
+    }
   </mat-form-field>
 </p>
 <p>Last input: {{lastDateInput}}</p>
@@ -110,10 +126,12 @@ <h2>Result</h2>
       [disabled]="datepickerDisabled"
       [startAt]="startAt"
       [startView]="yearView ? 'year' : 'month'">
-    <mat-datepicker-actions *ngIf="showActions">
-      <button mat-button matDatepickerCancel>Cancel</button>
-      <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
-    </mat-datepicker-actions>
+    @if (showActions) {
+      <mat-datepicker-actions>
+        <button mat-button matDatepickerCancel>Cancel</button>
+        <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
+      </mat-datepicker-actions>
+    }
   </mat-datepicker>
 </p>
 
@@ -217,10 +235,12 @@ <h2>Range picker</h2>
       [disabled]="datepickerDisabled"
       [color]="color"
       #range1Picker>
-      <mat-date-range-picker-actions *ngIf="showActions">
-        <button mat-button matDateRangePickerCancel>Cancel</button>
-        <button mat-raised-button color="primary" matDateRangePickerApply>Apply</button>
-      </mat-date-range-picker-actions>
+      @if (showActions) {
+        <mat-date-range-picker-actions>
+          <button mat-button matDateRangePickerCancel>Cancel</button>
+          <button mat-raised-button color="primary" matDateRangePickerApply>Apply</button>
+        </mat-date-range-picker-actions>
+      }
     </mat-date-range-picker>
   </mat-form-field>
   <div>{{range1.value | json}}</div>
@@ -247,10 +267,12 @@ <h2>Range picker</h2>
       [disabled]="datepickerDisabled"
       panelClass="demo-custom-range"
       #range2Picker>
-      <mat-date-range-picker-actions *ngIf="showActions">
-        <button mat-button matDateRangePickerCancel>Cancel</button>
-        <button mat-raised-button color="primary" matDateRangePickerApply>Apply</button>
-      </mat-date-range-picker-actions>
+      @if (showActions) {
+        <mat-date-range-picker-actions>
+          <button mat-button matDateRangePickerCancel>Cancel</button>
+          <button mat-raised-button color="primary" matDateRangePickerApply>Apply</button>
+        </mat-date-range-picker-actions>
+      }
     </mat-date-range-picker>
   </mat-form-field>
   <div>{{range2.value | json}}</div>
@@ -276,10 +298,12 @@ <h2>Range picker</h2>
       [touchUi]="touch"
       [disabled]="datepickerDisabled"
       #range3Picker>
-      <mat-date-range-picker-actions *ngIf="showActions">
-        <button mat-button matDateRangePickerCancel>Cancel</button>
-        <button mat-raised-button color="primary" matDateRangePickerApply>Apply</button>
-      </mat-date-range-picker-actions>
+      @if (showActions) {
+        <mat-date-range-picker-actions>
+          <button mat-button matDateRangePickerCancel>Cancel</button>
+          <button mat-raised-button color="primary" matDateRangePickerApply>Apply</button>
+        </mat-date-range-picker-actions>
+      }
     </mat-date-range-picker>
   </mat-form-field>
   <div>{{range3.value | json}}</div>
@@ -296,10 +320,12 @@ <h2>Range picker with custom selection strategy</h2>
     </mat-date-range-input>
     <mat-datepicker-toggle [for]="range4Picker" matSuffix></mat-datepicker-toggle>
     <mat-date-range-picker customRangeStrategy #range4Picker>
-      <mat-date-range-picker-actions *ngIf="showActions">
-        <button mat-button matDateRangePickerCancel>Cancel</button>
-        <button mat-raised-button color="primary" matDateRangePickerApply>Apply</button>
-      </mat-date-range-picker-actions>
+      @if (showActions) {
+        <mat-date-range-picker-actions>
+          <button mat-button matDateRangePickerCancel>Cancel</button>
+          <button mat-raised-button color="primary" matDateRangePickerApply>Apply</button>
+        </mat-date-range-picker-actions>
+      }
     </mat-date-range-picker>
   </mat-form-field>
 </div>
diff --git a/src/dev-app/dev-app/dev-app-layout.html b/src/dev-app/dev-app/dev-app-layout.html
index b4b7829c0142..56eb8f7a8fa9 100644
--- a/src/dev-app/dev-app/dev-app-layout.html
+++ b/src/dev-app/dev-app/dev-app-layout.html
@@ -1,15 +1,15 @@
 <mat-sidenav-container class="demo-container">
   <mat-sidenav #navigation role="navigation">
     <mat-nav-list>
-      <a *ngFor="let navItem of navItems"
-         mat-list-item
-         (click)="navigation.close()"
-         routerLinkActive
-         #routerLinkActiveInstance="routerLinkActive"
-         [attr.tabindex]="routerLinkActiveInstance.isActive ? 0 : -1"
-         [routerLink]="[navItem.route]">
-        {{navItem.name}}
-      </a>
+      @for (navItem of navItems; track navItem) {
+        <a
+          mat-list-item
+          (click)="navigation.close()"
+          routerLinkActive
+          #routerLinkActiveInstance="routerLinkActive"
+          [attr.tabindex]="routerLinkActiveInstance.isActive ? 0 : -1"
+          [routerLink]="[navItem.route]">{{navItem.name}}</a>
+      }
 
       <mat-divider></mat-divider>
 
diff --git a/src/dev-app/drag-drop/drag-drop-demo.html b/src/dev-app/drag-drop/drag-drop-demo.html
index 035c0125592e..5c011e0a1042 100644
--- a/src/dev-app/drag-drop/drag-drop-demo.html
+++ b/src/dev-app/drag-drop/drag-drop-demo.html
@@ -5,12 +5,13 @@ <h2>To do</h2>
       cdkDropList
       (cdkDropListDropped)="drop($event)"
       [cdkDropListLockAxis]="axisLock"
-      [cdkDropListData]="todo"
-    >
-      <div *ngFor="let item of todo" cdkDrag>
-        {{item}}
-        <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
-      </div>
+      [cdkDropListData]="todo">
+      @for (item of todo; track item) {
+        <div cdkDrag>
+          {{item}}
+          <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
+        </div>
+      }
     </div>
   </div>
 
@@ -20,12 +21,13 @@ <h2>Done</h2>
       cdkDropList
       (cdkDropListDropped)="drop($event)"
       [cdkDropListLockAxis]="axisLock"
-      [cdkDropListData]="done"
-    >
-      <div *ngFor="let item of done" cdkDrag>
-        {{item}}
-        <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
-      </div>
+      [cdkDropListData]="done">
+      @for (item of done; track item) {
+        <div cdkDrag>
+          {{item}}
+          <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
+        </div>
+      }
     </div>
   </div>
 </div>
@@ -38,12 +40,13 @@ <h2>Ages</h2>
       cdkDropListOrientation="horizontal"
       (cdkDropListDropped)="drop($event)"
       [cdkDropListLockAxis]="axisLock"
-      [cdkDropListData]="ages"
-    >
-      <div *ngFor="let item of ages" cdkDrag>
-        {{item}}
-        <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
-      </div>
+      [cdkDropListData]="ages">
+      @for (item of ages; track item) {
+        <div cdkDrag>
+          {{item}}
+          <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
+        </div>
+      }
     </div>
   </div>
 
@@ -54,12 +57,13 @@ <h2>Preferred Ages</h2>
       cdkDropListOrientation="horizontal"
       (cdkDropListDropped)="drop($event)"
       [cdkDropListLockAxis]="axisLock"
-      [cdkDropListData]="preferredAges"
-    >
-      <div *ngFor="let item of preferredAges" cdkDrag>
-        {{item}}
-        <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
-      </div>
+      [cdkDropListData]="preferredAges">
+      @for (item of preferredAges; track item) {
+        <div cdkDrag>
+          {{item}}
+          <mat-icon cdkDragHandle svgIcon="dnd-move"></mat-icon>
+        </div>
+      }
     </div>
   </div>
 </div>
diff --git a/src/dev-app/example/example-list.ts b/src/dev-app/example/example-list.ts
index e7b6d5aa0c67..99b0363efea4 100644
--- a/src/dev-app/example/example-list.ts
+++ b/src/dev-app/example/example-list.ts
@@ -20,18 +20,20 @@ import {Example} from './example';
   imports: [CommonModule, MatExpansionModule, Example],
   template: `
     <mat-accordion multi>
-      <mat-expansion-panel *ngFor="let id of ids" [expanded]="expandAll">
-        <mat-expansion-panel-header>
-          <div class="header">
-            <div class="title">{{_getTitle(id)}}</div>
-            <div class="id"> <{{id}}> </div>
-          </div>
-        </mat-expansion-panel-header>
+      @for (id of ids; track id) {
+        <mat-expansion-panel [expanded]="expandAll">
+          <mat-expansion-panel-header>
+            <div class="header">
+              <div class="title">{{_getTitle(id)}}</div>
+              <div class="id"> <{{id}}> </div>
+            </div>
+          </mat-expansion-panel-header>
 
-        <ng-template matExpansionPanelContent>
-          <material-example [id]="id"></material-example>
-        </ng-template>
-      </mat-expansion-panel>
+          <ng-template matExpansionPanelContent>
+            <material-example [id]="id"></material-example>
+          </ng-template>
+        </mat-expansion-panel>
+      }
     </mat-accordion>
   `,
   styles: [
diff --git a/src/dev-app/example/example.ts b/src/dev-app/example/example.ts
index 3a1be014cb8f..6bef62e47864 100644
--- a/src/dev-app/example/example.ts
+++ b/src/dev-app/example/example.ts
@@ -24,14 +24,18 @@ import {
   standalone: true,
   imports: [CommonModule],
   template: `
-    <div class="label" *ngIf="showLabel">
-      <span class="title"> {{title}} </span>
-      <span class="id"> <{{id}}> </span>
-    </div>
+    @if (showLabel) {
+      <div class="label">
+        <span class="title"> {{title}} </span>
+        <span class="id"> <{{id}}> </span>
+      </div>
+    }
 
-    <div *ngIf="!id">
-      Could not find example {{id}}
-    </div>
+    @if (!id) {
+      <div>
+        Could not find example {{id}}
+      </div>
+    }
   `,
   styles: [
     `
diff --git a/src/dev-app/expansion/expansion-demo.html b/src/dev-app/expansion/expansion-demo.html
index 98b14ca6ada2..8a93eed0ea06 100644
--- a/src/dev-app/expansion/expansion-demo.html
+++ b/src/dev-app/expansion/expansion-demo.html
@@ -33,7 +33,9 @@ <h1>Single Expansion Panel</h1>
 
 <p>Expansion Panel Animation Events</p>
 <code class="demo-expansion-code">
-  <pre *ngFor="let event of events">{{event}}</pre>
+  @for (event of events; track event) {
+    <pre>{{event}}</pre>
+  }
 </code>
 
 <h1>matAccordion</h1>
@@ -78,14 +80,18 @@ <h1>matAccordion</h1>
     <mat-expansion-panel-header>Section 2</mat-expansion-panel-header>
     <p>This is the content text that makes sense here.</p>
   </mat-expansion-panel>
-  <mat-expansion-panel #panel3 *ngIf="showPanel3">
-    <mat-expansion-panel-header>Section 3</mat-expansion-panel-header>
-    <mat-checkbox #showButtons>Reveal Buttons Below</mat-checkbox>
-    <mat-action-row *ngIf="showButtons.checked">
-      <button mat-button (click)="panel2.expanded = true">OPEN SECTION 2</button>
-      <button mat-button (click)="panel3.expanded = false">CLOSE</button>
-    </mat-action-row>
-  </mat-expansion-panel>
+  @if (showPanel3) {
+    <mat-expansion-panel #panel3>
+      <mat-expansion-panel-header>Section 3</mat-expansion-panel-header>
+      <mat-checkbox #showButtons>Reveal Buttons Below</mat-checkbox>
+      @if (showButtons.checked) {
+        <mat-action-row>
+          <button mat-button (click)="panel2.expanded = true">OPEN SECTION 2</button>
+          <button mat-button (click)="panel3.expanded = false">CLOSE</button>
+        </mat-action-row>
+      }
+    </mat-expansion-panel>
+  }
 </mat-accordion>
 
 <h1>cdkAccordion</h1>
@@ -102,7 +108,9 @@ <h1>cdkAccordion</h1>
       <button mat-button (click)="item1.expanded = true">Expand</button>
       <button mat-button (click)="item1.expanded = false">Collapse</button>
     </p>
-    <p *ngIf="item1.expanded">I only show if item 1 is expanded</p>
+    @if (item1.expanded) {
+      <p>I only show if item 1 is expanded</p>
+    }
   </cdk-accordion-item>
   <cdk-accordion-item #item2="cdkAccordionItem">
     <p>
@@ -110,7 +118,9 @@ <h1>cdkAccordion</h1>
       <button mat-button (click)="item2.expanded = true">Expand</button>
       <button mat-button (click)="item2.expanded = false">Collapse</button>
     </p>
-    <p *ngIf="item2.expanded">I only show if item 2 is expanded</p>
+    @if (item2.expanded) {
+      <p>I only show if item 2 is expanded</p>
+    }
   </cdk-accordion-item>
   <cdk-accordion-item #item3="cdkAccordionItem">
     <p>
@@ -118,7 +128,9 @@ <h1>cdkAccordion</h1>
       <button mat-button (click)="item3.expanded = true">Expand</button>
       <button mat-button (click)="item3.expanded = false">Collapse</button>
     </p>
-    <p *ngIf="item3.expanded">I only show if item 3 is expanded</p>
+    @if (item3.expanded) {
+      <p>I only show if item 3 is expanded</p>
+    }
   </cdk-accordion-item>
 </cdk-accordion>
 
diff --git a/src/dev-app/focus-trap/focus-trap-demo.html b/src/dev-app/focus-trap/focus-trap-demo.html
index b4f488d6c79c..6a84b7a10728 100644
--- a/src/dev-app/focus-trap/focus-trap-demo.html
+++ b/src/dev-app/focus-trap/focus-trap-demo.html
@@ -65,8 +65,8 @@
 
   <mat-card class="demo-mat-card">
     <mat-toolbar color="primary">Shadow DOMs</mat-toolbar>
-    <mat-card-content class="demo-mat-card-content" [ngSwitch]="_supportsShadowDom">
-      <ng-container *ngSwitchCase="true">
+    <mat-card-content class="demo-mat-card-content">
+      @if (_supportsShadowDom) {
         <button mat-raised-button (click)="toggleFocus(shadowDomFocusTrap)">
           {{shadowDomFocusTrap && shadowDomFocusTrap.enabled ? "Disable" : "Enable"}} FocusTrap
         </button>
@@ -83,9 +83,10 @@
         <shadow-dom-demo>
           <textarea class="demo-focus-trap-element" placeholder="I am in a shadow DOM"></textarea>
         </shadow-dom-demo>
-      </ng-container>
-      <ng-container *ngSwitchCase="false">Shadow DOM not supported</ng-container>
-    </mat-card-content>
+      } @else {
+        Shadow DOM not supported
+      }
+</mat-card-content>
   </mat-card>
 
   <mat-card class="demo-mat-card">
diff --git a/src/dev-app/google-map/google-map-demo.html b/src/dev-app/google-map/google-map-demo.html
index 9bb8317d2ab6..610b1141132f 100644
--- a/src/dev-app/google-map/google-map-demo.html
+++ b/src/dev-app/google-map/google-map-demo.html
@@ -1,174 +1,198 @@
-<div *ngIf="!hasLoaded">Loading Google Maps API...</div>
-<div class="demo-google-map" *ngIf="hasLoaded">
-  <google-map height="400px"
-              width="750px"
-              [center]="center"
-              [zoom]="zoom"
-              (authFailure)="authFailure()"
-              (mapClick)="handleClick($event)"
-              (mapMousemove)="handleMove($event)"
-              (mapRightclick)="handleRightclick()"
-              [mapTypeId]="mapTypeId">
-    <map-marker-clusterer [imagePath]="markerClustererImagePath">
-      <map-marker #firstMarker="mapMarker"
-                  [position]="center"
-                  (mapClick)="clickMarker(firstMarker)"></map-marker>
-      <map-marker #marker="mapMarker"
-                  *ngFor="let markerPosition of markerPositions"
-                  [position]="markerPosition"
-                  [options]="markerOptions"
-                  (mapClick)="clickMarker(marker)"></map-marker>
-    </map-marker-clusterer>
-    <map-info-window>Testing 1 2 3</map-info-window>
-    <map-polyline *ngIf="isPolylineDisplayed" [options]="polylineOptions"></map-polyline>
-    <map-polygon *ngIf="isPolygonDisplayed" [options]="polygonOptions"></map-polygon>
-    <map-rectangle *ngIf="isRectangleDisplayed" [options]="rectangleOptions"></map-rectangle>
-    <map-circle *ngIf="isCircleDisplayed" [options]="circleOptions"></map-circle>
-    <map-ground-overlay *ngIf="isGroundOverlayDisplayed"
-                        [url]="groundOverlayUrl"
-                        [bounds]="groundOverlayBounds"></map-ground-overlay>
-    <map-kml-layer *ngIf="isKmlLayerDisplayed"
-                   [url]="demoKml"></map-kml-layer>
-    <map-traffic-layer *ngIf="isTrafficLayerDisplayed"></map-traffic-layer>
-    <map-transit-layer *ngIf="isTransitLayerDisplayed"></map-transit-layer>
-    <map-bicycling-layer *ngIf="isBicyclingLayerDisplayed"></map-bicycling-layer>
-    <map-directions-renderer *ngIf="directionsResult"
-                             [directions]="directionsResult"></map-directions-renderer>
-
-    <map-heatmap-layer *ngIf="isHeatmapDisplayed"
-                       [data]="heatmapData"
-                       [options]="heatmapOptions"></map-heatmap-layer>
-  </google-map>
-
-  <p><label>Latitude:</label> {{display?.lat}}</p>
-  <p><label>Longitude:</label> {{display?.lng}}</p>
-
-  <div>
-    <label for="map-type">
-      Select map type
-
-      <select id="map-type" (change)="mapTypeChanged($event)" #mapType>
-        <option *ngFor="let type of mapTypeIds" [value]="type">{{type}}</option>
-      </select>
-    </label>
-  </div>
-
-  <div>
-    <label for="polyline-checkbox">
-      Toggle Polyline
-      <input type="checkbox" (click)="togglePolylineDisplay()">
-    </label>
-  </div>
-  <div>
-    <label for="editable-polyline-checkbox">
-      Toggle Editable Polyline
-      <input type="checkbox"
-             [disabled]="!isPolylineDisplayed"
-             (click)="toggleEditablePolyline()">
-    </label>
-  </div>
-
-  <div>
-    <label for="polygon-checkbox">
-      Toggle Polygon
-      <input type="checkbox" (click)="togglePolygonDisplay()">
-    </label>
-  </div>
-  <div>
-    <label for="editable-polygon-checkbox">
-      Toggle Editable Polygon
-      <input type="checkbox"
-             [disabled]="!isPolygonDisplayed"
-             (click)="toggleEditablePolygon()">
-    </label>
-  </div>
-
-  <div>
-    <label for="rectangle-checkbox">
-      Toggle Rectangle
-      <input type="checkbox" (click)="toggleRectangleDisplay()">
-    </label>
-  </div>
-  <div>
-    <label for="editable-rectangle-checkbox">
-      Toggle Editable Rectangle
-      <input type="checkbox"
-             [disabled]="!isRectangleDisplayed"
-             (click)="toggleEditableRectangle()">
-    </label>
-  </div>
-
-  <div>
-    <label for="circle-checkbox">
-      Toggle Circle
-      <input type="checkbox" (click)="toggleCircleDisplay()">
-    </label>
-  </div>
-  <div>
-    <label for="editable-circle-checkbox">
-      Toggle Editable Circle
-      <input type="checkbox" [disabled]="!isCircleDisplayed" (click)="toggleEditableCircle()">
-    </label>
-  </div>
-
-  <div>
-    <label for="ground-overlay-checkbox">
-      Toggle Ground Overlay
-      <input type="checkbox" (click)="toggleGroundOverlayDisplay()">
-    </label>
-  </div>
-
-  <div>
-    <label for="ground-overlay-image">
-      Ground Overlay image
-
-      <select id="ground-overlay-image" (change)="groundOverlayUrlChanged($event)">
-        <option
-          *ngFor="let image of groundOverlayImages"
-          [value]="image.url">{{image.title}}</option>
-      </select>
-    </label>
-  </div>
-
-  <div>
-    <label for="kml-layer-checkbox">
-      Toggle KML Layer
-      <input type="checkbox" (click)="toggleKmlLayerDisplay()">
-    </label>
-  </div>
-
-  <div>
-    <label for="traffic-layer-checkbox">
-      Toggle Traffic Layer
-      <input type="checkbox" (click)="toggleTrafficLayerDisplay()">
-    </label>
-  </div>
-
-  <div>
-    <label for="transit-layer-checkbox">
-      Toggle Transit Layer
-      <input type="checkbox" (click)="toggleTransitLayerDisplay()">
-    </label>
-  </div>
-
-  <div>
-    <label for="bicycling-layer-checkbox">
-      Toggle Bicycling Layer
-      <input type="checkbox" (click)="toggleBicyclingLayerDisplay()">
-    </label>
-  </div>
-
-  <div>
-    <label for="heatmap-layer-checkbox">
-      Toggle Heatmap Layer
-      <input type="checkbox" (click)="toggleHeatmapLayerDisplay()">
-    </label>
-  </div>
-
-  <div>
-    <button mat-button (click)="calculateDirections()">
-      Calculate directions between first two markers
-    </button>
-  </div>
-
-</div>
+@if (hasLoaded) {
+  <div class="demo-google-map">
+    <google-map height="400px"
+                width="750px"
+                [center]="center"
+                [zoom]="zoom"
+                (authFailure)="authFailure()"
+                (mapClick)="handleClick($event)"
+                (mapMousemove)="handleMove($event)"
+                (mapRightclick)="handleRightclick()"
+                [mapTypeId]="mapTypeId">
+      <map-marker-clusterer [imagePath]="markerClustererImagePath">
+        <map-marker #firstMarker="mapMarker"
+                    [position]="center"
+                    (mapClick)="clickMarker(firstMarker)"></map-marker>
+        @for (markerPosition of markerPositions; track markerPosition) {
+          <map-marker #marker="mapMarker"
+            [position]="markerPosition"
+            [options]="markerOptions"
+            (mapClick)="clickMarker(marker)"></map-marker>
+        }
+      </map-marker-clusterer>
+      <map-info-window>Testing 1 2 3</map-info-window>
+      @if (isPolylineDisplayed) {
+        <map-polyline [options]="polylineOptions"></map-polyline>
+      }
+      @if (isPolygonDisplayed) {
+        <map-polygon [options]="polygonOptions"></map-polygon>
+      }
+      @if (isRectangleDisplayed) {
+        <map-rectangle [options]="rectangleOptions"></map-rectangle>
+      }
+      @if (isCircleDisplayed) {
+        <map-circle [options]="circleOptions"></map-circle>
+      }
+      @if (isGroundOverlayDisplayed) {
+        <map-ground-overlay
+          [url]="groundOverlayUrl"
+          [bounds]="groundOverlayBounds"></map-ground-overlay>
+      }
+      @if (isKmlLayerDisplayed) {
+        <map-kml-layer [url]="demoKml"></map-kml-layer>
+      }
+      @if (isTrafficLayerDisplayed) {
+        <map-traffic-layer></map-traffic-layer>
+      }
+      @if (isTransitLayerDisplayed) {
+        <map-transit-layer></map-transit-layer>
+      }
+      @if (isBicyclingLayerDisplayed) {
+        <map-bicycling-layer></map-bicycling-layer>
+      }
+      @if (directionsResult) {
+        <map-directions-renderer [directions]="directionsResult"></map-directions-renderer>
+      }
+      @if (isHeatmapDisplayed) {
+        <map-heatmap-layer
+          [data]="heatmapData"
+          [options]="heatmapOptions"></map-heatmap-layer>
+      }
+    </google-map>
+
+    <p><label>Latitude:</label> {{display?.lat}}</p>
+    <p><label>Longitude:</label> {{display?.lng}}</p>
+
+    <div>
+      <label for="map-type">
+        Select map type
+
+        <select id="map-type" (change)="mapTypeChanged($event)" #mapType>
+          @for (type of mapTypeIds; track type) {
+            <option [value]="type">{{type}}</option>
+          }
+        </select>
+      </label>
+    </div>
+
+    <div>
+      <label for="polyline-checkbox">
+        Toggle Polyline
+        <input type="checkbox" (click)="togglePolylineDisplay()">
+      </label>
+    </div>
+    <div>
+      <label for="editable-polyline-checkbox">
+        Toggle Editable Polyline
+        <input type="checkbox"
+              [disabled]="!isPolylineDisplayed"
+              (click)="toggleEditablePolyline()">
+      </label>
+    </div>
+
+    <div>
+      <label for="polygon-checkbox">
+        Toggle Polygon
+        <input type="checkbox" (click)="togglePolygonDisplay()">
+      </label>
+    </div>
+    <div>
+      <label for="editable-polygon-checkbox">
+        Toggle Editable Polygon
+        <input type="checkbox"
+              [disabled]="!isPolygonDisplayed"
+              (click)="toggleEditablePolygon()">
+      </label>
+    </div>
+
+    <div>
+      <label for="rectangle-checkbox">
+        Toggle Rectangle
+        <input type="checkbox" (click)="toggleRectangleDisplay()">
+      </label>
+    </div>
+    <div>
+      <label for="editable-rectangle-checkbox">
+        Toggle Editable Rectangle
+        <input type="checkbox"
+              [disabled]="!isRectangleDisplayed"
+              (click)="toggleEditableRectangle()">
+      </label>
+    </div>
+
+    <div>
+      <label for="circle-checkbox">
+        Toggle Circle
+        <input type="checkbox" (click)="toggleCircleDisplay()">
+      </label>
+    </div>
+    <div>
+      <label for="editable-circle-checkbox">
+        Toggle Editable Circle
+        <input type="checkbox" [disabled]="!isCircleDisplayed" (click)="toggleEditableCircle()">
+      </label>
+    </div>
+
+    <div>
+      <label for="ground-overlay-checkbox">
+        Toggle Ground Overlay
+        <input type="checkbox" (click)="toggleGroundOverlayDisplay()">
+      </label>
+    </div>
+
+    <div>
+      <label for="ground-overlay-image">
+        Ground Overlay image
+
+        <select id="ground-overlay-image" (change)="groundOverlayUrlChanged($event)">
+          @for (image of groundOverlayImages; track image) {
+            <option [value]="image.url">{{image.title}}</option>
+          }
+        </select>
+      </label>
+    </div>
+
+    <div>
+      <label for="kml-layer-checkbox">
+        Toggle KML Layer
+        <input type="checkbox" (click)="toggleKmlLayerDisplay()">
+      </label>
+    </div>
+
+    <div>
+      <label for="traffic-layer-checkbox">
+        Toggle Traffic Layer
+        <input type="checkbox" (click)="toggleTrafficLayerDisplay()">
+      </label>
+    </div>
+
+    <div>
+      <label for="transit-layer-checkbox">
+        Toggle Transit Layer
+        <input type="checkbox" (click)="toggleTransitLayerDisplay()">
+      </label>
+    </div>
+
+    <div>
+      <label for="bicycling-layer-checkbox">
+        Toggle Bicycling Layer
+        <input type="checkbox" (click)="toggleBicyclingLayerDisplay()">
+      </label>
+    </div>
+
+    <div>
+      <label for="heatmap-layer-checkbox">
+        Toggle Heatmap Layer
+        <input type="checkbox" (click)="toggleHeatmapLayerDisplay()">
+      </label>
+    </div>
+
+    <div>
+      <button mat-button (click)="calculateDirections()">
+        Calculate directions between first two markers
+      </button>
+    </div>
+  </div>
+} @else {
+  <div>Loading Google Maps API...</div>
+}
diff --git a/src/dev-app/grid-list/grid-list-demo.html b/src/dev-app/grid-list/grid-list-demo.html
index 10d526cf00c2..f467ea7f6a01 100644
--- a/src/dev-app/grid-list/grid-list-demo.html
+++ b/src/dev-app/grid-list/grid-list-demo.html
@@ -55,10 +55,12 @@
     <mat-card-title>Fixed-height grid list</mat-card-title>
     <mat-card-content>
       <mat-grid-list [cols]="fixedCols" [rowHeight]="fixedRowHeight">
-        <mat-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
-                      [style.background]="tile.color">
-          {{tile.text}}
-        </mat-grid-tile>
+        @for (tile of tiles; track tile) {
+          <mat-grid-tile [colspan]="tile.cols" [rowspan]="tile.rows"
+                        [style.background]="tile.color">
+            {{tile.text}}
+          </mat-grid-tile>
+        }
       </mat-grid-list>
     </mat-card-content>
     <mat-card-actions>
@@ -72,9 +74,9 @@
     <mat-card-title>Ratio-height grid list</mat-card-title>
     <mat-card-content>
       <mat-grid-list cols="2" [rowHeight]="ratio" gutterSize="4px">
-        <mat-grid-tile *ngFor="let tile of tiles" [style.background]="'lightblue'">
-          {{tile.text}}
-        </mat-grid-tile>
+        @for (tile of tiles; track tile) {
+          <mat-grid-tile [style.background]="'lightblue'">{{tile.text}}</mat-grid-tile>
+        }
       </mat-grid-list>
     </mat-card-content>
     <mat-card-actions>
@@ -87,9 +89,9 @@
     <mat-card-content>
       <mat-grid-list cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
                     [style.height]="fitListHeight">
-        <mat-grid-tile *ngFor="let tile of tiles" [style.background]="'#F1EBBA'">
-          {{tile.text}}
-        </mat-grid-tile>
+        @for (tile of tiles; track tile) {
+          <mat-grid-tile [style.background]="'#F1EBBA'">{{tile.text}}</mat-grid-tile>
+        }
       </mat-grid-list>
     </mat-card-content>
     <mat-card-actions>
@@ -102,12 +104,14 @@
     <mat-card-title>Grid list with header</mat-card-title>
     <mat-card-content>
       <mat-grid-list cols="3" rowHeight="200px">
-        <mat-grid-tile *ngFor="let dog of dogs" style="background:gray">
-          <mat-grid-tile-header>
-            <mat-icon mat-grid-avatar>info_outline</mat-icon>
-            {{dog.name}}
-          </mat-grid-tile-header>
-        </mat-grid-tile>
+        @for (dog of dogs; track dog) {
+          <mat-grid-tile style="background:gray">
+            <mat-grid-tile-header>
+              <mat-icon mat-grid-avatar>info_outline</mat-icon>
+              {{dog.name}}
+            </mat-grid-tile-header>
+          </mat-grid-tile>
+        }
       </mat-grid-list>
     </mat-card-content>
   </mat-card>
@@ -116,14 +120,16 @@
     <mat-card-title>Grid list with footer</mat-card-title>
     <mat-card-content>
       <mat-grid-list cols="3" rowHeight="200px">
-        <mat-grid-tile *ngFor="let dog of dogs">
-          <img [alt]="dog.name" src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
-          <mat-grid-tile-footer>
-            <h3 mat-line>{{dog.name}}</h3>
-            <span mat-line>Human: {{dog.human}}</span>
-            <mat-icon>star_border</mat-icon>
-          </mat-grid-tile-footer>
-        </mat-grid-tile>
+        @for (dog of dogs; track dog) {
+          <mat-grid-tile>
+            <img [alt]="dog.name" src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
+            <mat-grid-tile-footer>
+              <h3 mat-line>{{dog.name}}</h3>
+              <span mat-line>Human: {{dog.human}}</span>
+              <mat-icon>star_border</mat-icon>
+            </mat-grid-tile-footer>
+          </mat-grid-tile>
+        }
       </mat-grid-list>
     </mat-card-content>
   </mat-card>
diff --git a/src/dev-app/input/input-demo.html b/src/dev-app/input/input-demo.html
index b7b9f5344700..0742fa5c891e 100644
--- a/src/dev-app/input/input-demo.html
+++ b/src/dev-app/input/input-demo.html
@@ -73,12 +73,12 @@ <h4>Regular</h4>
       <mat-form-field>
         <mat-label>Email</mat-label>
         <input matInput [formControl]="emailFormControl">
-        <mat-error *ngIf="emailFormControl.hasError('required')">
-          This field is required
-        </mat-error>
-        <mat-error *ngIf="emailFormControl.hasError('pattern')">
-          Please enter a valid email address
-        </mat-error>
+        @if (emailFormControl.hasError('required')) {
+          <mat-error>This field is required</mat-error>
+        }
+        @if (emailFormControl.hasError('pattern')) {
+          <mat-error>Please enter a valid email address</mat-error>
+        }
       </mat-form-field>
     </p>
 
@@ -124,7 +124,9 @@ <h4>Text</h4>
     <mat-form-field [appearance]="prefixSuffixAppearance" class="demo-text-align-end">
       <mat-label>Amount</mat-label>
       <input matInput>
-      <span matTextPrefix *ngIf="showPrefix">$</span>
+      @if (showPrefix) {
+        <span matTextPrefix>$</span>
+      }
       <span matTextSuffix>.00</span>
     </mat-form-field>
 
@@ -140,7 +142,9 @@ <h4>Icons</h4>
     <mat-form-field [appearance]="prefixSuffixAppearance">
       <mat-label>Amount</mat-label>
       <input matInput>
-      <mat-icon matIconPrefix *ngIf="showPrefix">calendar_today</mat-icon>
+      @if (showPrefix) {
+        <mat-icon matIconPrefix>calendar_today</mat-icon>
+      }
       <mat-icon matIconSuffix>mode_edit</mat-icon>
     </mat-form-field>
 
@@ -148,9 +152,11 @@ <h4>Icon buttons</h4>
     <mat-form-field [appearance]="prefixSuffixAppearance">
       <mat-label>Amount</mat-label>
       <input matInput>
-      <button mat-icon-button matIconPrefix *ngIf="showPrefix">
-        <mat-icon>calendar_today</mat-icon>
-      </button>
+      @if (showPrefix) {
+        <button mat-icon-button matIconPrefix>
+          <mat-icon>calendar_today</mat-icon>
+        </button>
+      }
       <button mat-icon-button matIconSuffix>
         <mat-icon>mode_edit</mat-icon>
       </button>
@@ -162,9 +168,11 @@ <h4>Text & Icons</h4>
       <input matInput>
       <span matTextPrefix>$</span>
       <span matTextSuffix>.00</span>
-      <button mat-icon-button matIconPrefix *ngIf="showPrefix">
-        <mat-icon>calendar_today</mat-icon>
-      </button>
+      @if (showPrefix) {
+        <button mat-icon-button matIconPrefix>
+          <mat-icon>calendar_today</mat-icon>
+        </button>
+      }
       <button mat-icon-button matIconSuffix>
         <mat-icon>mode_edit</mat-icon>
       </button>
@@ -491,21 +499,23 @@ <h4>Textarea</h4>
         <button (click)="addABunch(1000)">Add 1000</button>
       </td>
       </thead>
-      <tr *ngFor="let item of items; let i = index">
-        <td>{{i+1}}</td>
-        <td>
-          <mat-form-field>
-            <mat-label>Value</mat-label>
-            <input matInput
-                   type="number"
-                   [(ngModel)]="items[i].value">
-          </mat-form-field>
-        </td>
-        <td>
-          <input type="number" [(ngModel)]="items[i].value">
-        </td>
-        <td>{{item.value}}</td>
-      </tr>
+      @for (item of items; track item; let i = $index) {
+        <tr>
+          <td>{{i+1}}</td>
+          <td>
+            <mat-form-field>
+              <mat-label>Value</mat-label>
+              <input matInput
+                    type="number"
+                    [(ngModel)]="items[i].value">
+            </mat-form-field>
+          </td>
+          <td>
+            <input type="number" [(ngModel)]="items[i].value">
+          </td>
+          <td>{{item.value}}</td>
+        </tr>
+      }
     </table>
   </mat-card-content>
 </mat-card>
@@ -730,7 +740,9 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
         <input type="text" aria-label="Number" matInput
                [matAutocomplete]="autoComplete1">
         <mat-autocomplete #autoComplete1="matAutocomplete">
-          <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
+          @for (option of options; track option) {
+            <mat-option [value]="option">{{option}}</mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
     </p>
@@ -741,7 +753,9 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
         <input type="text" aria-label="Number" matInput
                [matAutocomplete]="autoComplete2">
         <mat-autocomplete #autoComplete2="matAutocomplete">
-          <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
+          @for (option of options; track option) {
+            <mat-option [value]="option">{{option}}</mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
     </p>
@@ -776,7 +790,9 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
           <mat-label>Amount</mat-label>
           <input matInput>
           <span matTextPrefix>$&nbsp;</span>
-          <span matTextPrefix *ngIf="showSecondPrefix">!&nbsp;</span>
+          @if (showSecondPrefix) {
+            <span matTextPrefix>!&nbsp;</span>
+          }
           <span matTextSuffix>.00</span>
         </mat-form-field>
       </mat-tab>
diff --git a/src/dev-app/list/list-demo.html b/src/dev-app/list/list-demo.html
index 2be72e3bbba6..5edc6cdfa7d0 100644
--- a/src/dev-app/list/list-demo.html
+++ b/src/dev-app/list/list-demo.html
@@ -11,45 +11,57 @@ <h2>Normal lists</h2>
 
     <mat-list>
       <div mat-subheader>Items</div>
-      <mat-list-item *ngFor="let item of items">
-        {{item}}
-      </mat-list-item>
+      @for (item of items; track item) {
+        <mat-list-item>{{item}}</mat-list-item>
+      }
     </mat-list>
 
     <mat-list>
-      <mat-list-item *ngFor="let contact of contacts">
-        <div matListItemTitle>{{contact.name}}</div>
-        <div matListItemLine *ngIf="thirdLine">extra line</div>
-        <div matListItemLine>{{contact.headline}}</div>
-      </mat-list-item>
+      @for (contact of contacts; track contact) {
+        <mat-list-item>
+          <div matListItemTitle>{{contact.name}}</div>
+          @if (thirdLine) {
+            <div matListItemLine>extra line</div>
+          }
+          <div matListItemLine>{{contact.headline}}</div>
+        </mat-list-item>
+      }
     </mat-list>
 
     <mat-list>
       <div mat-subheader>Today</div>
-      <mat-list-item *ngFor="let message of messages; last as last">
-        <img matListItemAvatar [src]="message.image" alt="Image of {{message.from}}">
-        <div matListItemTitle>{{message.from}}</div>
-        <div matListItemLine>
-          <span>{{message.subject}} -- </span>
-          <span>{{message.message}}</span>
-        </div>
-        <mat-divider inset *ngIf="!last"></mat-divider>
-      </mat-list-item>
+      @for (message of messages; track message) {
+        <mat-list-item>
+          <img matListItemAvatar [src]="message.image" alt="Image of {{message.from}}">
+          <div matListItemTitle>{{message.from}}</div>
+          <div matListItemLine>
+            <span>{{message.subject}} -- </span>
+            <span>{{message.message}}</span>
+          </div>
+          @if (!$last) {
+            <mat-divider inset></mat-divider>
+          }
+        </mat-list-item>
+      }
       <mat-divider></mat-divider>
-      <mat-list-item *ngFor="let message of messages">
-        <div matListItemTitle>{{message.from}}</div>
-        <div matListItemLine>{{message.subject}}</div>
-        <div matListItemLine>{{message.message}}</div>
-      </mat-list-item>
+      @for (message of messages; track message) {
+        <mat-list-item>
+          <div matListItemTitle>{{message.from}}</div>
+          <div matListItemLine>{{message.subject}}</div>
+          <div matListItemLine>{{message.message}}</div>
+        </mat-list-item>
+      }
     </mat-list>
 
     <mat-list>
-      <mat-list-item *ngFor="let link of links">
-        <span matListItemTitle>{{ link.name }}</span>
-        <button matListItemMeta mat-icon-button (click)="infoClicked=!infoClicked">
-          <mat-icon>info</mat-icon>
-        </button>
-      </mat-list-item>
+      @for (link of links; track link) {
+        <mat-list-item>
+          <span matListItemTitle>{{ link.name }}</span>
+          <button matListItemMeta mat-icon-button (click)="infoClicked=!infoClicked">
+            <mat-icon>info</mat-icon>
+          </button>
+        </mat-list-item>
+      }
     </mat-list>
   </div>
 
@@ -57,61 +69,71 @@ <h2>Normal lists</h2>
     <h2>Dense lists</h2>
     <mat-list dense>
       <div mat-subheader>Items</div>
-      <mat-list-item *ngFor="let item of items">
-        {{item}}
-      </mat-list-item>
+      @for (item of items; track item) {
+        <mat-list-item>{{item}}</mat-list-item>
+      }
     </mat-list>
 
     <mat-list dense>
-      <mat-list-item *ngFor="let contact of contacts">
-        <div matListItemTitle>{{contact.name}}</div>
-        <div matListItemLine>{{contact.headline}}</div>
-      </mat-list-item>
+      @for (contact of contacts; track contact) {
+        <mat-list-item>
+          <div matListItemTitle>{{contact.name}}</div>
+          <div matListItemLine>{{contact.headline}}</div>
+        </mat-list-item>
+      }
     </mat-list>
 
     <mat-list dense>
       <div mat-subheader>Today</div>
-      <mat-list-item *ngFor="let message of messages">
-        <img matListItemAvatar [src]="message.image" alt="Image of {{message.from}}">
-        <div matListItemTitle>{{message.from}}</div>
-        <div matListItemLine>{{message.subject}}</div>
-        <div matListItemLine>{{message.message}}</div>
-      </mat-list-item>
+      @for (message of messages; track message) {
+        <mat-list-item>
+          <img matListItemAvatar [src]="message.image" alt="Image of {{message.from}}">
+          <div matListItemTitle>{{message.from}}</div>
+          <div matListItemLine>{{message.subject}}</div>
+          <div matListItemLine>{{message.message}}</div>
+        </mat-list-item>
+      }
     </mat-list>
 
     <mat-list dense>
-      <mat-list-item *ngFor="let link of links">
-        <span matListItemTitle>{{ link.name }}</span>
-        <button matListItemMeta mat-icon-button (click)="infoClicked=!infoClicked">
-          <mat-icon class="material-icons">info</mat-icon>
-        </button>
-      </mat-list-item>
+      @for (link of links; track link) {
+        <mat-list-item>
+          <span matListItemTitle>{{ link.name }}</span>
+          <button matListItemMeta mat-icon-button (click)="infoClicked=!infoClicked">
+            <mat-icon class="material-icons">info</mat-icon>
+          </button>
+        </mat-list-item>
+      }
     </mat-list>
   </div>
   <div>
     <h2>Nav lists</h2>
     <mat-nav-list>
-      <a mat-list-item *ngFor="let link of links" [href]="link.href" [activated]="isActivated(link.href)">
-        {{ link.name }}
-      </a>
+      @for (link of links; track link) {
+        <a mat-list-item [href]="link.href" [activated]="isActivated(link.href)">
+          {{ link.name }}
+        </a>
+      }
     </mat-nav-list>
-    <div *ngIf="infoClicked">
-      More info!
-    </div>
+    @if (infoClicked) {
+      <div>More info!</div>
+    }
     <mat-nav-list>
-      <a mat-list-item *ngFor="let link of links; last as last" [href]="link.href" [activated]="isActivated(link.href)">
-        <mat-icon matListItemIcon>folder</mat-icon>
-        <span matListItemTitle>{{ link.name }}</span>
-      </a>
+      @for (link of links; track link; let last = $last) {
+        <a mat-list-item [href]="link.href" [activated]="isActivated(link.href)">
+          <mat-icon matListItemIcon>folder</mat-icon>
+          <span matListItemTitle>{{ link.name }}</span>
+        </a>
+      }
     </mat-nav-list>
   </div>
 
   <div>
     <h2>Action list</h2>
     <mat-action-list>
-      <button mat-list-item *ngFor="let link of links" (click)="alertItem(link.name)">
-        {{link.name}}
-      </button>
+      @for (link of links; track link) {
+        <button mat-list-item (click)="alertItem(link.name)">{{link.name}}</button>
+      }
     </mat-action-list>
   </div>
 
@@ -228,10 +250,12 @@ <h2>Line scenarios</h2>
     <h2>Line alignment</h2>
 
     <mat-list>
-      <mat-list-item *ngFor="let link of links">
-        <span matListItemTitle>{{ link.name }}</span>
-        <span>Unscoped content</span>
-      </mat-list-item>
+      @for (link of links; track link) {
+        <mat-list-item>
+          <span matListItemTitle>{{ link.name }}</span>
+          <span>Unscoped content</span>
+        </mat-list-item>
+      }
     </mat-list>
 
     <mat-selection-list>
diff --git a/src/dev-app/menu/menu-demo.html b/src/dev-app/menu/menu-demo.html
index 7638e8012d0e..69338bb190e8 100644
--- a/src/dev-app/menu/menu-demo.html
+++ b/src/dev-app/menu/menu-demo.html
@@ -9,9 +9,11 @@
     </mat-toolbar>
 
     <mat-menu #menu="matMenu">
-      <button mat-menu-item *ngFor="let item of items" (click)="select(item.text)" [disabled]="item.disabled">
-        {{ item.text }}
-      </button>
+      @for (item of items; track item) {
+        <button mat-menu-item (click)="select(item.text)" [disabled]="item.disabled">
+          {{ item.text }}
+        </button>
+      }
     </mat-menu>
   </div>
   <div class="demo-menu-section">
@@ -24,12 +26,12 @@
     </mat-toolbar>
 
     <mat-menu #divider="matMenu">
-      <ng-container *ngFor="let item of items; last as last">
-        <button mat-menu-item [disabled]="item.disabled">
-          {{ item.text }}
-        </button>
-        <mat-divider *ngIf="!last"></mat-divider>
-      </ng-container>
+      @for (item of items; track item) {
+        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
+        @if (!$last) {
+          <mat-divider></mat-divider>
+        }
+      }
     </mat-menu>
   </div>
   <div class="demo-menu-section">
@@ -95,9 +97,11 @@
     </mat-toolbar>
 
     <mat-menu #anchorMenu="matMenu">
-      <a mat-menu-item *ngFor="let item of items" href="https://www.google.com" [disabled]="item.disabled">
-        {{ item.text }}
-      </a>
+      @for (item of items; track item) {
+        <a mat-menu-item href="https://www.google.com" [disabled]="item.disabled">
+          {{ item.text }}
+        </a>
+      }
     </mat-menu>
   </div>
   <div class="demo-menu-section">
@@ -111,10 +115,12 @@
     </mat-toolbar>
 
     <mat-menu xPosition="before" #posXMenu="matMenu">
-      <button mat-menu-item *ngFor="let item of iconItems" [disabled]="item.disabled">
-        <mat-icon>{{ item.icon }}</mat-icon>
-        {{ item.text }}
-      </button>
+      @for (item of iconItems; track item) {
+        <button mat-menu-item [disabled]="item.disabled">
+          <mat-icon>{{ item.icon }}</mat-icon>
+          {{ item.text }}
+        </button>
+      }
     </mat-menu>
   </div>
   <div class="demo-menu-section">
@@ -128,9 +134,9 @@
     </mat-toolbar>
 
     <mat-menu yPosition="above" #posYMenu="matMenu">
-      <button mat-menu-item *ngFor="let item of items" [disabled]="item.disabled">
-        {{ item.text }}
-      </button>
+      @for (item of items; track item) {
+        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
+      }
     </mat-menu>
   </div>
 </div>
@@ -146,9 +152,9 @@
     </mat-toolbar>
 
     <mat-menu [overlapTrigger]="true" #menuOverlay="matMenu">
-      <button mat-menu-item *ngFor="let item of items" [disabled]="item.disabled">
-        {{ item.text }}
-      </button>
+      @for (item of items; track item) {
+        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
+      }
     </mat-menu>
   </div>
   <div class="demo-menu-section">
@@ -162,10 +168,12 @@
     </mat-toolbar>
 
     <mat-menu xPosition="before" [overlapTrigger]="true" #posXMenuOverlay="matMenu">
-      <button mat-menu-item *ngFor="let item of iconItems" [disabled]="item.disabled">
-        <mat-icon>{{ item.icon }}</mat-icon>
-        {{ item.text }}
-      </button>
+      @for (item of iconItems; track item) {
+        <button mat-menu-item [disabled]="item.disabled">
+          <mat-icon>{{ item.icon }}</mat-icon>
+          {{ item.text }}
+        </button>
+      }
     </mat-menu>
   </div>
   <div class="demo-menu-section">
@@ -179,9 +187,9 @@
     </mat-toolbar>
 
     <mat-menu yPosition="above" [overlapTrigger]="true" #posYMenuOverlay="matMenu">
-      <button mat-menu-item *ngFor="let item of items" [disabled]="item.disabled">
-        {{ item.text }}
-      </button>
+      @for (item of items; track item) {
+        <button mat-menu-item [disabled]="item.disabled">{{ item.text }}</button>
+      }
     </mat-menu>
   </div>
 </div>
diff --git a/src/dev-app/performance/performance-demo.html b/src/dev-app/performance/performance-demo.html
index 73466ba93973..2cfd68c5f975 100644
--- a/src/dev-app/performance/performance-demo.html
+++ b/src/dev-app/performance/performance-demo.html
@@ -36,10 +36,14 @@
         <th mat-header-cell *matHeaderCellDef>No.</th>
         <td mat-cell *matCellDef="let item">{{ item.index }}</td>
         <td mat-footer-cell *matFooterCellDef>
-          <ng-container *ngIf="allSamples.length">
+          @if (allSamples.length) {
+
             <strong>Average render time</strong>
-          </ng-container>
-          <ng-container *ngIf="!allSamples.length"> No data yet </ng-container>
+          
+}
+          @if (!allSamples.length) {
+ No data yet 
+}
         </td>
       </ng-container>
 
@@ -65,26 +69,32 @@
   ></mat-paginator>
 </div>
 
+@if (allSamples.length) {
 <button
   color="accent"
   mat-button
   (click)="clearMetrics()"
   [disabled]="isRunningBenchmark"
   style="margin-right: 32px"
-  *ngIf="allSamples.length"
+ 
 >
   Clear Metrics
 </button>
+}
 
 <button color="primary" mat-raised-button (click)="runBenchmark()" [disabled]="isRunningBenchmark">
   Run Benchmark
 </button>
 
-<ng-container *ngIf="show">
-  <ng-container *ngFor="let _ of componentArray">
+@if (show) {
+
+  @for (_ of componentArray; track _) {
+  
     <mat-form-field>
       <mat-label>Input</mat-label>
       <input matInput />
     </mat-form-field>
-  </ng-container>
-</ng-container>
+  
+}
+
+}
diff --git a/src/dev-app/performance/performance-demo.ts b/src/dev-app/performance/performance-demo.ts
index 7e0b17bc4b68..612c2dda3dd6 100644
--- a/src/dev-app/performance/performance-demo.ts
+++ b/src/dev-app/performance/performance-demo.ts
@@ -64,7 +64,7 @@ export class PerformanceDemo implements AfterViewInit {
   /** The average plus/minus the stdev. */
   computedResults = '';
 
-  /** Used in an ngFor to render the desired number of comonents. */
+  /** Used in an `@for` to render the desired number of comonents. */
   componentArray = [].constructor(this.componentCount);
 
   /** The standard deviation of the recorded samples. */
diff --git a/src/dev-app/platform/platform-demo.html b/src/dev-app/platform/platform-demo.html
index 79397500200e..012cfba294d4 100644
--- a/src/dev-app/platform/platform-demo.html
+++ b/src/dev-app/platform/platform-demo.html
@@ -9,5 +9,7 @@
 
 <p>
   Supported input types:
-  <span *ngFor="let type of supportedInputTypes">{{type}}, </span>
+  @for (type of supportedInputTypes; track type) {
+    <span>{{type}}, </span>
+  }
 </p>
diff --git a/src/dev-app/portal/portal-demo.html b/src/dev-app/portal/portal-demo.html
index bdb0e648447c..e6aaefc7b2c8 100644
--- a/src/dev-app/portal/portal-demo.html
+++ b/src/dev-app/portal/portal-demo.html
@@ -21,7 +21,7 @@ <h2> The portal outlet is here: </h2>
 
 <!-- Template vars on <ng-template> elements can't be accessed _in_ the template because Angular
     doesn't support grabbing the instance / TemplateRef this way because the variable may be
-    referring to something *in* the template (such as #item in ngFor). As such, the component
+    referring to something *in* the template (such as #item in @for). As such, the component
     has to use @ViewChild / @ViewChildren to get these references.
     See https://github.com/angular/angular/issues/7158 -->
 <ng-template cdk-portal>
diff --git a/src/dev-app/radio/radio-demo.html b/src/dev-app/radio/radio-demo.html
index 2c11becb2327..35a4def520db 100644
--- a/src/dev-app/radio/radio-demo.html
+++ b/src/dev-app/radio/radio-demo.html
@@ -55,9 +55,11 @@ <h1>Favorite Season Example</h1>
 <h2>Dynamic Example with two-way data-binding</h2>
 <section class="demo-section">
   <mat-radio-group name="more_options" [(ngModel)]="favoriteSeason">
-    <mat-radio-button *ngFor="let season of seasonOptions" name="more_options" [value]="season">
-      {{season}}
-    </mat-radio-button>
+    @for (season of seasonOptions; track season) {
+      <mat-radio-button name="more_options" [value]="season">
+        {{season}}
+      </mat-radio-button>
+    }
   </mat-radio-group>
   <p>Your favorite season is: {{favoriteSeason}}</p>
 </section>
diff --git a/src/dev-app/select/select-demo.html b/src/dev-app/select/select-demo.html
index 5eee7a9ee2ce..190d3ed68ff7 100644
--- a/src/dev-app/select/select-demo.html
+++ b/src/dev-app/select/select-demo.html
@@ -13,10 +13,12 @@
         <mat-select [(ngModel)]="currentDrink" [required]="drinksRequired"
           [disabled]="drinksDisabled" #drinkControl="ngModel">
           <mat-option [disabled]="drinksOptionsDisabled === 'all'">None</mat-option>
-          <mat-option *ngFor="let drink of drinks; let index = index" [value]="drink.value"
-            [disabled]="isDrinkOptionDisabled(index)">
-            {{ drink.viewValue }}
-          </mat-option>
+          @for (drink of drinks; track drink; let index = $index) {
+            <mat-option [value]="drink.value"
+              [disabled]="isDrinkOptionDisabled(index)">
+              {{ drink.viewValue }}
+            </mat-option>
+          }
         </mat-select>
         <mat-icon matPrefix class="demo-drink-icon">local_drink</mat-icon>
         <mat-hint>Pick a drink!</mat-hint>
@@ -44,9 +46,9 @@
       <p>
         <label for="drinks-theme">Theme:</label>
         <select [(ngModel)]="drinksTheme" id="drinks-theme">
-          <option *ngFor="let theme of availableThemes" [value]="theme.value">
-            {{theme.name}}
-          </option>
+          @for (theme of availableThemes; track theme) {
+            <option [value]="theme.value">{{theme.name}}</option>
+          }
         </select>
       </p>
       <p>
@@ -73,9 +75,11 @@
         <mat-label>Pokemon</mat-label>
         <mat-select multiple [(ngModel)]="currentPokemon"
           [required]="pokemonRequired" [disabled]="pokemonDisabled" #pokemonControl="ngModel">
-          <mat-option *ngFor="let creature of pokemon" [value]="creature.value" [disabled]="pokemonOptionsDisabled">
-            {{ creature.viewValue }}
-          </mat-option>
+          @for (creature of pokemon; track creature) {
+            <mat-option [value]="creature.value" [disabled]="pokemonOptionsDisabled">
+              {{ creature.viewValue }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <p> Value: {{ currentPokemon }} </p>
@@ -85,7 +89,9 @@
       <p>
         <label for="pokemon-theme">Theme:</label>
         <select [(ngModel)]="pokemonTheme" id="pokemon-theme">
-          <option *ngFor="let theme of availableThemes" [value]="theme.value">{{ theme.name }}</option>
+          @for (theme of availableThemes; track theme) {
+            <option [value]="theme.value">{{ theme.name }}</option>
+          }
         </select>
       </p>
       <button mat-button (click)="setPokemonValue()">SET VALUE</button>
@@ -104,9 +110,9 @@
         <mat-label>Digimon</mat-label>
         <mat-select [(value)]="currentDigimon">
           <mat-option>None</mat-option>
-          <mat-option *ngFor="let creature of digimon" [value]="creature.value">
-            {{ creature.viewValue }}
-          </mat-option>
+          @for (creature of digimon; track creature) {
+            <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
+          }
         </mat-select>
       </mat-form-field>
 
@@ -124,12 +130,13 @@
       <mat-form-field>
         <mat-label>Pokemon</mat-label>
         <mat-select [(ngModel)]="currentPokemonFromGroup">
-          <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
-            [disabled]="group.disabled">
-            <mat-option *ngFor="let creature of group.pokemon" [value]="creature.value">
-              {{ creature.viewValue }}
-            </mat-option>
-          </mat-optgroup>
+          @for (group of pokemonGroups; track group) {
+            <mat-optgroup [label]="group.name" [disabled]="group.disabled">
+              @for (creature of group.pokemon; track creature) {
+                <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
+              }
+            </mat-optgroup>
+          }
         </mat-select>
       </mat-form-field>
     </mat-card-content>
@@ -145,9 +152,9 @@
                     [required]="drinkObjectRequired"
                     [compareWith]="compareByValue ? compareDrinkObjectsByValue : compareByReference"
                     #drinkObjectControl="ngModel">
-          <mat-option *ngFor="let drink of drinks" [value]="drink" [disabled]="drink.disabled">
-            {{ drink.viewValue }}
-          </mat-option>
+          @for (drink of drinks; track drink) {
+            <mat-option [value]="drink" [disabled]="drink.disabled">{{ drink.viewValue }}</mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <p> Value: {{ currentDrinkObject | json }} </p>
@@ -174,9 +181,9 @@
           <mat-label>Fill</mat-label>
           <mat-select [(value)]="currentAppearanceValue">
             <mat-option>None</mat-option>
-            <mat-option *ngFor="let creature of digimon" [value]="creature.value">
-              {{ creature.viewValue }}
-            </mat-option>
+            @for (creature of digimon; track creature) {
+              <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </p>
@@ -186,9 +193,9 @@
           <mat-label>Outline</mat-label>
           <mat-select [(value)]="currentAppearanceValue">
             <mat-option>None</mat-option>
-            <mat-option *ngFor="let creature of digimon" [value]="creature.value">
-              {{ creature.viewValue }}
-            </mat-option>
+            @for (creature of digimon; track creature) {
+              <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </p>
@@ -197,45 +204,52 @@
     </mat-card-content>
   </mat-card>
 
-  <div *ngIf="showSelect">
-    <mat-card>
-      <mat-card-subtitle>formControl</mat-card-subtitle>
+  @if (showSelect) {
+    <div>
+      <mat-card>
+        <mat-card-subtitle>formControl</mat-card-subtitle>
 
-      <mat-card-content>
-        <mat-form-field>
-          <mat-label>Food I would like to eat</mat-label>
-          <mat-select [formControl]="foodControl">
-            <mat-option *ngFor="let food of foods" [value]="food.value">{{ food.viewValue }}</mat-option>
-          </mat-select>
-        </mat-form-field>
-        <p> Value: {{ foodControl.value }} </p>
-        <p> Touched: {{ foodControl.touched }} </p>
-        <p> Dirty: {{ foodControl.dirty }} </p>
-        <p> Status: {{ foodControl.status }} </p>
-        <button mat-button (click)="foodControl.setValue('pizza-1')">SET VALUE</button>
-        <button mat-button (click)="toggleDisabled()">TOGGLE DISABLED</button>
-        <button mat-button (click)="foodControl.reset()">RESET</button>
-      </mat-card-content>
-    </mat-card>
-  </div>
+        <mat-card-content>
+          <mat-form-field>
+            <mat-label>Food I would like to eat</mat-label>
+            <mat-select [formControl]="foodControl">
+              @for (food of foods; track food) {
+                <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+          <p> Value: {{ foodControl.value }} </p>
+          <p> Touched: {{ foodControl.touched }} </p>
+          <p> Dirty: {{ foodControl.dirty }} </p>
+          <p> Status: {{ foodControl.status }} </p>
+          <button mat-button (click)="foodControl.setValue('pizza-1')">SET VALUE</button>
+          <button mat-button (click)="toggleDisabled()">TOGGLE DISABLED</button>
+          <button mat-button (click)="foodControl.reset()">RESET</button>
+        </mat-card-content>
+      </mat-card>
+    </div>
+   }
 
-  <div *ngIf="showSelect">
-    <mat-card>
-      <mat-card-subtitle>Change event</mat-card-subtitle>
+  @if (showSelect) {
+  <div>
+      <mat-card>
+        <mat-card-subtitle>Change event</mat-card-subtitle>
 
-      <mat-card-content>
-        <mat-form-field>
-          <mat-label>Starter pokemon</mat-label>
-          <mat-select (selectionChange)="latestChangeEvent = $event">
-            <mat-option *ngFor="let creature of pokemon" [value]="creature.value">{{ creature.viewValue }}</mat-option>
-          </mat-select>
-        </mat-form-field>
-
-        <p> Change event value: {{ latestChangeEvent?.value }} </p>
-      </mat-card-content>
-    </mat-card>
-  </div>
+        <mat-card-content>
+          <mat-form-field>
+            <mat-label>Starter pokemon</mat-label>
+            <mat-select (selectionChange)="latestChangeEvent = $event">
+              @for (creature of pokemon; track creature) {
+                <mat-option [value]="creature.value">{{ creature.viewValue }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
 
+          <p> Change event value: {{ latestChangeEvent?.value }} </p>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  }
 </div>
 
 <mat-card class="demo-card demo-basic">
@@ -342,9 +356,9 @@ <h4>Error message, hint, form sumbit</h4>
           <option value="mercedes">Mercedes</option>
           <option value="audi">Audi</option>
         </select>
-        <mat-error *ngIf="selectFormControl.hasError('required')">
-          This field is required
-        </mat-error>
+        @if (selectFormControl.hasError('required')) {
+          <mat-error>This field is required</mat-error>
+        }
         <mat-hint>You can pick up your favorite car here</mat-hint>
       </mat-form-field>
 
@@ -357,9 +371,9 @@ <h4>Error message with errorStateMatcher</h4>
           <option value="mercedes">Mercedes</option>
           <option value="audi">Audi</option>
         </select>
-        <mat-error *ngIf="selectFormControl.hasError('required')">
-          This field is required
-        </mat-error>
+        @if (selectFormControl.hasError('required')) {
+          <mat-error>This field is required</mat-error>
+        }
         <mat-hint>You can pick up your favorite car here</mat-hint>
       </mat-form-field>
       <button color="primary" mat-raised-button>Submit</button>
@@ -375,27 +389,27 @@ <h4>Error message with errorStateMatcher</h4>
         <mat-label>Bread</mat-label>
         <mat-select [(ngModel)]="sandwichBread"
           [hideSingleSelectionIndicator]="sandwichHideSingleSelectionIndicator">
-          <mat-option *ngFor="let bread of breads" [value]="bread.value">
-            {{ bread.viewValue }}
-          </mat-option>
+          @for (bread of breads; track bread) {
+            <mat-option [value]="bread.value">{{ bread.viewValue }}</mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <mat-form-field>
         <mat-label>Meat</mat-label>
         <mat-select [(ngModel)]="sandwichMeat"
           [hideSingleSelectionIndicator]="sandwichHideSingleSelectionIndicator">
-          <mat-option *ngFor="let meat of meats" [value]="meat.value">
-            {{ meat.viewValue }}
-          </mat-option>
+          @for (meat of meats; track meat) {
+            <mat-option [value]="meat.value">{{ meat.viewValue }}</mat-option>
+          }
         </mat-select>
       </mat-form-field>
       <mat-form-field>
         <mat-label>Cheese</mat-label>
         <mat-select [(ngModel)]="sandwichCheese"
           [hideSingleSelectionIndicator]="sandwichHideSingleSelectionIndicator">
-          <mat-option *ngFor="let cheese of cheeses" [value]="cheese.value">
-            {{ cheese.viewValue }}
-          </mat-option>
+          @for (cheese of cheeses; track cheese) {
+            <mat-option [value]="cheese.value">{{ cheese.viewValue }}</mat-option>
+          }
         </mat-select>
       </mat-form-field>
     </p>
@@ -403,4 +417,4 @@ <h4>Error message with errorStateMatcher</h4>
       Hide Single-Selection Indicator
     </mat-checkbox>
   </mat-card-content>
-</mat-card>
\ No newline at end of file
+</mat-card>
diff --git a/src/dev-app/sidenav/sidenav-demo.html b/src/dev-app/sidenav/sidenav-demo.html
index 7df77ef46f58..f7d461e9b827 100644
--- a/src/dev-app/sidenav/sidenav-demo.html
+++ b/src/dev-app/sidenav/sidenav-demo.html
@@ -1,9 +1,8 @@
-<button mat-raised-button (click)="isLaunched = true" *ngIf="!isLaunched" color="primary">
-  Launch Fullscreen Sidenav Demo
-</button>
-
-<div class="demo-sidenav-area" *ngIf="isLaunched">
-  <mat-toolbar *ngIf="showHeader && !coverHeader">Header</mat-toolbar>
+@if (isLaunched) {
+<div class="demo-sidenav-area">
+  @if (showHeader && !coverHeader) {
+    <mat-toolbar>Header</mat-toolbar>
+  }
   <mat-sidenav-container [hasBackdrop]="hasBackdrop">
     <mat-sidenav #start (opened)="myinput.focus()" [mode]="mode"
                  [fixedInViewport]="fixed" [fixedTopGap]="fixedTop" [fixedBottomGap]="fixedBottom">
@@ -17,7 +16,9 @@
       <div>Mode: {{start.mode}}</div>
       <br>
       <input #myinput>
-      <div class="demo-filler-content" *ngFor="let c of fillerContent">Filler Content</div>
+      @for (c of fillerContent; track c) {
+        <div class="demo-filler-content">Filler Content</div>
+      }
     </mat-sidenav>
 
     <mat-sidenav #end position="end"
@@ -25,11 +26,15 @@
       End Side Sidenav
       <br>
       <button mat-button (click)="end.close()">Close</button>
-      <div class="demo-filler-content" *ngFor="let c of fillerContent">Filler Content</div>
+      @for (c of fillerContent; track c) {
+        <div class="demo-filler-content">Filler Content</div>
+      }
     </mat-sidenav>
 
     <mat-sidenav-content>
-      <mat-toolbar *ngIf="showHeader && coverHeader">Header</mat-toolbar>
+      @if (showHeader && coverHeader) {
+        <mat-toolbar>Header</mat-toolbar>
+      }
       <div class="demo-sidenav-content">
         <div>
           <button mat-raised-button (click)="isLaunched = false">
@@ -52,10 +57,21 @@ <h3>Header / Footer</h3>
           <mat-checkbox [(ngModel)]="showFooter">Show footer</mat-checkbox>
         </div>
 
-        <div class="demo-filler-content" *ngFor="let c of fillerContent">Filler Content</div>
+        @for (c of fillerContent; track c) {
+          <div class="demo-filler-content">Filler Content</div>
+        }
       </div>
-      <mat-toolbar *ngIf="showFooter && coverHeader">Footer</mat-toolbar>
+      @if (showFooter && coverHeader) {
+        <mat-toolbar>Footer</mat-toolbar>
+      }
     </mat-sidenav-content>
   </mat-sidenav-container>
-  <mat-toolbar *ngIf="showFooter && !coverHeader">Footer</mat-toolbar>
+  @if (showFooter && !coverHeader) {
+    <mat-toolbar>Footer</mat-toolbar>
+  }
 </div>
+} @else {
+  <button mat-raised-button (click)="isLaunched = true" color="primary">
+    Launch Fullscreen Sidenav Demo
+  </button>
+}
diff --git a/src/dev-app/snack-bar/snack-bar-demo.html b/src/dev-app/snack-bar/snack-bar-demo.html
index 080876020a1c..26d54831feb0 100644
--- a/src/dev-app/snack-bar/snack-bar-demo.html
+++ b/src/dev-app/snack-bar/snack-bar-demo.html
@@ -25,24 +25,30 @@ <h1>SnackBar demo</h1>
   </div>
   <div>
     <mat-checkbox [(ngModel)]="action">
-      <p *ngIf="!action">Show button on snack bar</p>
-      <mat-form-field *ngIf="action">
-        <mat-label>Snack bar action label</mat-label>
-        <input matInput
-               type="text"
-               [(ngModel)]="actionButtonLabel">
-      </mat-form-field>
+      @if (action) {
+        <mat-form-field>
+          <mat-label>Snack bar action label</mat-label>
+          <input matInput
+                type="text"
+                [(ngModel)]="actionButtonLabel">
+        </mat-form-field>
+      } @else {
+        <p>Show button on snack bar</p>
+      }
     </mat-checkbox>
   </div>
   <div>
     <mat-checkbox [(ngModel)]="setAutoHide">
-      <p *ngIf="!setAutoHide">Auto hide after duration</p>
-      <mat-form-field *ngIf="setAutoHide">
-        <mat-label>Auto hide duration in ms</mat-label>
-        <input matInput
-               type="number"
-               [(ngModel)]="autoHide">
-      </mat-form-field>
+      @if (setAutoHide) {
+        <mat-form-field>
+          <mat-label>Auto hide duration in ms</mat-label>
+          <input matInput
+                type="number"
+                [(ngModel)]="autoHide">
+        </mat-form-field>
+      } @else {
+        <p>Auto hide after duration</p>
+      }
     </mat-checkbox>
   </div>
   <p>
diff --git a/src/dev-app/stepper/stepper-demo.html b/src/dev-app/stepper/stepper-demo.html
index 9b6004bb2d8d..1dd2a5e94cda 100644
--- a/src/dev-app/stepper/stepper-demo.html
+++ b/src/dev-app/stepper/stepper-demo.html
@@ -16,7 +16,9 @@
   <mat-form-field>
     <mat-label>Theme</mat-label>
     <mat-select [(ngModel)]="theme">
-      <mat-option *ngFor="let theme of availableThemes" [value]="theme.value">{{theme.name}}</mat-option>
+      @for (theme of availableThemes; track theme) {
+        <mat-option [value]="theme.value">{{theme.name}}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
 </p>
@@ -231,17 +233,19 @@ <h3>Horizontal Stepper Demo with Text Label</h3>
 
 <h3>Horizontal Stepper Demo with Templated Label</h3>
 <mat-stepper [color]="theme">
-  <mat-step *ngFor="let step of steps">
-    <ng-template matStepLabel>{{step.label}}</ng-template>
-    <mat-form-field>
-      <mat-label>Answer</mat-label>
-      <input matInput [(ngModel)]="step.content">
-    </mat-form-field>
-    <div>
-      <button mat-button matStepperPrevious>Back</button>
-      <button mat-button matStepperNext>Next</button>
-    </div>
-  </mat-step>
+  @for (step of steps; track step) {
+    <mat-step>
+      <ng-template matStepLabel>{{step.label}}</ng-template>
+      <mat-form-field>
+        <mat-label>Answer</mat-label>
+        <input matInput [(ngModel)]="step.content">
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperPrevious>Back</button>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </mat-step>
+  }
 </mat-stepper>
 
 <h3>Stepper with autosize textarea</h3>
diff --git a/src/dev-app/table-scroll-container/table-scroll-container-demo.html b/src/dev-app/table-scroll-container/table-scroll-container-demo.html
index 21aa8b40398d..69229922693e 100644
--- a/src/dev-app/table-scroll-container/table-scroll-container-demo.html
+++ b/src/dev-app/table-scroll-container/table-scroll-container-demo.html
@@ -35,46 +35,46 @@
   </mat-button-toggle-group>
 </div>
 
-<div class="example-container mat-elevation-z8"
-    cdkTableScrollContainer
-    *ngFor="let table of tables">
-  <table mat-table [dataSource]="dataSource">
-    <ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
-      <th mat-header-cell *matHeaderCellDef> Position </th>
-      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
-      <td mat-footer-cell *matFooterCellDef> Position Footer </td>
-    </ng-container>
+@for (table of tables; track table) {
+  <div class="example-container mat-elevation-z8" cdkTableScrollContainer>
+    <table mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
+        <th mat-header-cell *matHeaderCellDef> Position </th>
+        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+        <td mat-footer-cell *matFooterCellDef> Position Footer </td>
+      </ng-container>
 
-    <ng-container matColumnDef="name" [sticky]="isSticky(stickyColumns, 'name')">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
-      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-      <td mat-footer-cell *matFooterCellDef> Name Footer </td>
-    </ng-container>
+      <ng-container matColumnDef="name" [sticky]="isSticky(stickyColumns, 'name')">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+        <td mat-footer-cell *matFooterCellDef> Name Footer </td>
+      </ng-container>
 
-    <ng-container matColumnDef="weight" [stickyEnd]="isSticky(stickyColumns, 'weight')">
-      <th mat-header-cell *matHeaderCellDef> Weight </th>
-      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
-      <td mat-footer-cell *matFooterCellDef> Weight Footer </td>
-    </ng-container>
+      <ng-container matColumnDef="weight" [stickyEnd]="isSticky(stickyColumns, 'weight')">
+        <th mat-header-cell *matHeaderCellDef> Weight </th>
+        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+        <td mat-footer-cell *matFooterCellDef> Weight Footer </td>
+      </ng-container>
 
-    <ng-container matColumnDef="symbol" [stickyEnd]="isSticky(stickyColumns, 'symbol')">
-      <th mat-header-cell *matHeaderCellDef> Symbol </th>
-      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
-      <td mat-footer-cell *matFooterCellDef> Symbol Footer </td>
-    </ng-container>
+      <ng-container matColumnDef="symbol" [stickyEnd]="isSticky(stickyColumns, 'symbol')">
+        <th mat-header-cell *matHeaderCellDef> Symbol </th>
+        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+        <td mat-footer-cell *matFooterCellDef> Symbol Footer </td>
+      </ng-container>
 
-    <ng-container matColumnDef="filler">
-      <th mat-header-cell *matHeaderCellDef> Filler header cell </th>
-      <td mat-cell *matCellDef="let element"> Filler data cell </td>
-      <td mat-footer-cell *matFooterCellDef> Filler footer cell </td>
-    </ng-container>
+      <ng-container matColumnDef="filler">
+        <th mat-header-cell *matHeaderCellDef> Filler header cell </th>
+        <td mat-cell *matCellDef="let element"> Filler data cell </td>
+        <td mat-footer-cell *matFooterCellDef> Filler footer cell </td>
+      </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-1')"></tr>
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-2')"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-1')"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-2')"></tr>
 
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 
-    <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></tr>
-    <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></tr>
-  </table>
-</div>
+      <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></tr>
+      <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></tr>
+    </table>
+  </div>
+}
diff --git a/src/dev-app/youtube-player/youtube-player-demo.html b/src/dev-app/youtube-player/youtube-player-demo.html
index a7ff2eb4c615..5a8a04f8c6c2 100644
--- a/src/dev-app/youtube-player/youtube-player-demo.html
+++ b/src/dev-app/youtube-player/youtube-player-demo.html
@@ -4,9 +4,9 @@ <h1>Basic Example</h1>
     <div class="demo-video-selection">
       <label>Pick the video:</label>
       <mat-radio-group aria-label="Select a video" [(ngModel)]="selectedVideo">
-        <mat-radio-button *ngFor="let video of videos" [value]="video">
-          {{video.name}}
-        </mat-radio-button>
+        @for (video of videos; track video) {
+          <mat-radio-button [value]="video">{{video.name}}</mat-radio-button>
+        }
         <mat-radio-button [value]="undefined">Unset</mat-radio-button>
       </mat-radio-group>
     </div>
diff --git a/src/e2e-app/components/e2e-app/e2e-app.html b/src/e2e-app/components/e2e-app/e2e-app.html
index d948ef73a18f..7bfa37644fa5 100644
--- a/src/e2e-app/components/e2e-app/e2e-app.html
+++ b/src/e2e-app/components/e2e-app/e2e-app.html
@@ -1,9 +1,13 @@
 <button (click)="showLinks = !showLinks">Toggle Navigation Links</button>
 
 <main>
-  <mat-nav-list *ngIf="showLinks" (click)="showLinks = false">
-    <a mat-list-item *ngFor="let link of navLinks" [routerLink]="[link.path]">{{link.title}}</a>
-  </mat-nav-list>
+  @if (showLinks) {
+    <mat-nav-list (click)="showLinks = false">
+      @for (link of navLinks; track link) {
+        <a mat-list-item [routerLink]="[link.path]">{{link.title}}</a>
+      }
+    </mat-nav-list>
+  }
 
   <router-outlet></router-outlet>
 </main>
diff --git a/src/google-maps/README.md b/src/google-maps/README.md
index 8cc09375b663..acea33991e30 100644
--- a/src/google-maps/README.md
+++ b/src/google-maps/README.md
@@ -59,7 +59,7 @@ export class GoogleMapsDemoComponent {
   apiLoaded: Observable<boolean>;
 
   constructor(httpClient: HttpClient) {
-    // If you're using the `<map-heatmap-layer>` directive, you also have to include the `visualization` library 
+    // If you're using the `<map-heatmap-layer>` directive, you also have to include the `visualization` library
     // when loading the Google Maps API. To do so, you can add `&libraries=visualization` to the script URL:
     // https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization
 
@@ -75,9 +75,9 @@ export class GoogleMapsDemoComponent {
 ```html
 <!-- google-maps-demo.component.html -->
 
-<div *ngIf="apiLoaded | async">
+@if (apiLoaded | async) {
   <google-map></google-map>
-</div>
+}
 ```
 
 ## Components
diff --git a/src/google-maps/map-directions-renderer/README.md b/src/google-maps/map-directions-renderer/README.md
index d40c54678c31..f0e705d4dd51 100644
--- a/src/google-maps/map-directions-renderer/README.md
+++ b/src/google-maps/map-directions-renderer/README.md
@@ -51,7 +51,8 @@ export class GoogleMapDemo {
             width="750px"
             [center]="center"
             [zoom]="zoom">
-  <map-directions-renderer *ngIf="(directionsResults$ | async) as directionsResults"
-                           [directions]="directionsResults"></map-directions-renderer>
+  @if (directionsResults$ | async; as directionsResults) {
+    <map-directions-renderer [directions]="directionsResults"></map-directions-renderer>
+  }
 </google-map>
 ```
diff --git a/src/google-maps/map-info-window/README.md b/src/google-maps/map-info-window/README.md
index 4b60ab0ebfdb..046553258ab2 100644
--- a/src/google-maps/map-info-window/README.md
+++ b/src/google-maps/map-info-window/README.md
@@ -39,10 +39,12 @@ export class GoogleMapDemo {
             [center]="center"
             [zoom]="zoom"
             (mapClick)="addMarker($event)">
-  <map-marker #marker="mapMarker"
-              *ngFor="let markerPosition of markerPositions"
-              [position]="markerPosition"
-              (mapClick)="openInfoWindow(marker)"></map-marker>
+
+  @for (position of markerPositions; track position) {
+    <map-marker #marker="mapMarker"
+                [position]="position"
+                (mapClick)="openInfoWindow(marker)"></map-marker>
+  }
   <map-info-window>Info Window content</map-info-window>
 </google-map>
 ```
diff --git a/src/google-maps/map-marker-clusterer/README.md b/src/google-maps/map-marker-clusterer/README.md
index 4b73cc8d6a77..1ca18feb31b4 100644
--- a/src/google-maps/map-marker-clusterer/README.md
+++ b/src/google-maps/map-marker-clusterer/README.md
@@ -43,8 +43,9 @@ export class GoogleMapDemo {
             [zoom]="zoom"
             (mapClick)="addMarker($event)">
   <map-marker-clusterer [imagePath]="markerClustererImagePath">
-    <map-marker *ngFor="let markerPosition of markerPositions"
-                [position]="markerPosition"></map-marker>
+    @for (position of markerPositions; track position) {
+      <map-marker [position]="position"></map-marker>
+    }
   </map-marker-clusterer>
 </google-map>
 ```
diff --git a/src/google-maps/map-marker-clusterer/map-marker-clusterer.spec.ts b/src/google-maps/map-marker-clusterer/map-marker-clusterer.spec.ts
index c4a5e475ee91..ed08e42e22b6 100644
--- a/src/google-maps/map-marker-clusterer/map-marker-clusterer.spec.ts
+++ b/src/google-maps/map-marker-clusterer/map-marker-clusterer.spec.ts
@@ -325,9 +325,15 @@ describe('MapMarkerClusterer', () => {
                                      [options]="options"
                                      (clusteringbegin)="onClusteringBegin()"
                                      (clusterClick)="onClusterClick()">
-                 <map-marker *ngIf="state === 'state1'"></map-marker>
-                 <map-marker *ngIf="state === 'state1' || state === 'state2'"></map-marker>
-                 <map-marker *ngIf="state === 'state2'"></map-marker>
+                 @if (state === 'state1') {
+                  <map-marker></map-marker>
+                }
+                 @if (state === 'state1' || state === 'state2') {
+                  <map-marker></map-marker>
+                }
+                 @if (state === 'state2') {
+                  <map-marker></map-marker>
+                }
                </map-marker-clusterer>
              </google-map>`,
 })
diff --git a/src/google-maps/map-marker/README.md b/src/google-maps/map-marker/README.md
index 2089aebd9f2d..2360943b2940 100644
--- a/src/google-maps/map-marker/README.md
+++ b/src/google-maps/map-marker/README.md
@@ -32,8 +32,8 @@ export class GoogleMapDemo {
             [center]="center"
             [zoom]="zoom"
             (mapClick)="addMarker($event)">
-  <map-marker *ngFor="let markerPosition of markerPositions"
-              [position]="markerPosition"
-              [options]="markerOptions"></map-marker>
+  @for (position of markerPositions; track position) {
+    <map-marker [position]="position" [options]="markerOptions"></map-marker>
+  }
 </google-map>
 ```
diff --git a/src/material/autocomplete/autocomplete.md b/src/material/autocomplete/autocomplete.md
index 48fdcd9070e4..6bb167e3b029 100644
--- a/src/material/autocomplete/autocomplete.md
+++ b/src/material/autocomplete/autocomplete.md
@@ -111,7 +111,9 @@ autocomplete is attached to using the `matAutocompleteOrigin` directive together
 </div>
 
 <mat-autocomplete #auto="matAutocomplete">
-  <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
+  @for (option of options; track option) {
+    <mat-option [value]="option">{{option}}</mat-option>
+  }
 </mat-autocomplete>
 ```
 
diff --git a/src/material/autocomplete/autocomplete.spec.ts b/src/material/autocomplete/autocomplete.spec.ts
index 801d808702bd..4723e194cac9 100644
--- a/src/material/autocomplete/autocomplete.spec.ts
+++ b/src/material/autocomplete/autocomplete.spec.ts
@@ -3758,7 +3758,9 @@ describe('MDC-based MatAutocomplete', () => {
 
 const SIMPLE_AUTOCOMPLETE_TEMPLATE = `
   <mat-form-field [floatLabel]="floatLabel" [style.width.px]="width" [color]="theme">
-    <mat-label *ngIf="hasLabel">State</mat-label>
+    @if (hasLabel) {
+      <mat-label>State</mat-label>
+    }
     <input
       matInput
       placeholder="State"
@@ -3777,13 +3779,14 @@ const SIMPLE_AUTOCOMPLETE_TEMPLATE = `
     [aria-labelledby]="ariaLabelledby"
     (opened)="openedSpy()"
     (closed)="closedSpy()">
-    <mat-option
-      *ngFor="let state of filteredStates"
-      [value]="state"
-      [style.height.px]="state.height"
-      [disabled]="state.disabled">
-      <span>{{ state.code }}: {{ state.name }}</span>
-    </mat-option>
+    @for (state of filteredStates; track state) {
+      <mat-option
+        [value]="state"
+        [style.height.px]="state.height"
+        [disabled]="state.disabled">
+        <span>{{ state.code }}: {{ state.name }}</span>
+      </mat-option>
+    }
   </mat-autocomplete>
 `;
 
@@ -3848,14 +3851,18 @@ class SimpleAutocompleteShadowDom extends SimpleAutocomplete {}
 
 @Component({
   template: `
-    <mat-form-field *ngIf="isVisible">
+    @if (isVisible) {
+<mat-form-field>
       <input matInput placeholder="Choose" [matAutocomplete]="auto" [formControl]="optionCtrl">
     </mat-form-field>
+}
 
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+      @for (option of filteredOptions | async; track option) {
+  <mat-option [value]="option">
          {{option}}
       </mat-option>
+}
     </mat-autocomplete>
   `,
 })
@@ -3888,9 +3895,11 @@ class NgIfAutocomplete {
     </mat-form-field>
 
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let state of filteredStates" [value]="state">
-        <span> {{ state }}  </span>
-      </mat-option>
+      @for (state of filteredStates; track state) {
+        <mat-option [value]="state">
+          <span> {{ state }}  </span>
+        </mat-option>
+      }
     </mat-autocomplete>
   `,
 })
@@ -3915,9 +3924,11 @@ class AutocompleteWithoutForms {
     </mat-form-field>
 
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let state of filteredStates" [value]="state">
-        <span>{{ state }}</span>
-      </mat-option>
+      @for (state of filteredStates; track state) {
+        <mat-option [value]="state">
+          <span>{{ state }}</span>
+        </mat-option>
+      }
     </mat-autocomplete>
   `,
 })
@@ -3944,9 +3955,11 @@ class AutocompleteWithNgModel {
     </mat-form-field>
 
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let number of numbers" [value]="number">
-        <span>{{ number }}</span>
-      </mat-option>
+      @for (number of numbers; track number) {
+        <mat-option [value]="number">
+          <span>{{ number }}</span>
+        </mat-option>
+      }
     </mat-autocomplete>
   `,
 })
@@ -3963,7 +3976,9 @@ class AutocompleteWithNumbers {
     </mat-form-field>
 
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let option of options" [value]="option">{{ option }}</mat-option>
+      @for (option of options; track option) {
+        <mat-option [value]="option">{{ option }}</mat-option>
+      }
     </mat-autocomplete>
   `,
 })
@@ -3983,9 +3998,9 @@ class AutocompleteWithOnPushDelay implements OnInit {
     <input placeholder="Choose" [matAutocomplete]="auto" [formControl]="optionCtrl">
 
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
-         {{option}}
-      </mat-option>
+      @for (option of filteredOptions | async; track option) {
+        <mat-option [value]="option">{{option}}</mat-option>
+      }
     </mat-autocomplete>
   `,
 })
@@ -4024,11 +4039,15 @@ class AutocompleteWithoutPanel {
     </mat-form-field>
 
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-optgroup *ngFor="let group of stateGroups" [label]="group.label">
-        <mat-option *ngFor="let state of group.states" [value]="state">
-          <span>{{ state }}</span>
-        </mat-option>
-      </mat-optgroup>
+      @for (group of stateGroups; track group) {
+        <mat-optgroup [label]="group.label">
+          @for (state of group.states; track state) {
+            <mat-option [value]="state">
+              <span>{{ state }}</span>
+            </mat-option>
+          }
+        </mat-optgroup>
+      }
     </mat-autocomplete>
   `,
 })
@@ -4058,13 +4077,17 @@ class AutocompleteWithGroups {
     </mat-form-field>
 
     <mat-autocomplete #auto="matAutocomplete">
-      <ng-container [ngSwitch]="true">
-        <mat-optgroup *ngFor="let group of stateGroups" [label]="group.label">
-          <mat-option *ngFor="let state of group.states" [value]="state">
-            <span>{{ state }}</span>
-          </mat-option>
-        </mat-optgroup>
-      </ng-container>
+      @if (true) {
+        @for (group of stateGroups; track group) {
+          <mat-optgroup [label]="group.label">
+            @for (state of group.states; track state) {
+              <mat-option [value]="state">
+                <span>{{ state }}</span>
+              </mat-option>
+            }
+          </mat-optgroup>
+        }
+      }
     </mat-autocomplete>
   `,
 })
@@ -4077,9 +4100,11 @@ class AutocompleteWithIndirectGroups extends AutocompleteWithGroups {}
     </mat-form-field>
 
     <mat-autocomplete #auto="matAutocomplete" (optionSelected)="optionSelected($event)">
-      <mat-option *ngFor="let state of states" [value]="state">
-        <span>{{ state }}</span>
-      </mat-option>
+      @for (state of states; track state) {
+        <mat-option [value]="state">
+          <span>{{ state }}</span>
+        </mat-option>
+      }
     </mat-autocomplete>
   `,
 })
@@ -4109,7 +4134,9 @@ class PlainAutocompleteInputWithFormControl {
     </mat-form-field>
 
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let value of values" [value]="value">{{value}}</mat-option>
+      @for (value of values; track value) {
+        <mat-option [value]="value">{{value}}</mat-option>
+      }
     </mat-autocomplete>
   `,
 })
@@ -4139,7 +4166,9 @@ class AutocompleteWithNumberInputAndNgModel {
     </div>
 
     <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let value of values" [value]="value">{{value}}</mat-option>
+      @for (value of values; track value) {
+        <mat-option [value]="value">{{value}}</mat-option>
+      }
     </mat-autocomplete>
   `,
 })
@@ -4173,7 +4202,9 @@ class InputWithoutAutocompleteAndDisabled {}
     </mat-form-field>
 
     <mat-autocomplete #auto="matAutocomplete" (optionActivated)="optionActivated($event)">
-      <mat-option *ngFor="let state of states" [value]="state">{{ state }}</mat-option>
+      @for (state of states; track state) {
+        <mat-option [value]="state">{{ state }}</mat-option>
+      }
     </mat-autocomplete>
   `,
 })
@@ -4198,9 +4229,9 @@ class AutocompleteWithActivatedEvent {
           <input matInput [matAutocomplete]="reactiveAuto" [formControl]="formControl">
         </mat-form-field>
         <mat-autocomplete #reactiveAuto="matAutocomplete">
-          <mat-option *ngFor="let food of foods; let index = index" [value]="food">
-            {{food.viewValue}}
-          </mat-option>
+          @for (food of foods; track food; let index = $index) {
+            <mat-option [value]="food">{{food.viewValue}}</mat-option>
+          }
         </mat-autocomplete>
       </div>
     </ng-template>
diff --git a/src/material/autocomplete/testing/autocomplete-harness.spec.ts b/src/material/autocomplete/testing/autocomplete-harness.spec.ts
index 0c4350e3f371..2948d774bfb8 100644
--- a/src/material/autocomplete/testing/autocomplete-harness.spec.ts
+++ b/src/material/autocomplete/testing/autocomplete-harness.spec.ts
@@ -156,15 +156,19 @@ describe('MatAutocompleteHarness', () => {
 @Component({
   template: `
     <mat-autocomplete #autocomplete="matAutocomplete">
-      <mat-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</mat-option>
+      @for (state of states; track state) {
+        <mat-option [value]="state.code">{{ state.name }}</mat-option>
+      }
     </mat-autocomplete>
 
     <mat-autocomplete #groupedAutocomplete="matAutocomplete">
-      <mat-optgroup *ngFor="let group of stateGroups" [label]="group.name">
-        <mat-option
-          *ngFor="let state of group.states"
-          [value]="state.code">{{ state.name }}</mat-option>
-      </mat-optgroup>
+      @for (group of stateGroups; track group) {
+        <mat-optgroup [label]="group.name">
+          @for (state of group.states; track state) {
+            <mat-option [value]="state.code">{{ state.name }}</mat-option>
+          }
+        </mat-optgroup>
+      }
     </mat-autocomplete>
 
     <input id="plain" [matAutocomplete]="autocomplete">
diff --git a/src/material/button-toggle/button-toggle.spec.ts b/src/material/button-toggle/button-toggle.spec.ts
index 9b38f86d4669..4217167225bb 100644
--- a/src/material/button-toggle/button-toggle.spec.ts
+++ b/src/material/button-toggle/button-toggle.spec.ts
@@ -962,7 +962,9 @@ describe('MatButtonToggle without forms', () => {
   <mat-button-toggle-group [disabled]="isGroupDisabled"
                            [vertical]="isVertical"
                            [(value)]="groupValue">
-    <mat-button-toggle value="test1" *ngIf="renderFirstToggle">Test1</mat-button-toggle>
+    @if (renderFirstToggle) {
+      <mat-button-toggle value="test1">Test1</mat-button-toggle>
+    }
     <mat-button-toggle value="test2">Test2</mat-button-toggle>
     <mat-button-toggle value="test3">Test3</mat-button-toggle>
   </mat-button-toggle-group>
@@ -981,12 +983,12 @@ class ButtonTogglesInsideButtonToggleGroup {
     [name]="groupName"
     [(ngModel)]="modelValue"
     (change)="lastEvent = $event">
-    <mat-button-toggle *ngFor="let option of options"
-      [value]="option.value"
-      [disableRipple]="disableRipple"
-      [name]="option.name">
-      {{option.label}}
-    </mat-button-toggle>
+    @for (option of options; track option) {
+      <mat-button-toggle
+        [value]="option.value"
+        [disableRipple]="disableRipple"
+        [name]="option.name">{{option.label}}</mat-button-toggle>
+    }
   </mat-button-toggle-group>
   `,
 })
@@ -1064,14 +1066,14 @@ class ButtonToggleGroupWithFormControl {
 }
 
 @Component({
-  // We need the `ngSwitch` so that there's a directive between the group and the toggles.
+  // We need the `@if` so that there's a container between the group and the toggles.
   template: `
     <mat-button-toggle-group [formControl]="control">
-      <ng-container [ngSwitch]="true">
+      @if (true) {
         <mat-button-toggle value="red">Value Red</mat-button-toggle>
         <mat-button-toggle value="green">Value Green</mat-button-toggle>
         <mat-button-toggle value="blue">Value Blue</mat-button-toggle>
-      </ng-container>
+      }
     </mat-button-toggle-group>
   `,
 })
@@ -1094,9 +1096,9 @@ class ButtonToggleWithAriaLabelledby {}
 @Component({
   template: `
     <mat-button-toggle-group [(value)]="value">
-      <mat-button-toggle *ngFor="let toggle of possibleValues" [value]="toggle">
-        {{toggle}}
-      </mat-button-toggle>
+      @for (toggle of possibleValues; track toggle) {
+        <mat-button-toggle [value]="toggle">{{toggle}}</mat-button-toggle>
+      }
     </mat-button-toggle-group>
   `,
 })
@@ -1141,7 +1143,9 @@ class ButtonToggleWithStaticAriaAttributes {}
 @Component({
   template: `
   <mat-button-toggle-group [formControl]="control">
-    <mat-button-toggle *ngFor="let value of values" [value]="value">{{value}}</mat-button-toggle>
+    @for (value of values; track value) {
+      <mat-button-toggle [value]="value">{{value}}</mat-button-toggle>
+    }
   </mat-button-toggle-group>
   `,
 })
diff --git a/src/material/chips/chip-grid.spec.ts b/src/material/chips/chip-grid.spec.ts
index 946f017e8122..77790253d94c 100644
--- a/src/material/chips/chip-grid.spec.ts
+++ b/src/material/chips/chip-grid.spec.ts
@@ -1033,10 +1033,12 @@ describe('MDC-based MatChipGrid', () => {
 @Component({
   template: `
     <mat-chip-grid [tabIndex]="tabIndex" [role]="role" #chipGrid>
-      <mat-chip-row *ngFor="let i of chips"
+      @for (i of chips; track i) {
+  <mat-chip-row
                     [editable]="editable">
         {{name}} {{i + 1}}
       </mat-chip-row>
+}
     </mat-chip-grid>
     <input name="test" [matChipInputFor]="chipGrid"/>`,
 })
@@ -1053,7 +1055,9 @@ class StandardChipGrid {
     <mat-form-field>
       <mat-label>Add a chip</mat-label>
       <mat-chip-grid #chipGrid>
-        <mat-chip-row *ngFor="let chip of chips" (removed)="remove(chip)">{{chip}}</mat-chip-row>
+        @for (chip of chips; track chip) {
+  <mat-chip-row (removed)="remove(chip)">{{chip}}</mat-chip-row>
+}
       </mat-chip-grid>
       <input name="test" [matChipInputFor]="chipGrid"/>
     </mat-form-field>
@@ -1076,9 +1080,11 @@ class FormFieldChipGrid {
     <mat-form-field>
       <mat-label>New food...</mat-label>
       <mat-chip-grid #chipGrid placeholder="Food" [formControl]="control">
-        <mat-chip-row *ngFor="let food of foods" [value]="food.value" (removed)="remove(food)">
+        @for (food of foods; track food) {
+  <mat-chip-row [value]="food.value" (removed)="remove(food)">
           {{ food.viewValue }}
         </mat-chip-row>
+}
       </mat-chip-grid>
       <input
           [matChipInputFor]="chipGrid"
@@ -1136,9 +1142,11 @@ class InputChipGrid {
 <form #form="ngForm" novalidate>
   <mat-form-field>
     <mat-chip-grid #chipGrid [formControl]="formControl">
-      <mat-chip-row *ngFor="let food of foods" [value]="food.value">
+      @for (food of foods; track food) {
+  <mat-chip-row [value]="food.value">
       {{food.viewValue}}
       </mat-chip-row>
+}
     </mat-chip-grid>
     <input name="test" [matChipInputFor]="chipGrid"/>
     <mat-hint>Please select a chip, or type to add a new chip</mat-hint>
@@ -1162,7 +1170,9 @@ class ChipGridWithFormErrorMessages {
 @Component({
   template: `
     <mat-chip-grid #chipGrid>
-      <mat-chip-row *ngFor="let i of numbers" (removed)="remove(i)">{{i}}</mat-chip-row>
+      @for (i of numbers; track i) {
+  <mat-chip-row (removed)="remove(i)">{{i}}</mat-chip-row>
+}
       <input name="test" [matChipInputFor]="chipGrid"/>
     </mat-chip-grid>`,
   animations: [
@@ -1189,10 +1199,12 @@ class StandardChipGridWithAnimations {
   template: `
     <mat-form-field>
       <mat-chip-grid #chipGrid>
-        <mat-chip-row [value]="i" (removed)="removeChip($event)" *ngFor="let i of chips">
+        @for (i of chips; track i) {
+  <mat-chip-row [value]="i" (removed)="removeChip($event)">
           Chip {{i + 1}}
           <span matChipRemove>Remove</span>
         </mat-chip-row>
+}
       </mat-chip-grid>
       <input name="test" [matChipInputFor]="chipGrid"/>
     </mat-form-field>
diff --git a/src/material/chips/chip-listbox.spec.ts b/src/material/chips/chip-listbox.spec.ts
index ac964fa2cbda..cd4024edef6a 100644
--- a/src/material/chips/chip-listbox.spec.ts
+++ b/src/material/chips/chip-listbox.spec.ts
@@ -870,10 +870,11 @@ describe('MDC-based MatChipListbox', () => {
 @Component({
   template: `
     <mat-chip-listbox [tabIndex]="tabIndex" [selectable]="selectable" [role]="role">
-      <mat-chip-option *ngFor="let i of chips" (select)="chipSelect(i)"
-        (deselect)="chipDeselect(i)">
-        {{name}} {{i + 1}}
-      </mat-chip-option>
+      @for (i of chips; track i) {
+        <mat-chip-option (select)="chipSelect(i)" (deselect)="chipDeselect(i)">
+          {{name}} {{i + 1}}
+        </mat-chip-option>
+      }
     </mat-chip-listbox>`,
 })
 class StandardChipListbox {
@@ -890,9 +891,11 @@ class StandardChipListbox {
   template: `
       <mat-chip-listbox [formControl]="control" [required]="isRequired"
         [tabIndex]="tabIndexOverride" [selectable]="selectable">
-        <mat-chip-option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
-          {{ food.viewValue }}
-        </mat-chip-option>
+        @for (food of foods; track food) {
+          <mat-chip-option [value]="food.value" [disabled]="food.disabled">
+            {{ food.viewValue }}
+          </mat-chip-option>
+        }
       </mat-chip-listbox>
   `,
 })
@@ -921,9 +924,11 @@ class BasicChipListbox {
       <mat-chip-listbox [multiple]="true" [formControl]="control"
         [required]="isRequired"
         [tabIndex]="tabIndexOverride" [selectable]="selectable">
-        <mat-chip-option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
-          {{ food.viewValue }}
-        </mat-chip-option>
+        @for (food of foods; track food) {
+          <mat-chip-option [value]="food.value" [disabled]="food.disabled">
+            {{ food.viewValue }}
+          </mat-chip-option>
+        }
       </mat-chip-listbox>
   `,
 })
@@ -950,9 +955,9 @@ class MultiSelectionChipListbox {
 @Component({
   template: `
       <mat-chip-listbox [formControl]="control">
-        <mat-chip-option *ngFor="let food of foods" [value]="food.value">
-          {{ food.viewValue }}
-        </mat-chip-option>
+        @for (food of foods; track food) {
+          <mat-chip-option [value]="food.value">{{ food.viewValue }}</mat-chip-option>
+        }
       </mat-chip-listbox>
   `,
 })
@@ -968,9 +973,11 @@ class FalsyValueChipListbox {
 @Component({
   template: `
     <mat-chip-listbox>
-        <mat-chip-option *ngFor="let food of foods" [value]="food.value" [selected]="food.selected">
+      @for (food of foods; track food) {
+        <mat-chip-option [value]="food.value" [selected]="food.selected">
             {{ food.viewValue }}
         </mat-chip-option>
+      }
     </mat-chip-listbox>
   `,
 })
@@ -987,9 +994,11 @@ class SelectedChipListbox {
   template: `
       <mat-chip-listbox [formControl]="control" [required]="isRequired"
         [tabIndex]="tabIndexOverride" [selectable]="selectable">
-        <mat-chip-option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
-          {{ food.viewValue }}
-        </mat-chip-option>
+        @for (food of foods; track food) {
+          <mat-chip-option [value]="food.value" [disabled]="food.disabled">
+            {{ food.viewValue }}
+          </mat-chip-option>
+        }
       </mat-chip-listbox>
   `,
 })
diff --git a/src/material/chips/chip-option.spec.ts b/src/material/chips/chip-option.spec.ts
index 1897d290ac0f..cc74d3011c32 100644
--- a/src/material/chips/chip-option.spec.ts
+++ b/src/material/chips/chip-option.spec.ts
@@ -398,16 +398,20 @@ describe('MDC-based Option Chips', () => {
 @Component({
   template: `
     <mat-chip-listbox>
-      <div *ngIf="shouldShow">
-        <mat-chip-option [selectable]="selectable"
-                 [color]="color" [selected]="selected" [disabled]="disabled"
-                 (destroyed)="chipDestroy($event)"
-                 (selectionChange)="chipSelectionChange($event)"
-                 [aria-label]="ariaLabel" [aria-description]="ariaDescription">
-          <span class="avatar" matChipAvatar *ngIf="avatarLabel">{{avatarLabel}}</span>
-          {{name}}
-        </mat-chip-option>
-      </div>
+      @if (shouldShow) {
+        <div>
+          <mat-chip-option [selectable]="selectable"
+                  [color]="color" [selected]="selected" [disabled]="disabled"
+                  (destroyed)="chipDestroy($event)"
+                  (selectionChange)="chipSelectionChange($event)"
+                  [aria-label]="ariaLabel" [aria-description]="ariaDescription">
+            @if (avatarLabel) {
+              <span class="avatar" matChipAvatar>{{avatarLabel}}</span>
+            }
+            {{name}}
+          </mat-chip-option>
+        </div>
+      }
     </mat-chip-listbox>`,
 })
 class SingleChip {
diff --git a/src/material/chips/chip-row.spec.ts b/src/material/chips/chip-row.spec.ts
index c6c44ee47d5e..695fa085a836 100644
--- a/src/material/chips/chip-row.spec.ts
+++ b/src/material/chips/chip-row.spec.ts
@@ -384,18 +384,22 @@ describe('MDC-based Row Chips', () => {
 @Component({
   template: `
     <mat-chip-grid #chipGrid>
-      <div *ngIf="shouldShow">
-        <mat-chip-row [removable]="removable"
-                 [color]="color" [disabled]="disabled" [editable]="editable"
-                 (destroyed)="chipDestroy($event)"
-                 (removed)="chipRemove($event)" (edited)="chipEdit($event)"
-                 [aria-label]="ariaLabel" [aria-description]="ariaDescription">
-          {{name}}
-          <button matChipRemove>x</button>
-          <span *ngIf="useCustomEditInput" class="projected-edit-input" matChipEditInput></span>
-        </mat-chip-row>
-        <input matInput [matChipInputFor]="chipGrid" #chipInput>
-      </div>
+      @if (shouldShow) {
+        <div>
+          <mat-chip-row [removable]="removable"
+                  [color]="color" [disabled]="disabled" [editable]="editable"
+                  (destroyed)="chipDestroy($event)"
+                  (removed)="chipRemove($event)" (edited)="chipEdit($event)"
+                  [aria-label]="ariaLabel" [aria-description]="ariaDescription">
+            {{name}}
+            <button matChipRemove>x</button>
+            @if (useCustomEditInput) {
+              <span class="projected-edit-input" matChipEditInput></span>
+            }
+          </mat-chip-row>
+          <input matInput [matChipInputFor]="chipGrid" #chipInput>
+        </div>
+      }
     </mat-chip-grid>`,
 })
 class SingleChip {
diff --git a/src/material/chips/chip-set.spec.ts b/src/material/chips/chip-set.spec.ts
index a5e6363d034b..89c4fdb2fd7c 100644
--- a/src/material/chips/chip-set.spec.ts
+++ b/src/material/chips/chip-set.spec.ts
@@ -109,9 +109,9 @@ describe('MDC-based MatChipSet', () => {
 @Component({
   template: `
       <mat-chip-set>
-        <mat-chip *ngFor="let i of chips">
-          {{name}} {{i + 1}}
-        </mat-chip>
+        @for (i of chips; track i) {
+          <mat-chip>{{name}} {{i + 1}}</mat-chip>
+        }
       </mat-chip-set>
   `,
 })
@@ -123,11 +123,11 @@ class BasicChipSet {
 @Component({
   template: `
     <mat-chip-set>
-      <ng-container [ngSwitch]="true">
-        <mat-chip *ngFor="let i of chips">
-          {{name}} {{i + 1}}
-        </mat-chip>
-      </ng-container>
+      @if (true) {
+        @for (i of chips; track i) {
+          <mat-chip>{{name}} {{i + 1}}</mat-chip>
+        }
+      }
     </mat-chip-set>
   `,
 })
diff --git a/src/material/chips/chip.spec.ts b/src/material/chips/chip.spec.ts
index a5f828a20e61..cb15b4935eb6 100644
--- a/src/material/chips/chip.spec.ts
+++ b/src/material/chips/chip.spec.ts
@@ -185,14 +185,16 @@ describe('MDC-based MatChip', () => {
 @Component({
   template: `
     <mat-chip-set>
-      <div *ngIf="shouldShow">
-        <mat-chip [removable]="removable"
-                 [color]="color" [disabled]="disabled"
-                 (destroyed)="chipDestroy($event)"
-                 (removed)="chipRemove($event)" [value]="value" [disableRipple]="rippleDisabled">
-          {{name}}
-        </mat-chip>
-      </div>
+      @if (shouldShow) {
+        <div>
+          <mat-chip [removable]="removable"
+                  [color]="color" [disabled]="disabled"
+                  (destroyed)="chipDestroy($event)"
+                  (removed)="chipRemove($event)" [value]="value" [disableRipple]="rippleDisabled">
+            {{name}}
+          </mat-chip>
+        </div>
+      }
     </mat-chip-set>`,
 })
 class SingleChip {
diff --git a/src/material/chips/chips.md b/src/material/chips/chips.md
index 8a95c6cb4fbc..f803ff2910ae 100644
--- a/src/material/chips/chips.md
+++ b/src/material/chips/chips.md
@@ -94,7 +94,7 @@ See the [accessibility](#accessibility) section for best practices on implementi
 
 ### Orientation
 
-By default, chips are displayed horizontally. To stack chips vertically, apply the `mat-mdc-chip-set-stacked` class to `<mat-chip-set>`, `<mat-chip-listbox>` or `<mat-chip-grid>`. 
+By default, chips are displayed horizontally. To stack chips vertically, apply the `mat-mdc-chip-set-stacked` class to `<mat-chip-set>`, `<mat-chip-listbox>` or `<mat-chip-grid>`.
 
 <!-- example(chips-stacked) -->
 
@@ -141,14 +141,15 @@ The chips components support 3 user interaction patterns, each with its own cont
 ```html
 <mat-form-field>
   <mat-chip-grid #myChipGrid [(ngModel)]="mySelection"
-  aria-label="enter sandwich fillings">
-    <mat-chip-row *ngFor="let filling of fillings"
-                 (removed)="remove(filling)">
-      {{filling.name}}
-      <button matChipRemove>
-        <mat-icon>cancel</mat-icon>
-      </button>
-    </mat-chip-row>
+    aria-label="enter sandwich fillings">
+    @for (filling of fillings; track filling) {
+      <mat-chip-row (removed)="remove(filling)">
+        {{filling.name}}
+        <button matChipRemove>
+          <mat-icon>cancel</mat-icon>
+        </button>
+      </mat-chip-row>
+    }
     <input [matChipInputFor]="myChipGrid"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            (matChipInputTokenEnd)="add($event)" />
diff --git a/src/material/chips/testing/chip-listbox-harness.spec.ts b/src/material/chips/testing/chip-listbox-harness.spec.ts
index 1843d50a08c8..d513a7c03c42 100644
--- a/src/material/chips/testing/chip-listbox-harness.spec.ts
+++ b/src/material/chips/testing/chip-listbox-harness.spec.ts
@@ -112,9 +112,11 @@ describe('MatChipListboxHarness', () => {
 @Component({
   template: `
     <mat-chip-listbox [multiple]="isMultiple" [disabled]="disabled" [required]="required">
-      <mat-chip-option *ngFor="let option of options" [selected]="option.selected">
-        {{option.text}}
-      </mat-chip-option>
+      @for (option of options; track option) {
+        <mat-chip-option [selected]="option.selected">
+          {{option.text}}
+        </mat-chip-option>
+      }
     </mat-chip-listbox>
   `,
 })
diff --git a/src/material/core/ripple/ripple.spec.ts b/src/material/core/ripple/ripple.spec.ts
index a38158cc68b4..cc3ef2a61d99 100644
--- a/src/material/core/ripple/ripple.spec.ts
+++ b/src/material/core/ripple/ripple.spec.ts
@@ -874,7 +874,7 @@ class RippleContainerWithInputBindings {
 class RippleContainerWithoutBindings {}
 
 @Component({
-  template: `<div id="container" matRipple *ngIf="!isDestroyed"></div>`,
+  template: `@if (!isDestroyed) {<div id="container" matRipple></div>}`,
 })
 class RippleContainerWithNgIf {
   @ViewChild(MatRipple) ripple: MatRipple;
@@ -897,9 +897,9 @@ class RippleCssTransitionDurationZero {}
 
 @Component({
   template: `
-    <div *ngIf="show" (click)="show = false" matRipple>
-      Click to remove this element.
-    </div>
+    @if (show) {
+      <div (click)="show = false" matRipple>Click to remove this element.</div>
+    }
   `,
 })
 class RippleWithDomRemovalOnClick {
diff --git a/src/material/datepicker/datepicker-actions.spec.ts b/src/material/datepicker/datepicker-actions.spec.ts
index e4fd8fb34104..6a004e161330 100644
--- a/src/material/datepicker/datepicker-actions.spec.ts
+++ b/src/material/datepicker/datepicker-actions.spec.ts
@@ -292,10 +292,12 @@ describe('MatDatepickerActions', () => {
           [formControl]="control"
           (dateChange)="onDateChange()">
       <mat-datepicker #picker [touchUi]="touchUi" [startAt]="startAt">
-        <mat-datepicker-actions *ngIf="renderActions">
-          <button mat-button class="cancel" matDatepickerCancel>Cancel</button>
-          <button mat-raised-button class="apply" matDatepickerApply>Apply</button>
-        </mat-datepicker-actions>
+        @if (renderActions) {
+          <mat-datepicker-actions>
+            <button mat-button class="cancel" matDatepickerCancel>Cancel</button>
+            <button mat-raised-button class="apply" matDatepickerApply>Apply</button>
+          </mat-datepicker-actions>
+        }
       </mat-datepicker>
     </mat-form-field>
   `,
diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts
index a43f9dc70940..e8be88bc3231 100644
--- a/src/material/dialog/dialog.spec.ts
+++ b/src/material/dialog/dialog.spec.ts
@@ -2121,7 +2121,7 @@ class ComponentWithOnPushViewContainer {
 
 @Component({
   selector: 'arbitrary-component',
-  template: `<dir-with-view-container *ngIf="showChildView"></dir-with-view-container>`,
+  template: `@if (showChildView) {<dir-with-view-container></dir-with-view-container>}`,
 })
 class ComponentWithChildViewContainer {
   showChildView = true;
@@ -2162,9 +2162,15 @@ class PizzaMsg {
 
 @Component({
   template: `
-    <h1 mat-dialog-title *ngIf="shouldShowTitle('first')">This is the first title</h1>
-    <h1 mat-dialog-title *ngIf="shouldShowTitle('second')">This is the second title</h1>
-    <h1 mat-dialog-title *ngIf="shouldShowTitle('third')">This is the third title</h1>
+    @if (shouldShowTitle('first')) {
+      <h1 mat-dialog-title>This is the first title</h1>
+    }
+    @if (shouldShowTitle('second')) {
+      <h1 mat-dialog-title>This is the second title</h1>
+    }
+    @if (shouldShowTitle('third')) {
+      <h1 mat-dialog-title>This is the third title</h1>
+    }
     <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
     <mat-dialog-actions align="end">
       <button mat-dialog-close>Close</button>
@@ -2189,9 +2195,15 @@ class ContentElementDialog {
 @Component({
   template: `
     <ng-template>
-      <h1 mat-dialog-title *ngIf="shouldShowTitle('first')">This is the first title</h1>
-      <h1 mat-dialog-title *ngIf="shouldShowTitle('second')">This is the second title</h1>
-      <h1 mat-dialog-title *ngIf="shouldShowTitle('third')">This is the third title</h1>
+      @if (shouldShowTitle('first')) {
+        <h1 mat-dialog-title>This is the first title</h1>
+      }
+      @if (shouldShowTitle('second')) {
+        <h1 mat-dialog-title>This is the second title</h1>
+      }
+      @if (shouldShowTitle('third')) {
+        <h1 mat-dialog-title>This is the third title</h1>
+      }
       <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
       <mat-dialog-actions align="end">
         <button mat-dialog-close>Close</button>
@@ -2238,7 +2250,10 @@ class ShadowDomComponent {}
 
 @Component({template: ''})
 class ModuleBoundDialogParentComponent {
-  constructor(private _injector: Injector, private _dialog: MatDialog) {}
+  constructor(
+    private _injector: Injector,
+    private _dialog: MatDialog,
+  ) {}
 
   openDialog(): void {
     const ngModuleRef = createNgModuleRef(
diff --git a/src/material/divider/divider.md b/src/material/divider/divider.md
index 960ef674945d..6e0094184c3b 100644
--- a/src/material/divider/divider.md
+++ b/src/material/divider/divider.md
@@ -38,19 +38,25 @@ in a list, because it will overlap with the section divider.
 ```html
 <mat-list>
    <h3 mat-subheader>Folders</h3>
-   <mat-list-item *ngFor="let folder of folders; last as last">
-      <mat-icon mat-list-icon>folder</mat-icon>
-      <h4 mat-line>{{folder.name}}</h4>
-      <p mat-line class="demo-2"> {{folder.updated}} </p>
-      <mat-divider [inset]="true" *ngIf="!last"></mat-divider>
-   </mat-list-item>
+   @for (folder of folders; track folder) {
+      <mat-list-item>
+         <mat-icon mat-list-icon>folder</mat-icon>
+         <h4 mat-line>{{folder.name}}</h4>
+         <p mat-line class="demo-2">{{folder.updated}}</p>
+         @if (!$last) {
+            <mat-divider [inset]="true"></mat-divider>
+         }
+      </mat-list-item>
+   }
    <mat-divider></mat-divider>
    <h3 mat-subheader>Notes</h3>
-   <mat-list-item *ngFor="let note of notes">
-      <mat-icon mat-list-icon>note</mat-icon>
-      <h4 mat-line>{{note.name}}</h4>
-      <p mat-line class="demo-2"> {{note.updated}} </p>
-   </mat-list-item>
+   @for (note of notes; track node) {
+      <mat-list-item>
+         <mat-icon mat-list-icon>note</mat-icon>
+         <h4 mat-line>{{note.name}}</h4>
+         <p mat-line class="demo-2"> {{note.updated}} </p>
+      </mat-list-item>
+   }
 </mat-list>
 ```
 
diff --git a/src/material/expansion/accordion.spec.ts b/src/material/expansion/accordion.spec.ts
index 45d441c6f469..e0de275e23ce 100644
--- a/src/material/expansion/accordion.spec.ts
+++ b/src/material/expansion/accordion.spec.ts
@@ -303,10 +303,12 @@ describe('MatAccordion', () => {
 @Component({
   template: `
   <mat-accordion [multi]="multi">
-    <mat-expansion-panel *ngFor="let i of [0, 1, 2, 3]">
-      <mat-expansion-panel-header>Summary {{i}}</mat-expansion-panel-header>
-      <p>Content</p>
-    </mat-expansion-panel>
+    @for (i of [0, 1, 2, 3]; track i) {
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>Summary {{i}}</mat-expansion-panel-header>
+        <p>Content</p>
+      </mat-expansion-panel>
+    }
   </mat-accordion>`,
 })
 class SetOfItems {
diff --git a/src/material/expansion/expansion.spec.ts b/src/material/expansion/expansion.spec.ts
index ae3fbc004a2c..f79a19e1e965 100644
--- a/src/material/expansion/expansion.spec.ts
+++ b/src/material/expansion/expansion.spec.ts
@@ -582,11 +582,14 @@ class PanelWithContent {
 
 @Component({
   template: `
-  <div *ngIf="expansionShown">
-    <mat-expansion-panel>
-      <mat-expansion-panel-header>Panel Title</mat-expansion-panel-header>
-    </mat-expansion-panel>
-  </div>`,
+    @if (expansionShown) {
+      <div>
+        <mat-expansion-panel>
+          <mat-expansion-panel-header>Panel Title</mat-expansion-panel-header>
+        </mat-expansion-panel>
+      </div>
+    }
+  `,
 })
 class PanelWithContentInNgIf {
   expansionShown = true;
diff --git a/src/material/form-field/form-field.md b/src/material/form-field/form-field.md
index 5ccf3129b13b..a393f128eb24 100644
--- a/src/material/form-field/form-field.md
+++ b/src/material/form-field/form-field.md
@@ -86,7 +86,7 @@ has interacted with the element or the parent form has been submitted. Since the
 same space as the hints, the hints are hidden when the errors are shown.
 
 If a form field can have more than one error state, it is up to the consumer to toggle which
-messages should be displayed. This can be done with CSS, `ngIf` or `ngSwitch`. Multiple error
+messages should be displayed. This can be done with CSS, `@if` or `@switch`. Multiple error
 messages can be shown at the same time if desired, but the `<mat-form-field>` only reserves enough
 space to display one error message at a time. Ensuring that enough space is available to display
 multiple errors is up to the user.
diff --git a/src/material/grid-list/grid-list.spec.ts b/src/material/grid-list/grid-list.spec.ts
index f6519917c11f..ceca04053d5b 100644
--- a/src/material/grid-list/grid-list.spec.ts
+++ b/src/material/grid-list/grid-list.spec.ts
@@ -676,10 +676,12 @@ class GridListWithRowspanBinding {
   template: `
     <div style="width:400px">
       <mat-grid-list cols="4" rowHeight="100px">
-        <mat-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
-                      [style.background]="tile.color">
-          {{tile.text}}
-        </mat-grid-tile>
+        @for (tile of tiles; track tile) {
+          <mat-grid-tile [colspan]="tile.cols" [rowspan]="tile.rows"
+                        [style.background]="tile.color">
+            {{tile.text}}
+          </mat-grid-tile>
+        }
       </mat-grid-list>
     </div>`,
 })
@@ -744,10 +746,10 @@ class GridListWithFooterContainingTwoLines {}
     <mat-grid-list cols="1">
       <mat-grid-tile>
         <mat-grid-tile-footer>
-          <ng-container [ngSwitch]="true">
+          @if (true) {
             <h3 mat-line>First line</h3>
             <span mat-line>Second line</span>
-          </ng-container>
+          }
         </mat-grid-tile-footer>
       </mat-grid-tile>
     </mat-grid-list>`,
@@ -779,13 +781,13 @@ class GridListWithEmptyDirectionality {}
 class GridListWithRtl {}
 
 @Component({
-  // Note the blank `ngSwitch` which we need in order to hit the bug that we're testing.
+  // Note the blank `@if` which we need in order to hit the bug that we're testing.
   template: `
     <div style="width:200px">
       <mat-grid-list cols="1">
-        <ng-container [ngSwitch]="true">
+        @if (true) {
           <mat-grid-tile></mat-grid-tile>
-        </ng-container>
+        }
       </mat-grid-list>
     </div>
   `,
diff --git a/src/material/grid-list/testing/grid-list-harness.spec.ts b/src/material/grid-list/testing/grid-list-harness.spec.ts
index 2faf72ab5986..2431235d850e 100644
--- a/src/material/grid-list/testing/grid-list-harness.spec.ts
+++ b/src/material/grid-list/testing/grid-list-harness.spec.ts
@@ -151,7 +151,9 @@ describe('MatGridListHarness', () => {
     <mat-grid-list [cols]="columns">
       <mat-grid-tile>
         <mat-grid-tile-header>{{firstTileText}}</mat-grid-tile-header>
-        <mat-grid-tile-footer *ngIf="showFooter">Footer</mat-grid-tile-footer>
+        @if (showFooter) {
+          <mat-grid-tile-footer>Footer</mat-grid-tile-footer>
+        }
       </mat-grid-tile>
       <mat-grid-tile>
         <mat-grid-tile-header>Two</mat-grid-tile-header>
diff --git a/src/material/icon/icon.spec.ts b/src/material/icon/icon.spec.ts
index 3d7e8f18d2c3..2a02df303cf9 100644
--- a/src/material/icon/icon.spec.ts
+++ b/src/material/icon/icon.spec.ts
@@ -1420,7 +1420,7 @@ class IconFromSvgName {
 @Component({template: '<mat-icon aria-hidden="false">face</mat-icon>'})
 class IconWithAriaHiddenFalse {}
 
-@Component({template: `<mat-icon [svgIcon]="iconName" *ngIf="showIcon">{{iconName}}</mat-icon>`})
+@Component({template: `@if (showIcon) {<mat-icon [svgIcon]="iconName">{{iconName}}</mat-icon>}`})
 class IconWithBindingAndNgIf {
   iconName = 'fluffy';
   showIcon = true;
diff --git a/src/material/input/input.spec.ts b/src/material/input/input.spec.ts
index 0f805aae8033..fef22dd52f7c 100644
--- a/src/material/input/input.spec.ts
+++ b/src/material/input/input.spec.ts
@@ -1629,7 +1629,9 @@ class MatInputHintLabelTestController {
   template: `
     <mat-form-field [hintLabel]="label">
       <input matInput [formControl]="formControl" [aria-describedby]="userDescribedByValue">
-      <mat-error *ngIf="showError">Some error</mat-error>
+      @if (showError) {
+        <mat-error>Some error</mat-error>
+      }
     </mat-form-field>`,
 })
 class MatInputWithSubscriptAndAriaDescribedBy {
@@ -1782,7 +1784,9 @@ class MatInputMissingMatInputTestController {}
       <mat-form-field>
         <input matInput [formControl]="formControl">
         <mat-hint>Please type something</mat-hint>
-        <mat-error *ngIf="renderError">This field is required</mat-error>
+        @if (renderError) {
+          <mat-error>This field is required</mat-error>
+        }
       </mat-form-field>
     </form>
   `,
@@ -1855,7 +1859,9 @@ class MatInputWithPrefixAndSuffix {}
 @Component({
   template: `
     <mat-form-field>
-      <input matInput *ngIf="renderInput">
+      @if (renderInput) {
+        <input matInput>
+      }
     </mat-form-field>
   `,
 })
diff --git a/src/material/list/list.md b/src/material/list/list.md
index 9360406bc586..c1c86b453b30 100644
--- a/src/material/list/list.md
+++ b/src/material/list/list.md
@@ -62,7 +62,9 @@ Simple navigation lists can use the `mat-list-item` attribute on anchor tag elem
 
 ```html
 <mat-nav-list>
-  <a mat-list-item href="..." *ngFor="let link of links" [activated]="link.isActive">{{ link }}</a>
+  @for (link of list; track link) {
+    <a mat-list-item href="..." [activated]="link.isActive">{{ link }}</a>
+  }
 </mat-nav-list>
 ```
 
@@ -71,12 +73,14 @@ element in an `<mat-list-item>`.
 
 ```html
 <mat-nav-list>
-  <mat-list-item *ngFor="let link of links" [activated]="link.isActive">
-     <a matListItemTitle href="...">{{ link }}</a>
-     <button mat-icon-button (click)="showInfo(link)" matListItemMeta>
-        <mat-icon>info</mat-icon>
-     </button>
-  </mat-list-item>
+  @for (link of links; track link) {
+    <mat-list-item [activated]="link.isActive">
+       <a matListItemTitle href="...">{{ link }}</a>
+       <button mat-icon-button (click)="showInfo(link)" matListItemMeta>
+          <mat-icon>info</mat-icon>
+       </button>
+    </mat-list-item>
+  }
 </mat-nav-list>
 ```
 
@@ -111,22 +115,26 @@ attribute. Whichever heading tag is appropriate for your DOM hierarchy should be
 ```html
 <!-- two line list -->
 <mat-list>
-  <mat-list-item *ngFor="let message of messages">
-    <h3 matListItemTitle>{{message.from}}</h3>
-    <p matListItemLine>
-      <span>{{message.subject}}</span>
-      <span class="demo-2"> -- {{message.content}}</span>
-    </p>
-  </mat-list-item>
+  @for (message of messages; track message) {
+    <mat-list-item>
+      <h3 matListItemTitle>{{message.from}}</h3>
+      <p matListItemLine>
+        <span>{{message.subject}}</span>
+        <span class="demo-2"> -- {{message.content}}</span>
+      </p>
+    </mat-list-item>
+  }
 </mat-list>
 
 <!-- three line list -->
 <mat-list>
-  <mat-list-item *ngFor="let message of messages">
-    <h3 matListItemTitle>{{message.from}}</h3>
-    <p matListItemLine>{{message.subject}}</p>
-    <p matListItemLine class="demo-2">{{message.content}}</p>
-  </mat-list-item>
+  @for (message of messages; track message) {
+    <mat-list-item>
+      <h3 matListItemTitle>{{message.from}}</h3>
+      <p matListItemLine>{{message.subject}}</p>
+      <p matListItemLine class="demo-2">{{message.content}}</p>
+    </mat-list-item>
+  }
 </mat-list>
 ```
 
@@ -137,14 +145,16 @@ To add an icon to your list item, use the `matListItemIcon` attribute.
 
 ```html
 <mat-list>
-  <mat-list-item *ngFor="let message of messages">
-    <mat-icon matListItemIcon>folder</mat-icon>
-    <h3 matListItemTitle>{{message.from}}</h3>
-    <p matListItemLine>
-      <span>{{message.subject}}</span>
-      <span class="demo-2"> -- {{message.content}}</span>
-    </p>
-  </mat-list-item>
+  @for (message of messages; track message) {
+    <mat-list-item>
+      <mat-icon matListItemIcon>folder</mat-icon>
+      <h3 matListItemTitle>{{message.from}}</h3>
+      <p matListItemLine>
+        <span>{{message.subject}}</span>
+        <span class="demo-2"> -- {{message.content}}</span>
+      </p>
+    </mat-list-item>
+  }
 </mat-list>
 ```
 
@@ -154,14 +164,16 @@ To include an avatar image, add an image tag with an `matListItemAvatar` attribu
 
 ```html
 <mat-list>
-  <mat-list-item *ngFor="let message of messages">
-    <img matListItemAvatar src="..." alt="...">
-    <h3 matListItemTitle>{{message.from}}</h3>
-    <p matListItemLine>
-      <span>{{message.subject}}</span>
-      <span class="demo-2"> -- {{message.content}}</span>
-    </p>
-  </mat-list-item>
+  @for (message of messages; track message) {
+    <mat-list-item>
+      <img matListItemAvatar src="..." alt="...">
+      <h3 matListItemTitle>{{message.from}}</h3>
+      <p matListItemLine>
+        <span>{{message.subject}}</span>
+        <span class="demo-2"> -- {{message.content}}</span>
+      </p>
+    </mat-list-item>
+  }
 </mat-list>
 ```
 
@@ -173,18 +185,22 @@ To add a divider, use `<mat-divider>`.
 ```html
 <mat-list>
    <h3 matSubheader>Folders</h3>
-   <mat-list-item *ngFor="let folder of folders">
-      <mat-icon matListIcon>folder</mat-icon>
-      <h4 matListItemTitle>{{folder.name}}</h4>
-      <p matListItemLine class="demo-2"> {{folder.updated}} </p>
-   </mat-list-item>
+   @for (folder of folders; track folder) {
+     <mat-list-item>
+        <mat-icon matListIcon>folder</mat-icon>
+        <h4 matListItemTitle>{{folder.name}}</h4>
+        <p matListItemLine class="demo-2"> {{folder.updated}} </p>
+     </mat-list-item>
+   }
    <mat-divider></mat-divider>
    <h3 matSubheader>Notes</h3>
-   <mat-list-item *ngFor="let note of notes">
-      <mat-icon matListIcon>note</mat-icon>
-      <h4 matListItemTitle>{{note.name}}</h4>
-      <p matListItemLine class="demo-2"> {{note.updated}} </p>
-   </mat-list-item>
+   @for (note of notes; track note) {
+     <mat-list-item>
+        <mat-icon matListIcon>note</mat-icon>
+        <h4 matListItemTitle>{{note.name}}</h4>
+        <p matListItemLine class="demo-2"> {{note.updated}} </p>
+     </mat-list-item>
+   }
 </mat-list>
 ```
 
diff --git a/src/material/list/list.spec.ts b/src/material/list/list.spec.ts
index 5b97fc9f1460..53214f0a75d5 100644
--- a/src/material/list/list.spec.ts
+++ b/src/material/list/list.spec.ts
@@ -449,10 +449,12 @@ class NavListWithOneAnchorItem extends BaseTestList {
 @Component({
   template: `
   <mat-nav-list [disableRipple]="disableListRipple">
-    <a *ngFor="let item of items; let index = index" mat-list-item [disableRipple]="disableItemRipple"
-      [activated]="index === activatedIndex">
-      {{item.name}}
-    </a>
+    @for (item of items; track item; let index = $index) {
+      <a mat-list-item [disableRipple]="disableItemRipple"
+        [activated]="index === activatedIndex">
+        {{item.name}}
+      </a>
+    }
   </mat-nav-list>`,
 })
 class NavListWithActivatedItem extends BaseTestList {
@@ -493,9 +495,9 @@ class ActionListWithType extends BaseTestList {
 @Component({
   template: `
   <mat-action-list [disabled]="disableList">
-    <button mat-list-item *ngFor="let item of items">
-      {{item.name}}
-    </button>
+    @for (item of items; track item) {
+      <button mat-list-item>{{item.name}}</button>
+    }
   </mat-action-list>`,
 })
 class ActionListWithDisabledList extends BaseTestList {
@@ -528,11 +530,13 @@ class ListWithOneItem extends BaseTestList {}
 @Component({
   template: `
   <mat-list>
-    <mat-list-item *ngFor="let item of items">
-      <img src="">
-      <h3 matListItemTitle>{{item.name}}</h3>
-      <p matListItemLine>{{item.description}}</p>
-    </mat-list-item>
+    @for (item of items; track item) {
+      <mat-list-item>
+        <img src="">
+        <h3 matListItemTitle>{{item.name}}</h3>
+        <p matListItemLine>{{item.description}}</p>
+      </mat-list-item>
+    }
   </mat-list>`,
 })
 class ListWithTwoLineItem extends BaseTestList {}
@@ -540,11 +544,13 @@ class ListWithTwoLineItem extends BaseTestList {}
 @Component({
   template: `
   <mat-list>
-    <mat-list-item *ngFor="let item of items">
-      <h3 matListItemTitle>{{item.name}}</h3>
-      <p matListItemLine>{{item.description}}</p>
-      <p matListItemLine>Some other text</p>
-    </mat-list-item>
+    @for (item of items; track item) {
+      <mat-list-item>
+        <h3 matListItemTitle>{{item.name}}</h3>
+        <p matListItemLine>{{item.description}}</p>
+        <p matListItemLine>Some other text</p>
+      </mat-list-item>
+    }
   </mat-list>`,
 })
 class ListWithThreeLineItem extends BaseTestList {}
@@ -552,12 +558,14 @@ class ListWithThreeLineItem extends BaseTestList {}
 @Component({
   template: `
   <mat-list>
-    <mat-list-item *ngFor="let item of items">
-      <h3 matListItemTitle>Line 1</h3>
-      <p matListItemLine>Line 2</p>
-      <p matListItemLine>Line 3</p>
-      <p matListItemLine>Line 4</p>
-    </mat-list-item>
+    @for (item of items; track item) {
+      <mat-list-item>
+        <h3 matListItemTitle>Line 1</h3>
+        <p matListItemLine>Line 2</p>
+        <p matListItemLine>Line 3</p>
+        <p matListItemLine>Line 4</p>
+      </mat-list-item>
+    }
   </mat-list>`,
 })
 class ListWithManyLines extends BaseTestList {}
@@ -579,10 +587,12 @@ class ListWithAvatar extends BaseTestList {}
 @Component({
   template: `
   <mat-list>
-    <mat-list-item class="test-class" *ngFor="let item of items">
-      <h3 matListItemTitle>{{item.name}}</h3>
-      <p matListItemLine>{{item.description}}</p>
-    </mat-list-item>
+    @for (item of items; track item) {
+      <mat-list-item class="test-class">
+        <h3 matListItemTitle>{{item.name}}</h3>
+        <p matListItemLine>{{item.description}}</p>
+      </mat-list-item>
+    }
   </mat-list>`,
 })
 class ListWithItemWithCssClass extends BaseTestList {}
@@ -590,11 +600,15 @@ class ListWithItemWithCssClass extends BaseTestList {}
 @Component({
   template: `
   <mat-list>
-    <mat-list-item *ngFor="let item of items">
-      <h3 matListItemTitle>{{item.name}}</h3>
-      <p matListItemLine>{{item.description}}</p>
-      <p matListItemLine *ngIf="showThirdLine">Some other text</p>
-    </mat-list-item>
+    @for (item of items; track item) {
+      <mat-list-item>
+        <h3 matListItemTitle>{{item.name}}</h3>
+        <p matListItemLine>{{item.description}}</p>
+        @if (showThirdLine) {
+          <p matListItemLine>Some other text</p>
+        }
+      </mat-list-item>
+    }
   </mat-list>`,
 })
 class ListWithDynamicNumberOfLines extends BaseTestList {}
@@ -602,9 +616,9 @@ class ListWithDynamicNumberOfLines extends BaseTestList {}
 @Component({
   template: `
   <mat-list>
-    <mat-list-item *ngFor="let item of items">
-      {{item.name}}
-    </mat-list-item>
+    @for (item of items; track item) {
+      <mat-list-item>{{item.name}}</mat-list-item>
+    }
   </mat-list>`,
 })
 class ListWithMultipleItems extends BaseTestList {}
diff --git a/src/material/list/selection-list.spec.ts b/src/material/list/selection-list.spec.ts
index c908b52a24f6..51ec5b0413d0 100644
--- a/src/material/list/selection-list.spec.ts
+++ b/src/material/list/selection-list.spec.ts
@@ -1725,9 +1725,11 @@ describe('MDC-based MatSelectionList with forms', () => {
     <mat-list-option togglePosition="before" value="archive">
       Archive
     </mat-list-option>
-    <mat-list-option togglePosition="before" value="drafts" *ngIf="showLastOption">
-      Drafts
-    </mat-list-option>
+    @if (showLastOption) {
+      <mat-list-option togglePosition="before" value="drafts">
+        Drafts
+      </mat-list-option>
+    }
   </mat-selection-list>`,
 })
 class SelectionListWithListOptions {
@@ -1837,7 +1839,9 @@ class SelectionListWithOnlyOneOption {}
       [(ngModel)]="selectedOptions"
       (ngModelChange)="modelChangeSpy()"
       [multiple]="multiple">
-      <mat-list-option *ngFor="let option of options" [value]="option">{{option}}</mat-list-option>
+      @for (option of options; track option) {
+        <mat-list-option [value]="option">{{option}}</mat-list-option>
+      }
     </mat-selection-list>`,
 })
 class SelectionListWithModel {
@@ -1849,12 +1853,16 @@ class SelectionListWithModel {
 
 @Component({
   template: `
-    <mat-selection-list [formControl]="formControl" *ngIf="renderList">
-      <mat-list-option value="opt1">Option 1</mat-list-option>
-      <mat-list-option value="opt2">Option 2</mat-list-option>
-      <mat-list-option value="opt3">Option 3</mat-list-option>
-      <mat-list-option value="opt4" *ngIf="renderExtraOption">Option 4</mat-list-option>
-    </mat-selection-list>
+    @if (renderList) {
+      <mat-selection-list [formControl]="formControl">
+        <mat-list-option value="opt1">Option 1</mat-list-option>
+        <mat-list-option value="opt2">Option 2</mat-list-option>
+        <mat-list-option value="opt3">Option 3</mat-list-option>
+        @if (renderExtraOption) {
+          <mat-list-option value="opt4">Option 4</mat-list-option>
+        }
+      </mat-selection-list>
+    }
   `,
 })
 class SelectionListWithFormControl {
@@ -1889,7 +1897,9 @@ class SelectionListWithPreselectedOptionAndModel {
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <mat-selection-list [formControl]="formControl">
-      <mat-list-option *ngFor="let opt of opts" [value]="opt">{{opt}}</mat-list-option>
+      @for (opt of opts; track opt) {
+        <mat-list-option [value]="opt">{{opt}}</mat-list-option>
+      }
     </mat-selection-list>
   `,
 })
@@ -1901,9 +1911,9 @@ class SelectionListWithPreselectedFormControlOnPush {
 @Component({
   template: `
     <mat-selection-list [(ngModel)]="selectedOptions" [compareWith]="compareWith">
-      <mat-list-option *ngFor="let option of options" [value]="option">
-        {{option.label}}
-      </mat-list-option>
+      @for (option of options; track option) {
+        <mat-list-option [value]="option">{{option.label}}</mat-list-option>
+      }
     </mat-selection-list>`,
 })
 class SelectionListWithCustomComparator {
@@ -1946,13 +1956,13 @@ class SelectionListWithIcon {
 }
 
 @Component({
-  // Note the blank `ngSwitch` which we need in order to hit the bug that we're testing.
+  // Note the blank `@if` which we need in order to hit the bug that we're testing.
   template: `
     <mat-selection-list>
-      <ng-container [ngSwitch]="true">
+      @if (true) {
         <mat-list-option [value]="1">One</mat-list-option>
         <mat-list-option [value]="2">Two</mat-list-option>
-      </ng-container>
+      }
     </mat-selection-list>`,
 })
 class SelectionListWithIndirectChildOptions {
diff --git a/src/material/menu/menu.spec.ts b/src/material/menu/menu.spec.ts
index 8af757362780..5722baf4819b 100644
--- a/src/material/menu/menu.spec.ts
+++ b/src/material/menu/menu.spec.ts
@@ -2780,7 +2780,9 @@ const SIMPLE_MENU_TEMPLATE = `
     <button mat-menu-item>
       <span>Item with text inside span</span>
     </button>
-    <button *ngFor="let item of extraItems" mat-menu-item> {{item}} </button>
+    @for (item of extraItems; track item) {
+      <button mat-menu-item> {{item}} </button>
+    }
   </mat-menu>
 `;
 
@@ -2889,11 +2891,12 @@ class CustomMenu {
         [matMenuTriggerFor]="levelOne"
         #levelOneTrigger="matMenuTrigger">One</button>
       <button mat-menu-item>Two</button>
-      <button mat-menu-item
-        *ngIf="showLazy"
-        id="lazy-trigger"
-        [matMenuTriggerFor]="lazy"
-        #lazyTrigger="matMenuTrigger">Three</button>
+      @if (showLazy) {
+        <button mat-menu-item
+          id="lazy-trigger"
+          [matMenuTriggerFor]="lazy"
+          #lazyTrigger="matMenuTrigger">Three</button>
+      }
     </mat-menu>
 
     <mat-menu #levelOne="matMenu" (closed)="levelOneCloseCallback($event)">
@@ -2962,11 +2965,12 @@ class NestedMenuCustomElevation {
   template: `
     <button [matMenuTriggerFor]="root" #rootTriggerEl>Toggle menu</button>
     <mat-menu #root="matMenu">
-      <button
-        mat-menu-item
-        class="level-one-trigger"
-        *ngFor="let item of items"
-        [matMenuTriggerFor]="levelOne">{{item}}</button>
+      @for (item of items; track item) {
+        <button
+          mat-menu-item
+          class="level-one-trigger"
+          [matMenuTriggerFor]="levelOne">{{item}}</button>
+      }
     </mat-menu>
 
     <mat-menu #levelOne="matMenu">
@@ -3083,10 +3087,9 @@ class MenuWithCheckboxItems {
   template: `
     <button [matMenuTriggerFor]="menu">Toggle menu</button>
     <mat-menu #menu="matMenu">
-      <button
-        *ngFor="let item of items"
-        [disabled]="item.disabled"
-        mat-menu-item>{{item.label}}</button>
+      @for (item of items; track item) {
+        <button [disabled]="item.disabled"mat-menu-item>{{item.label}}</button>
+      }
     </mat-menu>
   `,
 })
@@ -3105,10 +3108,9 @@ class SimpleMenuWithRepeater {
     <button [matMenuTriggerFor]="menu">Toggle menu</button>
     <mat-menu #menu="matMenu">
       <ng-template matMenuContent>
-        <button
-          *ngFor="let item of items"
-          [disabled]="item.disabled"
-          mat-menu-item>{{item.label}}</button>
+        @for (item of items; track item) {
+          <button [disabled]="item.disabled" mat-menu-item>{{item.label}}</button>
+        }
       </ng-template>
     </mat-menu>
   `,
@@ -3173,7 +3175,9 @@ class StaticAriaDescribedbyMenu {}
   template: `
     <button [matMenuTriggerFor]="menu" #triggerEl>Toggle menu</button>
     <mat-menu #menu="matMenu">
-      <button *ngFor="let item of items" mat-menu-item>{{item}}</button>
+      @for (item of items; track item) {
+        <button mat-menu-item>{{item}}</button>
+      }
     </mat-menu>
   `,
 })
diff --git a/src/material/progress-spinner/progress-spinner.spec.ts b/src/material/progress-spinner/progress-spinner.spec.ts
index c17934f8c29b..6b93ca5d7f5f 100644
--- a/src/material/progress-spinner/progress-spinner.spec.ts
+++ b/src/material/progress-spinner/progress-spinner.spec.ts
@@ -462,9 +462,11 @@ class IndeterminateSpinnerInShadowDom {
 
 @Component({
   template: `
-    <div *ngIf="true">
-      <mat-progress-spinner mode="indeterminate" [diameter]="diameter"></mat-progress-spinner>
-    </div>
+    @if (true) {
+      <div>
+        <mat-progress-spinner mode="indeterminate" [diameter]="diameter"></mat-progress-spinner>
+      </div>
+    }
   `,
   encapsulation: ViewEncapsulation.ShadowDom,
 })
diff --git a/src/material/radio/radio.spec.ts b/src/material/radio/radio.spec.ts
index 1e32fc0f1cad..31c5ebed27b1 100644
--- a/src/material/radio/radio.spec.ts
+++ b/src/material/radio/radio.spec.ts
@@ -1007,10 +1007,12 @@ describe('MatRadioDefaultOverrides', () => {
                   [required]="isGroupRequired"
                   [value]="groupValue"
                   name="test-name">
-    <mat-radio-button value="fire" [disableRipple]="disableRipple" [disabled]="isFirstDisabled"
-                     [color]="color" *ngIf="isFirstShown">
-      Charmander
-    </mat-radio-button>
+    @if (isFirstShown) {
+      <mat-radio-button value="fire" [disableRipple]="disableRipple" [disabled]="isFirstDisabled"
+                      [color]="color">
+        Charmander
+      </mat-radio-button>
+    }
     <mat-radio-button value="water" [disableRipple]="disableRipple" [color]="color">
       Squirtle
     </mat-radio-button>
@@ -1073,9 +1075,9 @@ class StandaloneRadioButtons {
 @Component({
   template: `
   <mat-radio-group [name]="groupName" [(ngModel)]="modelValue" (change)="lastEvent = $event">
-    <mat-radio-button *ngFor="let option of options" [value]="option.value">
-      {{option.label}}
-    </mat-radio-button>
+    @for (option of options; track option) {
+      <mat-radio-button [value]="option.value">{{option.label}}</mat-radio-button>
+    }
   </mat-radio-group>
   `,
 })
@@ -1125,9 +1127,11 @@ class FocusableRadioButton {
 @Component({
   template: `
   <mat-radio-group name="group" [(ngModel)]="modelValue">
-    <transcluding-wrapper *ngFor="let option of options">
-      <mat-radio-button [value]="option.value">{{option.label}}</mat-radio-button>
-    </transcluding-wrapper>
+    @for (option of options; track option) {
+      <transcluding-wrapper>
+        <mat-radio-button [value]="option.value">{{option.label}}</mat-radio-button>
+      </transcluding-wrapper>
+    }
   </mat-radio-group>
   `,
 })
@@ -1176,15 +1180,16 @@ class RadioButtonWithPredefinedAriaAttributes {}
   // Note that this is somewhat of a contrived template, but it is required to
   // reproduce the issue. It was taken for a specific user report at #25831.
   template: `
-    <ng-container *ngIf="true">
+    @if (true) {
       <mat-radio-group [formControl]="controls.predecessor">
         <mat-radio-button value="predecessor"></mat-radio-button>
       </mat-radio-group>
-    </ng-container>
-
+    }
     <mat-radio-group [formControl]="controls.target" #preselectedGroup>
       <mat-radio-button value="a"></mat-radio-button>
-      <mat-radio-button *ngIf="true" value="b" #preselectedRadio></mat-radio-button>
+        @if (true) {
+          <mat-radio-button value="b" #preselectedRadio></mat-radio-button>
+        }
     </mat-radio-group>
   `,
 })
diff --git a/src/material/radio/testing/radio-harness.spec.ts b/src/material/radio/testing/radio-harness.spec.ts
index fc933aa27787..ad19f356e1e2 100644
--- a/src/material/radio/testing/radio-harness.spec.ts
+++ b/src/material/radio/testing/radio-harness.spec.ts
@@ -185,18 +185,16 @@ describe('radio harness', () => {
     });
 
     it('should get label text', async () => {
-      const [firstRadio, secondRadio, thirdRadio] = await loader.getAllHarnesses(
-        MatRadioButtonHarness,
-      );
+      const [firstRadio, secondRadio, thirdRadio] =
+        await loader.getAllHarnesses(MatRadioButtonHarness);
       expect(await firstRadio.getLabelText()).toBe('Option #1');
       expect(await secondRadio.getLabelText()).toBe('Option #2');
       expect(await thirdRadio.getLabelText()).toBe('Option #3');
     });
 
     it('should get value', async () => {
-      const [firstRadio, secondRadio, thirdRadio] = await loader.getAllHarnesses(
-        MatRadioButtonHarness,
-      );
+      const [firstRadio, secondRadio, thirdRadio] =
+        await loader.getAllHarnesses(MatRadioButtonHarness);
       expect(await firstRadio.getValue()).toBe('opt1');
       expect(await secondRadio.getValue()).toBe('opt2');
       expect(await thirdRadio.getValue()).toBe('opt3');
@@ -264,23 +262,25 @@ describe('radio harness', () => {
 
 @Component({
   template: `
-    <mat-radio-button *ngFor="let value of values, let i = index"
-                      [name]="value === 'opt3' ? 'group2' : 'group1'"
-                      [disabled]="disableAll"
-                      [checked]="value === 'opt2'"
-                      [id]="value"
-                      [required]="value === 'opt2'"
-                      [value]="value">
-      Option #{{i + 1}}
-    </mat-radio-button>
+    @for (value of values; track value) {
+      <mat-radio-button
+        [name]="value === 'opt3' ? 'group2' : 'group1'"
+        [disabled]="disableAll"
+        [checked]="value === 'opt2'"
+        [id]="value"
+        [required]="value === 'opt2'"
+        [value]="value">
+        Option #{{$index + 1}}
+      </mat-radio-button>
+    }
 
     <mat-radio-group id="my-group-1" name="my-group-1-name">
-      <mat-radio-button *ngFor="let value of values"
-                        [checked]="value === 'opt2'"
-                        [value]="value"
-                        [id]="value + '-group-one'">
-        {{value}}
-      </mat-radio-button>
+      @for (value of values; track value) {
+        <mat-radio-button
+          [checked]="value === 'opt2'"
+          [value]="value"
+          [id]="value + '-group-one'">{{value}}</mat-radio-button>
+      }
     </mat-radio-group>
 
 
diff --git a/src/material/select/select.md b/src/material/select/select.md
index a26aab612e28..6169c15faec9 100644
--- a/src/material/select/select.md
+++ b/src/material/select/select.md
@@ -176,15 +176,18 @@ items.
 
 This error is thrown if you attempt to bind the `multiple` property on `<mat-select>` to a dynamic
 value. (e.g. `[multiple]="isMultiple"` where the value of `isMultiple` changes over the course of
-the component's lifetime). If you need to change this dynamically, use `ngIf` or `ngSwitch` instead:
+the component's lifetime). If you need to change this dynamically, use `@if` or `@switch` instead:
 
 ```html
-<mat-select *ngIf="isMultiple" multiple>
-  ...
-</mat-select>
-<mat-select *ngIf="!isMultiple">
-  ...
-</mat-select>
+@if (isMultiple) {
+  <mat-select multiple>
+    ...
+  </mat-select>
+} @else {
+  <mat-select>
+    ...
+  </mat-select>
+}
 ```
 
 #### Error: Value must be an array in multiple-selection mode
diff --git a/src/material/select/select.spec.ts b/src/material/select/select.spec.ts
index 87fe1e9ae4d8..27f32fc633f8 100644
--- a/src/material/select/select.spec.ts
+++ b/src/material/select/select.spec.ts
@@ -4575,18 +4575,24 @@ describe('MDC-based MatSelect', () => {
   template: `
     <div [style.height.px]="heightAbove"></div>
     <mat-form-field>
-      <mat-label *ngIf="hasLabel">Select a food</mat-label>
+      @if (hasLabel) {
+        <mat-label>Select a food</mat-label>
+      }
       <mat-select placeholder="Food" [formControl]="control" [required]="isRequired"
         [tabIndex]="tabIndexOverride" [aria-describedby]="ariaDescribedBy"
         [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"
         [panelClass]="panelClass" [disableRipple]="disableRipple"
         [typeaheadDebounceInterval]="typeaheadDebounceInterval"
         [panelWidth]="panelWidth">
-        <mat-option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
-          {{ capitalize ? food.viewValue.toUpperCase() : food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value" [disabled]="food.disabled">
+            {{ capitalize ? food.viewValue.toUpperCase() : food.viewValue }}
+          </mat-option>
+        }
       </mat-select>
-      <mat-hint *ngIf="hint">{{ hint }}</mat-hint>
+      @if (hint) {
+        <mat-hint>{{ hint }}</mat-hint>
+      }
     </mat-form-field>
     <div [style.height.px]="heightBelow"></div>
   `,
@@ -4627,9 +4633,9 @@ class BasicSelect {
   template: `
     <mat-form-field>
       <mat-select placeholder="Food" ngModel [disabled]="isDisabled">
-        <mat-option *ngFor="let food of foods"
-                    [value]="food.value">{{ food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -4668,15 +4674,17 @@ class ManySelects {}
 @Component({
   selector: 'ng-if-select',
   template: `
-    <div *ngIf="isShowing">
-      <mat-form-field>
-        <mat-select placeholder="Food I want to eat right now" [formControl]="control">
-          <mat-option *ngFor="let food of foods" [value]="food.value">
-            {{ food.viewValue }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-    </div>
+    @if (isShowing) {
+      <div>
+        <mat-form-field>
+          <mat-select placeholder="Food I want to eat right now" [formControl]="control">
+            @for (food of foods; track food) {
+              <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+      </div>
+    }
   `,
 })
 class NgIfSelect {
@@ -4696,7 +4704,9 @@ class NgIfSelect {
   template: `
     <mat-form-field>
       <mat-select (selectionChange)="changeListener($event)">
-        <mat-option *ngFor="let food of foods" [value]="food">{{ food }}</mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food">{{ food }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -4721,9 +4731,9 @@ class SelectWithChangeEvent {
   template: `
     <mat-form-field>
       <mat-select placeholder="Food I want to eat right now" [formControl]="control">
-        <mat-option *ngFor="let food of foods" [value]="food.value">
-          {{ food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -4808,9 +4818,9 @@ class ThrowsErrorOnInit implements OnInit {
   template: `
     <mat-form-field>
       <mat-select placeholder="Food" [formControl]="control">
-        <mat-option *ngFor="let food of foods" [value]="food.value">
-          {{ food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -4830,9 +4840,9 @@ class BasicSelectOnPush {
   template: `
     <mat-form-field>
       <mat-select placeholder="Food" [formControl]="control">
-        <mat-option *ngFor="let food of foods" [value]="food.value">
-          {{ food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -4853,9 +4863,9 @@ class BasicSelectOnPushPreselected {
     <mat-form-field [floatLabel]="floatLabel">
       <mat-label>Select a food</mat-label>
       <mat-select [placeholder]="placeholder" [formControl]="control">
-        <mat-option *ngFor="let food of foods" [value]="food.value">
-          {{ food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
     `,
@@ -4879,9 +4889,9 @@ class FloatLabelSelect {
     <mat-form-field>
       <mat-select multiple placeholder="Food" [formControl]="control"
         [sortComparator]="sortComparator">
-        <mat-option *ngFor="let food of foods"
-                    [value]="food.value">{{ food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -4916,7 +4926,9 @@ class SelectWithPlainTabindex {}
     <mat-form-field>
       <mat-select #select="matSelect"></mat-select>
     </mat-form-field>
-    <div *ngIf="select.selected"></div>
+    @if (select.selected) {
+      <div></div>
+    }
   `,
 })
 class SelectEarlyAccessSibling {}
@@ -4969,9 +4981,9 @@ class BasicSelectWithTheming {
     <mat-form-field>
       <mat-label>Select a food</mat-label>
       <mat-select [formControl]="control">
-        <mat-option *ngFor="let food of foods" [value]="food.value">
-          {{ food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+        }
         <mat-option>None</mat-option>
       </mat-select>
     </mat-form-field>
@@ -4995,9 +5007,9 @@ class ResetValuesSelect {
   template: `
     <mat-form-field>
       <mat-select [formControl]="control">
-        <mat-option *ngFor="let food of foods"
-                    [value]="food.value">{{ food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -5016,12 +5028,13 @@ class FalsyValueSelect {
   template: `
     <mat-form-field>
       <mat-select placeholder="Pokemon" [formControl]="control">
-        <mat-optgroup *ngFor="let group of pokemonTypes" [label]="group.name"
-          [disabled]="group.disabled">
-          <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
-            {{ pokemon.viewValue }}
-          </mat-option>
-        </mat-optgroup>
+        @for (group of pokemonTypes; track group) {
+          <mat-optgroup [label]="group.name" [disabled]="group.disabled">
+            @for (pokemon of group.pokemon; track pokemon) {
+              <mat-option [value]="pokemon.value">{{ pokemon.viewValue }}</mat-option>
+            }
+          </mat-optgroup>
+        }
         <mat-option value="mime-11">Mr. Mime</mat-option>
       </mat-select>
     </mat-form-field>
@@ -5073,11 +5086,13 @@ class SelectWithGroups {
   template: `
     <mat-form-field>
       <mat-select placeholder="Pokemon" [formControl]="control">
-        <mat-optgroup *ngFor="let group of pokemonTypes" [label]="group.name">
-          <ng-container *ngFor="let pokemon of group.pokemon">
-            <mat-option [value]="pokemon.value">{{ pokemon.viewValue }}</mat-option>
-          </ng-container>
-        </mat-optgroup>
+        @for (group of pokemonTypes; track group) {
+          <mat-optgroup [label]="group.name">
+            @for (pokemon of group.pokemon; track pokemon) {
+              <mat-option [value]="pokemon.value">{{ pokemon.viewValue }}</mat-option>
+            }
+          </mat-optgroup>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -5111,9 +5126,9 @@ class InvalidSelectInForm {
       <mat-form-field>
         <mat-label>Food</mat-label>
         <mat-select formControlName="food">
-          <mat-option *ngFor="let option of options" [value]="option.value">
-            {{option.viewValue}}
-          </mat-option>
+          @for (option of options; track option) {
+            <mat-option [value]="option.value">{{option.viewValue}}</mat-option>
+          }
         </mat-select>
 
         <mat-error>This field is required</mat-error>
@@ -5138,9 +5153,9 @@ class SelectInsideFormGroup {
   template: `
     <mat-form-field>
       <mat-select placeholder="Food" [(value)]="selectedFood">
-        <mat-option *ngFor="let food of foods" [value]="food.value">
-          {{ food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -5160,9 +5175,9 @@ class BasicSelectWithoutForms {
   template: `
     <mat-form-field>
       <mat-select placeholder="Food" [(value)]="selectedFood">
-        <mat-option *ngFor="let food of foods" [value]="food.value">
-          {{ food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -5181,9 +5196,9 @@ class BasicSelectWithoutFormsPreselected {
   template: `
     <mat-form-field>
       <mat-select placeholder="Food" [(value)]="selectedFoods" multiple>
-        <mat-option *ngFor="let food of foods" [value]="food.value">
-          {{ food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -5207,9 +5222,9 @@ class BasicSelectWithoutFormsMultiple {
         <mat-select-trigger>
           {{ select.selected?.viewValue.split('').reverse().join('') }}
         </mat-select-trigger>
-        <mat-option *ngFor="let food of foods" [value]="food.value">
-          {{ food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -5228,7 +5243,9 @@ class SelectWithCustomTrigger {
     <mat-form-field>
       <mat-select [ngModel]="selectedFood" (ngModelChange)="setFoodByCopy($event)"
                  [compareWith]="comparator">
-        <mat-option *ngFor="let food of foods" [value]="food">{{ food.viewValue }}</mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food">{{ food.viewValue }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -5273,9 +5290,9 @@ class NgModelCompareWithSelect {
 @Component({
   template: `
     <mat-select placeholder="Food" [formControl]="control" [errorStateMatcher]="errorStateMatcher">
-      <mat-option *ngFor="let food of foods" [value]="food.value">
-        {{ food.viewValue }}
-      </mat-option>
+      @for (food of foods; track food) {
+        <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+      }
     </mat-select>
   `,
 })
@@ -5293,9 +5310,9 @@ class CustomErrorBehaviorSelect {
   template: `
     <mat-form-field>
       <mat-select placeholder="Food" [(ngModel)]="selectedFoods">
-        <mat-option *ngFor="let food of foods"
-                    [value]="food.value">{{ food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -5318,9 +5335,9 @@ class SingleSelectWithPreselectedArrayValues {
   template: `
     <mat-form-field>
       <mat-select placeholder="Food" [formControl]="control" disableOptionCentering>
-        <mat-option *ngFor="let food of foods" [value]="food.value">
-          {{ food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -5361,9 +5378,11 @@ class SelectWithFormFieldLabel {
   template: `
     <mat-form-field appearance="fill">
       <mat-label>Select something</mat-label>
-      <mat-select *ngIf="showSelect">
-        <mat-option value="1">One</mat-option>
-      </mat-select>
+      @if (showSelect) {
+        <mat-select>
+          <mat-option value="1">One</mat-option>
+        </mat-select>
+      }
     </mat-form-field>
   `,
 })
@@ -5375,7 +5394,9 @@ class SelectWithNgIfAndLabel {
   template: `
     <mat-form-field>
       <mat-select multiple [ngModel]="value">
-        <mat-option *ngFor="let item of items" [value]="item">{{item}}</mat-option>
+        @for (item of items; track item) {
+          <mat-option [value]="item">{{item}}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
@@ -5416,13 +5437,13 @@ class SelectWithResetOptionAndFormControl {
   selector: 'select-with-placeholder-in-ngcontainer-with-ngIf',
   template: `
     <mat-form-field>
-      <ng-container *ngIf="true">
+      @if (true) {
         <mat-select placeholder="Product Area">
           <mat-option value="a">A</mat-option>
           <mat-option value="b">B</mat-option>
           <mat-option value="c">C</mat-option>
         </mat-select>
-      </ng-container>
+      }
     </mat-form-field>
   `,
 })
@@ -5458,17 +5479,23 @@ class SelectInsideDynamicFormGroup {
   template: `
     <div [style.height.px]="heightAbove"></div>
     <mat-form-field>
-      <mat-label *ngIf="hasLabel">Select a food</mat-label>
+      @if (hasLabel) {
+        <mat-label>Select a food</mat-label>
+      }
       <mat-select placeholder="Food" [formControl]="control" [required]="isRequired"
         [tabIndex]="tabIndexOverride" [aria-describedby]="ariaDescribedBy"
         [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"
         [panelClass]="panelClass" [disableRipple]="disableRipple"
         [typeaheadDebounceInterval]="typeaheadDebounceInterval">
-        <mat-option *ngFor="let food of foods" [value]="food.value" [disabled]="food.disabled">
-          {{ food.viewValue }}
-        </mat-option>
+        @for (food of foods; track food) {
+          <mat-option [value]="food.value" [disabled]="food.disabled">
+            {{ food.viewValue }}
+          </mat-option>
+        }
       </mat-select>
-      <mat-hint *ngIf="hint">{{ hint }}</mat-hint>
+      @if (hint) {
+        <mat-hint>{{ hint }}</mat-hint>
+      }
     </mat-form-field>
     <div [style.height.px]="heightBelow"></div>
   `,
@@ -5512,9 +5539,9 @@ class BasicSelectWithFirstAndLastOptionDisabled {
         <mat-form-field>
           <mat-label>Select a food</mat-label>
           <mat-select placeholder="Food" ngModel>
-            <mat-option *ngFor="let food of foods"
-                        [value]="food.value">{{ food.viewValue }}
-            </mat-option>
+            @for (food of foods; track food) {
+              <mat-option [value]="food.value">{{ food.viewValue }}</mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
diff --git a/src/material/select/testing/select-harness.spec.ts b/src/material/select/testing/select-harness.spec.ts
index 454da02187e4..c2bb067a24d4 100644
--- a/src/material/select/testing/select-harness.spec.ts
+++ b/src/material/select/testing/select-harness.spec.ts
@@ -270,26 +270,34 @@ describe('MatSelectHarness', () => {
   template: `
     <mat-form-field>
       <mat-select [disabled]="isDisabled" [required]="isRequired" id="single-selection">
-        <mat-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</mat-option>
+        @for (state of states; track state) {
+          <mat-option [value]="state.code">{{ state.name }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
     <mat-form-field>
       <mat-select multiple id="multiple-selection">
-        <mat-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</mat-option>
+        @for (state of states; track state) {
+  <mat-option [value]="state.code">{{ state.name }}</mat-option>
+}
       </mat-select>
     </mat-form-field>
     <mat-form-field>
       <mat-select id="grouped">
-        <mat-optgroup *ngFor="let group of stateGroups" [label]="group.name">
-          <mat-option
-            *ngFor="let state of group.states"
-            [value]="state.code">{{ state.name }}</mat-option>
-        </mat-optgroup>
+        @for (group of stateGroups; track group) {
+          <mat-optgroup [label]="group.name">
+            @for (state of group.states; track state) {
+              <mat-option [value]="state.code">{{ state.name }}</mat-option>
+            }
+          </mat-optgroup>
+        }
       </mat-select>
     </mat-form-field>
     <mat-form-field>
       <mat-select [formControl]="formControl" id="with-form-control">
-        <mat-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</mat-option>
+        @for (state of states; track state) {
+          <mat-option [value]="state.code">{{ state.name }}</mat-option>
+        }
       </mat-select>
     </mat-form-field>
   `,
diff --git a/src/material/sidenav/drawer.spec.ts b/src/material/sidenav/drawer.spec.ts
index 3758567e0f39..480d8ac16531 100644
--- a/src/material/sidenav/drawer.spec.ts
+++ b/src/material/sidenav/drawer.spec.ts
@@ -1284,7 +1284,9 @@ class DrawerWithoutFocusableElements {}
 @Component({
   template: `
     <mat-drawer-container>
-      <mat-drawer *ngIf="showDrawer" #drawer mode="side">Drawer</mat-drawer>
+      @if (showDrawer) {
+        <mat-drawer #drawer mode="side">Drawer</mat-drawer>
+      }
     </mat-drawer-container>
   `,
 })
@@ -1296,7 +1298,9 @@ class DrawerDelayed {
 @Component({
   template: `
     <mat-drawer-container [dir]="direction">
-      <mat-drawer *ngIf="renderDrawer" [mode]="mode" style="width:100px"></mat-drawer>
+      @if (renderDrawer) {
+        <mat-drawer [mode]="mode" style="width:100px"></mat-drawer>
+      }
     </mat-drawer-container>`,
 })
 class DrawerContainerStateChangesTestApp {
@@ -1336,13 +1340,13 @@ class DrawerContainerWithContent {
 }
 
 @Component({
-  // Note that we need the `ng-container` with the `ngSwitch` so that
-  // there's a directive between the container and the drawer.
+  // Note that we need the `@if` so that there's an embedded
+  // view between the container and the drawer.
   template: `
     <mat-drawer-container #container>
-      <ng-container [ngSwitch]="true">
+      @if (true) {
         <mat-drawer #drawer>Drawer</mat-drawer>
-      </ng-container>
+      }
     </mat-drawer-container>`,
 })
 class IndirectDescendantDrawer {
diff --git a/src/material/sidenav/sidenav.spec.ts b/src/material/sidenav/sidenav.spec.ts
index d1d5604178c7..ba0b49b5c34e 100644
--- a/src/material/sidenav/sidenav.spec.ts
+++ b/src/material/sidenav/sidenav.spec.ts
@@ -105,13 +105,13 @@ class SidenavWithFixedPosition {
 }
 
 @Component({
-  // Note that we need the `ng-container` with the `ngSwitch` so that
-  // there's a directive between the container and the sidenav.
+  // Note that we need the `@if` so that there's an embedded
+  // view between the container and the sidenav.
   template: `
     <mat-sidenav-container #container>
-      <ng-container [ngSwitch]="true">
+      @if (true) {
         <mat-sidenav #sidenav>Sidenav.</mat-sidenav>
-      </ng-container>
+      }
       <mat-sidenav-content>Some content.</mat-sidenav-content>
     </mat-sidenav-container>`,
 })
diff --git a/src/material/snack-bar/snack-bar.spec.ts b/src/material/snack-bar/snack-bar.spec.ts
index b04988967c32..53fe0e94b9a6 100644
--- a/src/material/snack-bar/snack-bar.spec.ts
+++ b/src/material/snack-bar/snack-bar.spec.ts
@@ -1091,7 +1091,7 @@ class DirectiveWithViewContainer {
 
 @Component({
   selector: 'arbitrary-component',
-  template: `<dir-with-view-container *ngIf="childComponentExists"></dir-with-view-container>`,
+  template: `@if (childComponentExists) {<dir-with-view-container></dir-with-view-container>}`,
 })
 class ComponentWithChildViewContainer {
   @ViewChild(DirectiveWithViewContainer) childWithViewContainer: DirectiveWithViewContainer;
diff --git a/src/material/sort/testing/sort-harness.spec.ts b/src/material/sort/testing/sort-harness.spec.ts
index ee34924a2e26..017765e65758 100644
--- a/src/material/sort/testing/sort-harness.spec.ts
+++ b/src/material/sort/testing/sort-harness.spec.ts
@@ -127,13 +127,15 @@ describe('MatSortHarness', () => {
         <th mat-sort-header="protein">Protein</th>
       </tr>
 
-      <tr *ngFor="let dessert of sortedData">
-        <td>{{dessert.name}}</td>
-        <td>{{dessert.calories}}</td>
-        <td>{{dessert.fat}}</td>
-        <td>{{dessert.carbs}}</td>
-        <td>{{dessert.protein}}</td>
-      </tr>
+      @for (dessert of sortedData; track dessert) {
+        <tr>
+          <td>{{dessert.name}}</td>
+          <td>{{dessert.calories}}</td>
+          <td>{{dessert.fat}}</td>
+          <td>{{dessert.carbs}}</td>
+          <td>{{dessert.protein}}</td>
+        </tr>
+      }
     </table>
   `,
 })
diff --git a/src/material/stepper/stepper.spec.ts b/src/material/stepper/stepper.spec.ts
index ac8fcefb6a69..5e33dc892298 100644
--- a/src/material/stepper/stepper.spec.ts
+++ b/src/material/stepper/stepper.spec.ts
@@ -1894,14 +1894,16 @@ class SimpleMatHorizontalStepperApp {
           <button mat-button matStepperNext>Next</button>
         </div>
       </mat-step>
-      <mat-step *ngIf="showStepTwo" [color]="secondStepTheme">
-        <ng-template matStepLabel>Step 2</ng-template>
-        Content 2
-        <div>
-          <button mat-button matStepperPrevious>Back</button>
-          <button mat-button matStepperNext>Next</button>
-        </div>
-      </mat-step>
+      @if (showStepTwo) {
+        <mat-step [color]="secondStepTheme">
+          <ng-template matStepLabel>Step 2</ng-template>
+          Content 2
+          <div>
+            <button mat-button matStepperPrevious>Back</button>
+            <button mat-button matStepperNext>Next</button>
+          </div>
+        </mat-step>
+      }
       <mat-step [label]="inputLabel">
         Content 3
         <div>
@@ -1988,10 +1990,9 @@ class SimplePreselectedMatHorizontalStepperApp {
 @Component({
   template: `
     <mat-stepper linear>
-      <mat-step
-        *ngFor="let step of steps"
-        [label]="step.label"
-        [completed]="step.completed"></mat-step>
+      @for (step of steps; track step) {
+        <mat-step [label]="step.label" [completed]="step.completed"></mat-step>
+      }
     </mat-stepper>
   `,
 })
@@ -2006,11 +2007,12 @@ class SimpleStepperWithoutStepControl {
 @Component({
   template: `
     <mat-stepper linear>
-      <mat-step
-        *ngFor="let step of steps"
-        [label]="step.label"
-        [stepControl]="step.control"
-        [completed]="step.completed"></mat-step>
+      @for (step of steps; track step) {
+        <mat-step
+          [label]="step.label"
+          [stepControl]="step.control"
+          [completed]="step.completed"></mat-step>
+      }
     </mat-stepper>
   `,
 })
@@ -2058,13 +2060,13 @@ class IconOverridesStepper {
 @Component({
   template: `
     <mat-stepper>
-      <ng-container [ngSwitch]="true">
+      @if (true) {
         <ng-template matStepperIcon="edit">Custom edit</ng-template>
         <ng-template matStepperIcon="done">Custom done</ng-template>
         <ng-template matStepperIcon="number" let-index="index">
           {{getRomanNumeral(index + 1)}}
         </ng-template>
-      </ng-container>
+      }
 
       <mat-step>Content 1</mat-step>
       <mat-step>Content 2</mat-step>
@@ -2103,11 +2105,11 @@ class StepperWithAriaInputs {
 @Component({
   template: `
     <mat-stepper orientation="vertical">
-      <ng-container [ngSwitch]="true">
+      @if (true) {
         <mat-step label="Step 1">Content 1</mat-step>
         <mat-step label="Step 2">Content 2</mat-step>
         <mat-step label="Step 3">Content 3</mat-step>
-      </ng-container>
+      }
     </mat-stepper>
   `,
 })
@@ -2120,9 +2122,11 @@ class StepperWithIndirectDescendantSteps {}
         <ng-template matStepLabel>Step 1</ng-template>
       </mat-step>
 
-      <mat-step *ngIf="showStep2">
-        <ng-template matStepLabel>Step 2</ng-template>
-      </mat-step>
+      @if (showStep2) {
+        <mat-step>
+          <ng-template matStepLabel>Step 2</ng-template>
+        </mat-step>
+      }
     </mat-stepper>
   `,
 })
@@ -2187,7 +2191,9 @@ class StepperWithLazyContent {
   template: `
     <mat-stepper>
       <mat-step label="Step 1">Content 1</mat-step>
-      <mat-step label="Step 2" *ngIf="renderSecondStep">Content 2</mat-step>
+      @if (renderSecondStep) {
+        <mat-step label="Step 2">Content 2</mat-step>
+      }
       <mat-step label="Step 3">Content 3</mat-step>
     </mat-stepper>
   `,
diff --git a/src/material/tabs/tab-group.spec.ts b/src/material/tabs/tab-group.spec.ts
index 31b468ec456a..a392c10ded1f 100644
--- a/src/material/tabs/tab-group.spec.ts
+++ b/src/material/tabs/tab-group.spec.ts
@@ -1158,10 +1158,12 @@ class SimpleTabsTestApp {
         (focusChange)="handleFocus($event)"
         (selectedTabChange)="handleSelection($event)"
         [disablePagination]="disablePagination">
-      <mat-tab *ngFor="let tab of tabs">
-        <ng-template mat-tab-label>{{tab.label}}</ng-template>
-        {{tab.content}}
-      </mat-tab>
+      @for (tab of tabs; track tab) {
+        <mat-tab>
+          <ng-template mat-tab-label>{{tab.label}}</ng-template>
+          {{tab.content}}
+        </mat-tab>
+      }
     </mat-tab-group>
   `,
 })
@@ -1186,9 +1188,9 @@ class SimpleDynamicTabsTestApp {
 @Component({
   template: `
     <mat-tab-group class="tab-group" [(selectedIndex)]="selectedIndex">
-      <mat-tab *ngFor="let tab of tabs" label="{{tab.label}}">
-        {{tab.content}}
-      </mat-tab>
+      @for (tab of tabs; track tab) {
+        <mat-tab label="{{tab.label}}">{{tab.content}}</mat-tab>
+      }
     </mat-tab-group>
   `,
 })
@@ -1234,10 +1236,12 @@ class DisabledTabsTestApp {
 @Component({
   template: `
     <mat-tab-group class="tab-group">
-      <mat-tab *ngFor="let tab of tabs | async">
-        <ng-template mat-tab-label>{{ tab.label }}</ng-template>
-        {{ tab.content }}
-      </mat-tab>
+      @for (tab of tabs | async; track tab) {
+        <mat-tab>
+          <ng-template mat-tab-label>{{ tab.label }}</ng-template>
+          {{ tab.content }}
+        </mat-tab>
+      }
    </mat-tab-group>
   `,
 })
@@ -1327,7 +1331,9 @@ class TabGroupWithAriaInputs {
       <mat-tab label="Vegetables"> Broccoli, spinach </mat-tab>
     </mat-tab-group>
 
-    <div *ngIf="pizza.isActive">pizza is active</div>
+    @if (pizza.isActive) {
+      <div>pizza is active</div>
+    }
   `,
 })
 class TabGroupWithIsActiveBinding {}
@@ -1345,10 +1351,10 @@ class TabsWithCustomAnimationDuration {}
 @Component({
   template: `
     <mat-tab-group>
-      <ng-container [ngSwitch]="true">
+      @if (true) {
         <mat-tab label="One">Tab one content</mat-tab>
         <mat-tab label="Two">Tab two content</mat-tab>
-      </ng-container>
+      }
     </mat-tab-group>
   `,
 })
diff --git a/src/material/tabs/tab-header.spec.ts b/src/material/tabs/tab-header.spec.ts
index fda6f442ab51..920cb195f12b 100644
--- a/src/material/tabs/tab-header.spec.ts
+++ b/src/material/tabs/tab-header.spec.ts
@@ -723,12 +723,11 @@ interface Tab {
                (indexFocused)="focusedIndex = $event"
                (selectFocusedIndex)="selectedIndex = $event"
                [disablePagination]="disablePagination">
-      <div matTabLabelWrapper class="label-content" style="min-width: 30px; width: 30px"
-           *ngFor="let tab of tabs; let i = index"
+      @for (tab of tabs; track tab; let i = $index) {
+        <div matTabLabelWrapper class="label-content" style="min-width: 30px; width: 30px"
            [disabled]="!!tab.disabled"
-           (click)="selectedIndex = i">
-         {{tab.label}}
-      </div>
+           (click)="selectedIndex = i">{{tab.label}}</div>
+      }
     </mat-tab-header>
   </div>
   `,
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
index df4c41485d37..e1a749f65ad2 100644
--- a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
+++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
@@ -526,14 +526,13 @@ describe('MatTabNavBar with enabled animations', () => {
          [disableRipple]="disableRippleOnBar"
          [fitInkBarToContent]="fitInkBarToContent"
          [tabPanel]="tabPanel">
-      <a mat-tab-link
-         *ngFor="let tab of tabs; let index = index"
-         [active]="activeIndex === index"
-         [disabled]="disabled"
-         (click)="activeIndex = index"
-         [disableRipple]="disableRippleOnLink">
-        Tab link {{label}}
-      </a>
+      @for (tab of tabs; track tab; let index = $index) {
+        <a mat-tab-link
+          [active]="activeIndex === index"
+          [disabled]="disabled"
+          (click)="activeIndex = index"
+          [disableRipple]="disableRippleOnLink">Tab link {{label}}</a>
+      }
     </nav>
     <mat-tab-nav-panel #tabPanel id="tab-panel">Tab panel</mat-tab-nav-panel>
   `,
@@ -555,7 +554,9 @@ class SimpleTabNavBarTestApp {
 @Component({
   template: `
     <nav mat-tab-nav-bar [tabPanel]="tabPanel">
-      <a mat-tab-link *ngIf="!isDestroyed">Link</a>
+      @if (!isDestroyed) {
+        <a mat-tab-link>Link</a>
+      }
     </nav>
     <mat-tab-nav-panel #tabPanel>Tab panel</mat-tab-nav-panel>
   `,
@@ -567,7 +568,9 @@ class TabLinkWithNgIf {
 @Component({
   template: `
     <nav mat-tab-nav-bar [tabPanel]="tabPanel">
-      <a mat-tab-link *ngFor="let tab of tabs" [active]="false">Tab link {{label}}</a>
+      @for (tab of tabs; track tab) {
+        <a mat-tab-link [active]="false">Tab link {{label}}</a>
+      }
     </nav>
     <mat-tab-nav-panel #tabPanel>Tab panel</mat-tab-nav-panel>
   `,
@@ -579,7 +582,9 @@ class TabBarWithInactiveTabsOnInit {
 @Component({
   template: `
     <nav [animationDuration]="500" mat-tab-nav-bar [tabPanel]="tabPanel">
-    <a mat-tab-link *ngFor="let link of links">{{link}}</a>
+    @for (link of links; track link) {
+      <a mat-tab-link>{{link}}</a>
+    }
   </nav>
   <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>,
   `,
diff --git a/src/material/toolbar/toolbar.spec.ts b/src/material/toolbar/toolbar.spec.ts
index 524ff148a570..2989dd7fc838 100644
--- a/src/material/toolbar/toolbar.spec.ts
+++ b/src/material/toolbar/toolbar.spec.ts
@@ -128,7 +128,9 @@ class ToolbarMultipleRows {}
   template: `
     <mat-toolbar>
       First Row
-      <mat-toolbar-row *ngIf="showToolbarRow">Second Row</mat-toolbar-row>
+      @if (showToolbarRow) {
+        <mat-toolbar-row>Second Row</mat-toolbar-row>
+      }
     </mat-toolbar>
   `,
 })
@@ -140,10 +142,10 @@ class ToolbarMixedRowModes {
   // The ng-container is there so we have a node with a directive between the toolbar and the rows.
   template: `
     <mat-toolbar>
-      <ng-container [ngSwitch]="true">
+      @if (true) {
         <mat-toolbar-row>First Row</mat-toolbar-row>
         <mat-toolbar-row>Second Row</mat-toolbar-row>
-      </ng-container>
+      }
     </mat-toolbar>
   `,
 })
diff --git a/src/material/tooltip/tooltip.spec.ts b/src/material/tooltip/tooltip.spec.ts
index 12f86924974f..393e841614c9 100644
--- a/src/material/tooltip/tooltip.spec.ts
+++ b/src/material/tooltip/tooltip.spec.ts
@@ -1533,14 +1533,13 @@ describe('MDC-based MatTooltip', () => {
 @Component({
   selector: 'app',
   template: `
-    <button #button
-            *ngIf="showButton"
-            [matTooltip]="message"
-            [matTooltipPosition]="position"
-            [matTooltipClass]="{'custom-one': showTooltipClass, 'custom-two': showTooltipClass }"
-            [matTooltipTouchGestures]="touchGestures">
-      Button
-    </button>`,
+    @if (showButton) {
+      <button #button
+        [matTooltip]="message"
+        [matTooltipPosition]="position"
+        [matTooltipClass]="{'custom-one': showTooltipClass, 'custom-two': showTooltipClass }"
+        [matTooltipTouchGestures]="touchGestures">Button</button>
+    }`,
 })
 class BasicTooltipDemo {
   position: string = 'below';
@@ -1557,11 +1556,11 @@ class BasicTooltipDemo {
   template: `
     <div cdkScrollable style="padding: 100px; margin: 300px;
                                height: 200px; width: 200px; overflow: auto;">
-      <button *ngIf="showButton" style="margin-bottom: 600px"
+      @if (showButton) {
+        <button style="margin-bottom: 600px"
               [matTooltip]="message"
-              [matTooltipPosition]="position">
-        Button
-      </button>
+              [matTooltipPosition]="position">Button</button>
+      }
     </div>`,
 })
 class ScrollableTooltipDemo {
@@ -1599,10 +1598,10 @@ class OnPushTooltipDemo {
 @Component({
   selector: 'app',
   template: `
-    <button *ngFor="let tooltip of tooltips"
-            [matTooltip]="tooltip">
-      Button {{tooltip}}
-    </button>`,
+    @for (tooltip of tooltips; track tooltip) {
+      <button [matTooltip]="tooltip">Button {{tooltip}}</button>
+    }
+  `,
 })
 class DynamicTooltipsDemo {
   tooltips: string[] = [];
diff --git a/src/material/tree/tree.spec.ts b/src/material/tree/tree.spec.ts
index 76774f7584de..7091498106cc 100644
--- a/src/material/tree/tree.spec.ts
+++ b/src/material/tree/tree.spec.ts
@@ -937,9 +937,11 @@ class NestedMatTreeApp {
        <mat-nested-tree-node *matTreeNodeDef="let node; when: isSpecial"
                              matTreeNodeToggle>
                      >>> {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
-         <div *ngIf="treeControl.isExpanded(node)">
-            <ng-template matTreeNodeOutlet></ng-template>
-         </div>
+         @if (treeControl.isExpanded(node)) {
+            <div>
+              <ng-template matTreeNodeOutlet></ng-template>
+            </div>
+         }
       </mat-nested-tree-node>
     </mat-tree>
   `,
@@ -1012,9 +1014,11 @@ class MatTreeAppWithToggle {
       <mat-nested-tree-node *matTreeNodeDef="let node" class="customNodeClass"
                             matTreeNodeToggle [matTreeNodeToggleRecursive]="toggleRecursively">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
-        <div *ngIf="treeControl.isExpanded(node)">
-          <ng-template matTreeNodeOutlet></ng-template>
-        </div>
+        @if (treeControl.isExpanded(node)) {
+          <div>
+            <ng-template matTreeNodeOutlet></ng-template>
+          </div>
+        }
       </mat-nested-tree-node>
     </mat-tree>
   `,
diff --git a/src/youtube-player/youtube-player.spec.ts b/src/youtube-player/youtube-player.spec.ts
index ec3e45d9818c..777be4fb2e20 100644
--- a/src/youtube-player/youtube-player.spec.ts
+++ b/src/youtube-player/youtube-player.spec.ts
@@ -554,17 +554,19 @@ describe('YoutubePlayer', () => {
 @Component({
   selector: 'test-app',
   template: `
-    <youtube-player #player [videoId]="videoId" *ngIf="visible" [width]="width" [height]="height"
-      [startSeconds]="startSeconds" [endSeconds]="endSeconds" [suggestedQuality]="suggestedQuality"
-      [playerVars]="playerVars"
-      [disableCookies]="disableCookies"
-      (ready)="onReady($event)"
-      (stateChange)="onStateChange($event)"
-      (playbackQualityChange)="onPlaybackQualityChange($event)"
-      (playbackRateChange)="onPlaybackRateChange($event)"
-      (error)="onError($event)"
-      (apiChange)="onApiChange($event)">
-    </youtube-player>
+    @if (visible) {
+      <youtube-player #player [videoId]="videoId" [width]="width" [height]="height"
+        [startSeconds]="startSeconds" [endSeconds]="endSeconds" [suggestedQuality]="suggestedQuality"
+        [playerVars]="playerVars"
+        [disableCookies]="disableCookies"
+        (ready)="onReady($event)"
+        (stateChange)="onStateChange($event)"
+        (playbackQualityChange)="onPlaybackQualityChange($event)"
+        (playbackRateChange)="onPlaybackRateChange($event)"
+        (error)="onError($event)"
+        (apiChange)="onApiChange($event)">
+      </youtube-player>
+    }
   `,
 })
 class TestApp {