Angular Resize Event
Angular 12 directive for detecting changes of an element size.
It is as simple as:
<div (resized)="onResized($event)"></div>
It internally uses browser native ResizeObserver
. Therefore it is not supported in IE.
For Angular 11 you can use version 2.1.0 which internally uses uses ResizeSensor
from CSS Element Queries that is supported in IE.
Playground
StackBlitz playground
Using the library
Import the library in any Angular application by running:
$ npm install angular-resize-event
and then from your Angular AppModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularResizeEventModule } from 'angular-resize-event';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AngularResizeEventModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Once your library is imported, you can use its resized
directive in your Angular application:
<div (resized)="onResized($event)"></div>
import { Component } from '@angular/core';
import { ResizedEvent } from 'angular-resize-event';
@Component({...})
class MyComponent {
width: number;
height: number;
onResized(event: ResizedEvent) {
this.width = event.newRect.width;
this.height = event.newRect.height;
}
}
License
MIT © Martin Volek