refactor(mdc-prototypes): do not mark components dirty in input setters

In order to make our component inputs which use boolean coercion more
consistent with other inputs which aren't declared through setters, we should
no longer call `markForCheck` within input setters as Angular automatically
runs change detection if input values are updated.

This breaks the programmatic usage of these inputs as Angular in that case
won't be able to run change detection (since it can't detect that the value
of the input changes).. though this is a more general problem with the
`OnPush` strategy as we can't have consistent behavior for programmatic
input updates without switching *every* input to a setter.

Instead, in order to still support programmatic input updates, we
should expose a method that allows developers to mark the MDC
components as dirty. This is necessary so that developers which
_really_ need to update programmatically (e.g. through `ViewChild`)
can still update the componet to reflect the changes. The benefit is
that we don't need to convert every input to a setter w/ markForCheck
in order to make the OnPush inputs behavior consistent.

Related to COMP-170

Author: devversion

src/material-experimental/mdc-checkbox/checkbox.spec.ts

@@ -164,15 +164,6 @@ describe('MatCheckbox', () => {
          expect(testComponent.isIndeterminate).toBe(true);
        }));
 
-    it('should change native element checked when check programmatically', fakeAsync(() => {
-         expect(inputElement.checked).toBe(false);
-
-         checkboxInstance.checked = true;
-         fixture.detectChanges();
-
-         expect(inputElement.checked).toBe(true);
-       }));
-
     it('should toggle checked state on click', fakeAsync(() => {
          expect(checkboxInstance.checked).toBe(false);
 
@@ -855,11 +846,9 @@ describe('MatCheckbox', () => {
            // fire and not result in a changed after checked exception. Related: #12323
            inputElement.focus();
 
-           // Flush the two nested timeouts from the FocusMonitor that are being created on `focus`.
-           flush();
-
-           checkboxInstance.disabled = true;
+           fixture.componentInstance.isDisabled = true;
            fixture.detectChanges();
+
            flushMicrotasks();
          }).not.toThrow();
        }));
@@ -1005,11 +994,13 @@ class SingleCheckbox {
 
 /** Simple component for testing an MatCheckbox with required ngModel. */
 @Component({
-  template: `<mat-checkbox [required]="isRequired" [(ngModel)]="isGood">Be good</mat-checkbox>`,
+  template: `<mat-checkbox [required]="isRequired" [(ngModel)]="isGood"
+                           [disabled]="isDisabled">Be good</mat-checkbox>`,
 })
 class CheckboxWithNgModel {
   isGood: boolean = false;
   isRequired: boolean = true;
+  isDisabled: boolean = false;
 }
 
 @Component({
@@ -1054,6 +1045,7 @@ class CheckboxUsingViewChild {
 
   set isDisabled(value: boolean) {
     this.checkbox.disabled = value;
+    this.checkbox.markForCheck();
   }
 }
 

src/material-experimental/mdc-checkbox/checkbox.ts

@@ -120,7 +120,6 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
   }
   set checked(checked) {
     this._checked = coerceBooleanProperty(checked);
-    this._changeDetectorRef.markForCheck();
   }
   private _checked = false;
 
@@ -136,7 +135,6 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
   }
   set indeterminate(indeterminate) {
     this._indeterminate = coerceBooleanProperty(indeterminate);
-    this._changeDetectorRef.markForCheck();
   }
   private _indeterminate = false;
 
@@ -147,7 +145,6 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
   }
   set disabled(disabled) {
     this._disabled = coerceBooleanProperty(disabled);
-    this._changeDetectorRef.markForCheck();
   }
   private _disabled = false;
 
@@ -158,7 +155,6 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
   }
   set required(required) {
     this._required = coerceBooleanProperty(required);
-    this._changeDetectorRef.markForCheck();
   }
   private _required = false;
 
