Update creating-a-custom-stepper-using-the-cdk-stepper.md (#14907)

* Update creating-a-custom-stepper-using-the-cdk-stepper.md

Simplified step content projection

* Update creating-a-custom-stepper-using-the-cdk-stepper.md

* Updated example

Author: Michael Hoffmann

guides/creating-a-custom-stepper-using-the-cdk-stepper.md

@@ -22,15 +22,6 @@ Now we are ready to create our custom stepper component. Therefore, we need to c
   providers: [{ provide: CdkStepper, useExisting: CustomStepperComponent }]
 })
 export class CustomStepperComponent extends CdkStepper {
-  /** Whether the validity of previous steps should be checked or not */
-  linear: boolean;
-
-  /** The index of the selected step. */
-  selectedIndex: number;
-
-  /** The list of step components that the stepper is holding. */
-  steps: QueryList<CdkStep>;
-
   onClick(index: number): void {
     this.selectedIndex = index;
   }
@@ -47,12 +38,10 @@ This is the HTML template of our custom stepper component:
 <section class="container">
   <header><h2>Step {{selectedIndex + 1}}/{{steps.length}}</h2></header>
 
-  <section *ngFor="let step of steps; let i = index;">
-    <div [style.display]="selectedIndex === i ? 'block' : 'none'">
-      <!-- Content from the CdkStep is projected here -->
-      <ng-container [ngTemplateOutlet]="step.content"></ng-container>
-    </div>
-  </section>
+  <div [style.display]="selected ? 'block' : 'none'">
+    <!-- Content from the CdkStep is projected here -->
+    <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
+  </div>
 
   <footer class="step-navigation-bar">
     <button class="nav-button" cdkStepperPrevious>&larr;</button>

src/material-examples/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.html

@@ -1,8 +1,4 @@
 <example-custom-stepper>
-  <cdk-step>
-    <p>This is any content of "Step 1"</p>
-  </cdk-step>
-  <cdk-step>
-      <p>This is any content of "Step 2"</p>
-  </cdk-step>
-</example-custom-stepper>
+  <cdk-step> <p>This is any content of "Step 1"</p> </cdk-step>
+  <cdk-step> <p>This is any content of "Step 2"</p> </cdk-step>
+</example-custom-stepper>

src/material-examples/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts

@@ -1,6 +1,5 @@
-import {Component, QueryList, ChangeDetectorRef} from '@angular/core';
-import {CdkStepper, CdkStep} from '@angular/cdk/stepper';
-import {Directionality} from '@angular/cdk/bidi';
+import {Component} from '@angular/core';
+import {CdkStepper} from '@angular/cdk/stepper';
 
 /** @title A custom CDK stepper without a form */
 @Component({
@@ -15,22 +14,9 @@ export class CdkCustomStepperWithoutFormExample {}
   selector: 'example-custom-stepper',
   templateUrl: './example-custom-stepper.html',
   styleUrls: ['./example-custom-stepper.css'],
-  providers: [{ provide: CdkStepper, useExisting: CustomStepper }],
+  providers: [{ provide: CdkStepper, useExisting: CustomStepper }]
 })
 export class CustomStepper extends CdkStepper {
-  /** Whether the validity of previous steps should be checked or not */
-  linear: boolean;
-
-  /** The index of the selected step. */
-  selectedIndex: number;
-
-  /** The list of step components that the stepper is holding. */
-  steps: QueryList<CdkStep>;
-
-  constructor(dir: Directionality, changeDetectorRef: ChangeDetectorRef) {
-    super(dir, changeDetectorRef);
-  }
-
   onClick(index: number): void {
     this.selectedIndex = index;
   }

src/material-examples/cdk-custom-stepper-without-form/example-custom-stepper.html

@@ -1,17 +1,22 @@
 <section class="example-container">
   <header>
-    <h2>Step {{selectedIndex + 1}}/{{steps.length}}</h2>
+    <h2>Step {{ selectedIndex + 1 }}/{{ steps.length }}</h2>
   </header>
-  
-  <section *ngFor="let step of steps; let i = index; let isLast = last">
-      <div [style.display]="selectedIndex === i ? 'block' : 'none'">
-        <ng-container [ngTemplateOutlet]="step.content"></ng-container>
-      </div>
-  </section>
-  
+
+  <div [style.display]="selected ? 'block' : 'none'">
+    <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
+  </div>
+
   <footer class="example-step-navigation-bar">
     <button class="example-nav-button" cdkStepperPrevious>&larr;</button>
-    <button class="example-step" *ngFor="let step of steps; let i = index;" [ngClass]="{'example-active': selectedIndex === i}" (click)="onClick(i)">Step {{i + 1}}</button>
+    <button
+      class="example-step"
+      *ngFor="let step of steps; let i = index"
+      [ngClass]="{ 'example-active': selectedIndex === i }"
+      (click)="onClick(i)"
+    >
+      Step {{ i + 1 }}
+    </button>
     <button class="example-nav-button" cdkStepperNext>&rarr;</button>
   </footer>
-</section>
+</section>