diff --git a/src/cdk-experimental/selection/selection-column.ts b/src/cdk-experimental/selection/selection-column.ts
index 7d97c7f35aa7..ff90c6e969d0 100644
--- a/src/cdk-experimental/selection/selection-column.ts
+++ b/src/cdk-experimental/selection/selection-column.ts
@@ -32,12 +32,14 @@ import {CdkSelection} from './selection';
   template: `
     <ng-container cdkColumnDef>
       <th cdkHeaderCell *cdkHeaderCellDef>
-        <input type="checkbox" *ngIf="selection.multiple"
-            cdkSelectAll
-            #allToggler="cdkSelectAll"
-            [checked]="allToggler.checked | async"
-            [indeterminate]="allToggler.indeterminate | async"
-            (click)="allToggler.toggle($event)">
+        @if (selection.multiple) {
+          <input type="checkbox"
+              cdkSelectAll
+              #allToggler="cdkSelectAll"
+              [checked]="allToggler.checked | async"
+              [indeterminate]="allToggler.indeterminate | async"
+              (click)="allToggler.toggle($event)">
+        }
       </th>
       <td cdkCell *cdkCellDef="let row; let i = $index">
         <input type="checkbox"
diff --git a/src/material-experimental/selection/selection-column.ts b/src/material-experimental/selection/selection-column.ts
index acbbea85de92..fb14d2ab814a 100644
--- a/src/material-experimental/selection/selection-column.ts
+++ b/src/material-experimental/selection/selection-column.ts
@@ -32,10 +32,12 @@ import {MatSelection} from './selection';
   template: `
     <ng-container matColumnDef>
       <th mat-header-cell *matHeaderCellDef class="mat-selection-column-header">
-        <mat-checkbox *ngIf="selection.multiple"
-            matSelectAll
-            #allToggler="matSelectAll"
-            [indeterminate]="allToggler.indeterminate | async"></mat-checkbox>
+        @if (selection.multiple) {
+          <mat-checkbox
+              matSelectAll
+              #allToggler="matSelectAll"
+              [indeterminate]="allToggler.indeterminate | async"></mat-checkbox>
+        }
       </th>
       <td mat-cell *matCellDef="let row; let i = $index" class="mat-selection-column-cell">
         <mat-checkbox
diff --git a/src/material/chips/BUILD.bazel b/src/material/chips/BUILD.bazel
index 9848a57d2243..3633d55b234a 100644
--- a/src/material/chips/BUILD.bazel
+++ b/src/material/chips/BUILD.bazel
@@ -27,7 +27,6 @@ ng_module(
         "//src/material/core",
         "//src/material/form-field",
         "@npm//@angular/animations",
-        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
     ],
diff --git a/src/material/chips/chip-option.html b/src/material/chips/chip-option.html
index 43f81bf23db3..2cc3e47065bf 100644
--- a/src/material/chips/chip-option.html
+++ b/src/material/chips/chip-option.html
@@ -9,19 +9,21 @@
     [attr.aria-label]="ariaLabel"
     [attr.aria-describedby]="_ariaDescriptionId"
     role="option">
-    <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic" *ngIf="_hasLeadingGraphic()">
-      <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
-      <span class="mdc-evolution-chip__checkmark">
-        <svg
-          class="mdc-evolution-chip__checkmark-svg"
-          viewBox="-2 -3 30 30"
-          focusable="false"
-          aria-hidden="true">
-          <path class="mdc-evolution-chip__checkmark-path"
-                fill="none" stroke="currentColor" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
-        </svg>
+    @if (_hasLeadingGraphic()) {
+      <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic">
+        <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
+        <span class="mdc-evolution-chip__checkmark">
+          <svg
+            class="mdc-evolution-chip__checkmark-svg"
+            viewBox="-2 -3 30 30"
+            focusable="false"
+            aria-hidden="true">
+            <path class="mdc-evolution-chip__checkmark-path"
+                  fill="none" stroke="currentColor" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+          </svg>
+        </span>
       </span>
-    </span>
+    }
     <span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label">
       <ng-content></ng-content>
       <span class="mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator"></span>
@@ -29,10 +31,10 @@
   </button>
 </span>
 
-<span
-  class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing"
-  *ngIf="_hasTrailingIcon()">
-  <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
-</span>
+@if (_hasTrailingIcon()) {
+  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing">
+    <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
+  </span>
+}
 
 <span class="cdk-visually-hidden" [id]="_ariaDescriptionId">{{ariaDescription}}</span>
diff --git a/src/material/chips/chip-row.html b/src/material/chips/chip-row.html
index 63157ab2919d..1479c3af7f37 100644
--- a/src/material/chips/chip-row.html
+++ b/src/material/chips/chip-row.html
@@ -1,6 +1,6 @@
-<ng-container *ngIf="!_isEditing">
+@if (!_isEditing) {
   <span class="mat-mdc-chip-focus-overlay"></span>
-</ng-container>
+}
 
 <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell"
     matChipAction
@@ -8,27 +8,33 @@
     [disabled]="disabled"
     [attr.aria-label]="ariaLabel"
     [attr.aria-describedby]="_ariaDescriptionId">
-  <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic" *ngIf="leadingIcon">
-    <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
-  </span>
-  <span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label" [ngSwitch]="_isEditing">
-    <ng-container *ngSwitchCase="false"><ng-content></ng-content></ng-container>
+  @if (leadingIcon) {
+    <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic">
+      <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
+    </span>
+  }
 
-    <ng-container *ngSwitchCase="true">
-      <ng-content *ngIf="contentEditInput; else defaultMatChipEditInput"
-                  select="[matChipEditInput]"></ng-content>
-      <ng-template #defaultMatChipEditInput><span matChipEditInput></span></ng-template>
-    </ng-container>
+  <span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label">
+    @if (_isEditing) {
+      @if (contentEditInput) {
+        <ng-content select="[matChipEditInput]"></ng-content>
+      } @else {
+        <span matChipEditInput></span>
+      }
+    } @else {
+      <ng-content></ng-content>
+    }
 
     <span class="mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator" aria-hidden="true"></span>
   </span>
 </span>
 
-<span
-  class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing"
-  role="gridcell"
-  *ngIf="_hasTrailingIcon()">
-  <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
-</span>
+@if (_hasTrailingIcon()) {
+  <span
+    class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing"
+    role="gridcell">
+    <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
+  </span>
+}
 
 <span class="cdk-visually-hidden" [id]="_ariaDescriptionId">{{ariaDescription}}</span>
diff --git a/src/material/chips/chip.html b/src/material/chips/chip.html
index 9a4bcfe41d0d..cc541c48505a 100644
--- a/src/material/chips/chip.html
+++ b/src/material/chips/chip.html
@@ -2,9 +2,11 @@
 
 <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary">
   <span matChipAction [isInteractive]="false">
-    <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic" *ngIf="leadingIcon">
-      <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
-    </span>
+    @if (leadingIcon) {
+      <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic">
+        <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
+      </span>
+    }
     <span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label">
       <ng-content></ng-content>
       <span class="mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator"></span>
@@ -12,8 +14,8 @@
   </span>
 </span>
 
-<span
-  class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing"
-  *ngIf="_hasTrailingIcon()">
-  <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
-</span>
+@if (_hasTrailingIcon()) {
+  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing">
+    <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
+  </span>
+}
diff --git a/src/material/chips/module.ts b/src/material/chips/module.ts
index 81926f58f27a..eed0a41d76ef 100644
--- a/src/material/chips/module.ts
+++ b/src/material/chips/module.ts
@@ -7,7 +7,6 @@
  */
 
 import {ENTER} from '@angular/cdk/keycodes';
-import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {ErrorStateMatcher, MatCommonModule, MatRippleModule} from '@angular/material/core';
 import {MatChip} from './chip';
