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! 🙌
npm install @eisberg-labs/ngx-size-me --saveFirst 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>| 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>All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
I follow the Rust Code of Conduct.
Everyone is welcome to contribute. You can read more about contributing here.
If you find this project useful, give it a star. You could also consider supporting us through the following platforms:
As this project grows, I will showcase sponsors' logos and links in this section. Thank you for your support!
Feel free to reach out to me on LinkedIn.
This project is MIT licensed.
