3.4. Copy in the canonical MDC DOM and add the MDC styles

Author: Nathan Tate

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

@@ -1 +1,10 @@
-<!-- TODO: MDC template here. -->
+<div class="mdc-form-field">
+  <div class="mdc-radio">
+    <input class="mdc-radio__native-control" type="radio" [id]="inputId" name="radios">
+    <div class="mdc-radio__background">
+      <div class="mdc-radio__outer-circle"></div>
+      <div class="mdc-radio__inner-circle"></div>
+    </div>
+  </div>
+  <label [for]="inputId" ng-content></label>
+</div>

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

@@ -1 +1,7 @@
-// TODO: MDC core styles here.
+@import '@material/radio/mixins';
+@import '@material/form-field/mixins';
+@import '../mdc-helpers/mdc-helpers';
+
+
+@include mdc-radio-without-ripple($query: $mat-base-styles-query);
+@include mdc-form-field-core-styles($query: $mat-base-styles-query);

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

@@ -6,11 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {ChangeDetectionStrategy, Component, ViewEncapsulation, Input} from '@angular/core';
 
+// Increasing integer for generating unique ids for radio components.
+let nextUniqueId = 0;
+
+/**
+ * A Material design radio-button. Typically placed inside of `<mat-radio-group>` elements.
+ */
 @Component({
   moduleId: module.id,
-  selector: 'mat-radio',
+  selector: 'mat-radio-button',
   templateUrl: 'radio.html',
   styleUrls: ['radio.css'],
   host: {
@@ -22,4 +28,12 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
 })
 export class MatRadio {
   // TODO: set up MDC foundation class.
+
+  private _uniqueId: string = `mat-radio-${++nextUniqueId}`;
+
+  /** The unique ID for the radio button. */
+  @Input() id: string = this._uniqueId;
+
+  /** ID of the native input element inside `<mat-radio-button>` */
+  get inputId(): string { return `${this.id || this._uniqueId}-input`; }
 }