It uses the built-in ResizeObserver
from the browser.
$ npm install --save @mikael-sundstrom/angular-resize-event
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { AppComponent } from './app.component'
// Import the library module
import { ResizeEventModule } from '@mikael-sundstrom/angular-resize-event'
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify AngularResizeEventModule library as an import
ResizeEventModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import { Component } from '@angular/core';
// Import the resized event model
import { ResizedEvent } from '@mikael-sundstrom/angular-resize-event';
@Component({...})
class MyComponent {
width: number;
height: number;
onResized(event: ResizedEvent) {
this.width = event.newRect.width;
this.height = event.newRect.height;
}
}
<div (resized)="onResized($event)"></div>