Use Element-resize-detector Library In An Angular2 Application

I am trying to use the element-resize-detector library (https://github.com/wnr/element-resize-detector) in an Angular2 application. From my limited JS module knowledge, the library

Solution 1:

Based on @stone-shi answer this is how I got it to work:

Definition file:

declaremodule'element-resize-detector' {
  functionelementResizeDetectorMaker(options?: elementResizeDetectorMaker.ErdmOptions): elementResizeDetectorMaker.Erd;

  namespace elementResizeDetectorMaker {
    interfaceErdmOptions {
      strategy?: 'scroll' | 'object';
    }

    interfaceErd {
      listenTo(element: HTMLElement, callback: (elem: HTMLElement) =>void): void;
      removeListener(element: HTMLElement, callback: (elem: HTMLElement) =>void): void;
      removeAllListeners(element: HTMLElement): void;
      uninstall(element: HTMLElement): void;
    }
  }

  export = elementResizeDetectorMaker;
}

Ts file

import * as elementResizeDetectorMaker from'element-resize-detector';

    let _elementResizeDetector = elementResizeDetectorMaker({
      strategy: 'scroll'
    });

Solution 2:

element-resize-detector.d.ts

declarefunctionelementResizeDetectorMaker(options?: elementResizeDetectorMaker.ErdmOptions): elementResizeDetectorMaker.Erd;

declarenamespace elementResizeDetectorMaker {
    interfaceErdmOptions {
        strategy?: 'scroll' | 'object';
    }

    interfaceErd {
        listenTo(element: HTMLElement, callback: (elem: HTMLElement) =>void);
        removeListener(element: HTMLElement, callback: (elem: HTMLElement) =>void);
        removeAllListeners(element: HTMLElement);
        uninstall(element: HTMLElement);
    }
}

export = elementResizeDetectorMaker;

Consumer

let resizeDetector = elementResizeDetectorMaker({ strategy: 'scroll'});
resizeDetector.listenTo(document.getElementById('abc'), (elem: HTMLElement) => {
    console.log(elem.offsetWidth, elem.offsetHeight);
})