NgxResize

A service that emits changes of a DOM container on resize by utilizing Resize Observer

Installation

npm install ngx-resize

Usage

There are two approaches of using ngx-resize. Both approaches results an Observable<NgxResizeResult>

export interface NgxResizeResult {
    readonly entries: ReadonlyArray<ResizeObserverEntry>;
    readonly x: number;
    readonly y: number;
    readonly width: number;
    readonly height: number;
    readonly top: number;
    readonly right: number;
    readonly bottom: number;
    readonly left: number;
    readonly dpr: number;
}

injectNgxResize()

If you're on Angular 14+ and are using inject() for Dependency Injection, you can use injectNgxResize() to grab the Observable<NgxResizeResult>

@Component({})
export class SomeComponent {
    readonly resizeResult$ = injectNgxResize(); // Observable<NgxResizeResult>
}

injectNgxResize() accepts a Partial<NgxResizeOptions> and will be merged with the default global options.

export interface NgxResizeOptions {
    /* "box" options that is passed in new ResizeObserver */
    box: ResizeObserverBoxOptions;
    /* time in ms to debounce the events; single number for resize; can also support scroll and resize separately */
    debounce: number | { scroll: number; resize: number };
    /* whether to observe resize on scroll */
    scroll: boolean;
    /* use offset size instead */
    offsetSize: boolean;
    /* emit in NgZone or not. Default to "true" */
    emitInZone: boolean;
    /* emit the initial DOMRect of nativeElement. Default to "false" */
    emitInitialResult: boolean;
}

export const defaultResizeOptions: NgxResizeOptions = {
    box: 'content-box',
    scroll: false,
    offsetSize: false,
    debounce: { scroll: 50, resize: 0 },
    emitInZone: true,
    emitInitialResult: false,
};

With Output

Instead of getting the Observable<NgxResizeResult>, you can assign injectNgxResize() to an Output directly

@Component({})
export class SomeComponent {
    @Output() resize = injectNgxResize(); // resize emits everytime NgxResize emits
}

<some-component (resize)="onResize($event)"></some-component>
<!-- $event is of type NgxResizeResult -->

NgxResize

If you're not using inject(), you can use the NgxResize directive

<some-component (ngxResize)="onResize($event)"></some-component>
<some-component
    (ngxResize)="onResize($event)"
    [ngxResizeOptions]="optionalOptions"
></some-component>

With hostDirectives

With Angular 15, you can also use NgxResize as a hostDirectives and expose ngxResize Output

@Component({
    hostDirectives: [{ directive: NgxResize, outputs: ['ngxResize'] }],
})
export class SomeComponent {
    @HostListener('ngxResize', ['$event'])
    onResize(event: NgxResizeResult) {
        // listen for resize event from NgxResize
    }
}

Credit to @denisyilmaz for this usage

Provide global NgxResizeOptions

You can use provideNgxResizeOptions() to provide global options for a specific Component tree. If you call provideNgxResizeOptions() in bootstrapApplication() (for Standalone) and AppModule (for NgModule) then the options is truly global.

Contributions

All contributions of any kind are welcome.