Ngx Size Me

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.

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 { }

And use in your component html

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

Demo

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>

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.