From 29511ff8ffcfb063ce00b9ec8b7320519209d80d Mon Sep 17 00:00:00 2001
From: Michael Hoffmann <hoffmann.michael86@gmx.de>
Date: Mon, 21 Jan 2019 20:32:05 +0100
Subject: [PATCH 1/3] Update creating-a-custom-stepper-using-the-cdk-stepper.md

Simplified step content projection
---
 ...eating-a-custom-stepper-using-the-cdk-stepper.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/guides/creating-a-custom-stepper-using-the-cdk-stepper.md b/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
index 11b55934f6fb..99d5ea93cc63 100644
--- a/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
+++ b/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
@@ -27,6 +27,9 @@ export class CustomStepperComponent extends CdkStepper {
 
   /** The index of the selected step. */
   selectedIndex: number;
+  
+  /** The step that is selected. */
+  selected: CdkStep;
 
   /** The list of step components that the stepper is holding. */
   steps: QueryList<CdkStep>;
@@ -47,12 +50,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>

From 885e0875714391ada9a8e4328aa062c67251b80a Mon Sep 17 00:00:00 2001
From: Michael Hoffmann <hoffmann.michael86@gmx.de>
Date: Mon, 21 Jan 2019 22:25:52 +0100
Subject: [PATCH 2/3] Update creating-a-custom-stepper-using-the-cdk-stepper.md

---
 ...reating-a-custom-stepper-using-the-cdk-stepper.md | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/guides/creating-a-custom-stepper-using-the-cdk-stepper.md b/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
index 99d5ea93cc63..48f1a524c284 100644
--- a/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
+++ b/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
@@ -22,18 +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 step that is selected. */
-  selected: CdkStep;
-
-  /** The list of step components that the stepper is holding. */
-  steps: QueryList<CdkStep>;
-
   onClick(index: number): void {
     this.selectedIndex = index;
   }

From 9e3d4a7abe5baa31477e2c2a483a719eb636ac1d Mon Sep 17 00:00:00 2001
From: Michael Hoffmann <kontakt@mokkapps.de>
Date: Mon, 21 Jan 2019 22:42:30 +0100
Subject: [PATCH 3/3] Updated example

---
 ...k-custom-stepper-without-form-example.html | 10 +++-----
 ...cdk-custom-stepper-without-form-example.ts | 20 +++------------
 .../example-custom-stepper.html               | 25 +++++++++++--------
 3 files changed, 21 insertions(+), 34 deletions(-)

diff --git a/src/material-examples/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.html b/src/material-examples/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.html
index 05e2b1dd3e70..893d5bc18682 100644
--- a/src/material-examples/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.html
+++ b/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>
\ No newline at end of file
+  <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>
diff --git a/src/material-examples/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts b/src/material-examples/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts
index 099c6b289e41..906fe521185a 100644
--- a/src/material-examples/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts
+++ b/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;
   }
diff --git a/src/material-examples/cdk-custom-stepper-without-form/example-custom-stepper.html b/src/material-examples/cdk-custom-stepper-without-form/example-custom-stepper.html
index 411bdee41dae..0f956035ae8a 100644
--- a/src/material-examples/cdk-custom-stepper-without-form/example-custom-stepper.html
+++ b/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>
\ No newline at end of file
+</section>