How to use @material/radio - 10 common examples

getDefaultFoundation() {
    // prettier-ignore
    return new MDCRadioFoundation({
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      getNativeControl: () => this.nativeCb_,
    })
  }

mounted() {
    const adapter = {
      addClass: className => this.$set(this.classes, className, true),
      removeClass: className => this.$delete(this.classes, className),

      setNativeControlDisabled: disabled =>
        this.$refs.controlEl && this.$refs.controlEl.disabled == disabled,
    };

    // add foundation
    this.foundation = new MDCRadioFoundation(adapter);

    // add ripple
    this.ripple = new RippleBase(this, {
      isUnbounded: () => true,

      // Radio buttons technically go "active" whenever there is *any* keyboard interaction. This is not the
      // UI we desire.
      isSurfaceActive: () => false,
      registerInteractionHandler: (evt, handler) => {
        this.$refs.controlEl.addEventListener(evt, handler, applyPassive());
      },
      deregisterInteractionHandler: (evt, handler) => {
        this.$refs.controlEl.removeEventListener(evt, handler, applyPassive());
      },
      computeBoundingRect: () => {
        return this.$refs.root.getBoundingClientRect();

mounted() {
    const adapter = {
      addClass: className => this.$set(this.classes, className, true),
      removeClass: className => this.$delete(this.classes, className),

      setNativeControlDisabled: disabled =>
        this.$refs.controlEl && this.$refs.controlEl.disabled == disabled,
    };

    // add foundation
    this.foundation = new MDCRadioFoundation(adapter);

    // add ripple
    this.ripple = new RippleBase(this, {
      isUnbounded: () => true,

      // Radio buttons technically go "active" whenever there is *any* keyboard interaction. This is not the
      // UI we desire.
      isSurfaceActive: () => false,
      registerInteractionHandler: (evt, handler) => {
        this.$refs.controlEl.addEventListener(evt, handler, applyPassive());
      },
      deregisterInteractionHandler: (evt, handler) => {
        this.$refs.controlEl.removeEventListener(evt, handler, applyPassive());
      },
      computeBoundingRect: () => {
        return this.$refs.root.getBoundingClientRect();

@Directive({
    selector: '[mdcRadio]'
})
export class MdcRadioDirective extends AbstractMdcRipple implements AfterContentInit, OnDestroy {
    @HostBinding('class.mdc-radio') _cls = true;
    @ContentChild(MdcRadioInputDirective) _input: MdcRadioInputDirective;
    private mdcAdapter: MdcRadioAdapter = {
        addClass: (className: string) => {
            this.renderer.addClass(this.root.nativeElement, className);
        },
        removeClass: (className: string) => {
            this.renderer.removeClass(this.root.nativeElement, className);
        },
        getNativeControl: () => this._input ? this._input._elm.nativeElement : null
    };
    private foundation: { init: Function, destroy: Function } = new MDCRadioFoundation(this.mdcAdapter);

    constructor(private renderer: Renderer2, private root: ElementRef, private registry: MdcEventRegistry) {
        super(root, renderer, registry);
    }

    ngAfterContentInit() {
        this.addBackground();
        this.initRipple();
        this.foundation.init();
    }

    ngOnDestroy() {
        this.destroyRipple();
        this.foundation.destroy();
    }

    this.initRadio = radioEl => radioEl && this.destroyableComponents.push(new MDCRadio(radioEl));

constructor(...args) {
    super(...args);

    this.$element.addClass('mdc-radio');
    this.mdc = new MDCRadio(this.$element[0]);

    this.$element.ready(() => {
      this.mdc.ripple.layout();
    });
  }

function initRadioButton(groupName, label) {
    const templateEl = document.getElementById(LANGUAGE_RADIO_TEMPLATE_ID);
    const radioId = `language-radio-${languageRadioCount++}`;

    const radioInputEl = templateEl.content.querySelector('.mdc-radio__native-control');
    radioInputEl.setAttribute('id', radioId);
    radioInputEl.setAttribute('name', groupName);
    radioInputEl.setAttribute('value', label);

    const radioLabelEl = templateEl.content.querySelector('.language-name');
    radioLabelEl.setAttribute('for', radioId);
    radioLabelEl.textContent = label;

    const radioEl = document.importNode(templateEl.content, true);

    const radio = new MDCRadio(radioEl.querySelector('.mdc-radio'));
    radio.listen('change', () => {
      const lang = radio.nativeControl_.value;
      if (selectedLanguage.get() == lang) {
        return false;
      }
      selectedLanguage.set(lang);

      const event = document.createEvent('HTMLEvents');
      event.initEvent('selectLangChange', false, true);
      document.dispatchEvent(event);
    });

    return {
      component: radio,
      element: radioEl,
    };

installed() {
    const radio = new MDCRadio(this.shadowRoot.querySelector('.mdc-radio'))
    const formField = new MDCFormField(this.shadowRoot.querySelector('.mdc-form-field'))
    formField.input = radio
    this.radio = radio
    this.group = this.getScopeRoot(this.shadowRoot.host).querySelectorAll(`m-radio[name='${this.props.name}']`)
    //fix group 不一致
    this.group.forEach(ele => {
      ele.group = this.group
    })
  }

getDefaultFoundation() {
    return new MDCRadioFoundation({
      addClass: (className: string) => this.root.addClass(className),
      removeClass: (className: string) => this.root.removeClass(className)
    });
  }

getDefaultFoundation() {
    const adapter: MDCRadioAdapter = {
      addClass: (className: string) => this._getHostElement().classList.add(className),
      removeClass: (className: string) => this._getHostElement().classList.remove(className),
      setNativeControlDisabled: (disabled: boolean) => this.disabled = disabled
    };
    return new MDCRadioFoundation(adapter);
  }