@@ -284,6 +280,7 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
    */
   setDisabledState(isDisabled: boolean) {
     this.disabled = isDisabled;
+    this._changeDetectorRef.markForCheck();
   }
 
   /**
@@ -305,6 +302,14 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
     this.checked = !this.checked;
   }
 
+  /**
+   * Marks the component for check. This can be called after inputs have been updated
+   * programmatically and the component should be updated to reflect the changes.
+   */
+  markForCheck() {
+    this._changeDetectorRef.markForCheck();
+  }
+
   /** Triggers the checkbox ripple. */
   _activateRipple() {
     if (!this.disabled && !this.disableRipple && this._animationMode != 'NoopAnimations') {

src/material-experimental/mdc-slide-toggle/slide-toggle.spec.ts

@@ -1,14 +1,7 @@
 import {BidiModule, Direction} from '@angular/cdk/bidi';
 import {dispatchFakeEvent} from '@angular/cdk/testing';
 import {Component} from '@angular/core';
-import {
-  ComponentFixture,
-  fakeAsync,
-  flush,
-  flushMicrotasks,
-  TestBed,
-  tick,
-} from '@angular/core/testing';
+import {ComponentFixture, fakeAsync, flushMicrotasks, TestBed, tick} from '@angular/core/testing';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
 import {By} from '@angular/platform-browser';
 import {MatSlideToggle, MatSlideToggleChange, MatSlideToggleModule} from './index';
@@ -481,11 +474,9 @@ describe('MatSlideToggle with forms', () => {
         // fire and not result in a changed after checked exception. Related: #12323
         inputElement.focus();
 
-        // Flush the two nested timeouts from the FocusMonitor that are being created on `focus`.
-        flush();
-
-        slideToggle.disabled = true;
+        fixture.componentInstance.isDisabled = true;
         fixture.detectChanges();
+
         flushMicrotasks();
       }).not.toThrow();
     }));
@@ -497,6 +488,7 @@ describe('MatSlideToggle with forms', () => {
       expect(slideToggleModel.touched).toBe(false);
 
       slideToggle.checked = true;
+      slideToggle.markForCheck();
       fixture.detectChanges();
 
       expect(slideToggleModel.touched).toBe(false);
@@ -736,10 +728,11 @@ class SlideToggleWithForm {
 }
 
 @Component({
-  template: `<mat-slide-toggle [(ngModel)]="modelValue"></mat-slide-toggle>`
+  template: `<mat-slide-toggle [(ngModel)]="modelValue" [disabled]="isDisabled"></mat-slide-toggle>`
 })
 class SlideToggleWithModel {
   modelValue = false;
+  isDisabled = false;
 }
 
 @Component({

src/material-experimental/mdc-slide-toggle/slide-toggle.ts

@@ -154,8 +154,6 @@ export class MatSlideToggle implements ControlValueAccessor, AfterViewInit, OnDe
     if (this._foundation) {
       this._foundation.setChecked(this._checked);
     }
-
-    this._changeDetectorRef.markForCheck();
   }
 
   /** Whether to disable the ripple on this checkbox. */
@@ -179,8 +177,6 @@ export class MatSlideToggle implements ControlValueAccessor, AfterViewInit, OnDe
     if (this._foundation) {
       this._foundation.setDisabled(this._disabled);
     }
-
-    this._changeDetectorRef.markForCheck();
   }
   private _disabled = false;
 
@@ -268,6 +264,7 @@ export class MatSlideToggle implements ControlValueAccessor, AfterViewInit, OnDe
   /** Implemented as part of ControlValueAccessor. */
   writeValue(value: any): void {
     this.checked = !!value;
+    this._changeDetectorRef.markForCheck();
   }
 
   /** Implemented as part of ControlValueAccessor. */
@@ -297,6 +294,14 @@ export class MatSlideToggle implements ControlValueAccessor, AfterViewInit, OnDe
     this._onChange(this.checked);
   }
 
+  /**
+   * Marks the component for check. This can be called after inputs have been updated
+   * programmatically and the component should be updated to reflect the changes.
+   */
+  markForCheck() {
+    this._changeDetectorRef.markForCheck();
+  }
+
   /** Handles blur events on the native input. */
   _onBlur() {
     // When a focused element becomes disabled, the browser *immediately* fires a blur event.