fix(checkbox): unknown property warning with Ivy during server-side rendering

Ivy's check for whether a property supported is basically `if (propName in element)` which logs a warning if it doesn't match. It seems like Domino hasn't implemented the `indeterminate` property for `input` so Angular ends up logging a warning during server-side rendering. These changes switch to setting the property directly to avoid using a property binding.

Also fixes that the current Material checkbox wasn't coercing the `indeterminate` input to a boolean.

Author: crisbeto

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

@@ -11,7 +11,6 @@
            [attr.value]="value"
            [checked]="checked"
            [disabled]="disabled"
-           [indeterminate]="indeterminate"
            [id]="inputId"
            [required]="required"
            [tabIndex]="tabIndex"

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

@@ -119,6 +119,7 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
   }
   set indeterminate(indeterminate) {
     this._indeterminate = coerceBooleanProperty(indeterminate);
+    this._syncIndeterminate(this._indeterminate);
   }
   private _indeterminate = false;
 
@@ -236,6 +237,7 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
   }
 
   ngAfterViewInit() {
+    this._syncIndeterminate(this._indeterminate);
     this._checkboxFoundation.init();
   }
 
@@ -348,4 +350,19 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
     this._classes[cssClass] = active;
     this._changeDetectorRef.markForCheck();
   }
+
+  /**
+   * Syncs the indeterminate value with the checkbox DOM node.
+   *
+   * We sync `indeterminate` directly on the DOM node, because in Ivy the check for whether a
+   * property is supported on an element boils down to `if (propName in element)`. Domino's
+   * HTMLInputElement doesn't have an `indeterminate` property so Ivy will warn during
+   * server-side rendering.
+   */
+  private _syncIndeterminate(value: boolean) {
+    const nativeCheckbox = this._nativeCheckbox;
+    if (nativeCheckbox) {
+      nativeCheckbox.nativeElement.indeterminate = value;
+    }
+  }
 }

src/material/checkbox/checkbox.html

@@ -10,7 +10,6 @@
            [disabled]="disabled"
            [attr.name]="name"
            [tabIndex]="tabIndex"
-           [indeterminate]="indeterminate"
            [attr.aria-label]="ariaLabel || null"
            [attr.aria-labelledby]="ariaLabelledby"
            [attr.aria-checked]="_getAriaChecked()"

src/material/checkbox/checkbox.ts

@@ -25,6 +25,7 @@ import {
   ViewChild,
   ViewEncapsulation,
   AfterViewChecked,
+  AfterViewInit,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
@@ -127,7 +128,7 @@ const _MatCheckboxMixinBase:
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor,
-    AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple,
+    AfterViewInit, AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple,
     FocusableOption {
 
   /**
@@ -216,6 +217,10 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
     });
   }
 
+  ngAfterViewInit() {
+    this._syncIndeterminate(this._indeterminate);
+  }
+
   // TODO: Delete next major revision.
   ngAfterViewChecked() {}
 
@@ -262,7 +267,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
   get indeterminate(): boolean { return this._indeterminate; }
   set indeterminate(value: boolean) {
     const changed = value != this._indeterminate;
-    this._indeterminate = value;
+    this._indeterminate = coerceBooleanProperty(value);
 
     if (changed) {
       if (this._indeterminate) {
@@ -273,6 +278,8 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
       }
       this.indeterminateChange.emit(this._indeterminate);
     }
+
+    this._syncIndeterminate(this._indeterminate);
   }
   private _indeterminate: boolean = false;
 
@@ -450,4 +457,20 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
 
     return `mat-checkbox-anim-${animSuffix}`;
   }
+
+  /**
+   * Syncs the indeterminate value with the checkbox DOM node.
+   *
+   * We sync `indeterminate` directly on the DOM node, because in Ivy the check for whether a
+   * property is supported on an element boils down to `if (propName in element)`. Domino's
+   * HTMLInputElement doesn't have an `indeterminate` property so Ivy will warn during
+   * server-side rendering.
+   */
+  private _syncIndeterminate(value: boolean) {
+    const nativeCheckbox = this._inputElement;
+
+    if (nativeCheckbox) {
+      nativeCheckbox.nativeElement.indeterminate = value;
+    }
+  }
 }

tools/public_api_guard/material/checkbox.d.ts

@@ -7,7 +7,7 @@ export declare const MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR: any;
 
 export declare const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider;
 
-export declare class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor, AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple, FocusableOption {
+export declare class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor, AfterViewInit, AfterViewChecked, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple, FocusableOption {
     _animationMode?: string | undefined;
     _inputElement: ElementRef<HTMLInputElement>;
     _onTouched: () => any;
@@ -33,6 +33,7 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements Contro
     _onLabelTextChange(): void;
     focus(origin?: FocusOrigin, options?: FocusOptions): void;
     ngAfterViewChecked(): void;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     registerOnChange(fn: (value: any) => void): void;
     registerOnTouched(fn: any): void;