fix(radio): update set disabled directly on MatRadioButton to trigger…

… change detection

Fixes MatRadioButton.disabled setter to trigger change detection.  MatRadioButton uses
ChangeDetectionStrategy.OnPush, which works fine with disabled is bound in a template that uses
<mat-radio-button>.  However, if a parent directly accesses the MatRadioButton component instance
(e.g., using ViewChild, as in the provided test case), there is otherwise no way for the parent to
trigger change detection in the MatRadioButton due to the OnPush strategy.

OnPush was added in 97a9bdc, and this same technique was added to some but not all setters.

This commit also adds test coverage for directly setting disabled on MatRadioButton in general,
which previously was only indirectly covered in the MatRadioGroup tests.

src/lib/radio/radio.spec.ts

@@ -1,6 +1,6 @@
 import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
 import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
-import {Component, DebugElement} from '@angular/core';
+import {Component, DebugElement, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {dispatchFakeEvent} from '@angular/cdk/testing';
 import {defaultRippleAnimationConfig} from '@angular/material/core';
@@ -12,6 +12,7 @@ describe('MatRadio', () => {
     TestBed.configureTestingModule({
       imports: [MatRadioModule, FormsModule, ReactiveFormsModule],
       declarations: [
+        DisableableRadioButton,
         FocusableRadioButton,
         RadiosInsideRadioGroup,
         RadioGroupWithNgModel,
@@ -515,6 +516,39 @@ describe('MatRadio', () => {
     });
   });
 
+  describe('disableable', () => {
+    let fixture: ComponentFixture<DisableableRadioButton>;
+    let radioDebugElement: DebugElement;
+    let radioInstance: MatRadioButton;
+    let radioNativeElement; HTMLInputElement;
+    let testComponent: DisableableRadioButton;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(DisableableRadioButton);
+      fixture.detectChanges();
+
+      testComponent = fixture.debugElement.componentInstance;
+      radioDebugElement = fixture.debugElement.query(By.directive(MatRadioButton));
+      radioInstance = radioDebugElement.injector.get<MatRadioButton>(MatRadioButton);
+      radioNativeElement = radioDebugElement.nativeElement.querySelector('input');
+    });
+
+    fit('should toggle the disabled state', () => {
+      expect(radioInstance.disabled).toBeFalsy();
+      expect(radioNativeElement.disabled).toBeFalsy();
+
+      testComponent.disabled = true;
+      fixture.detectChanges();
+      expect(radioInstance.disabled).toBeTruthy();
+      expect(radioNativeElement.disabled).toBeTruthy();
+
+      testComponent.disabled = false;
+      fixture.detectChanges();
+      expect(radioInstance.disabled).toBeFalsy();
+      expect(radioNativeElement.disabled).toBeFalsy();
+    });
+  });
+
   describe('as standalone', () => {
     let fixture: ComponentFixture<StandaloneRadioButtons>;
     let radioDebugElements: DebugElement[];
@@ -795,6 +829,17 @@ class RadioGroupWithNgModel {
   lastEvent: MatRadioChange;
 }
 
+@Component({
+  template: `<mat-radio-button>One</mat-radio-button>`
+})
+class DisableableRadioButton {
+  @ViewChild(MatRadioButton) matRadioButton;
+
+  set disabled(value: boolean) {
+    this.matRadioButton.disabled = value;
+  }
+}
+
 @Component({
   template: `
   <mat-radio-group [formControl]="formControl">

src/lib/radio/radio.ts

@@ -410,7 +410,11 @@ export class MatRadioButton extends _MatRadioButtonMixinBase
     return this._disabled || (this.radioGroup !== null && this.radioGroup.disabled);
   }
   set disabled(value: boolean) {
-    this._disabled = coerceBooleanProperty(value);
+    const newDisabledState = coerceBooleanProperty(value);
+    if (this._disabled !== newDisabledState) {
+      this._disabled = newDisabledState;
+      this._changeDetector.markForCheck();
+    }
   }
 
   /** Whether the radio button is required. */