How to use @material/floating-label - 10 common examples

mounted () {
    if (!(this.getLabel instanceof Function)) { // can not be init by parent
      this.mdcFloatingLabel = MDCFloatingLabel.attachTo(this.$el)
    }
  },
  beforeDestroy () {

},
        getWidth:() => this._elm.nativeElement.offsetWidth,
        registerInteractionHandler: (type: string, handler: EventListener) => {
            this.registry.listen(this._rndr, type, handler, this._elm);
        },
        deregisterInteractionHandler: (type: string, handler: EventListener) => {
            this.registry.unlisten(type, handler);
        }
    };
    _foundation: {
        init: Function,
        destroy: Function,
        float: (should: boolean) => void,
        shake: (should: boolean) => void,
        getWidth: () => number
    } = new MDCFloatingLabelFoundation(this._mdcAdapter);

    constructor(private _rndr: Renderer2, public _elm: ElementRef, private registry: MdcEventRegistry) {
        super();
    }

    ngAfterContentInit() {
        this._foundation.init();
        this._initialized = true;
    }

    ngOnDestroy() {
        this._foundation.init();
        this._initialized = false;
    }
}

mounted() {
    this.foundation = new MDCFloatingLabelFoundation({
      addClass: className => {
        this.$set(this.labelClasses, className, true);
      },
      removeClass: className => {
        this.$delete(this.labelClasses, className);
      },
      getWidth: () => this.$el.scrollWidth,
      registerInteractionHandler: (evtType, handler) => {
        this.$el.addEventListener(evtType, handler);
      },
      deregisterInteractionHandler: (evtType, handler) => {
        this.$el.removeEventListener(evtType, handler);
      },
    });
    this.foundation.init();
  },

mounted() {
    this.foundation = new MDCFloatingLabelFoundation({
      addClass: className => {
        this.$set(this.labelClasses, className, true);
      },
      removeClass: className => {
        this.$delete(this.labelClasses, className);
      },
      getWidth: () => this.$el.scrollWidth,
      registerInteractionHandler: (evtType, handler) => {
        this.$el.addEventListener(evtType, handler);
      },
      deregisterInteractionHandler: (evtType, handler) => {
        this.$el.removeEventListener(evtType, handler);
      },
    });
    this.foundation.init();
  },

initializeFoundation = () => {
    this.foundation = new MDCFloatingLabelFoundation(this.adapter);
    this.foundation.init();
  };

export const floatingLabel = directive(() => (part: PropertyPart) => {
  const lastFoundation = partToFoundationMap.get(part);
  if (!lastFoundation) {
    const labelElement = part.committer.element as FloatingLabel;
    labelElement.classList.add('mdc-floating-label');
    const adapter = createAdapter(labelElement);
    const foundation = new MDCFloatingLabelFoundation(adapter);
    foundation.init();
    part.setValue(foundation);
    partToFoundationMap.set(part, foundation);
  }
});

      labelFactory: MDCFloatingLabelFactory = (el) => new MDCFloatingLabel(el),
      outlineFactory: MDCNotchedOutlineFactory = (el) => new MDCNotchedOutline(el),

      labelFactory: MDCFloatingLabelFactory = (el) => new MDCFloatingLabel(el),
      lineRippleFactory: MDCLineRippleFactory = (el) => new MDCLineRipple(el),

        if (labelFactory === void 0) { labelFactory = function (el) { return new MDCFloatingLabel(el); }; }
        if (lineRippleFactory === void 0) { lineRippleFactory = function (el) { return new MDCLineRipple(el); }; }

        if (labelFactory === void 0) { labelFactory = function (el) { return new MDCFloatingLabel(el); }; }
        if (outlineFactory === void 0) { outlineFactory = function (el) { return new MDCNotchedOutline(el); }; }