How to use @material/checkbox - 10 common examples

deregisterAnimationEndHandler: (handler: EventListener) => {
            this.registry.unlisten('animationend', handler);
        },
        registerChangeHandler: (handler: EventListener) => {
            if (this._input)
                this.registry.listen(this.renderer, 'change', handler, this._input._elm);
        },
        deregisterChangeHandler: (handler: EventListener) => {
            if (this._input)
                this.registry.unlisten('change', handler);
        },
        getNativeControl: () => this._input ? this._input._elm.nativeElement : null,
        forceLayout: () => this.root.nativeElement.offsetWidth, // force layout
        isAttachedToDOM: () => !!this._input,
    };
    private foundation: { init: Function, destroy: Function } = new MDCCheckboxFoundation(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.foundation.destroy();
        this.destroyRipple();
    }

componentDidMount() {
    this.foundation = new MDCCheckboxFoundation(this.adapter);
    this.foundation.init();
    this.foundation.setDisabled(this.props.disabled!);
    // indeterminate property on checkboxes is not supported:
    // https://github.com/facebook/react/issues/1798#issuecomment-333414857
    if (this.inputElement.current) {
      this.inputElement.current.indeterminate = this.state.indeterminate!;
    }
  }

private _changeDetectorRef: ChangeDetectorRef,
      private _platform: Platform,
      @Attribute('tabindex') tabIndex: string,
      /**
       * @deprecated `_clickAction` parameter to be removed, use
       * `MAT_CHECKBOX_DEFAULT_OPTIONS`
       * @breaking-change 10.0.0
       */
      @Optional() @Inject(MAT_CHECKBOX_CLICK_ACTION) private _clickAction: MatCheckboxClickAction,
      @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
      @Optional() @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS)
          private _options?: MatCheckboxDefaultOptions) {
    // Note: We don't need to set up the MDCFormFieldFoundation. Its only purpose is to manage the
    // ripple, which we do ourselves instead.
    this.tabIndex = parseInt(tabIndex) || 0;
    this._checkboxFoundation = new MDCCheckboxFoundation(this._checkboxAdapter);

    this._options = this._options || {};

    if (this._options.color) {
      this.color = this._options.color;
    }

    // @breaking-change 10.0.0: Remove this after the `_clickAction` parameter is removed as an
    // injection parameter.
    this._clickAction = this._clickAction || this._options.clickAction;
  }

bind() {
		this.mdcCheckbox = new MDCCheckbox(this.element);
		this.element.id = '_' + this.id; // anders heeft dit element zelfde id als input. Raakt label for="" in de war
    }

getDefaultFoundation() {
    // prettier-ignore
    return new MDCCheckboxFoundation({
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      registerAnimationEndHandler: helper.registerHandler('rootProps', this, 'animationend'),
      deregisterAnimationEndHandler: helper.deregisterHandler('rootProps', this, 'animationed'),
      registerChangeHandler: helper.registerHandler('nativeCbProps', this, 'change'),
      deregisterChangeHandler: helper.deregisterHandler('nativeCbProps', this, 'change'),
      getNativeControl: () => this.nativeCb_,
      forceLayout: () => this.root_.offsetWidth,
      isAttachedToDOM: helper.isAttachedToDOM('root', this),
    })
  }

import { MDCCheckboxFoundation } from '@material/checkbox';
import { componentFactory } from '@rmwc/base';
import { withRipple } from '@rmwc/ripple';
import {
  ToggleableFoundationComponent,
  ToggleableFoundationProps
} from '@rmwc/toggleable';

/**
 * This is an awful freaking bugfix
 * Basically, MDC decided that patching the native getter and setter
 * on a checkbox would be fun which consequently kills Reacts ability
 * to do the same.
 */
// @ts-ignore
MDCCheckboxFoundation.prototype.installPropertyChangeHooks_ = () => {};

/** A Checkbox component. */
export interface CheckboxProps
  extends RMWC.WithRippleProps,
    ToggleableFoundationProps {
  /** Make the control indeterminate */
  indeterminate?: boolean;
}

const CheckboxRoot = withRipple({
  surface: false,
  unbounded: true
})(
  componentFactory({
    displayName: 'CheckboxRoot',
    classNames: (props: CheckboxProps) => [

import React, {PureComponent, PropTypes} from 'react';
import {Set as ImmutableSet, Map as ImmutableMap} from 'immutable';
// Temporarily using relative reference until we publish on npm.
import {getCorrectEventName} from '@material/animation/dist/mdc.animation';
import {MDCRipple, MDCRippleFoundation} from '@material/ripple/dist/mdc.ripple';
import {MDCCheckboxFoundation} from '@material/checkbox/dist/mdc.checkbox';
import '@material/checkbox/dist/mdc.checkbox.css';

function getMatchesProperty(HTMLElementPrototype) {
  return [
    'webkitMatchesSelector', 'msMatchesSelector', 'matches',
  ].filter((p) => p in HTMLElementPrototype).pop();
}

const {ANIM_END_EVENT_NAME} = MDCCheckboxFoundation.strings;

const MATCHES = getMatchesProperty(HTMLElement.prototype);

export default class Checkbox extends PureComponent {
  static propTypes = {
    id: PropTypes.string,
    labelId: PropTypes.string,
    checked: PropTypes.bool,
    disabled: PropTypes.bool,
    indeterminate: PropTypes.bool,
    onChange: PropTypes.func
  }

  static defaultProps = {
    checked: false,
    disabled: false,

mounted: function() {
    const mdcCheckbox = new MDCCheckbox(this.$el);
    const ripple = new MDCRipple(this.$el);
    ripple.unbounded = true;
    this.$nextTick(function() {
      this.$parent.$emit('input-mounted', mdcCheckbox);
    });
  }
};

bind() {
        this.mdcCheckbox = new MDCCheckbox(this.element);
    }

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

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

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