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

@@ -124,6 +124,7 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
   }
   set indeterminate(indeterminate) {
     this._indeterminate = coerceBooleanProperty(indeterminate);
+    this._syncIndeterminate(this._indeterminate);
   }
   private _indeterminate = false;
 
@@ -258,6 +259,7 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
   }
 
   ngAfterViewInit() {
+    this._syncIndeterminate(this._indeterminate);
     this._checkboxFoundation.init();
   }
 
@@ -371,6 +373,21 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
     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;
+    }
+  }
+
   static ngAcceptInputType_checked: boolean | string;
   static ngAcceptInputType_indeterminate: boolean | string;
   static ngAcceptInputType_disabled: boolean | string;

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 {
   Output,
   ViewChild,
   ViewEncapsulation,
+  AfterViewInit,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
@@ -132,7 +133,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 {
 
   /**
@@ -236,6 +237,10 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
     this._clickAction = this._clickAction || this._options.clickAction;
   }
 
+  ngAfterViewInit() {
+    this._syncIndeterminate(this._indeterminate);
+  }
+
   // TODO: Delete next major revision.
   ngAfterViewChecked() {}
 
@@ -282,7 +287,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) {
@@ -293,6 +298,8 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
       }
       this.indeterminateChange.emit(this._indeterminate);
     }
+
+    this._syncIndeterminate(this._indeterminate);
   }
   private _indeterminate: boolean = false;
 
@@ -471,6 +478,22 @@ 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;
+    }
+  }
+
   static ngAcceptInputType_disabled: boolean | string;
   static ngAcceptInputType_required: boolean | string;
   static ngAcceptInputType_disableRipple: boolean | string;

tools/public_api_guard/material/checkbox.d.ts

@@ -13,7 +13,7 @@ export declare function MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY(): MatCheckboxDefau
 
 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;
@@ -40,6 +40,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;