fix(stepper): not rendering correctly in some cases when step… (#17555)

Fixes an issue where, in some cases, the stepper will stop picking up steps if one of the steps is wrapped in an `ngIf`.

Author: crisbeto

src/material/stepper/stepper.spec.ts

@@ -1175,6 +1175,18 @@ describe('MatStepper', () => {
     });
 
   });
+
+  it('should be able to toggle steps via ngIf', () => {
+    const fixture = createComponent(StepperWithNgIf);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelectorAll('.mat-step-header').length).toBe(1);
+
+    fixture.componentInstance.showStep2 = true;
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelectorAll('.mat-step-header').length).toBe(2);
+  });
 });
 
 /** Asserts that keyboard interaction works correctly. */
@@ -1644,3 +1656,21 @@ class StepperWithAriaInputs {
 })
 class StepperWithIndirectDescendantSteps {
 }
+
+
+@Component({
+  template: `
+    <mat-vertical-stepper>
+      <mat-step>
+        <ng-template matStepLabel>Step 1</ng-template>
+      </mat-step>
+
+      <mat-step *ngIf="showStep2">
+        <ng-template matStepLabel>Step 2</ng-template>
+      </mat-step>
+    </mat-vertical-stepper>
+  `
+})
+class StepperWithNgIf {
+  showStep2 = false;
+}

src/material/stepper/stepper.ts

@@ -51,7 +51,10 @@ import {MatStepperIcon, MatStepperIconContext} from './stepper-icon';
   moduleId: module.id,
   selector: 'mat-step',
   templateUrl: 'step.html',
-  providers: [{provide: ErrorStateMatcher, useExisting: MatStep}],
+  providers: [
+    {provide: ErrorStateMatcher, useExisting: MatStep},
+    {provide: CdkStep, useExisting: MatStep},
+  ],
   encapsulation: ViewEncapsulation.None,
   exportAs: 'matStep',
   changeDetection: ChangeDetectionStrategy.OnPush,