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';
@@ -60,9 +63,10 @@ export class StepperSelectionEvent {
   moduleId: module.id,
   selector: 'cdk-step',
   templateUrl: 'step.html',
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CdkStep {
+export class CdkStep implements OnChanges {
   /** Template for step label if it exists. */
   @ContentChild(CdkStepLabel) stepLabel: CdkStepLabel;
 
@@ -72,12 +76,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; }
@@ -114,6 +117,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({
@@ -163,7 +172,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++;
   }
 
@@ -187,6 +198,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;
@@ -217,6 +233,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';
@@ -50,6 +51,9 @@ export function throwMdDialogContentAlreadyAttachedError() {
   templateUrl: 'dialog-container.html',
   styleUrls: ['dialog.css'],
   encapsulation: ViewEncapsulation.None,
+  // 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';
 
@@ -22,6 +22,7 @@ import {MdStepLabel} from './step-label';
     'role': 'tab',
   },
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: false}],
 })
 export class MdStepHeader {

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 {
@@ -41,7 +42,8 @@ export const _MdStepper = CdkStepper;
   selector: 'md-step, mat-step',
   templateUrl: 'step.html',
   providers: [{provide: MD_ERROR_GLOBAL_OPTIONS, useExisting: MdStep}],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdStep extends _MdStep implements ErrorOptions {
   /** Content for step label given by <ng-template matStepLabel> or <ng-template mdStepLabel>. */
@@ -104,7 +106,8 @@ export class MdStepper extends _MdStepper {
     ])
   ],
   providers: [{provide: MdStepper, useExisting: MdHorizontalStepper}],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdHorizontalStepper extends MdStepper { }
 
@@ -127,6 +130,7 @@ export class MdHorizontalStepper extends MdStepper { }
     ])
   ],
   providers: [{provide: MdStepper, useExisting: MdVerticalStepper}],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdVerticalStepper extends MdStepper { }

tslint.json

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