fix(material/stepper): enable hydration (#28382)

Enables hydration on the stepper and adds a workaround for an issue that prevented the content from being rendered out.
angular · Jan 8, 2024 · 7f601b0 · 7f601b0
1 parent 6f4b12d
commit 7f601b0
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/src/material/stepper/stepper.html b/src/material/stepper/stepper.html
@@ -1,3 +1,13 @@
+<!--
+  We need to project the content somewhere to avoid hydration errors. Some observations:
+  1. This is only necessary on the server.
+  2. We get a hydration error if there aren't any nodes after the `ng-content`.
+  3. We get a hydration error if `ng-content` is wrapped in another element.
+-->
+@if (_isServer) {
+  <ng-content/>
+}
+
 @switch (orientation) {
   @case ('horizontal') {
     <div class="mat-horizontal-stepper-wrapper">

diff --git a/src/material/stepper/stepper.ts b/src/material/stepper/stepper.ts
@@ -25,6 +25,7 @@ import {
   ElementRef,
   EventEmitter,
   forwardRef,
+  inject,
   Inject,
   Input,
   OnDestroy,
@@ -53,6 +54,7 @@ import {
 import {MatStepperIcon, MatStepperIconContext} from './stepper-icon';
 import {MatStepContent} from './step-content';
 import {NgTemplateOutlet} from '@angular/common';
+import {Platform} from '@angular/cdk/platform';
 
 @Component({
   selector: 'mat-step',
@@ -66,6 +68,9 @@ import {NgTemplateOutlet} from '@angular/common';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [CdkPortalOutlet],
+  host: {
+    'hidden': '', // Hide the steps so they don't affect the layout.
+  },
 })
 export class MatStep extends CdkStep implements ErrorStateMatcher, AfterContentInit, OnDestroy {
   private _isSelected = Subscription.EMPTY;
@@ -141,7 +146,6 @@ export class MatStep extends CdkStep implements ErrorStateMatcher, AfterContentI
     '[class.mat-stepper-header-position-bottom]': 'headerPosition === "bottom"',
     '[attr.aria-orientation]': 'orientation',
     'role': 'tablist',
-    'ngSkipHydration': '',
   },
   animations: [
     matStepperAnimations.horizontalStepTransition,
@@ -209,6 +213,9 @@ export class MatStepper extends CdkStepper implements AfterContentInit {
   }
   private _animationDuration = '';
 
+  /** Whether the stepper is rendering on the server. */
+  protected _isServer: boolean = !inject(Platform).isBrowser;
+
   constructor(
     @Optional() dir: Directionality,
     changeDetectorRef: ChangeDetectorRef,

diff --git a/tools/public_api_guard/material/stepper.md b/tools/public_api_guard/material/stepper.md
@@ -137,6 +137,7 @@ export class MatStepper extends CdkStepper implements AfterContentInit {
     headerPosition: 'top' | 'bottom';
     _iconOverrides: Record<string, TemplateRef<MatStepperIconContext>>;
     _icons: QueryList<MatStepperIcon>;
+    protected _isServer: boolean;
     labelPosition: 'bottom' | 'end';
     // (undocumented)
     ngAfterContentInit(): void;
@@ -146,7 +147,7 @@ export class MatStepper extends CdkStepper implements AfterContentInit {
     readonly steps: QueryList<MatStep>;
     _steps: QueryList<MatStep>;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatStepper, "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", ["matStepper", "matVerticalStepper", "matHorizontalStepper"], { "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "animationDone": "animationDone"; }, ["_steps", "_icons"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatStepper, "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", ["matStepper", "matVerticalStepper", "matHorizontalStepper"], { "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "animationDone": "animationDone"; }, ["_steps", "_icons"], ["*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatStepper, [{ optional: true; }, null, null]>;
 }