@@ -37,7 +36,7 @@ const CHIP_DECLARATIONS = [
 ];
 
 @NgModule({
-  imports: [MatCommonModule, CommonModule, MatRippleModule],
+  imports: [MatCommonModule, MatRippleModule],
   exports: [MatCommonModule, CHIP_DECLARATIONS],
   declarations: [MatChipAction, CHIP_DECLARATIONS],
   providers: [
diff --git a/src/material/core/BUILD.bazel b/src/material/core/BUILD.bazel
index c7c979fa913d..77a688c256a8 100644
--- a/src/material/core/BUILD.bazel
+++ b/src/material/core/BUILD.bazel
@@ -33,7 +33,6 @@ ng_module(
         "//src/cdk/keycodes",
         "//src/cdk/platform",
         "@npm//@angular/animations",
-        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
diff --git a/src/material/core/option/index.ts b/src/material/core/option/index.ts
index 96da5f1c97fc..4a129c844a09 100644
--- a/src/material/core/option/index.ts
+++ b/src/material/core/option/index.ts
@@ -7,7 +7,6 @@
  */
 
 import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
 import {MatRippleModule} from '../ripple/index';
 import {MatPseudoCheckboxModule} from '../selection/index';
 import {MatCommonModule} from '../common-behaviors/common-module';
@@ -15,7 +14,7 @@ import {MatOption} from './option';
 import {MatOptgroup} from './optgroup';
 
 @NgModule({
-  imports: [MatRippleModule, CommonModule, MatCommonModule, MatPseudoCheckboxModule],
+  imports: [MatRippleModule, MatCommonModule, MatPseudoCheckboxModule],
   exports: [MatOption, MatOptgroup],
   declarations: [MatOption, MatOptgroup],
 })
diff --git a/src/material/core/option/option.html b/src/material/core/option/option.html
index 830bed348864..23f5d9f54944 100644
--- a/src/material/core/option/option.html
+++ b/src/material/core/option/option.html
@@ -2,20 +2,32 @@
  be contributing to issue where sometimes VoiceOver focuses on a TextNode in the a11y tree instead
  of the Option node (#23202). Most assistive technology will generally ignore non-role,
  non-text-content elements. Adding aria-hidden seems to make VoiceOver behave more consistently. -->
-<mat-pseudo-checkbox *ngIf="multiple" class="mat-mdc-option-pseudo-checkbox" [disabled]="disabled"
-    [state]="selected ? 'checked' : 'unchecked'" aria-hidden="true"></mat-pseudo-checkbox>
+@if (multiple) {
+    <mat-pseudo-checkbox
+        class="mat-mdc-option-pseudo-checkbox"
+        [disabled]="disabled"
+        [state]="selected ? 'checked' : 'unchecked'"
+        aria-hidden="true"></mat-pseudo-checkbox>
+}
 
 <ng-content select="mat-icon"></ng-content>
 
 <span class="mdc-list-item__primary-text" #text><ng-content></ng-content></span>
 
 <!-- Render checkmark at the end for single-selection. -->
-<mat-pseudo-checkbox *ngIf="!multiple && selected && !hideSingleSelectionIndicator"
-    class="mat-mdc-option-pseudo-checkbox" [disabled]="disabled" state="checked"
-    aria-hidden="true" appearance="minimal"></mat-pseudo-checkbox>
+@if (!multiple && selected && !hideSingleSelectionIndicator) {
+    <mat-pseudo-checkbox
+        class="mat-mdc-option-pseudo-checkbox"
+        [disabled]="disabled"
+        state="checked"
+        aria-hidden="true"
+        appearance="minimal"></mat-pseudo-checkbox>
+}
 
 <!-- See a11y notes inside optgroup.ts for context behind this element. -->
-<span class="cdk-visually-hidden" *ngIf="group && group._inert">({{ group.label }})</span>
+@if (group && group._inert) {
+    <span class="cdk-visually-hidden">({{ group.label }})</span>
+}
 
 <div class="mat-mdc-option-ripple mat-mdc-focus-indicator" aria-hidden="true" mat-ripple
      [matRippleTrigger]="_getHostElement()" [matRippleDisabled]="disabled || disableRipple">
diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html
index e386c7a5a43c..318516d5f626 100644
--- a/src/material/datepicker/calendar-body.html
+++ b/src/material/datepicker/calendar-body.html
@@ -2,80 +2,87 @@
   If there's not enough space in the first row, create a separate label row. We mark this row as
   aria-hidden because we don't want it to be read out as one of the weeks in the month.
 -->
-<tr *ngIf="_firstRowOffset < labelMinRequiredCells" aria-hidden="true">
-  <td class="mat-calendar-body-label"
-      [attr.colspan]="numCols"
-      [style.paddingTop]="_cellPadding"
-      [style.paddingBottom]="_cellPadding">
-    {{label}}
-  </td>
-</tr>
+@if (_firstRowOffset < labelMinRequiredCells) {
+  <tr aria-hidden="true">
+    <td class="mat-calendar-body-label"
+        [attr.colspan]="numCols"
+        [style.paddingTop]="_cellPadding"
+        [style.paddingBottom]="_cellPadding">
+      {{label}}
+    </td>
+  </tr>
+}
 
 <!-- Create the first row separately so we can include a special spacer cell. -->
-<tr *ngFor="let row of rows; let rowIndex = index" role="row">
-  <!--
-    This cell is purely decorative, but we can't put `aria-hidden` or `role="presentation"` on it,
-    because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the
-    table cells is maintained by setting the top and bottom padding as a percentage of the width
-    (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).
-  -->
-  <td *ngIf="rowIndex === 0 && _firstRowOffset"
-      class="mat-calendar-body-label"
-      [attr.colspan]="_firstRowOffset"
-      [style.paddingTop]="_cellPadding"
-      [style.paddingBottom]="_cellPadding">
-    {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}
-  </td>
-  <!--
-    Each gridcell in the calendar contains a button, which signals to assistive technology that the
-    cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for
-    background.
-  -->
-  <td
-    *ngFor="let item of row; let colIndex = index"
-    role="gridcell"
-    class="mat-calendar-body-cell-container"
-    [style.width]="_cellWidth"
-    [style.paddingTop]="_cellPadding"
-    [style.paddingBottom]="_cellPadding"
-    [attr.data-mat-row]="rowIndex"
-    [attr.data-mat-col]="colIndex"
-  >
-    <button
-        type="button"
-        class="mat-calendar-body-cell"
-        [ngClass]="item.cssClasses"
-        [tabindex]="_isActiveCell(rowIndex, colIndex) ? 0 : -1"
-        [class.mat-calendar-body-disabled]="!item.enabled"
-        [class.mat-calendar-body-active]="_isActiveCell(rowIndex, colIndex)"
-        [class.mat-calendar-body-range-start]="_isRangeStart(item.compareValue)"
-        [class.mat-calendar-body-range-end]="_isRangeEnd(item.compareValue)"
-        [class.mat-calendar-body-in-range]="_isInRange(item.compareValue)"
-        [class.mat-calendar-body-comparison-bridge-start]="_isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)"
-        [class.mat-calendar-body-comparison-bridge-end]="_isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)"
-        [class.mat-calendar-body-comparison-start]="_isComparisonStart(item.compareValue)"
-        [class.mat-calendar-body-comparison-end]="_isComparisonEnd(item.compareValue)"
-        [class.mat-calendar-body-in-comparison-range]="_isInComparisonRange(item.compareValue)"
-        [class.mat-calendar-body-preview-start]="_isPreviewStart(item.compareValue)"
-        [class.mat-calendar-body-preview-end]="_isPreviewEnd(item.compareValue)"
-        [class.mat-calendar-body-in-preview]="_isInPreview(item.compareValue)"
-        [attr.aria-label]="item.ariaLabel"
-        [attr.aria-disabled]="!item.enabled || null"
-        [attr.aria-pressed]="_isSelected(item.compareValue)"
-        [attr.aria-current]="todayValue === item.compareValue ? 'date' : null"
-        [attr.aria-describedby]="_getDescribedby(item.compareValue)"
-        (click)="_cellClicked(item, $event)"
-        (focus)="_emitActiveDateChange(item, $event)">
-        <span class="mat-calendar-body-cell-content mat-focus-indicator"
-          [class.mat-calendar-body-selected]="_isSelected(item.compareValue)"
-          [class.mat-calendar-body-comparison-identical]="_isComparisonIdentical(item.compareValue)"
-          [class.mat-calendar-body-today]="todayValue === item.compareValue">
-          {{item.displayValue}}
-        </span>
-        <span class="mat-calendar-body-cell-preview" aria-hidden="true"></span>
-    </button>
-  </td>
-</tr>
+@for (row of rows; track row; let rowIndex = $index) {
+  <tr role="row">
+    <!--
+      This cell is purely decorative, but we can't put `aria-hidden` or `role="presentation"` on it,
+      because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the
+      table cells is maintained by setting the top and bottom padding as a percentage of the width
+      (a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).
+    -->
+    @if (rowIndex === 0 && _firstRowOffset) {
+      <td
+        class="mat-calendar-body-label"
+        [attr.colspan]="_firstRowOffset"
+        [style.paddingTop]="_cellPadding"
+        [style.paddingBottom]="_cellPadding">
+        {{_firstRowOffset >= labelMinRequiredCells ? label : ''}}
+      </td>
+    }
+    <!--
+      Each gridcell in the calendar contains a button, which signals to assistive technology that the
+      cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for
+      background.
+    -->
+    @for (item of row; track item; let colIndex = $index) {
+      <td
+        role="gridcell"
+        class="mat-calendar-body-cell-container"
+        [style.width]="_cellWidth"
+        [style.paddingTop]="_cellPadding"
+        [style.paddingBottom]="_cellPadding"
+        [attr.data-mat-row]="rowIndex"
+        [attr.data-mat-col]="colIndex"
+      >
+        <button
+            type="button"
+            class="mat-calendar-body-cell"
+            [ngClass]="item.cssClasses"
+            [tabindex]="_isActiveCell(rowIndex, colIndex) ? 0 : -1"
+            [class.mat-calendar-body-disabled]="!item.enabled"
+            [class.mat-calendar-body-active]="_isActiveCell(rowIndex, colIndex)"
+            [class.mat-calendar-body-range-start]="_isRangeStart(item.compareValue)"
+            [class.mat-calendar-body-range-end]="_isRangeEnd(item.compareValue)"
+            [class.mat-calendar-body-in-range]="_isInRange(item.compareValue)"
+            [class.mat-calendar-body-comparison-bridge-start]="_isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)"
+            [class.mat-calendar-body-comparison-bridge-end]="_isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)"
+            [class.mat-calendar-body-comparison-start]="_isComparisonStart(item.compareValue)"
+            [class.mat-calendar-body-comparison-end]="_isComparisonEnd(item.compareValue)"
+            [class.mat-calendar-body-in-comparison-range]="_isInComparisonRange(item.compareValue)"
+            [class.mat-calendar-body-preview-start]="_isPreviewStart(item.compareValue)"
+            [class.mat-calendar-body-preview-end]="_isPreviewEnd(item.compareValue)"
+            [class.mat-calendar-body-in-preview]="_isInPreview(item.compareValue)"
+            [attr.aria-label]="item.ariaLabel"
+            [attr.aria-disabled]="!item.enabled || null"
+            [attr.aria-pressed]="_isSelected(item.compareValue)"
+            [attr.aria-current]="todayValue === item.compareValue ? 'date' : null"
+            [attr.aria-describedby]="_getDescribedby(item.compareValue)"
+            (click)="_cellClicked(item, $event)"
+            (focus)="_emitActiveDateChange(item, $event)">
+            <span class="mat-calendar-body-cell-content mat-focus-indicator"
+              [class.mat-calendar-body-selected]="_isSelected(item.compareValue)"
+              [class.mat-calendar-body-comparison-identical]="_isComparisonIdentical(item.compareValue)"
+              [class.mat-calendar-body-today]="todayValue === item.compareValue">
+              {{item.displayValue}}
+            </span>
+            <span class="mat-calendar-body-cell-preview" aria-hidden="true"></span>
+        </button>
+      </td>
+    }
+  </tr>
+}
 
 <label [id]="_startDateLabelId" class="mat-calendar-body-hidden-label">
   {{startDateAccessibleName}}
diff --git a/src/material/datepicker/calendar.html b/src/material/datepicker/calendar.html
index a10d76696519..c75a30eff443 100644
--- a/src/material/datepicker/calendar.html
+++ b/src/material/datepicker/calendar.html
@@ -1,46 +1,47 @@
 <ng-template [cdkPortalOutlet]="_calendarHeaderPortal"></ng-template>
 
-<div class="mat-calendar-content" [ngSwitch]="currentView" cdkMonitorSubtreeFocus tabindex="-1">
-  <mat-month-view
-      *ngSwitchCase="'month'"
-      [(activeDate)]="activeDate"
-      [selected]="selected"
-      [dateFilter]="dateFilter"
-      [maxDate]="maxDate"
-      [minDate]="minDate"
-      [dateClass]="dateClass"
-      [comparisonStart]="comparisonStart"
-      [comparisonEnd]="comparisonEnd"
-      [startDateAccessibleName]="startDateAccessibleName"
-      [endDateAccessibleName]="endDateAccessibleName"
-      (_userSelection)="_dateSelected($event)"
-      (dragStarted)="_dragStarted($event)"
-      (dragEnded)="_dragEnded($event)"
-      [activeDrag]="_activeDrag"
-      >
-  </mat-month-view>
+<div class="mat-calendar-content" cdkMonitorSubtreeFocus tabindex="-1">
+  @switch (currentView) {
+    @case ('month') {
+        <mat-month-view
+            [(activeDate)]="activeDate"
+            [selected]="selected"
+            [dateFilter]="dateFilter"
+            [maxDate]="maxDate"
+            [minDate]="minDate"
+            [dateClass]="dateClass"
+            [comparisonStart]="comparisonStart"
+            [comparisonEnd]="comparisonEnd"
+            [startDateAccessibleName]="startDateAccessibleName"
+            [endDateAccessibleName]="endDateAccessibleName"
+            (_userSelection)="_dateSelected($event)"
+            (dragStarted)="_dragStarted($event)"
+            (dragEnded)="_dragEnded($event)"
+            [activeDrag]="_activeDrag"></mat-month-view>
+    }
 
-  <mat-year-view
-      *ngSwitchCase="'year'"
-      [(activeDate)]="activeDate"
-      [selected]="selected"
-      [dateFilter]="dateFilter"
-      [maxDate]="maxDate"
-      [minDate]="minDate"
-      [dateClass]="dateClass"
-      (monthSelected)="_monthSelectedInYearView($event)"
-      (selectedChange)="_goToDateInView($event, 'month')">
-  </mat-year-view>
+    @case ('year') {
+        <mat-year-view
+            [(activeDate)]="activeDate"
+            [selected]="selected"
+            [dateFilter]="dateFilter"
+            [maxDate]="maxDate"
+            [minDate]="minDate"
+            [dateClass]="dateClass"
+            (monthSelected)="_monthSelectedInYearView($event)"
+            (selectedChange)="_goToDateInView($event, 'month')"></mat-year-view>
+    }
 
-  <mat-multi-year-view
-      *ngSwitchCase="'multi-year'"
-      [(activeDate)]="activeDate"
-      [selected]="selected"
-      [dateFilter]="dateFilter"
-      [maxDate]="maxDate"
-      [minDate]="minDate"
-      [dateClass]="dateClass"
-      (yearSelected)="_yearSelectedInMultiYearView($event)"
-      (selectedChange)="_goToDateInView($event, 'year')">
-  </mat-multi-year-view>
+    @case ('multi-year') {
+        <mat-multi-year-view
+            [(activeDate)]="activeDate"
+            [selected]="selected"
+            [dateFilter]="dateFilter"
+            [maxDate]="maxDate"
+            [minDate]="minDate"
+            [dateClass]="dateClass"
+            (yearSelected)="_yearSelectedInMultiYearView($event)"
+            (selectedChange)="_goToDateInView($event, 'year')"></mat-multi-year-view>
+    }
+  }
 </div>
diff --git a/src/material/datepicker/datepicker-toggle.html b/src/material/datepicker/datepicker-toggle.html
index 5ea3c1e7afe0..b2a852166fea 100644
--- a/src/material/datepicker/datepicker-toggle.html
+++ b/src/material/datepicker/datepicker-toggle.html
@@ -8,17 +8,18 @@
   [disabled]="disabled"
   [disableRipple]="disableRipple">
 
-  <svg
-    *ngIf="!_customIcon"
-    class="mat-datepicker-toggle-default-icon"
-    viewBox="0 0 24 24"
-    width="24px"
-    height="24px"
-    fill="currentColor"
-    focusable="false"
-    aria-hidden="true">
-    <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
-  </svg>
+  @if (!_customIcon) {
+    <svg
+      class="mat-datepicker-toggle-default-icon"
+      viewBox="0 0 24 24"
+      width="24px"
+      height="24px"
+      fill="currentColor"
+      focusable="false"
+      aria-hidden="true">
+      <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
+    </svg>
+  }
 
   <ng-content select="[matDatepickerToggleIcon]"></ng-content>
 </button>
diff --git a/src/material/datepicker/month-view.html b/src/material/datepicker/month-view.html
index 626a2ac015fa..453735ec39e6 100644
--- a/src/material/datepicker/month-view.html
+++ b/src/material/datepicker/month-view.html
@@ -1,10 +1,12 @@
 <table class="mat-calendar-table" role="grid">
   <thead class="mat-calendar-table-header">
     <tr>
-      <th scope="col" *ngFor="let day of _weekdays">
-        <span class="cdk-visually-hidden">{{day.long}}</span>
-        <span aria-hidden="true">{{day.narrow}}</span>
-      </th>
+      @for (day of _weekdays; track day) {
+        <th scope="col">
+          <span class="cdk-visually-hidden">{{day.long}}</span>
+          <span aria-hidden="true">{{day.narrow}}</span>
+        </th>
+      }
     </tr>
     <tr><th aria-hidden="true" class="mat-calendar-table-header-divider" colspan="7"></th></tr>
   </thead>
diff --git a/src/material/expansion/BUILD.bazel b/src/material/expansion/BUILD.bazel
index db8fda5ac13d..7b278f14f5d8 100644
--- a/src/material/expansion/BUILD.bazel
+++ b/src/material/expansion/BUILD.bazel
@@ -29,7 +29,6 @@ ng_module(
         "//src/cdk/portal",
         "//src/material/core",
         "@npm//@angular/animations",
-        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
         "@npm//rxjs",
diff --git a/src/material/expansion/expansion-module.ts b/src/material/expansion/expansion-module.ts
index 8b49c2483a09..c93d92bd8af3 100644
--- a/src/material/expansion/expansion-module.ts
+++ b/src/material/expansion/expansion-module.ts
@@ -8,7 +8,6 @@
 
 import {CdkAccordionModule} from '@angular/cdk/accordion';
 import {PortalModule} from '@angular/cdk/portal';
-import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material/core';
 import {MatAccordion} from './accordion';
@@ -21,7 +20,7 @@ import {
 } from './expansion-panel-header';
 
 @NgModule({
-  imports: [CommonModule, MatCommonModule, CdkAccordionModule, PortalModule],
+  imports: [MatCommonModule, CdkAccordionModule, PortalModule],
   exports: [
     MatAccordion,
     MatExpansionPanel,
diff --git a/src/material/expansion/expansion-panel-header.html b/src/material/expansion/expansion-panel-header.html
index d3f4b7c6b385..c00f7da4cddb 100644
--- a/src/material/expansion/expansion-panel-header.html
+++ b/src/material/expansion/expansion-panel-header.html
@@ -3,5 +3,7 @@
   <ng-content select="mat-panel-description"></ng-content>
   <ng-content></ng-content>
 </span>
-<span [@indicatorRotate]="_getExpandedState()" *ngIf="_showToggle()"
-      class="mat-expansion-indicator"></span>
+
+@if (_showToggle()) {
+  <span [@indicatorRotate]="_getExpandedState()" class="mat-expansion-indicator"></span>
+}
diff --git a/src/material/form-field/form-field.html b/src/material/form-field/form-field.html
index 0adee00f9180..ea623cd7dac9 100644
--- a/src/material/form-field/form-field.html
+++ b/src/material/form-field/form-field.html
@@ -11,23 +11,25 @@
     to set `aria-hidden`. Nor do we want to set `aria-labelledby` on every form control if we could
     simply link the label to the control using the label `for` attribute.
   -->
-  <label matFormFieldFloatingLabel
-         [floating]="_shouldLabelFloat()"
-         [monitorResize]="_hasOutline()"
-         *ngIf="_hasFloatingLabel()"
-         [id]="_labelId"
-         [attr.for]="_control.id">
-    <ng-content select="mat-label"></ng-content>
-    <!--
-      We set the required marker as a separate element, in order to make it easier to target if
-      apps want to override it and to be able to set `aria-hidden` so that screen readers don't
-      pick it up.
-     -->
-    <span
-      *ngIf="!hideRequiredMarker && _control.required"
-      aria-hidden="true"
-      class="mat-mdc-form-field-required-marker mdc-floating-label--required"></span>
-  </label>
+  @if (_hasFloatingLabel()) {
+    <label matFormFieldFloatingLabel
+           [floating]="_shouldLabelFloat()"
+           [monitorResize]="_hasOutline()"
+           [id]="_labelId"
+           [attr.for]="_control.id">
+      <ng-content select="mat-label"></ng-content>
+      <!--
+        We set the required marker as a separate element, in order to make it easier to target if
+        apps want to override it and to be able to set `aria-hidden` so that screen readers don't
+        pick it up.
+       -->
+       @if (!hideRequiredMarker && _control.required) {
+         <span
+           aria-hidden="true"
+           class="mat-mdc-form-field-required-marker mdc-floating-label--required"></span>
+       }
+    </label>
+  }
 </ng-template>
 
 <div class="mat-mdc-text-field-wrapper mdc-text-field" #textField
@@ -37,54 +39,76 @@
      [class.mdc-text-field--disabled]="_control.disabled"
      [class.mdc-text-field--invalid]="_control.errorState"
      (click)="_control.onContainerClick($event)">
-  <div class="mat-mdc-form-field-focus-overlay" *ngIf="!_hasOutline() && !_control.disabled"></div>
+  @if (!_hasOutline() && !_control.disabled) {
+    <div class="mat-mdc-form-field-focus-overlay"></div>
+  }
   <div class="mat-mdc-form-field-flex">
-    <div *ngIf="_hasOutline()" matFormFieldNotchedOutline
-         [matFormFieldNotchedOutlineOpen]="_shouldLabelFloat()">
-      <ng-template [ngIf]="!_forceDisplayInfixLabel()">
-        <ng-template [ngTemplateOutlet]="labelTemplate"></ng-template>
-      </ng-template>
-    </div>
+    @if (_hasOutline()) {
+      <div matFormFieldNotchedOutline [matFormFieldNotchedOutlineOpen]="_shouldLabelFloat()">
+        @if (!_forceDisplayInfixLabel()) {
+          <ng-template [ngTemplateOutlet]="labelTemplate"></ng-template>
+        }
+      </div>
+    }
 
-    <div class="mat-mdc-form-field-icon-prefix" *ngIf="_hasIconPrefix" #iconPrefixContainer>
-      <ng-content select="[matPrefix], [matIconPrefix]"></ng-content>
-    </div>
-    <div class="mat-mdc-form-field-text-prefix" *ngIf="_hasTextPrefix" #textPrefixContainer>
-      <ng-content select="[matTextPrefix]"></ng-content>
-    </div>
+    @if (_hasIconPrefix) {
+      <div class="mat-mdc-form-field-icon-prefix" #iconPrefixContainer>
+        <ng-content select="[matPrefix], [matIconPrefix]"></ng-content>
+      </div>
+    }
+
+    @if (_hasTextPrefix) {
+      <div class="mat-mdc-form-field-text-prefix" #textPrefixContainer>
+        <ng-content select="[matTextPrefix]"></ng-content>
+      </div>
+    }
 
     <div class="mat-mdc-form-field-infix">
-      <ng-template [ngIf]="!_hasOutline() || _forceDisplayInfixLabel()">
+      @if (!_hasOutline() || _forceDisplayInfixLabel()) {
         <ng-template [ngTemplateOutlet]="labelTemplate"></ng-template>
-      </ng-template>
+      }
 
       <ng-content></ng-content>
     </div>
 
-    <div class="mat-mdc-form-field-text-suffix" *ngIf="_hasTextSuffix">
-      <ng-content select="[matTextSuffix]"></ng-content>
-    </div>
-    <div class="mat-mdc-form-field-icon-suffix" *ngIf="_hasIconSuffix">
-      <ng-content select="[matSuffix], [matIconSuffix]"></ng-content>
-    </div>
+    @if (_hasTextSuffix) {
+      <div class="mat-mdc-form-field-text-suffix">
+        <ng-content select="[matTextSuffix]"></ng-content>
+      </div>
+    }
+
+    @if (_hasIconSuffix) {
+      <div class="mat-mdc-form-field-icon-suffix">
+        <ng-content select="[matSuffix], [matIconSuffix]"></ng-content>
+      </div>
+    }
   </div>
 
-  <div matFormFieldLineRipple *ngIf="!_hasOutline()"></div>
+  @if (!_hasOutline()) {
+    <div matFormFieldLineRipple></div>
+  }
 </div>
 
 <div class="mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align"
-     [class.mat-mdc-form-field-subscript-dynamic-size]="subscriptSizing === 'dynamic'"
-     [ngSwitch]="_getDisplayedMessages()">
-  <div class="mat-mdc-form-field-error-wrapper" *ngSwitchCase="'error'"
-       [@transitionMessages]="_subscriptAnimationState">
-    <ng-content select="mat-error, [matError]"></ng-content>
-  </div>
+     [class.mat-mdc-form-field-subscript-dynamic-size]="subscriptSizing === 'dynamic'">
 
-  <div class="mat-mdc-form-field-hint-wrapper" *ngSwitchCase="'hint'"
-       [@transitionMessages]="_subscriptAnimationState">
-    <mat-hint *ngIf="hintLabel" [id]="_hintLabelId">{{hintLabel}}</mat-hint>
-    <ng-content select="mat-hint:not([align='end'])"></ng-content>
-    <div class="mat-mdc-form-field-hint-spacer"></div>
-    <ng-content select="mat-hint[align='end']"></ng-content>
-  </div>
+  @switch (_getDisplayedMessages()) {
+    @case ('error') {
+      <div class="mat-mdc-form-field-error-wrapper"
+           [@transitionMessages]="_subscriptAnimationState">
+        <ng-content select="mat-error, [matError]"></ng-content>
+      </div>
+    }
+
+    @case ('hint') {
+      <div class="mat-mdc-form-field-hint-wrapper" [@transitionMessages]="_subscriptAnimationState">
+        @if (hintLabel) {
+          <mat-hint [id]="_hintLabelId">{{hintLabel}}</mat-hint>
+        }
+        <ng-content select="mat-hint:not([align='end'])"></ng-content>
+        <div class="mat-mdc-form-field-hint-spacer"></div>
+        <ng-content select="mat-hint[align='end']"></ng-content>
+      </div>
+    }
+  }
 </div>
diff --git a/src/material/list/list-option.html b/src/material/list/list-option.html
index 5d11eb2a5d0e..25c97b133659 100644
--- a/src/material/list/list-option.html
+++ b/src/material/list/list-option.html
@@ -36,20 +36,21 @@
   </div>
 </ng-template>
 
-<!-- Container for the checkbox at start. -->
-<span class="mdc-list-item__start mat-mdc-list-option-checkbox-before"
-      *ngIf="_hasCheckboxAt('before')">
-  <ng-template [ngTemplateOutlet]="checkbox"></ng-template>
-</span>
-<!-- Container for the radio at the start. -->
-<span class="mdc-list-item__start mat-mdc-list-option-radio-before"
-      *ngIf="_hasRadioAt('before')">
-  <ng-template [ngTemplateOutlet]="radio"></ng-template>
-</span>
+@if (_hasCheckboxAt('before')) {
+  <!-- Container for the checkbox at start. -->
+  <span class="mdc-list-item__start mat-mdc-list-option-checkbox-before">
+    <ng-template [ngTemplateOutlet]="checkbox"></ng-template>
+  </span>
+} @else if (_hasRadioAt('before')) {
+  <!-- Container for the radio at the start. -->
+  <span class="mdc-list-item__start mat-mdc-list-option-radio-before">
+    <ng-template [ngTemplateOutlet]="radio"></ng-template>
+  </span>
+}
 <!-- Conditionally renders icons/avatars before the list item text. -->
-<ng-template [ngIf]="_hasIconsOrAvatarsAt('before')">
+@if (_hasIconsOrAvatarsAt('before')) {
   <ng-template [ngTemplateOutlet]="icons"></ng-template>
-</ng-template>
+}
 
 <!-- Text -->
 <span class="mdc-list-item__content">
@@ -61,18 +62,22 @@
   </span>
 </span>
 
-<!-- Container for the checkbox at the end. -->
-<span class="mdc-list-item__end" *ngIf="_hasCheckboxAt('after')">
-  <ng-template [ngTemplateOutlet]="checkbox"></ng-template>
-</span>
-<!-- Container for the radio at the end. -->
-<span class="mdc-list-item__end" *ngIf="_hasRadioAt('after')">
-  <ng-template [ngTemplateOutlet]="radio"></ng-template>
-</span>
+@if (_hasCheckboxAt('after')) {
+  <!-- Container for the checkbox at the end. -->
+  <span class="mdc-list-item__end">
+    <ng-template [ngTemplateOutlet]="checkbox"></ng-template>
+  </span>
+} @else if (_hasRadioAt('after')) {
+  <!-- Container for the radio at the end. -->
+  <span class="mdc-list-item__end">
+    <ng-template [ngTemplateOutlet]="radio"></ng-template>
+  </span>
+}
+
 <!-- Conditionally renders icons/avatars after the list item text. -->
-<ng-template [ngIf]="_hasIconsOrAvatarsAt('after')">
+@if (_hasIconsOrAvatarsAt('after')) {
   <ng-template [ngTemplateOutlet]="icons"></ng-template>
-</ng-template>
+}
 
 <!-- Divider -->
 <ng-content select="mat-divider"></ng-content>
diff --git a/src/material/menu/menu-item.html b/src/material/menu/menu-item.html
index 0fa5933c47c4..a7d348e5b93e 100644
--- a/src/material/menu/menu-item.html
+++ b/src/material/menu/menu-item.html
@@ -4,9 +4,11 @@
      [matRippleDisabled]="disableRipple || disabled"
      [matRippleTrigger]="_getHostElement()">
 </div>
-<svg
-  *ngIf="_triggersSubmenu"
-  class="mat-mdc-menu-submenu-icon"
-  viewBox="0 0 5 10"
-  focusable="false"
-  aria-hidden="true"><polygon points="0,0 5,5 0,10"/></svg>
+
+@if (_triggersSubmenu) {
+     <svg
+       class="mat-mdc-menu-submenu-icon"
+       viewBox="0 0 5 10"
+       focusable="false"
+       aria-hidden="true"><polygon points="0,0 5,5 0,10"/></svg>
+}
diff --git a/src/material/paginator/BUILD.bazel b/src/material/paginator/BUILD.bazel
index e5b0b994bc2c..3c5ce18ad133 100644
--- a/src/material/paginator/BUILD.bazel
+++ b/src/material/paginator/BUILD.bazel
@@ -23,7 +23,6 @@ ng_module(
         "//src/material/core",
         "//src/material/select",
         "//src/material/tooltip",
-        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",  # TODO(jelbourn): transitive dep via generated code
         "@npm//rxjs",
diff --git a/src/material/paginator/module.ts b/src/material/paginator/module.ts
index a331f5c01ccf..37e21c85c091 100644
--- a/src/material/paginator/module.ts
+++ b/src/material/paginator/module.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MAT_PAGINATOR_INTL_PROVIDER} from './paginator-intl';
 import {MatButtonModule} from '@angular/material/button';
@@ -15,7 +14,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatPaginator} from './paginator';
 
 @NgModule({
-  imports: [CommonModule, MatButtonModule, MatSelectModule, MatTooltipModule],
+  imports: [MatButtonModule, MatSelectModule, MatTooltipModule],
   exports: [MatPaginator],
   declarations: [MatPaginator],
   providers: [MAT_PAGINATOR_INTL_PROVIDER],
diff --git a/src/material/paginator/paginator.html b/src/material/paginator/paginator.html
index fb336e509caa..d1bf7519d330 100644
--- a/src/material/paginator/paginator.html
+++ b/src/material/paginator/paginator.html
@@ -1,55 +1,61 @@
 <div class="mat-mdc-paginator-outer-container">
   <div class="mat-mdc-paginator-container">
-    <div class="mat-mdc-paginator-page-size" *ngIf="!hidePageSize">
-      <div class="mat-mdc-paginator-page-size-label" id="{{_pageSizeLabelId}}">
-        {{_intl.itemsPerPageLabel}}
-      </div>
+    @if (!hidePageSize) {
+      <div class="mat-mdc-paginator-page-size">
+        <div class="mat-mdc-paginator-page-size-label" [attr.id]="_pageSizeLabelId">
+          {{_intl.itemsPerPageLabel}}
+        </div>
 
-      <mat-form-field
-        *ngIf="_displayedPageSizeOptions.length > 1"
-        [appearance]="_formFieldAppearance!"
-        [color]="color"
-        class="mat-mdc-paginator-page-size-select">
-        <mat-select
-          [value]="pageSize"
-          [disabled]="disabled"
-          [aria-labelledby]="_pageSizeLabelId"
-          [panelClass]="selectConfig.panelClass || ''"
-          [disableOptionCentering]="selectConfig.disableOptionCentering"
-          (selectionChange)="_changePageSize($event.value)"
-          hideSingleSelectionIndicator>
-          <mat-option *ngFor="let pageSizeOption of _displayedPageSizeOptions" [value]="pageSizeOption">
-            {{pageSizeOption}}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
+        @if (_displayedPageSizeOptions.length > 1) {
+          <mat-form-field
+            [appearance]="_formFieldAppearance!"
+            [color]="color"
+            class="mat-mdc-paginator-page-size-select">
+            <mat-select
+              [value]="pageSize"
+              [disabled]="disabled"
+              [aria-labelledby]="_pageSizeLabelId"
+              [panelClass]="selectConfig.panelClass || ''"
+              [disableOptionCentering]="selectConfig.disableOptionCentering"
+              (selectionChange)="_changePageSize($event.value)"
+              hideSingleSelectionIndicator>
+              @for (pageSizeOption of _displayedPageSizeOptions; track pageSizeOption) {
+                <mat-option [value]="pageSizeOption">
+                  {{pageSizeOption}}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        }
 
-      <div
-        class="mat-mdc-paginator-page-size-value"
-        *ngIf="_displayedPageSizeOptions.length <= 1">{{pageSize}}</div>
-    </div>
+        @if (_displayedPageSizeOptions.length <= 1) {
+          <div class="mat-mdc-paginator-page-size-value">{{pageSize}}</div>
+        }
+      </div>
+    }
 
     <div class="mat-mdc-paginator-range-actions">
       <div class="mat-mdc-paginator-range-label" aria-live="polite">
         {{_intl.getRangeLabel(pageIndex, pageSize, length)}}
       </div>
 
-      <button mat-icon-button type="button"
-              class="mat-mdc-paginator-navigation-first"
-              (click)="firstPage()"
-              [attr.aria-label]="_intl.firstPageLabel"
-              [matTooltip]="_intl.firstPageLabel"
-              [matTooltipDisabled]="_previousButtonsDisabled()"
-              [matTooltipPosition]="'above'"
-              [disabled]="_previousButtonsDisabled()"
-              *ngIf="showFirstLastButtons">
-        <svg class="mat-mdc-paginator-icon"
-             viewBox="0 0 24 24"
-             focusable="false"
-             aria-hidden="true">
-          <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/>
-        </svg>
-      </button>
+      @if (showFirstLastButtons) {
+        <button mat-icon-button type="button"
+                class="mat-mdc-paginator-navigation-first"
+                (click)="firstPage()"
+                [attr.aria-label]="_intl.firstPageLabel"
+                [matTooltip]="_intl.firstPageLabel"
+                [matTooltipDisabled]="_previousButtonsDisabled()"
+                [matTooltipPosition]="'above'"
+                [disabled]="_previousButtonsDisabled()">
+          <svg class="mat-mdc-paginator-icon"
+              viewBox="0 0 24 24"
+              focusable="false"
+              aria-hidden="true">
+            <path d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"/>
+          </svg>
+        </button>
+      }
       <button mat-icon-button type="button"
               class="mat-mdc-paginator-navigation-previous"
               (click)="previousPage()"
@@ -80,22 +86,23 @@
           <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
         </svg>
       </button>
-      <button mat-icon-button type="button"
-              class="mat-mdc-paginator-navigation-last"
-              (click)="lastPage()"
-              [attr.aria-label]="_intl.lastPageLabel"
-              [matTooltip]="_intl.lastPageLabel"
-              [matTooltipDisabled]="_nextButtonsDisabled()"
-              [matTooltipPosition]="'above'"
-              [disabled]="_nextButtonsDisabled()"
-              *ngIf="showFirstLastButtons">
-        <svg class="mat-mdc-paginator-icon"
-             viewBox="0 0 24 24"
-             focusable="false"
-             aria-hidden="true">
-          <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/>
-        </svg>
-      </button>
+      @if (showFirstLastButtons) {
+        <button mat-icon-button type="button"
+                class="mat-mdc-paginator-navigation-last"
+                (click)="lastPage()"
+                [attr.aria-label]="_intl.lastPageLabel"
+                [matTooltip]="_intl.lastPageLabel"
+                [matTooltipDisabled]="_nextButtonsDisabled()"
+                [matTooltipPosition]="'above'"
+                [disabled]="_nextButtonsDisabled()">
+          <svg class="mat-mdc-paginator-icon"
+              viewBox="0 0 24 24"
+              focusable="false"
+              aria-hidden="true">
+            <path d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"/>
+          </svg>
+        </button>
+      }
     </div>
   </div>
 </div>
diff --git a/src/material/select/select.html b/src/material/select/select.html
index 5a37b72ef321..8043ec3058c8 100644
--- a/src/material/select/select.html
+++ b/src/material/select/select.html
@@ -3,12 +3,19 @@
      (click)="toggle()"
      #fallbackOverlayOrigin="cdkOverlayOrigin"
      #trigger>
-  <div class="mat-mdc-select-value" [ngSwitch]="empty" [attr.id]="_valueId">
-    <span class="mat-mdc-select-placeholder mat-mdc-select-min-line" *ngSwitchCase="true">{{placeholder}}</span>
-    <span class="mat-mdc-select-value-text" *ngSwitchCase="false" [ngSwitch]="!!customTrigger">
-      <span class="mat-mdc-select-min-line" *ngSwitchDefault>{{triggerValue}}</span>
-      <ng-content select="mat-select-trigger" *ngSwitchCase="true"></ng-content>
-    </span>
+
+  <div class="mat-mdc-select-value" [attr.id]="_valueId">
+    @if (empty) {
+      <span class="mat-mdc-select-placeholder mat-mdc-select-min-line">{{placeholder}}</span>
+    } @else {
+      <span class="mat-mdc-select-value-text">
+        @if (customTrigger) {
+          <ng-content select="mat-select-trigger"></ng-content>
+        } @else {
+          <span class="mat-mdc-select-min-line">{{triggerValue}}</span>
+        }
+      </span>
+    }
   </div>
 
   <div class="mat-mdc-select-arrow-wrapper">
diff --git a/src/material/sidenav/BUILD.bazel b/src/material/sidenav/BUILD.bazel
index 194ed0699a7e..ce78171d11bf 100644
--- a/src/material/sidenav/BUILD.bazel
+++ b/src/material/sidenav/BUILD.bazel
@@ -26,7 +26,6 @@ ng_module(
         "//src/cdk/scrolling",
         "//src/material/core",
         "@npm//@angular/animations",
-        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
         "@npm//rxjs",
diff --git a/src/material/sidenav/drawer-container.html b/src/material/sidenav/drawer-container.html
index 4482b0783403..24659075c82a 100644
--- a/src/material/sidenav/drawer-container.html
+++ b/src/material/sidenav/drawer-container.html
@@ -1,10 +1,15 @@
-<div class="mat-drawer-backdrop" (click)="_onBackdropClicked()" *ngIf="hasBackdrop"
-     [class.mat-drawer-shown]="_isShowingBackdrop()"></div>
+@if (hasBackdrop) {
+  <div class="mat-drawer-backdrop" (click)="_onBackdropClicked()"
+       [class.mat-drawer-shown]="_isShowingBackdrop()"></div>
+}
 
 <ng-content select="mat-drawer"></ng-content>
 
 <ng-content select="mat-drawer-content">
 </ng-content>
-<mat-drawer-content *ngIf="!_content">
-  <ng-content></ng-content>
-</mat-drawer-content>
+
+@if (!_content) {
+  <mat-drawer-content>
+    <ng-content></ng-content>
+  </mat-drawer-content>
+}
diff --git a/src/material/sidenav/sidenav-container.html b/src/material/sidenav/sidenav-container.html
index f8bbf3c266e0..dcb4e6c3e2c3 100644
--- a/src/material/sidenav/sidenav-container.html
+++ b/src/material/sidenav/sidenav-container.html
@@ -1,10 +1,15 @@
-<div class="mat-drawer-backdrop" (click)="_onBackdropClicked()" *ngIf="hasBackdrop"
-     [class.mat-drawer-shown]="_isShowingBackdrop()"></div>
+@if (hasBackdrop) {
+  <div class="mat-drawer-backdrop" (click)="_onBackdropClicked()"
+       [class.mat-drawer-shown]="_isShowingBackdrop()"></div>
+}
 
 <ng-content select="mat-sidenav"></ng-content>
 
 <ng-content select="mat-sidenav-content">
 </ng-content>
-<mat-sidenav-content *ngIf="!_content">
-  <ng-content></ng-content>
-</mat-sidenav-content>
+
+@if (!_content) {
+  <mat-sidenav-content>
+    <ng-content></ng-content>
+  </mat-sidenav-content>
+}
diff --git a/src/material/sidenav/sidenav-module.ts b/src/material/sidenav/sidenav-module.ts
index 6e57d4931995..b127abde893d 100644
--- a/src/material/sidenav/sidenav-module.ts
+++ b/src/material/sidenav/sidenav-module.ts
@@ -6,14 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {CdkScrollableModule} from '@angular/cdk/scrolling';
-import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material/core';
 import {MatDrawer, MatDrawerContainer, MatDrawerContent} from './drawer';
 import {MatSidenav, MatSidenavContainer, MatSidenavContent} from './sidenav';
 
 @NgModule({
-  imports: [CommonModule, MatCommonModule, CdkScrollableModule],
+  imports: [MatCommonModule, CdkScrollableModule],
   exports: [
     CdkScrollableModule,
     MatCommonModule,
diff --git a/src/material/slide-toggle/BUILD.bazel b/src/material/slide-toggle/BUILD.bazel
index 2315867b1723..9b63b2ab7f8c 100644
--- a/src/material/slide-toggle/BUILD.bazel
+++ b/src/material/slide-toggle/BUILD.bazel
@@ -23,7 +23,6 @@ ng_module(
     deps = [
         "//src/material/core",
         "@npm//@angular/animations",
-        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
     ],
diff --git a/src/material/slide-toggle/module.ts b/src/material/slide-toggle/module.ts
index 5bf9b4e24acb..929ab1b10f19 100644
--- a/src/material/slide-toggle/module.ts
+++ b/src/material/slide-toggle/module.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule, MatRippleModule} from '@angular/material/core';
 import {MatSlideToggle} from './slide-toggle';
@@ -20,7 +19,7 @@ import {MatSlideToggleRequiredValidator} from './slide-toggle-required-validator
 export class _MatSlideToggleRequiredValidatorModule {}
 
 @NgModule({
-  imports: [_MatSlideToggleRequiredValidatorModule, MatCommonModule, MatRippleModule, CommonModule],
+  imports: [_MatSlideToggleRequiredValidatorModule, MatCommonModule, MatRippleModule],
   exports: [_MatSlideToggleRequiredValidatorModule, MatSlideToggle, MatCommonModule],
   declarations: [MatSlideToggle],
 })
diff --git a/src/material/slide-toggle/slide-toggle.html b/src/material/slide-toggle/slide-toggle.html
index d3393e326654..6e1e290eb780 100644
--- a/src/material/slide-toggle/slide-toggle.html
+++ b/src/material/slide-toggle/slide-toggle.html
@@ -31,20 +31,22 @@
             [matRippleDisabled]="disableRipple || disabled"
             [matRippleCentered]="true"></div>
         </div>
-        <div class="mdc-switch__icons" *ngIf="!hideIcon">
-          <svg
-            class="mdc-switch__icon mdc-switch__icon--on"
-            viewBox="0 0 24 24"
-            aria-hidden="true">
-            <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
-          </svg>
-          <svg
-            class="mdc-switch__icon mdc-switch__icon--off"
-            viewBox="0 0 24 24"
-            aria-hidden="true">
-            <path d="M20 13H4v-2h16v2z" />
-          </svg>
-        </div>
+        @if (!hideIcon) {
+          <div class="mdc-switch__icons">
+            <svg
+              class="mdc-switch__icon mdc-switch__icon--on"
+              viewBox="0 0 24 24"
+              aria-hidden="true">
+              <path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
+            </svg>
+            <svg
+              class="mdc-switch__icon mdc-switch__icon--off"
+              viewBox="0 0 24 24"
+              aria-hidden="true">
+              <path d="M20 13H4v-2h16v2z" />
+            </svg>
+          </div>
+        }
       </div>
     </div>
   </button>
diff --git a/src/material/slider/module.ts b/src/material/slider/module.ts
index 4d63755e1b0f..ea132449e5b0 100644
--- a/src/material/slider/module.ts
+++ b/src/material/slider/module.ts
@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatCommonModule, MatRippleModule} from '@angular/material/core';
 import {MatSlider} from './slider';
@@ -14,7 +13,7 @@ import {MatSliderVisualThumb} from './slider-thumb';
 import {MatSliderThumb, MatSliderRangeThumb} from './slider-input';
 
 @NgModule({
-  imports: [MatCommonModule, CommonModule, MatRippleModule],
+  imports: [MatCommonModule, MatRippleModule],
   exports: [MatSlider, MatSliderThumb, MatSliderRangeThumb],
   declarations: [MatSlider, MatSliderThumb, MatSliderRangeThumb, MatSliderVisualThumb],
 })
diff --git a/src/material/slider/slider-thumb.html b/src/material/slider/slider-thumb.html
index 6fa2d4259318..941618ad766b 100644
--- a/src/material/slider/slider-thumb.html
+++ b/src/material/slider/slider-thumb.html
@@ -1,7 +1,9 @@
-<div class="mdc-slider__value-indicator-container" *ngIf="discrete" #valueIndicatorContainer>
-  <div class="mdc-slider__value-indicator">
-    <span class="mdc-slider__value-indicator-text">{{valueIndicatorText}}</span>
+@if (discrete) {
+  <div class="mdc-slider__value-indicator-container" #valueIndicatorContainer>
+    <div class="mdc-slider__value-indicator">
+      <span class="mdc-slider__value-indicator-text">{{valueIndicatorText}}</span>
+    </div>
   </div>
-</div>
+}
 <div class="mdc-slider__thumb-knob" #knob></div>
 <div matRipple class="mat-mdc-focus-indicator" [matRippleDisabled]="true"></div>
diff --git a/src/material/slider/slider.html b/src/material/slider/slider.html
index 2c1f4b65a1ab..2a173fcef066 100644
--- a/src/material/slider/slider.html
+++ b/src/material/slider/slider.html
@@ -7,23 +7,27 @@
   <div class="mdc-slider__track--active">
     <div #trackActive class="mdc-slider__track--active_fill"></div>
   </div>
-  <div *ngIf="showTickMarks" class="mdc-slider__tick-marks" #tickMarkContainer>
-    <ng-container *ngIf="_cachedWidth">
-        <div
-          *ngFor="let tickMark of _tickMarks; let i = index"
-          [class]="tickMark === 0 ? 'mdc-slider__tick-mark--active' : 'mdc-slider__tick-mark--inactive'"
-          [style.transform]="_calcTickMarkTransform(i)"></div>
-    </ng-container>
-  </div>
+  @if (showTickMarks) {
+    <div class="mdc-slider__tick-marks" #tickMarkContainer>
+      @if (_cachedWidth) {
+        @for (tickMark of _tickMarks; track tickMark; let i = $index) {
+          <div
+            [class]="tickMark === 0 ? 'mdc-slider__tick-mark--active' : 'mdc-slider__tick-mark--inactive'"
+            [style.transform]="_calcTickMarkTransform(i)"></div>
+        }
+      }
+    </div>
+  }
 </div>
 
 <!-- Thumbs -->
-<mat-slider-visual-thumb
-  *ngIf="_isRange"
-  [discrete]="discrete"
-  [thumbPosition]="1"
-  [valueIndicatorText]="startValueIndicatorText">
-</mat-slider-visual-thumb>
+@if (_isRange) {
+  <mat-slider-visual-thumb
+    [discrete]="discrete"
+    [thumbPosition]="1"
+    [valueIndicatorText]="startValueIndicatorText">
+  </mat-slider-visual-thumb>
+}
 
 <mat-slider-visual-thumb
   [discrete]="discrete"
diff --git a/src/material/snack-bar/simple-snack-bar.html b/src/material/snack-bar/simple-snack-bar.html
index 884dfa9162fd..577c7e6a3919 100644
--- a/src/material/snack-bar/simple-snack-bar.html
+++ b/src/material/snack-bar/simple-snack-bar.html
@@ -2,8 +2,10 @@
   {{data.message}}
 </div>
 
-<div matSnackBarActions *ngIf="hasAction">
-  <button mat-button matSnackBarAction (click)="action()">
-    {{data.action}}
-  </button>
-</div>
+@if (hasAction) {
+  <div matSnackBarActions>
+    <button mat-button matSnackBarAction (click)="action()">
+      {{data.action}}
+    </button>
+  </div>
+}
diff --git a/src/material/sort/BUILD.bazel b/src/material/sort/BUILD.bazel
index 1986448be175..7f568f8f51d6 100644
--- a/src/material/sort/BUILD.bazel
+++ b/src/material/sort/BUILD.bazel
@@ -24,7 +24,6 @@ ng_module(
         "//src/cdk/keycodes",
         "//src/material/core",
         "@npm//@angular/animations",
-        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//rxjs",
     ],
diff --git a/src/material/sort/sort-header.html b/src/material/sort/sort-header.html
index 77af0a462235..93cf5d902690 100644
--- a/src/material/sort/sort-header.html
+++ b/src/material/sort/sort-header.html
@@ -25,18 +25,19 @@
   </div>
 
   <!-- Disable animations while a current animation is running -->
-  <div class="mat-sort-header-arrow"
-       *ngIf="_renderArrow()"
-       [@arrowOpacity]="_getArrowViewState()"
-       [@arrowPosition]="_getArrowViewState()"
-       [@allowChildren]="_getArrowDirectionState()"
-       (@arrowPosition.start)="_disableViewStateAnimation = true"
-       (@arrowPosition.done)="_disableViewStateAnimation = false">
-    <div class="mat-sort-header-stem"></div>
-    <div class="mat-sort-header-indicator" [@indicator]="_getArrowDirectionState()">
-      <div class="mat-sort-header-pointer-left" [@leftPointer]="_getArrowDirectionState()"></div>
-      <div class="mat-sort-header-pointer-right" [@rightPointer]="_getArrowDirectionState()"></div>
-      <div class="mat-sort-header-pointer-middle"></div>
+  @if (_renderArrow()) {
+    <div class="mat-sort-header-arrow"
+        [@arrowOpacity]="_getArrowViewState()"
+        [@arrowPosition]="_getArrowViewState()"
+        [@allowChildren]="_getArrowDirectionState()"
+        (@arrowPosition.start)="_disableViewStateAnimation = true"
+        (@arrowPosition.done)="_disableViewStateAnimation = false">
+      <div class="mat-sort-header-stem"></div>
+      <div class="mat-sort-header-indicator" [@indicator]="_getArrowDirectionState()">
+        <div class="mat-sort-header-pointer-left" [@leftPointer]="_getArrowDirectionState()"></div>
+        <div class="mat-sort-header-pointer-right" [@rightPointer]="_getArrowDirectionState()"></div>
+        <div class="mat-sort-header-pointer-middle"></div>
+      </div>
     </div>
-  </div>
+  }
 </div>
diff --git a/src/material/sort/sort-module.ts b/src/material/sort/sort-module.ts
index 7e8f2d3dc422..bd5092ab57b2 100644
--- a/src/material/sort/sort-module.ts
+++ b/src/material/sort/sort-module.ts
@@ -10,11 +10,10 @@ import {NgModule} from '@angular/core';
 import {MatSortHeader} from './sort-header';
 import {MatSort} from './sort';
 import {MAT_SORT_HEADER_INTL_PROVIDER} from './sort-header-intl';
-import {CommonModule} from '@angular/common';
 import {MatCommonModule} from '@angular/material/core';
 
 @NgModule({
-  imports: [CommonModule, MatCommonModule],
+  imports: [MatCommonModule],
   exports: [MatSort, MatSortHeader],
   declarations: [MatSort, MatSortHeader],
   providers: [MAT_SORT_HEADER_INTL_PROVIDER],
diff --git a/src/material/stepper/step-header.html b/src/material/stepper/step-header.html
index 0924af21e7ed..19ade872e7a4 100644
--- a/src/material/stepper/step-header.html
+++ b/src/material/stepper/step-header.html
@@ -3,31 +3,50 @@
      [matRippleDisabled]="disableRipple"></div>
 
 <div class="mat-step-icon-state-{{state}} mat-step-icon" [class.mat-step-icon-selected]="selected">
-  <div class="mat-step-icon-content" [ngSwitch]="!!(iconOverrides && iconOverrides[state])">
-    <ng-container
-      *ngSwitchCase="true"
-      [ngTemplateOutlet]="iconOverrides[state]"
-      [ngTemplateOutletContext]="_getIconContext()"></ng-container>
-    <ng-container *ngSwitchDefault [ngSwitch]="state">
-      <span aria-hidden="true" *ngSwitchCase="'number'">{{_getDefaultTextForState(state)}}</span>
-      <span class="cdk-visually-hidden" *ngIf="state === 'done'">{{_intl.completedLabel}}</span>
-      <span class="cdk-visually-hidden" *ngIf="state === 'edit'">{{_intl.editableLabel}}</span>
-      <mat-icon aria-hidden="true" *ngSwitchDefault>{{_getDefaultTextForState(state)}}</mat-icon>
-    </ng-container>
+  <div class="mat-step-icon-content">
+    @if (iconOverrides && iconOverrides[state]) {
+      <ng-container
+        [ngTemplateOutlet]="iconOverrides[state]"
+        [ngTemplateOutletContext]="_getIconContext()"></ng-container>
+    } @else {
+      @switch (state) {
+        @case ('number') {
+          <span aria-hidden="true">{{_getDefaultTextForState(state)}}</span>
+        }
+
+        @default {
+          @if (state === 'done') {
+            <span class="cdk-visually-hidden">{{_intl.completedLabel}}</span>
+          } @else if (state === 'edit') {
+            <span class="cdk-visually-hidden">{{_intl.editableLabel}}</span>
+          }
+
+          <mat-icon aria-hidden="true">{{_getDefaultTextForState(state)}}</mat-icon>
+        }
+      }
+    }
   </div>
 </div>
 <div class="mat-step-label"
      [class.mat-step-label-active]="active"
      [class.mat-step-label-selected]="selected"
      [class.mat-step-label-error]="state == 'error'">
-  <!-- If there is a label template, use it. -->
-  <div class="mat-step-text-label" *ngIf="_templateLabel()">
-    <ng-container [ngTemplateOutlet]="_templateLabel()!.template"></ng-container>
-  </div>
-  <!-- If there is no label template, fall back to the text label. -->
-  <div class="mat-step-text-label" *ngIf="_stringLabel()">{{label}}</div>
+  @if (_templateLabel(); as templateLabel) {
+    <!-- If there is a label template, use it. -->
+    <div class="mat-step-text-label">
+      <ng-container [ngTemplateOutlet]="templateLabel.template"></ng-container>
+    </div>
+  } @else if (_stringLabel()) {
+    <!-- If there is no label template, fall back to the text label. -->
+    <div class="mat-step-text-label">{{label}}</div>
+  }
+
+  @if (optional && state != 'error') {
+    <div class="mat-step-optional">{{_intl.optionalLabel}}</div>
+  }
 
-  <div class="mat-step-optional" *ngIf="optional && state != 'error'">{{_intl.optionalLabel}}</div>
-  <div class="mat-step-sub-label-error" *ngIf="state == 'error'">{{errorMessage}}</div>
+  @if (state === 'error') {
+    <div class="mat-step-sub-label-error">{{errorMessage}}</div>
+  }
 </div>
 
diff --git a/src/material/stepper/stepper.html b/src/material/stepper/stepper.html
index 3b33a2f9d78e..79103873cefd 100644
--- a/src/material/stepper/stepper.html
+++ b/src/material/stepper/stepper.html
@@ -1,56 +1,60 @@
-<ng-container [ngSwitch]="orientation">
-  <!-- Horizontal stepper -->
-  <div class="mat-horizontal-stepper-wrapper" *ngSwitchCase="'horizontal'">
-    <div class="mat-horizontal-stepper-header-container">
-      <ng-container *ngFor="let step of steps; let i = index; let isLast = last">
-        <ng-container
-          [ngTemplateOutlet]="stepTemplate"
-          [ngTemplateOutletContext]="{step: step, i: i}"></ng-container>
-        <div *ngIf="!isLast" class="mat-stepper-horizontal-line"></div>
-      </ng-container>
-    </div>
-
-    <div class="mat-horizontal-content-container">
-      <div *ngFor="let step of steps; let i = index"
-           class="mat-horizontal-stepper-content" role="tabpanel"
-           [@horizontalStepTransition]="{
-              'value': _getAnimationDirection(i),
-              'params': {'animationDuration': _getAnimationDuration()}
-            }"
-           (@horizontalStepTransition.done)="_animationDone.next($event)"
-           [id]="_getStepContentId(i)"
-           [attr.aria-labelledby]="_getStepLabelId(i)"
-           [class.mat-horizontal-stepper-content-inactive]="selectedIndex !== i">
-        <ng-container [ngTemplateOutlet]="step.content"></ng-container>
+@switch (orientation) {
+  @case ('horizontal') {
+    <div class="mat-horizontal-stepper-wrapper">
+      <div class="mat-horizontal-stepper-header-container">
+        @for (step of steps; track step; let i = $index, isLast = $last) {
+          <ng-container
+            [ngTemplateOutlet]="stepTemplate"
+            [ngTemplateOutletContext]="{step: step, i: i}"></ng-container>
+          @if (!isLast) {
+            <div class="mat-stepper-horizontal-line"></div>
+          }
+        }
       </div>
-    </div>
-  </div>
 
-  <!-- Vertical stepper -->
-  <ng-container *ngSwitchCase="'vertical'">
-    <div class="mat-step" *ngFor="let step of steps; let i = index; let isLast = last">
-      <ng-container
-        [ngTemplateOutlet]="stepTemplate"
-        [ngTemplateOutletContext]="{step: step, i: i}"></ng-container>
-      <div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">
-        <div class="mat-vertical-stepper-content" role="tabpanel"
-             [@verticalStepTransition]="{
-                'value': _getAnimationDirection(i),
-                'params': {'animationDuration': _getAnimationDuration()}
-              }"
-             (@verticalStepTransition.done)="_animationDone.next($event)"
-             [id]="_getStepContentId(i)"
-             [attr.aria-labelledby]="_getStepLabelId(i)"
-             [class.mat-vertical-stepper-content-inactive]="selectedIndex !== i">
-          <div class="mat-vertical-content">
+      <div class="mat-horizontal-content-container">
+        @for (step of steps; track step; let i = $index) {
+          <div class="mat-horizontal-stepper-content" role="tabpanel"
+               [@horizontalStepTransition]="{
+                  'value': _getAnimationDirection(i),
+                  'params': {'animationDuration': _getAnimationDuration()}
+                }"
+               (@horizontalStepTransition.done)="_animationDone.next($event)"
+               [id]="_getStepContentId(i)"
+               [attr.aria-labelledby]="_getStepLabelId(i)"
+               [class.mat-horizontal-stepper-content-inactive]="selectedIndex !== i">
             <ng-container [ngTemplateOutlet]="step.content"></ng-container>
           </div>
-        </div>
+        }
       </div>
     </div>
-  </ng-container>
+  }
 
-</ng-container>
+  @case ('vertical') {
+    @for (step of steps; track step; let i = $index, isLast = $last) {
+      <div class="mat-step">
+        <ng-container
+          [ngTemplateOutlet]="stepTemplate"
+          [ngTemplateOutletContext]="{step: step, i: i}"></ng-container>
+        <div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">
+          <div class="mat-vertical-stepper-content" role="tabpanel"
+               [@verticalStepTransition]="{
+                  'value': _getAnimationDirection(i),
+                  'params': {'animationDuration': _getAnimationDuration()}
+                }"
+               (@verticalStepTransition.done)="_animationDone.next($event)"
+               [id]="_getStepContentId(i)"
+               [attr.aria-labelledby]="_getStepLabelId(i)"
+               [class.mat-vertical-stepper-content-inactive]="selectedIndex !== i">
+            <div class="mat-vertical-content">
+              <ng-container [ngTemplateOutlet]="step.content"></ng-container>
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+  }
+}
 
 <!-- Common step templating -->
 <ng-template let-step="step" let-i="i" #stepTemplate>
diff --git a/src/material/tabs/tab-group.html b/src/material/tabs/tab-group.html
index 1d43663f984f..5a655f98e752 100644
--- a/src/material/tabs/tab-group.html
+++ b/src/material/tabs/tab-group.html
@@ -5,68 +5,71 @@
                 (indexFocused)="_focusChanged($event)"
                 (selectFocusedIndex)="selectedIndex = $event">
 
-  <div class="mdc-tab mat-mdc-tab mat-mdc-focus-indicator"
-       #tabNode
-       role="tab"
-       matTabLabelWrapper
-       cdkMonitorElementFocus
-       *ngFor="let tab of _tabs; let i = index"
-       [id]="_getTabLabelId(i)"
-       [attr.tabIndex]="_getTabIndex(i)"
-       [attr.aria-posinset]="i + 1"
-       [attr.aria-setsize]="_tabs.length"
-       [attr.aria-controls]="_getTabContentId(i)"
-       [attr.aria-selected]="selectedIndex === i"
-       [attr.aria-label]="tab.ariaLabel || null"
-       [attr.aria-labelledby]="(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null"
-       [class.mdc-tab--active]="selectedIndex === i"
-       [ngClass]="tab.labelClass"
-       [disabled]="tab.disabled"
-       [fitInkBarToContent]="fitInkBarToContent"
-       (click)="_handleClick(tab, tabHeader, i)"
-       (cdkFocusChange)="_tabFocusChanged($event, i)">
-    <span class="mdc-tab__ripple"></span>
+  @for (tab of _tabs; track tab; let i = $index) {
+    <div class="mdc-tab mat-mdc-tab mat-mdc-focus-indicator"
+        #tabNode
+        role="tab"
+        matTabLabelWrapper
+        cdkMonitorElementFocus
+        [id]="_getTabLabelId(i)"
+        [attr.tabIndex]="_getTabIndex(i)"
+        [attr.aria-posinset]="i + 1"
+        [attr.aria-setsize]="_tabs.length"
+        [attr.aria-controls]="_getTabContentId(i)"
+        [attr.aria-selected]="selectedIndex === i"
+        [attr.aria-label]="tab.ariaLabel || null"
+        [attr.aria-labelledby]="(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null"
+        [class.mdc-tab--active]="selectedIndex === i"
+        [ngClass]="tab.labelClass"
+        [disabled]="tab.disabled"
+        [fitInkBarToContent]="fitInkBarToContent"
+        (click)="_handleClick(tab, tabHeader, i)"
+        (cdkFocusChange)="_tabFocusChanged($event, i)">
+      <span class="mdc-tab__ripple"></span>
 
-    <!-- Needs to be a separate element, because we can't put
-         `overflow: hidden` on tab due to the ink bar. -->
-    <div
-      class="mat-mdc-tab-ripple"
-      mat-ripple
-      [matRippleTrigger]="tabNode"
-      [matRippleDisabled]="tab.disabled || disableRipple"></div>
+      <!-- Needs to be a separate element, because we can't put
+          `overflow: hidden` on tab due to the ink bar. -->
+      <div
+        class="mat-mdc-tab-ripple"
+        mat-ripple
+        [matRippleTrigger]="tabNode"
+        [matRippleDisabled]="tab.disabled || disableRipple"></div>
 
-    <span class="mdc-tab__content">
-      <span class="mdc-tab__text-label">
-        <!-- If there is a label template, use it. -->
-        <ng-template [ngIf]="tab.templateLabel" [ngIfElse]="tabTextLabel">
-          <ng-template [cdkPortalOutlet]="tab.templateLabel"></ng-template>
-        </ng-template>
-
-        <!-- If there is not a label template, fall back to the text label. -->
-        <ng-template #tabTextLabel>{{tab.textLabel}}</ng-template>
+      <span class="mdc-tab__content">
+        <span class="mdc-tab__text-label">
+          <!--
+            If there is a label template, use it, otherwise fall back to the text label.
+            Note that we don't have indentation around the text label, because it adds
+            whitespace around the text which breaks some internal tests.
+          -->
+          @if (tab.templateLabel) {
+            <ng-template [cdkPortalOutlet]="tab.templateLabel"></ng-template>
+          } @else {{{tab.textLabel}}}
+        </span>
       </span>
-    </span>
-  </div>
+    </div>
+  }
 </mat-tab-header>
 
 <div
   class="mat-mdc-tab-body-wrapper"
   [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
   #tabBodyWrapper>
-  <mat-tab-body role="tabpanel"
-               *ngFor="let tab of _tabs; let i = index"
-               [id]="_getTabContentId(i)"
-               [attr.tabindex]="(contentTabIndex != null && selectedIndex === i) ? contentTabIndex : null"
-               [attr.aria-labelledby]="_getTabLabelId(i)"
-               [attr.aria-hidden]="selectedIndex !== i"
-               [class.mat-mdc-tab-body-active]="selectedIndex === i"
-               [ngClass]="tab.bodyClass"
-               [content]="tab.content!"
-               [position]="tab.position!"
-               [origin]="tab.origin"
-               [animationDuration]="animationDuration"
-               [preserveContent]="preserveContent"
-               (_onCentered)="_removeTabBodyWrapperHeight()"
-               (_onCentering)="_setTabBodyWrapperHeight($event)">
-  </mat-tab-body>
+  @for (tab of _tabs; track tab; let i = $index) {
+    <mat-tab-body role="tabpanel"
+                 [id]="_getTabContentId(i)"
+                 [attr.tabindex]="(contentTabIndex != null && selectedIndex === i) ? contentTabIndex : null"
+                 [attr.aria-labelledby]="_getTabLabelId(i)"
+                 [attr.aria-hidden]="selectedIndex !== i"
+                 [class.mat-mdc-tab-body-active]="selectedIndex === i"
+                 [ngClass]="tab.bodyClass"
+                 [content]="tab.content!"
+                 [position]="tab.position!"
+                 [origin]="tab.origin"
+                 [animationDuration]="animationDuration"
+                 [preserveContent]="preserveContent"
+                 (_onCentered)="_removeTabBodyWrapperHeight()"
+                 (_onCentering)="_setTabBodyWrapperHeight($event)">
+    </mat-tab-body>
+  }
 </div>
diff --git a/tools/public_api_guard/material/chips.md b/tools/public_api_guard/material/chips.md
index 532ec1e2be14..66a167b61624 100644
--- a/tools/public_api_guard/material/chips.md
+++ b/tools/public_api_guard/material/chips.md
@@ -26,7 +26,6 @@ import { FormGroupDirective } from '@angular/forms';
 import { HasTabIndex } from '@angular/material/core';
 import * as i0 from '@angular/core';
 import * as i11 from '@angular/material/core';
-import * as i12 from '@angular/common';
 import { InjectionToken } from '@angular/core';
 import { MatFormField } from '@angular/material/form-field';
 import { MatFormFieldControl } from '@angular/material/form-field';
@@ -413,7 +412,7 @@ export class MatChipRow extends MatChip implements AfterViewInit {
     // (undocumented)
     _isRippleDisabled(): boolean;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "*", "[matChipEditInput]", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "[matChipEditInput]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipRow, [null, null, null, null, null, { optional: true; }, { optional: true; }, { attribute: "tabindex"; }]>;
 }
@@ -483,7 +482,7 @@ export class MatChipsModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatChipsModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatChipsModule, [typeof i1.MatChipAction, typeof i2.MatChip, typeof i3.MatChipAvatar, typeof i4.MatChipEditInput, typeof i5.MatChipGrid, typeof i6.MatChipInput, typeof i7.MatChipListbox, typeof i8.MatChipOption, typeof i3.MatChipRemove, typeof i9.MatChipRow, typeof i10.MatChipSet, typeof i3.MatChipTrailingIcon], [typeof i11.MatCommonModule, typeof i12.CommonModule, typeof i11.MatRippleModule], [typeof i11.MatCommonModule, typeof i2.MatChip, typeof i3.MatChipAvatar, typeof i4.MatChipEditInput, typeof i5.MatChipGrid, typeof i6.MatChipInput, typeof i7.MatChipListbox, typeof i8.MatChipOption, typeof i3.MatChipRemove, typeof i9.MatChipRow, typeof i10.MatChipSet, typeof i3.MatChipTrailingIcon]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatChipsModule, [typeof i1.MatChipAction, typeof i2.MatChip, typeof i3.MatChipAvatar, typeof i4.MatChipEditInput, typeof i5.MatChipGrid, typeof i6.MatChipInput, typeof i7.MatChipListbox, typeof i8.MatChipOption, typeof i3.MatChipRemove, typeof i9.MatChipRow, typeof i10.MatChipSet, typeof i3.MatChipTrailingIcon], [typeof i11.MatCommonModule, typeof i11.MatRippleModule], [typeof i11.MatCommonModule, typeof i2.MatChip, typeof i3.MatChipAvatar, typeof i4.MatChipEditInput, typeof i5.MatChipGrid, typeof i6.MatChipInput, typeof i7.MatChipListbox, typeof i8.MatChipOption, typeof i3.MatChipRemove, typeof i9.MatChipRow, typeof i10.MatChipSet, typeof i3.MatChipTrailingIcon]>;
 }
 
 // @public
diff --git a/tools/public_api_guard/material/core.md b/tools/public_api_guard/material/core.md
index 74f69a1c9429..a3734ebc1751 100644
--- a/tools/public_api_guard/material/core.md
+++ b/tools/public_api_guard/material/core.md
@@ -15,7 +15,6 @@ import { FormGroupDirective } from '@angular/forms';
 import { HighContrastModeDetector } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/cdk/bidi';
-import * as i4 from '@angular/common';
 import { InjectionToken } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { NgForm } from '@angular/forms';
@@ -300,7 +299,7 @@ export class MatOptionModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatOptionModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatOptionModule, [typeof i1_3.MatOption, typeof i2.MatOptgroup], [typeof i3.MatRippleModule, typeof i4.CommonModule, typeof i1_2.MatCommonModule, typeof i6.MatPseudoCheckboxModule], [typeof i1_3.MatOption, typeof i2.MatOptgroup]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatOptionModule, [typeof i1_3.MatOption, typeof i2.MatOptgroup], [typeof i3.MatRippleModule, typeof i1_2.MatCommonModule, typeof i5.MatPseudoCheckboxModule], [typeof i1_3.MatOption, typeof i2.MatOptgroup]>;
 }
 
 // @public
diff --git a/tools/public_api_guard/material/expansion.md b/tools/public_api_guard/material/expansion.md
index b5b8d04ccdc1..921bbcdf0722 100644
--- a/tools/public_api_guard/material/expansion.md
+++ b/tools/public_api_guard/material/expansion.md
@@ -21,10 +21,9 @@ import { FocusMonitor } from '@angular/cdk/a11y';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { HasTabIndex } from '@angular/material/core';
 import * as i0 from '@angular/core';
-import * as i5 from '@angular/common';
-import * as i6 from '@angular/material/core';
-import * as i7 from '@angular/cdk/accordion';
-import * as i8 from '@angular/cdk/portal';
+import * as i5 from '@angular/material/core';
+import * as i6 from '@angular/cdk/accordion';
+import * as i7 from '@angular/cdk/portal';
 import { InjectionToken } from '@angular/core';
 import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
@@ -96,7 +95,7 @@ export class MatExpansionModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatExpansionModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatExpansionModule, [typeof i1.MatAccordion, typeof i2.MatExpansionPanel, typeof i2.MatExpansionPanelActionRow, typeof i3.MatExpansionPanelHeader, typeof i3.MatExpansionPanelTitle, typeof i3.MatExpansionPanelDescription, typeof i4.MatExpansionPanelContent], [typeof i5.CommonModule, typeof i6.MatCommonModule, typeof i7.CdkAccordionModule, typeof i8.PortalModule], [typeof i1.MatAccordion, typeof i2.MatExpansionPanel, typeof i2.MatExpansionPanelActionRow, typeof i3.MatExpansionPanelHeader, typeof i3.MatExpansionPanelTitle, typeof i3.MatExpansionPanelDescription, typeof i4.MatExpansionPanelContent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatExpansionModule, [typeof i1.MatAccordion, typeof i2.MatExpansionPanel, typeof i2.MatExpansionPanelActionRow, typeof i3.MatExpansionPanelHeader, typeof i3.MatExpansionPanelTitle, typeof i3.MatExpansionPanelDescription, typeof i4.MatExpansionPanelContent], [typeof i5.MatCommonModule, typeof i6.CdkAccordionModule, typeof i7.PortalModule], [typeof i1.MatAccordion, typeof i2.MatExpansionPanel, typeof i2.MatExpansionPanelActionRow, typeof i3.MatExpansionPanelHeader, typeof i3.MatExpansionPanelTitle, typeof i3.MatExpansionPanelDescription, typeof i4.MatExpansionPanelContent]>;
 }
 
 // @public
diff --git a/tools/public_api_guard/material/paginator.md b/tools/public_api_guard/material/paginator.md
index 7e161bbe7dee..ef6fd8b3dc2f 100644
--- a/tools/public_api_guard/material/paginator.md
+++ b/tools/public_api_guard/material/paginator.md
@@ -12,10 +12,9 @@ import { _Constructor } from '@angular/material/core';
 import { EventEmitter } from '@angular/core';
 import { HasInitialized } from '@angular/material/core';
 import * as i0 from '@angular/core';
-import * as i2 from '@angular/common';
-import * as i3 from '@angular/material/button';
-import * as i4 from '@angular/material/select';
-import * as i5 from '@angular/material/tooltip';
+import * as i2 from '@angular/material/button';
+import * as i3 from '@angular/material/select';
+import * as i4 from '@angular/material/tooltip';
 import { InjectionToken } from '@angular/core';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
 import { NumberInput } from '@angular/cdk/coercion';
@@ -112,7 +111,7 @@ export class MatPaginatorModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatPaginatorModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatPaginatorModule, [typeof i1.MatPaginator], [typeof i2.CommonModule, typeof i3.MatButtonModule, typeof i4.MatSelectModule, typeof i5.MatTooltipModule], [typeof i1.MatPaginator]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatPaginatorModule, [typeof i1.MatPaginator], [typeof i2.MatButtonModule, typeof i3.MatSelectModule, typeof i4.MatTooltipModule], [typeof i1.MatPaginator]>;
 }
 
 // @public
diff --git a/tools/public_api_guard/material/sidenav.md b/tools/public_api_guard/material/sidenav.md
index 24df461e7eef..7e54f760cfe4 100644
--- a/tools/public_api_guard/material/sidenav.md
+++ b/tools/public_api_guard/material/sidenav.md
@@ -20,9 +20,8 @@ import { FocusMonitor } from '@angular/cdk/a11y';
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { FocusTrapFactory } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import * as i3 from '@angular/common';
-import * as i4 from '@angular/material/core';
-import * as i5 from '@angular/cdk/scrolling';
+import * as i3 from '@angular/material/core';
+import * as i4 from '@angular/cdk/scrolling';
 import { InjectionToken } from '@angular/core';
 import { InteractivityChecker } from '@angular/cdk/a11y';
 import { NgZone } from '@angular/core';
@@ -200,7 +199,7 @@ export class MatSidenavModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatSidenavModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSidenavModule, [typeof i1.MatDrawer, typeof i1.MatDrawerContainer, typeof i1.MatDrawerContent, typeof i2.MatSidenav, typeof i2.MatSidenavContainer, typeof i2.MatSidenavContent], [typeof i3.CommonModule, typeof i4.MatCommonModule, typeof i5.CdkScrollableModule], [typeof i5.CdkScrollableModule, typeof i4.MatCommonModule, typeof i1.MatDrawer, typeof i1.MatDrawerContainer, typeof i1.MatDrawerContent, typeof i2.MatSidenav, typeof i2.MatSidenavContainer, typeof i2.MatSidenavContent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSidenavModule, [typeof i1.MatDrawer, typeof i1.MatDrawerContainer, typeof i1.MatDrawerContent, typeof i2.MatSidenav, typeof i2.MatSidenavContainer, typeof i2.MatSidenavContent], [typeof i3.MatCommonModule, typeof i4.CdkScrollableModule], [typeof i4.CdkScrollableModule, typeof i3.MatCommonModule, typeof i1.MatDrawer, typeof i1.MatDrawerContainer, typeof i1.MatDrawerContent, typeof i2.MatSidenav, typeof i2.MatSidenavContainer, typeof i2.MatSidenavContent]>;
 }
 
 // @public
diff --git a/tools/public_api_guard/material/slide-toggle.md b/tools/public_api_guard/material/slide-toggle.md
index 60b74668c47b..17a07ffddb06 100644
--- a/tools/public_api_guard/material/slide-toggle.md
+++ b/tools/public_api_guard/material/slide-toggle.md
@@ -13,7 +13,6 @@ import { EventEmitter } from '@angular/core';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import * as i3 from '@angular/material/core';
-import * as i4 from '@angular/common';
 import { InjectionToken } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { Provider } from '@angular/core';
@@ -119,7 +118,7 @@ export class MatSlideToggleModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatSlideToggleModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSlideToggleModule, [typeof i2.MatSlideToggle], [typeof _MatSlideToggleRequiredValidatorModule, typeof i3.MatCommonModule, typeof i3.MatRippleModule, typeof i4.CommonModule], [typeof _MatSlideToggleRequiredValidatorModule, typeof i2.MatSlideToggle, typeof i3.MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSlideToggleModule, [typeof i2.MatSlideToggle], [typeof _MatSlideToggleRequiredValidatorModule, typeof i3.MatCommonModule, typeof i3.MatRippleModule], [typeof _MatSlideToggleRequiredValidatorModule, typeof i2.MatSlideToggle, typeof i3.MatCommonModule]>;
 }
 
 // @public
diff --git a/tools/public_api_guard/material/slider.md b/tools/public_api_guard/material/slider.md
index 756f72cc3a95..b21987e4e7c7 100644
--- a/tools/public_api_guard/material/slider.md
+++ b/tools/public_api_guard/material/slider.md
@@ -17,7 +17,6 @@ import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import * as i0 from '@angular/core';
 import * as i4 from '@angular/material/core';
-import * as i5 from '@angular/common';
 import { MatRipple } from '@angular/material/core';
 import { NgZone } from '@angular/core';
 import { NumberInput } from '@angular/cdk/coercion';
@@ -137,7 +136,7 @@ export class MatSliderModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatSliderModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSliderModule, [typeof i1.MatSlider, typeof i2.MatSliderThumb, typeof i2.MatSliderRangeThumb, typeof i3.MatSliderVisualThumb], [typeof i4.MatCommonModule, typeof i5.CommonModule, typeof i4.MatRippleModule], [typeof i1.MatSlider, typeof i2.MatSliderThumb, typeof i2.MatSliderRangeThumb]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSliderModule, [typeof i1.MatSlider, typeof i2.MatSliderThumb, typeof i2.MatSliderRangeThumb, typeof i3.MatSliderVisualThumb], [typeof i4.MatCommonModule, typeof i4.MatRippleModule], [typeof i1.MatSlider, typeof i2.MatSliderThumb, typeof i2.MatSliderRangeThumb]>;
 }
 
 // @public (undocumented)
diff --git a/tools/public_api_guard/material/sort.md b/tools/public_api_guard/material/sort.md
index 13e0cf8b9d6c..4acf67bd612f 100644
--- a/tools/public_api_guard/material/sort.md
+++ b/tools/public_api_guard/material/sort.md
@@ -17,8 +17,7 @@ import { EventEmitter } from '@angular/core';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { HasInitialized } from '@angular/material/core';
 import * as i0 from '@angular/core';
-import * as i3 from '@angular/common';
-import * as i4 from '@angular/material/core';
+import * as i3 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
 import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
@@ -166,7 +165,7 @@ export class MatSortModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatSortModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSortModule, [typeof i1.MatSort, typeof i2.MatSortHeader], [typeof i3.CommonModule, typeof i4.MatCommonModule], [typeof i1.MatSort, typeof i2.MatSortHeader]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSortModule, [typeof i1.MatSort, typeof i2.MatSortHeader], [typeof i3.MatCommonModule], [typeof i1.MatSort, typeof i2.MatSortHeader]>;
 }
 
 // @public