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,9 @@ import {
   ViewEncapsulation,
   Optional,
   Inject,
-  forwardRef
+  forwardRef,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
 } from '@angular/core';
 import {LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE} from '@angular/cdk/keycodes';
 import {CdkStepLabel} from './step-label';
@@ -60,7 +62,8 @@ export class StepperSelectionEvent {
   moduleId: module.id,
   selector: 'cdk-step',
   templateUrl: 'step.html',
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CdkStep {
   /** Template for step label if it exists. */
@@ -72,12 +75,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; }
@@ -163,7 +165,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++;
   }
 
@@ -217,6 +221,7 @@ export class CdkStepper {
       previouslySelectedStep: stepsArray[this._selectedIndex],
     });
     this._selectedIndex = newIndex;
+    this._changeDetectorRef.markForCheck();
   }
 
   _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,13 @@
  */
 
 import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
-import {Component, Input, ViewEncapsulation} from '@angular/core';
+import {
+  Component,
+  Input,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
 import {MATERIAL_COMPATIBILITY_MODE} from '@angular/material/core';
 import {MdStepLabel} from './step-label';
 
@@ -22,14 +28,23 @@ import {MdStepLabel} from './step-label';
     'role': 'tab',
   },
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: false}],
 })
 export class MdStepHeader {
   /** Icon for the given step. */
   @Input() icon: string;
 
   /** Label of the given step. */
-  @Input() label: MdStepLabel | string;
+  @Input()
+  get label() { return this._label; }
+  set label(newLabel: MdStepLabel | string) {
+    if (newLabel !== this._label) {
+      this._label = newLabel;
+      this._changeDetectorRef.markForCheck();
+    }
+  }
+  private _label: MdStepLabel | string;
 
   /** Index of the given step. */
   @Input()
@@ -63,6 +78,8 @@ export class MdStepHeader {
   }
   private _optional: boolean;
 
+  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+
   /** Returns string label of given step if it is a text label. */
   _stringLabel(): string | null {
     return this.label instanceof MdStepLabel ? null : this.label;

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