diff --git a/src/material-experimental/mdc-radio/radio.html b/src/material-experimental/mdc-radio/radio.html index 9c75ddb6f477..d4324353d775 100644 --- a/src/material-experimental/mdc-radio/radio.html +++ b/src/material-experimental/mdc-radio/radio.html @@ -1 +1,10 @@ - +
+
+ +
+
+
+
+
+ +
\ No newline at end of file diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss index f61450904c9a..f295d529ca75 100644 --- a/src/material-experimental/mdc-radio/radio.scss +++ b/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); diff --git a/src/material-experimental/mdc-radio/radio.ts b/src/material-experimental/mdc-radio/radio.ts index cad810b21142..86c24ca918cc 100644 --- a/src/material-experimental/mdc-radio/radio.ts +++ b/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 `` 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 `` */ + get inputId(): string { return `${this.id || this._uniqueId}-input`; } }