fix(stepper): switch to OnPush change detection (#7119)

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';
@@ -63,8 +66,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;
 
@@ -74,12 +78,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; }
@@ -116,6 +119,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({
@@ -166,7 +175,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++;
   }
 
@@ -190,6 +201,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;
@@ -220,6 +236,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

@@ -16,6 +16,7 @@ import {
   OnDestroy,
   ElementRef,
   Renderer2,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import {MatStepLabel} from './step-label';
 import {MatStepperIntl} from './stepper-intl';
@@ -33,6 +34,7 @@ import {Subscription} from 'rxjs/Subscription';
   },
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatStepHeader implements OnDestroy {
   private _intlSubscription: Subscription;

src/lib/stepper/stepper.ts

@@ -20,6 +20,7 @@ import {
   SkipSelf,
   ViewChildren,
   ViewEncapsulation,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import {NgControl, FormGroupDirective, NgForm} from '@angular/forms';
 import {ErrorStateMatcher} from '@angular/material/core';
@@ -38,6 +39,7 @@ export const _MatStepper = CdkStepper;
   encapsulation: ViewEncapsulation.None,
   exportAs: 'matStep',
   preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatStep extends _MatStep implements ErrorStateMatcher {
   /** Content for step label given by <ng-template matStepLabel>. */
@@ -94,6 +96,7 @@ export class MatStepper extends _MatStepper {
   providers: [{provide: MatStepper, useExisting: MatHorizontalStepper}],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatHorizontalStepper extends MatStepper { }
 
@@ -119,5 +122,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": [