Use element-resize-detector library in an Angular2 application

Question

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 appears to be in CommonJS format. After several attempts, I have created the following definition file (*.d.ts):

declare module ResizeDetector {
  function ResizeDetector(options: any): ResizeDetector.Erd;

  interface Erd {
    listenTo(element: any, resizeCallback: any): void;
    uninstall(element: any): void;
  }
}
export = ResizeDetector;

I then use the following import statement in my TypeScript code:

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

When running my app and using console.log('ResizeDetector', ResizeDetector), the following output is logged:

ResizeDetector function (options) {
    options = options || {};

    //idHandler is currently not an option to the listenTo function, so it should not be added to globalOptions.
    var idHandler;

    if (options.…

This shows me that the library is successfully loaded and that it returns a function as expected.

My question is how can I now start using the library in TypeScript? When I attempt something like:

private static resizeDetector = ResizeDetector({ strategy: 'scroll' });

I get the following transpile error:

error TS2349: Cannot invoke an expression whose type lacks a call signature.

Wawy · Accepted Answer · 2017-03-01 17:47:58Z

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

Definition file:

declare module 'element-resize-detector' {
  function elementResizeDetectorMaker(options?: elementResizeDetectorMaker.ErdmOptions): elementResizeDetectorMaker.Erd;

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

    interface Erd {
      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'
    });

Stone Shi · Accepted Answer · 2016-12-08 15:45:38Z

3

element-resize-detector.d.ts

declare function elementResizeDetectorMaker(options?: elementResizeDetectorMaker.ErdmOptions): elementResizeDetectorMaker.Erd;

declare namespace elementResizeDetectorMaker {
    interface ErdmOptions {
        strategy?: 'scroll' | 'object';
    }

    interface Erd {
        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);
})

answered Dec 8, 2016 at 15:45

Stone Shi

1064 bronze badges

2 Comments

Wawy Over a year ago

I have to wrap the code in declare module 'element-resize-detector' { //your code here } in order for it to work.

Saransh Kataria Over a year ago

Just putting it out here, have added a typings definition for the same: npmjs.com/package/@types/element-resize-detector

Collectives™ on Stack Overflow

Use element-resize-detector library in an Angular2 application

2 Answers 2

Comments

element-resize-detector.d.ts

Consumer

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

element-resize-detector.d.ts

Consumer

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related