ngxResizeDetector

Angular directive to listen all resize events on the host element.

Demo:-

Here is the working demonstration of package: https://ngx-resize-detector-demo.vercel.app/

Installation:-

1.  Download the package from npm using: npm i ngx-resize-detector.

2.  Add NgxResizeDetectorModule into your NgModule imports:

import {NgxResizeDetectorModule} from "ngx-resize-detector";

@NgModule({
  ...
    imports: [ NgxResizeDetectorModule, ... ],
...
})

3.  Add ngxResizeDetector on any element like this:

<div ngxResizeDetector
     [debounce]="<DEBOUNCE_TIME(in milliseconds, default = 0)>"
     [delay]="<DELAY_TIME(in milliseconds, default = 0)>"
     [disabled]="<LISTEN_EVENTS_OR_NOT(boolean, default = false)>"
     [distinctUntilChanged]="<LISTEN_SPECIFIC_DIMENSION(ElementDimension | ElementDimension[], default = [] { listen_to_all })>"
     (onDimensionsChange)="onDimensionChange($event)">
  ...
</div>

4.  Now in your component.ts:

import {ElementDimensions} from "ngx-resize-detector";
...
onDimensionChange(event: ElementDimensions) {
  // post resize action goes here.
}

Interface:-

interface ElementDimensions {
  offsetWidth: number;
  offsetHeight: number;
  clientWidth: number;
  clientHeight: number;
}

Enum:-

enum ElementDimension {
  CLIENT_HEIGHT = 'clientHeight',
  CLIENT_WIDTH = 'clientWidth',
  OFFSET_HEIGHT = 'offsetHeight',
  OFFSET_WIDTH = 'offsetWidth'
}

Author:-

Harsh Mittal