https://github.com/nemeslaszlo/angular-resize-event
Angular directive for detecting changes of an element size.
https://github.com/nemeslaszlo/angular-resize-event
angular resize resizer
Last synced: 9 months ago
JSON representation
Angular directive for detecting changes of an element size.
- Host: GitHub
- URL: https://github.com/nemeslaszlo/angular-resize-event
- Owner: NemesLaszlo
- License: mit
- Created: 2024-03-18T19:14:32.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-11T18:52:03.000Z (over 1 year ago)
- Last Synced: 2024-11-18T11:04:08.108Z (over 1 year ago)
- Topics: angular, resize, resizer
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/angular-resize-event-package
- Size: 164 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Resize Event
Angular directive for detecting changes of an element size.
## Important
Forked from: https://github.com/vdolek/angular-resize-event. The last original version is not supported by angular 16, 17, 18, 19, 20 and so on.
Thanks to: https://github.com/vdolek, https://github.com/dereekb, and all contributors.
It is as simple as:
```html
```
It internally uses browser native [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver). Therefore it is not supported in IE.
## Using the library
Import the library in any Angular application by running:
```bash
$ npm install angular-resize-event-package
```
and then from your Angular `AppModule`:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import the library module
import { AngularResizeEventModule } from 'angular-resize-event-package';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify AngularResizeEventModule library as an import
AngularResizeEventModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```
Once your library is imported, you can use its `resized` directive in your Angular application:
```html
```
```typescript
import { Component } from '@angular/core';
// Import the resized event model
import { ResizedEvent } from 'angular-resize-event-package';
@Component({...})
class MyComponent {
width: number;
height: number;
onResized(event: ResizedEvent) {
this.width = event.newRect.width;
this.height = event.newRect.height;
}
}
```
## License
MIT © [Laszlo Nemes](mailto:wow.laszlo@gmail.com)