Angular Resize Event

Important

Forked from: https://github.com/vdolek/angular-resize-event. The last original version is not supported by angular 17. We forked and merged a pull request which contains angular 17 support.

Thanks to: https://github.com/vdolek, https://github.com/dereekb, and all contributors.

Description

Angular 17 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 i angular-resize-event@npm:@sonrisa-dev/angular-resize-event-sonfork

and then from your Angular AppModule:

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';

@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:

<div (resized)="onResized($event)"></div>

import { Component } from '@angular/core';

// Import the resized event model
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