How to use @material/icon-toggle - 10 common examples

rmAttr: (name: string) => { this.renderer.removeAttribute(this._elm.nativeElement, name); },
        notifyChange: (evtData: {isOn: boolean}) => {
            this._onChange(evtData.isOn);
            this.onChange.emit(evtData.isOn);
        }
    };
    private foundation: {
        init(),
        destroy(),
        setDisabled(disabled: boolean),
        isDisabled(): boolean,
        isOn(): boolean,
        toggle(isOn?: boolean)
        refreshToggleData(),
        isKeyboardActivated(): boolean
    } = new MDCIconToggleFoundation(this.mdcAdapter);

    constructor(_elm: ElementRef, private renderer: Renderer2, private registry: MdcEventRegistry) {
        super(_elm, renderer, registry);
    }
  
    ngAfterContentInit() {
        this.initDefaultAttributes();
        this.initializeData();
        this.foundation.init();
        // run all deferred foundation interactions:
        for (let fun of this._beforeInitQueu)
            fun();
        this._beforeInitQueu = [];
        // the foundation doesn't initialize the iconOn/iconOff and labelOn/labelOff until
        // toggle is called for the first time,
        // also, this will ensure 'aria-pressed' and 'aria-label' attributes are initialized:

getDefaultFoundation() {
    return new MDCIconToggleFoundation({
      addClass: (className) => this.iconEl_.addClass(className),
      removeClass: (className) => this.iconEl_.removeClass(className),
      registerInteractionHandler: (type, handler) => this.$element.on(type, handler),
      deregisterInteractionHandler: (type, handler) => this.$element.off(type, handler),
      setText: (text) => this.iconEl_.text(text),
      getTabIndex: () => /* number */ this.$element.attr('tabindex'),
      setTabIndex: (tabIndex) => this.$element.attr('tabindex', tabIndex),
      getAttr: (name, value) => this[directiveNormalize(name)],
      setAttr: (name, value) => {
        this[directiveNormalize(name)] = value;
        this.$element.attr(name, value);
      },
      rmAttr: (name) => {
        this[directiveNormalize(name)] = undefined;
        this.$element.removeAttr(name);
      },

mounted () {
    // TODO: add the ripple
    let vm = this;
    this.foundation = new MDCIconToggleFoundation({
      addClass (className) {
        vm.$set(vm.classes, className, true);
      },
      removeClass (className) {
        vm.$delete(vm.classes, className);
      },
      registerInteractionHandler (type, handler) {
        vm.$el.addEventListener(type, handler);
      },
      deregisterInteractionHandler (type, handler) {
        vm.$el.removeEventListener(type, handler);
      },
      setText (text) {
        vm.text = text;
      },
      getTabIndex () {

this.host = this.previewEl.dataset.host
    this.port = this.previewEl.dataset.port
    this.fields = []
    this.document = null
    this.autosaveID = null
    this._isEditingSource = false

    this.autosaveEl.addEventListener('click', this.handleAutosaveClick.bind(this))
    this.saveEl.addEventListener('click', () => { this.save(true) })
    this.podPathEl.addEventListener('change', () => { this.load(this.podPath) })
    this.podPathEl.addEventListener('keyup', () => { this.delayPodPath() })

    this.mobileToggleMd = MDCIconToggle.attachTo(this.mobileToggleEl)
    this.mobileToggleEl.addEventListener(
      'MDCIconToggle:change', this.handleMobileClick.bind(this))
    this.sourceToggleMd = MDCIconToggle.attachTo(this.sourceToggleEl)
    this.sourceToggleEl.addEventListener(
      'MDCIconToggle:change', this.handleSourceClick.bind(this))
    this.podPathMd = new MDCTextField(
      this.containerEl.querySelector('.content__path .mdc-text-field'))
    this.saveProgressMd = MDCLinearProgress.attachTo(
      this.containerEl.querySelector('.sidebar__save .mdc-linear-progress'))
    this.saveProgressMd.close()

    this.api = new EditorApi({
      host: this.host,
      port: this.port,
    })
    this.partials = new Partials(this.api)

    // Default to loading with the UI.
    this.load(this.podPath)

getDefaultFoundation() {
    const { iconInnerSelector: sel } = this.root_.dataset
    this.iconEl_ = sel ? this.root_.querySelector(sel) : this.root_
    // prettier-ignore
    return new MDCIconToggleFoundation({
      addClass: (className) => this.iconEl_.classList.add(className),
      removeClass: (className) => this.iconEl_.classList.remove(className),
      registerInteractionHandler: helper.registerHandler('rootProps', this),
      deregisterInteractionHandler: helper.deregisterHandler('rootProps', this),
      setText: (text) => { this.iconEl_.textContent = text },
      getTabIndex: helper.getAttr('rootProps', this, 'tabIndex'),
      setTabIndex: helper.setAttr('rootProps', this, 'tabIndex'),
      getAttr: helper.getAttr('rootProps', this),
      setAttr: helper.setAttr('rootProps', this),
      rmAttr: helper.rmAttr('rootProps', this),
      notifyChange: (detail) => {
        this.props.onChange_({ detail })
        this.props.onChange({ target: { checked: detail.isOn } })
      }
    })
  }

import * as textField from '@material/textfield/index';
import * as toolbar from '@material/toolbar/index';
import * as topAppBar from '@material/top-app-bar/index';

// Register all components
autoInit.register('MDCCheckbox', checkbox.MDCCheckbox);
autoInit.register('MDCChip', chips.MDCChip);
autoInit.register('MDCChipSet', chips.MDCChipSet);
autoInit.register('MDCDialog', dialog.MDCDialog);
autoInit.register('MDCPersistentDrawer', drawer.MDCPersistentDrawer);
autoInit.register('MDCTemporaryDrawer', drawer.MDCTemporaryDrawer);
autoInit.register('MDCFloatingLabel', floatingLabel.MDCFloatingLabel);
autoInit.register('MDCFormField', formField.MDCFormField);
autoInit.register('MDCRipple', ripple.MDCRipple);
autoInit.register('MDCGridList', gridList.MDCGridList);
autoInit.register('MDCIconToggle', iconToggle.MDCIconToggle);
autoInit.register('MDCLineRipple', lineRipple.MDCLineRipple);
autoInit.register('MDCLinearProgress', linearProgress.MDCLinearProgress);
autoInit.register('MDCNotchedOutline', notchedOutline.MDCNotchedOutline);
autoInit.register('MDCRadio', radio.MDCRadio);
autoInit.register('MDCSnackbar', snackbar.MDCSnackbar);
autoInit.register('MDCTab_', tab.MDCTab);
autoInit.register('MDCTabIndicator', tabIndicator.MDCTabIndicator);
autoInit.register('MDCTab', tabs.MDCTab);
autoInit.register('MDCTabBar', tabs.MDCTabBar);
autoInit.register('MDCTextField', textField.MDCTextField);
autoInit.register('MDCMenu', menu.MDCMenu);
autoInit.register('MDCSelect', select.MDCSelect);
autoInit.register('MDCSlider', slider.MDCSlider);
autoInit.register('MDCToolbar', toolbar.MDCToolbar);
autoInit.register('MDCTopAppBar', topAppBar.MDCTopAppBar);

notifyChange: (evtData: { isOn: boolean }) => {
      this.change.emit(evtData.isOn);
      this.onChange(this._foundation.isOn());
    }
  };

  private _foundation: {
    init(): void,
    destroy(): void,
    setDisabled(isDisabled: boolean): void,
    isDisabled(): boolean,
    toggle(isOn?: boolean): void,
    refreshToggleData(): void,
    isKeyboardActivated(): boolean,
    isOn(): boolean
  } = new MDCIconToggleFoundation(this._mdcAdapter);

  constructor(
    private _changeDetectorRef: ChangeDetectorRef,
    private _renderer: Renderer2,
    public elementRef: ElementRef,
    public ripple: MdcRipple,
    private _registry: EventRegistry) { }

  ngAfterViewInit(): void {
    this._foundation.init();
    this._foundation.refreshToggleData();
    this._foundation.toggle(this._on || this._foundation.isOn());

    this.ripple.attachTo(this._getHostElement(), true);

    this._changeDetectorRef.detectChanges();

mounted () {
    this.mdcIconToggle = MDCIconToggle.attachTo(this.$el)
    this.mdcIconToggle.disabled = this.disabled
    this.mdcIconToggle.on = this.value
  },
  destroy () {

          ref={iconToggleEl => iconToggleEl && MDCIconToggle.attachTo(iconToggleEl)}>
          favorite_border

this.fieldsEl = this.containerEl.querySelector('.fields')
    this.saveEl = this.containerEl.querySelector('.sidebar__save button')
    this.podPathEl = this.containerEl.querySelector('#pod_path')
    this.host = this.previewEl.dataset.host
    this.port = this.previewEl.dataset.port
    this.fields = []
    this.document = null
    this.autosaveID = null
    this._isEditingSource = false

    this.autosaveEl.addEventListener('click', this.handleAutosaveClick.bind(this))
    this.saveEl.addEventListener('click', () => { this.save(true) })
    this.podPathEl.addEventListener('change', () => { this.load(this.podPath) })
    this.podPathEl.addEventListener('keyup', () => { this.delayPodPath() })

    this.mobileToggleMd = MDCIconToggle.attachTo(this.mobileToggleEl)
    this.mobileToggleEl.addEventListener(
      'MDCIconToggle:change', this.handleMobileClick.bind(this))
    this.sourceToggleMd = MDCIconToggle.attachTo(this.sourceToggleEl)
    this.sourceToggleEl.addEventListener(
      'MDCIconToggle:change', this.handleSourceClick.bind(this))
    this.podPathMd = new MDCTextField(
      this.containerEl.querySelector('.content__path .mdc-text-field'))
    this.saveProgressMd = MDCLinearProgress.attachTo(
      this.containerEl.querySelector('.sidebar__save .mdc-linear-progress'))
    this.saveProgressMd.close()

    this.api = new EditorApi({
      host: this.host,
      port: this.port,
    })
    this.partials = new Partials(this.api)