How to use @material/chips - 10 common examples

constructor(
    public _changeDetectorRef: ChangeDetectorRef,
    readonly _elementRef: ElementRef,
    private _platform: Platform,
    protected _ngZone: NgZone,
    @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
    private _globalRippleOptions: RippleGlobalOptions | null,
    @Optional() private _dir: Directionality,
    // @breaking-change 8.0.0 `animationMode` parameter to become required.
    @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
    super(_elementRef);
    this._chipFoundation = new MDCChipFoundation(this._chipAdapter);
    this._animationsDisabled = animationMode === 'NoopAnimations';
  }

getDefaultFoundation() {
    return new MDCChipFoundation({
      addClass: className => {
        this.root.addClass(className);
      },
      removeClass: className => this.root.removeClass(className),
      hasClass: className => this.root.hasClass(className),
      addClassToLeadingIcon: className => {
        // handled by props
      },
      removeClassFromLeadingIcon: className => {
        // handled by props
      },
      eventTargetHasClass: (target: HTMLElement, className) => {
        return (
          this.root.hasClass(className) || target.classList.contains(className)
        );
      },

constructor(protected _elementRef: ElementRef,
              _changeDetectorRef: ChangeDetectorRef,
              @Optional() _dir: Directionality) {
    super(_elementRef, _changeDetectorRef, _dir);
    this._chipSetAdapter.selectChipAtIndex = (index: number, selected: boolean) => {
      this._setSelected(index, selected);
    };
    // Reinitialize the foundation with our overridden adapter
    this._chipSetFoundation = new MDCChipSetFoundation(this._chipSetAdapter);
    this._updateMdcSelectionClasses();
  }

import * as notchedOutline from '@material/notched-outline/index';
import * as radio from '@material/radio/index';
import * as ripple from '@material/ripple/index';
import * as select from '@material/select/index';
import * as slider from '@material/slider/index';
import * as snackbar from '@material/snackbar/index';
import * as switchControl from '@material/switch/index';
import * as tabBar from '@material/tab-bar/index';
import * as tabIndicator from '@material/tab-indicator/index';
import * as tabScroller from '@material/tab-scroller/index';
import * as tab from '@material/tab/index';
import * as textField from '@material/textfield/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('MDCDataTable', dataTable.MDCDataTable);
autoInit.register('MDCDialog', dialog.MDCDialog);
autoInit.register('MDCDrawer', drawer.MDCDrawer);
autoInit.register('MDCFloatingLabel', floatingLabel.MDCFloatingLabel);
autoInit.register('MDCFormField', formField.MDCFormField);
autoInit.register('MDCGridList', gridList.MDCGridList);
autoInit.register('MDCIconButtonToggle', iconButton.MDCIconButtonToggle);
autoInit.register('MDCLineRipple', lineRipple.MDCLineRipple);
autoInit.register('MDCLinearProgress', linearProgress.MDCLinearProgress);
autoInit.register('MDCList', list.MDCList);
autoInit.register('MDCMenu', menu.MDCMenu);
autoInit.register('MDCMenuSurface', menuSurface.MDCMenuSurface);
autoInit.register('MDCNotchedOutline', notchedOutline.MDCNotchedOutline);
autoInit.register('MDCRadio', radio.MDCRadio);
autoInit.register('MDCRipple', ripple.MDCRipple);

import * as radio from '@material/radio/index';
import * as ripple from '@material/ripple/index';
import * as select from '@material/select/index';
import * as selectionControl from '@material/selection-control/index';
import * as slider from '@material/slider/index';
import * as snackbar from '@material/snackbar/index';
import * as tab from '@material/tab/index';
import * as tabIndicator from '@material/tab-indicator/index';
import * as tabs from '@material/tabs/index';
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);

import * as radio from '@material/radio/index';
import * as ripple from '@material/ripple/index';
import * as select from '@material/select/index';
import * as slider from '@material/slider/index';
import * as snackbar from '@material/snackbar/index';
import * as switchControl from '@material/switch/index';
import * as tabBar from '@material/tab-bar/index';
import * as tabIndicator from '@material/tab-indicator/index';
import * as tabScroller from '@material/tab-scroller/index';
import * as tab from '@material/tab/index';
import * as textField from '@material/textfield/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('MDCDataTable', dataTable.MDCDataTable);
autoInit.register('MDCDialog', dialog.MDCDialog);
autoInit.register('MDCDrawer', drawer.MDCDrawer);
autoInit.register('MDCFloatingLabel', floatingLabel.MDCFloatingLabel);
autoInit.register('MDCFormField', formField.MDCFormField);
autoInit.register('MDCGridList', gridList.MDCGridList);
autoInit.register('MDCIconButtonToggle', iconButton.MDCIconButtonToggle);
autoInit.register('MDCLineRipple', lineRipple.MDCLineRipple);
autoInit.register('MDCLinearProgress', linearProgress.MDCLinearProgress);
autoInit.register('MDCList', list.MDCList);
autoInit.register('MDCMenu', menu.MDCMenu);
autoInit.register('MDCMenuSurface', menuSurface.MDCMenuSurface);
autoInit.register('MDCNotchedOutline', notchedOutline.MDCNotchedOutline);
autoInit.register('MDCRadio', radio.MDCRadio);
autoInit.register('MDCRipple', ripple.MDCRipple);

mounted() {
    const {
      INTERACTION_EVENT,
      SELECTION_EVENT,
      REMOVAL_EVENT,
      TRAILING_ICON_INTERACTION_EVENT,
      PRIMARY_ACTION_SELECTOR,
      TRAILING_ACTION_SELECTOR,
      NAVIGATION_EVENT,
    } = MDCChipFoundation.strings;

    this.trailingAction_ = this.$el.querySelector(TRAILING_ACTION_SELECTOR);

    this.foundation = new MDCChipFoundation({
      addClass: className => this.$set(this.classes, className, true),
      removeClass: className => this.$delete(this.classes, className),
      hasClass: className => this.$el.classList.contains(className),
      addClassToLeadingIcon: className => {
        this.$set(this.leadingClasses, className, true);

        // if no ref, then using slot, so just add class directly
        if (!this.$refs['leading-icon'] && this.haveleadingIcon) {
          const item = this.$slots['leading-icon'][0];
          (item.elm || item).classList.add(className);
        }
      },
      removeClassFromLeadingIcon: className => {
        this.$delete(this.leadingClasses, className);

        // if no ref, then using slot, so just remove class directly

mounted() {
    const {
      INTERACTION_EVENT,
      SELECTION_EVENT,
      REMOVAL_EVENT,
      TRAILING_ICON_INTERACTION_EVENT,
      PRIMARY_ACTION_SELECTOR,
      TRAILING_ACTION_SELECTOR,
      NAVIGATION_EVENT,
    } = MDCChipFoundation.strings;

    this.trailingAction_ = this.$el.querySelector(TRAILING_ACTION_SELECTOR);

    this.foundation = new MDCChipFoundation({
      addClass: className => this.$set(this.classes, className, true),
      removeClass: className => this.$delete(this.classes, className),
      hasClass: className => this.$el.classList.contains(className),
      addClassToLeadingIcon: className => {
        this.$set(this.leadingClasses, className, true);

        // if no ref, then using slot, so just add class directly
        if (!this.$refs['leading-icon'] && this.haveleadingIcon) {
          const item = this.$slots['leading-icon'][0];
          (item.elm || item).classList.add(className);
        }
      },

mounted() {
    // do not delete this reference as it triggers initial chip list instantiation.
    this.chips_;
    this.foundation = new MDCChipSetFoundation({
      focusChipPrimaryActionAtIndex: index => {
        const chip = this.chips_[index];

        chip && chip.focusPrimaryAction();
      },
      focusChipTrailingActionAtIndex: index => {
        const chip = this.chips_[index];
        chip && chip.focusTrailingAction();
      },
      getChipListCount: () => {
        return this.chips_.length;
      },
      getIndexOfChipById: chipId => {
        return this.chips_.findIndex(({ id }) => id == chipId);
      },
      hasClass: className => this.$el.classList.contains(className),

notifyRemoval: () => this.removed.emit({detail: {chipId: this.id, root: this}}),
      getComputedStyleValue: (propertyName: string) => {
        if (!this._platform.isBrowser) {
          return '';
        }
        return window.getComputedStyle(this._getHostElement()).getPropertyValue(propertyName);
      },
      setStyleProperty: (propertyName: string, value: string) =>
        this._getHostElement().style.setProperty(propertyName, value),
      hasLeadingIcon: () => !!this.leadingIcon,
      setAttr: (name: string, value: string) => this._elementRef.nativeElement.setAttribute(name, value),
      getRootBoundingClientRect: () => this._getHostElement().getBoundingClientRect(),
      getCheckmarkBoundingClientRect: () => this._checkmark ?
        this._checkmark.elementRef.nativeElement.getBoundingClientRect() : null
    };
    return new MDCChipFoundation(adapter);
  }