Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

angular-resize-event

1.2.1 • Public • Published

Angular Resize Event

Angular 7 directive for detecting changes of an element size.

It is as simple as:

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

It internally uses ResizeSensor from CSS Element Queries.

Build Status npm version

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 the library module
import { AngularResizedEventModule } from 'angular-resize-event';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
 
    // Specify AngularResizedEventModule library as an import
    AngularResizedEventModule
  ],
  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.newWidth;
    this.height = event.newHeight;
  }
}

License

MIT © Martin Volek

Install

npm i angular-resize-event

DownloadsWeekly Downloads

17,432

Version

1.2.1

License

MIT

Unpacked Size

62.2 kB

Total Files

27

Last publish

Collaborators

  • avatar