https://github.com/fidian/ngx-resize-observer

Angular 8+ module for detecting when elements are resized
https://github.com/fidian/ngx-resize-observer

Last synced: 2 months ago
JSON representation

Angular 8+ module for detecting when elements are resized

• Host: GitHub
• URL: https://github.com/fidian/ngx-resize-observer
• Owner: fidian
• License: mit
• Created: 2019-09-11T14:47:10.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2025-06-18T17:34:28.000Z (4 months ago)
• Last Synced: 2025-08-19T05:53:10.667Z (2 months ago)
• Language: TypeScript
• Size: 1.4 MB
• Stars: 16
• Watchers: 1
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• fucking-awesome-angular - ngx-resize-observer - Angular 8+ module for detecting when elements are resized. (Third Party Components / DOM)
• awesome-angular - ngx-resize-observer - Angular 8+ module for detecting when elements are resized. (Third Party Components / DOM)
• fucking-awesome-angular - ngx-resize-observer - Angular 8+ module for detecting when elements are resized. (Table of contents / Third Party Components)

README

          
# NgxResizeObserver

Angular 20.x library to monitor changes to elements. Uses ResizeObserver to do the work.

If you would like to simply know when elements are visible, check out [ngx-visibility](https://github.com/fidian/ngx-visibility/).

If you want to be notified when DOM elements change properties, [ngx-mutation-observer](https://github.com/fidian/ngx-mutation-observer/) would be a good pick.

## Demonstration

There's a [live demo](https://codesandbox.io/s/github/fidian/ngx-resize-observer-demo/tree/master/) over at CodeSandbox.io.

## Installation

Install like other Angular libraries. First run a command to download the module.

    npm install ngx-resize-observer

Next, add the module to your project.

    import { BrowserModule } from '@angular/platform-browser';

    import { NgModule } from '@angular/core';

    import { FormsModule } from '@angular/forms';

    // Import the module

    import { NgxResizeObserverModule } from 'ngx-resize-observer';

    import { AppComponent } from './app.component';

    @NgModule({

        declarations: [AppComponent, ItemComponent],

        // Include the module.

        imports: [BrowserModule, FormsModule, NgxResizeObserverModule],

        providers: [],

        bootstrap: [AppComponent]

    })

    export class AppModule {}

Finally, you leverage the service directly or use some directives for common uses.

## NgxResizeObserverDirective

Emits `ResizeObserverEntry` when a resize is detected for that element.

    


Only one property is configurable, which is the box model. When not specified, it defaults to "content-box". To change this, use the `resizeBoxModel` directive. The only allowed values are "content-box" and "border-box".

    


## License

This project is licensed under an [MIT license](LICENSE.md).