Minor code clean up based on review.

Author: jwshinjwshin

src/cdk/stepper/step-label.ts

@@ -9,7 +9,7 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
-  selector: 'cdkStepLabel',
+  selector: 'cdk-step-label',
 })
 export class CdkStepLabel {
   constructor(public template: TemplateRef<any>) { }

src/cdk/stepper/stepper.ts

@@ -32,16 +32,16 @@ let nextId = 0;
 /** Change event emitted on selection changes. */
 export class CdkStepperSelectionEvent {
   /** The index of the step that is newly selected during this change event. */
-  newIndex: number;
+  selectedIndex: number;
 
   /** The index of the step that was previously selected. */
-  oldIndex: number;
+  previouslySelectedIndex: number;
 
   /** The new step component that is selected ruing this change event. */
-  newStep: CdkStep;
+  selectedStep: CdkStep;
 
   /** The step component that was previously selected. */
-  oldStep: CdkStep;
+  previouslySelectedStep: CdkStep;
 }
 
 @Component({
@@ -70,7 +70,7 @@ export class CdkStep {
 @Directive({
   selector: 'cdk-stepper',
   host: {
-    '(focus)': '_setStepfocused()',
+    '(focus)': '_setStepFocused()',
     '(keydown)': '_onKeydown($event)',
   },
 })
@@ -79,14 +79,15 @@ export class CdkStepper {
   @ContentChildren(CdkStep) _steps: QueryList<CdkStep>;
 
   /** The list of step headers of the steps in the stepper. */
-  @ViewChildren('stepHeader') _stepHeader: QueryList<ElementRef>;
+  _stepHeader: QueryList<ElementRef>;
 
   /** The index of the selected step. */
   get selectedIndex() { return this._selectedIndex; }
   set selectedIndex(index: number) {
-    if (this._selectedIndex == index) { return; }
-    this._emitStepperSelectionEvent(index);
-    this._setStepFocused(this._selectedIndex);
+    if (this._selectedIndex != index) {
+      this._emitStepperSelectionEvent(index);
+      this._setStepFocused(this._selectedIndex);
+    }
   }
   private _selectedIndex: number = 0;
 
@@ -113,14 +114,12 @@ export class CdkStepper {
 
   /** Selects and focuses the next step in list. */
   next(): void {
-    if (this._selectedIndex == this._steps.length - 1) { return; }
-    this.selectedIndex++;
+    this.selectedIndex = Math.min(this._selectedIndex + 1, this._steps.length - 1);
   }
 
   /** Selects and focuses the previous step in list. */
   previous(): void {
-    if (this._selectedIndex == 0) { return; }
-    this.selectedIndex--;
+    this.selectedIndex = Math.max(this._selectedIndex - 1, 0);
   }
 
   /** Returns a unique id for each step label element. */
@@ -134,14 +133,14 @@ export class CdkStepper {
   }
 
   private _emitStepperSelectionEvent(newIndex: number): void {
-    const event = new CdkStepperSelectionEvent();
-    event.oldIndex = this._selectedIndex;
-    event.newIndex = newIndex;
-    let stepsArray = this._steps.toArray();
-    event.oldStep = stepsArray[this._selectedIndex];
-    event.newStep = stepsArray[newIndex];
+    const stepsArray = this._steps.toArray();
+    this.selectionChange.emit({
+      selectedIndex: newIndex,
+      previouslySelectedIndex: this._selectedIndex,
+      selectedStep: stepsArray[newIndex],
+      previouslySelectedStep: stepsArray[this._selectedIndex],
+    });
     this._selectedIndex = newIndex;
-    this.selectionChange.emit(event);
   }
 
   _onKeydown(event: KeyboardEvent) {

src/lib/stepper/stepper-horizontal.html

@@ -12,7 +12,7 @@
 
     <div class="mat-stepper-label">
       <!-- If there is a label template, use it. -->
-      <ng-container *ngIf="step.stepLabel"[ngTemplateOutlet]="step.stepLabel.template">
+      <ng-container *ngIf="step.stepLabel" [ngTemplateOutlet]="step.stepLabel.template">
       </ng-container>
       <!-- It there is no label template, fall back to the text label. -->
       <div *ngIf="!step.stepLabel">{{step.label}}</div>

src/lib/stepper/stepper-horizontal.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ContentChildren, forwardRef, QueryList} from '@angular/core';
+import {Component, ContentChildren, QueryList} from '@angular/core';
 import {MdStep} from './step';
 import {MdStepper} from './stepper';
 
@@ -20,7 +20,7 @@ import {MdStepper} from './stepper';
     'class': 'mat-stepper-horizontal',
     'role': 'tablist',
   },
-  providers: [{ provide: MdStepper, useExisting: forwardRef(() => MdHorizontalStepper) }]
+  providers: [{ provide: MdStepper, useExisting: MdHorizontalStepper }]
 })
 export class MdHorizontalStepper extends MdStepper {
   /** Steps that the horizontal stepper holds. */

src/lib/stepper/stepper-vertical.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, ContentChildren, forwardRef, QueryList} from '@angular/core';
+import {Component, ContentChildren, QueryList} from '@angular/core';
 import {MdStep} from './step';
 import {MdStepper} from './stepper';
 
@@ -20,7 +20,7 @@ import {MdStepper} from './stepper';
     'class': 'mat-stepper-vertical',
     'role': 'tablist',
   },
-  providers: [{ provide: MdStepper, useExisting: forwardRef(() => MdVerticalStepper) }]
+  providers: [{ provide: MdStepper, useExisting: MdVerticalStepper }]
 })
 export class MdVerticalStepper extends MdStepper {
   /** Steps that the vertical stepper holds. */

src/lib/stepper/stepper.ts

@@ -7,5 +7,8 @@
  */
 
 import {CdkStepper} from '@angular/cdk';
+import {ElementRef, QueryList, ViewChildren} from '@angular/core';
 
-export class MdStepper extends CdkStepper { }
+export class MdStepper extends CdkStepper {
+  @ViewChildren('stepHeader') _stepHeader: QueryList<ElementRef>;
+}