feat(material-experimental/radio): Set up the MDC foundation (#17180)

src/dev-app/mdc-radio/mdc-radio-demo.html

@@ -2,5 +2,5 @@ <h1>Basic Example</h1>
 <section class="demo-section">
   <mat-radio name="group1">Option 1</mat-radio>
   <mat-radio name="group1">Option 2</mat-radio>
-  <mat-radio name="group1">Option 3</mat-radio>
+  <mat-radio name="group1" disabled>Option 3 (Disabled)</mat-radio>
 </section>

src/material-experimental/mdc-radio/BUILD.bazel

@@ -14,6 +14,7 @@ ng_module(
     module_name = "@angular/material-experimental/mdc-radio",
     deps = [
         "//src/material/core",
+        "@npm//@material/radio",
     ],
 )
 

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

@@ -1,6 +1,6 @@
 <div class="mdc-form-field">
-  <div class="mdc-radio">
-    <input class="mdc-radio__native-control" type="radio" [id]="inputId">
+  <div class="mdc-radio" [ngClass]="_classes">
+    <input class="mdc-radio__native-control" type="radio" [id]="inputId" [disabled]="disabled">
     <div class="mdc-radio__background">
       <div class="mdc-radio__outer-circle"></div>
       <div class="mdc-radio__inner-circle"></div>

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

@@ -6,7 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Component, ViewEncapsulation, Input} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  Input,
+  OnDestroy,
+  AfterViewInit,
+  ChangeDetectorRef,
+} from '@angular/core';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {MDCRadioAdapter, MDCRadioFoundation} from '@material/radio';
 
 // Increasing integer for generating unique ids for radio components.
 let nextUniqueId = 0;
@@ -24,15 +34,50 @@ let nextUniqueId = 0;
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatRadio {
+export class MatRadio implements AfterViewInit, OnDestroy {
 
   private _uniqueId: string = `mat-radio-${++nextUniqueId}`;
 
+  private _radioAdapter: MDCRadioAdapter = {
+    addClass: (className: string) => this._setClass(className, true),
+    removeClass: (className: string) => this._setClass(className, false),
+    setNativeControlDisabled: (disabled: boolean) => {
+      this._disabled = disabled;
+      this._changeDetectorRef.markForCheck();
+    },
+  };
+
+  _radioFoundation = new MDCRadioFoundation(this._radioAdapter);
+  _classes: {[key: string]: boolean} = {};
+
   /** The unique ID for the radio button. */
   @Input() id: string = this._uniqueId;
 
+  /** Whether the radio button is disabled. */
+  @Input()
+  get disabled(): boolean {
+    return this._disabled;
+  }
+  set disabled(disabled: boolean) {
+    this._radioFoundation.setDisabled(coerceBooleanProperty(disabled));
+  }
+  private _disabled = false;
+
+  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
+
   /** ID of the native input element inside `<mat-radio-button>` */
   get inputId(): string { return `${this.id || this._uniqueId}-input`; }
 
-  // TODO: set up MDC foundation class.
+  ngAfterViewInit() {
+    this._radioFoundation.init();
+  }
+
+  ngOnDestroy() {
+    this._radioFoundation.destroy();
+  }
+
+  private _setClass(cssClass: string, active: boolean) {
+    this._classes = {...this._classes, [cssClass]: active};
+    this._changeDetectorRef.markForCheck();
+  }
 }