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 throwMatDialogContentAlreadyAttachedError() {
   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

@@ -8,7 +8,15 @@
 
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
-import {Component, Input, ViewEncapsulation, ElementRef, OnDestroy, Renderer2} from '@angular/core';
+import {
+  Component,
+  Input,
+  ViewEncapsulation,
+  ElementRef,
+  OnDestroy,
+  Renderer2,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import {MatStepLabel} from './step-label';
 
 
@@ -23,6 +31,7 @@ import {MatStepLabel} from './step-label';
   },
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatStepHeader implements OnDestroy {
   /** 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 _MatStepper = CdkStepper;
   providers: [{provide: MAT_ERROR_GLOBAL_OPTIONS, useExisting: MatStep}],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatStep extends _MatStep implements ErrorOptions {
   /** Content for step label given by <ng-template matStepLabel>. */
@@ -107,6 +109,7 @@ export class MatStepper extends _MatStepper {
   providers: [{provide: MatStepper, useExisting: MatHorizontalStepper}],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatHorizontalStepper extends MatStepper { }
 
@@ -131,5 +134,6 @@ export class MatHorizontalStepper extends MatStepper { }
   providers: [{provide: MatStepper, useExisting: MatVerticalStepper}],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatVerticalStepper extends MatStepper { }

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": [