fix(stepper): switch to OnPush change detection

* Adds OnPush change detection to all stepper-related components.
* Enables the tslint rule that requires OnPush for all components.

Author: crisbeto

src/cdk/stepper/stepper.ts

@@ -24,7 +24,10 @@ import {
   ViewEncapsulation,
   Optional,
   Inject,
-  forwardRef
+  forwardRef,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  OnChanges,
 } from '@angular/core';
 import {LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE} from '@angular/cdk/keycodes';
 import {CdkStepLabel} from './step-label';
@@ -62,8 +65,9 @@ export class StepperSelectionEvent {
   templateUrl: 'step.html',
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CdkStep {
+export class CdkStep implements OnChanges {
   /** Template for step label if it exists. */
   @ContentChild(CdkStepLabel) stepLabel: CdkStepLabel;
 
@@ -73,12 +77,11 @@ export class CdkStep {
   /** The top level abstract control of the step. */
   @Input() stepControl: AbstractControl;
 
-  /** Whether user has seen the expanded step content or not . */
+  /** Whether user has seen the expanded step content or not. */
   interacted = false;
 
   /** Label of the step. */
-  @Input()
-  label: string;
+  @Input() label: string;
 
   @Input()
   get editable() { return this._editable; }
@@ -115,6 +118,12 @@ export class CdkStep {
   select(): void {
     this._stepper.selected = this;
   }
+
+  ngOnChanges() {
+    // Since basically all inputs of the MdStep get proxied through the view down to the
+    // underlying MdStepHeader, we have to make sure that change detection runs correctly.
+    this._stepper._stateChanged();
+  }
 }
 
 @Directive({
@@ -164,7 +173,9 @@ export class CdkStepper {
   /** Used to track unique ID for each stepper component. */
   _groupId: number;
 
-  constructor(@Optional() private _dir: Directionality) {
+  constructor(
+    @Optional() private _dir: Directionality,
+    private _changeDetectorRef: ChangeDetectorRef) {
     this._groupId = nextId++;
   }
 
@@ -188,6 +199,11 @@ export class CdkStepper {
     return `mat-step-content-${this._groupId}-${i}`;
   }
 
+  /** Marks the component to be change detected. */
+  _stateChanged() {
+    this._changeDetectorRef.markForCheck();
+  }
+
   /** Returns position state of the step with the given index. */
   _getAnimationDirection(index: number): StepContentPositionState {
     const position = index - this._selectedIndex;
@@ -218,6 +234,7 @@ export class CdkStepper {
       previouslySelectedStep: stepsArray[this._selectedIndex],
     });
     this._selectedIndex = newIndex;
+    this._stateChanged();
   }
 
   _onKeydown(event: KeyboardEvent) {

src/lib/dialog/dialog-container.ts

@@ -17,6 +17,7 @@ import {
   ChangeDetectorRef,
   ViewChild,
   ViewEncapsulation,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import {animate, AnimationEvent, state, style, transition, trigger} from '@angular/animations';
 import {DOCUMENT} from '@angular/platform-browser';
@@ -51,6 +52,9 @@ export function throwMdDialogContentAlreadyAttachedError() {
   styleUrls: ['dialog.css'],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  // Using OnPush for dialogs caused some G3 sync issues. Disabled until we can track them down.
+  // tslint:disable-next-line:validate-decorators
+  changeDetection: ChangeDetectionStrategy.Default,
   animations: [
     trigger('slideDialog', [
       // Note: The `enter` animation doesn't transition to something like `translate3d(0, 0, 0)

src/lib/stepper/step-header.ts

@@ -7,7 +7,7 @@
  */
 
 import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
-import {Component, Input, ViewEncapsulation} from '@angular/core';
+import {Component, Input, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
 import {MATERIAL_COMPATIBILITY_MODE} from '@angular/material/core';
 import {MdStepLabel} from './step-label';
 
@@ -24,6 +24,7 @@ import {MdStepLabel} from './step-label';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdStepHeader {
   /** Icon for the given step. */

src/lib/stepper/stepper.ts

@@ -21,6 +21,7 @@ import {
   SkipSelf,
   ViewChildren,
   ViewEncapsulation,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
 import {
@@ -43,6 +44,7 @@ export const _MdStepper = CdkStepper;
   providers: [{provide: MD_ERROR_GLOBAL_OPTIONS, useExisting: MdStep}],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdStep extends _MdStep implements ErrorOptions {
   /** Content for step label given by <ng-template matStepLabel> or <ng-template mdStepLabel>. */
@@ -108,6 +110,7 @@ export class MdStepper extends _MdStepper {
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdHorizontalStepper extends MdStepper { }
 
@@ -133,5 +136,6 @@ export class MdHorizontalStepper extends MdStepper { }
   viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdVerticalStepper extends MdStepper { }

tslint.json

@@ -91,7 +91,8 @@
       "Component": {
         "encapsulation": "\\.None$",
         "moduleId": "^module\\.id$",
-        "preserveWhitespaces": "false$"
+        "preserveWhitespaces": "false$",
+        "changeDetection": "\\.OnPush$"
       }
     }, "src/+(lib|cdk)/**/!(*.spec).ts"],
     "require-license-banner": [