Ngx Size Me

Responsive component for Angular, inspired by react-size-me. Lightweight angular directive that makes your components aware of width, height and position.

If you 👍 this project, consider giving it a ★, thanks! 🙌

Table of Contents

• Installation
• Usage
• Demo
• API
• Changelog
• Code of Conduct
• Contributing
• Sponsors
• Contact
• License

Installation

npm install @eisberg-labs/ngx-size-me --save

Usage

First import to your module:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SizeMeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Then, use the directive in your component's HTML:

<div sizeMe (resize)="logResize($event)"></div>

Demo

View Demo and Documentation

Api

|Option | Data type | Description| |-------|-----------|------------| |monitorWidth | number | if true, any changes to your component's width will trigger a recalculation| |monitorHeight | boolean | if true, any changes to your component's height will trigger a recalculation| |refreshRate | number | Frequency of detecting element changes (milliseconds). Default is 16ms.| |refreshMode | 'throttle' or 'debounce' | Mode in which refreshing should occur.|

When recalculation is triggered, directive's state is updated with new width, height and position (left, right, top, bottom). When a state is updated, component can be notified either by binding an event trigger like:

<div sizeMe (resize)="logResize($event)" > </div>

Or by binding updates to a property:

<div sizeMe [state]="size"></div>

Changelog

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

Code of Conduct

I follow the Rust Code of Conduct.

Contributing

Everyone is welcome to contribute. You can read more about contributing here.

Sponsors

If you find this project useful, give it a star. You could also consider supporting us through the following platforms:

• Become a GitHub Sponsor
• Support me on Patreon

As this project grows, I will showcase sponsors' logos and links in this section. Thank you for your support!

Contact

Feel free to reach out to me on LinkedIn.

License

This project is MIT licensed.