What is the best way to listen for component resize events within an Angular2 component?

angular resize event
angular 6 window resize event
angular hostlistener resize
resize event in angular 2
div resize event
resizesensor angular
canvas resize event
iframe resize event

I'm writing an Angular2 component that needs to dynamically change its content when resized. I am using the experimental Renderer in @angular/core (v2.1.0) and can wire up a click listener with the following:

this.rollupListener = this.renderer.listen(this.rollUp, 'click', (event) => {
  ...
});

But unfortunately I cannot do the same for a resize event - both 'resize' or 'onresize' do not work:

this.resizeListener = this.renderer.listen(this.container, 'resize', (event) => {
  // this never fires :(
});

I am able to pick up on browser resize events using the following:

@HostListener('window:resize', ['$event.target'])
onResize() {
  ...
}

But unfortunately not all component resizing in my application is due to a browser resize.

Basically, I'm looking for the JQuery equivalent of:

$(this.container).resize(() => {
  ...
});

I ended up implementing a service that uses the element-resize-detector library (https://github.com/wnr/element-resize-detector). Couldn't find a TypeScript definition file but with a little help (Use element-resize-detector library in an Angular2 application), implemented the following:

element-resize-detector.d.ts

declare function elementResizeDetectorMaker(options?: elementResizeDetectorMaker.ErdmOptions): elementResizeDetectorMaker.Erd;

declare namespace elementResizeDetectorMaker {
    interface ErdmOptions {
        strategy?: 'scroll' | 'object';
    }

    interface Erd {
        listenTo(element: HTMLElement, callback: (elem: HTMLElement) => void);
        removeListener(element: HTMLElement, callback: (elem: HTMLElement) => void);
        removeAllListeners(element: HTMLElement);
        uninstall(element: HTMLElement);
    }
}

export = elementResizeDetectorMaker;

resize.service.ts

import { Injectable } from '@angular/core';
import * as elementResizeDetectorMaker from 'element-resize-detector';

@Injectable()
export class ResizeService {
  private resizeDetector: any;

  constructor() {
    this.resizeDetector = elementResizeDetectorMaker({ strategy: 'scroll' });
  }

  addResizeEventListener(element: HTMLElement, handler: Function) {
    this.resizeDetector.listenTo(element, handler);
  }

  removeResizeEventListener(element: HTMLElement) {
    this.resizeDetector.uninstall(element);
  }
}

my-component.ts

import { Component } from '@angular/core';
import { ResizeService } from '../resize/index';

@Component({
  selector: 'my-component',
  template: ``
})
export class MyComponent {
  constructor(private el: ElementRef, private resizeService: ResizeService) {
  }

  ngOnInit() {
    this.resizeService.addResizeEventListener(this.el.nativeElement, (elem) => {
      // some resize event code...
    });
  }

  ngOnDestroy() {
    this.resizeService.removeResizeEventListener(this.el.nativeElement);
  }
}

Angular 2, 1) Using #HostListener (docs). This is the prefered method which should be enough most of the time. import {Component, NgModule, HostListener} from '#angular/core' #Component({ }) export class MyComponent { #HostListener('document:mousemove', ['$event']) onMouseMove(e) { console. @HostListener is Angular’s decorator method that’s used for listening to DOM events on the host element of both component and attribute directives.

I wrote this Angular2 directive to solve this.

You can install it by npm install bound-sensor. The advantage of using this method is it tells you once the size of parent of component changes and it doesn't depend on window resize! Imagine you need to expand and refresh your content base on size of its parent, this solves it easily.

angular-resize-event, import { Component } from '@angular/core'; @Component({ template: ` <div> <​p [hidden]="!visible" (window:resize)="onResize($event)" >Now you see me. Even though you cannot listen to events outside of the component’s template, you can listen to events on global elements such as window, document, and body with event binding. <button (document

This angular 7 library does a pretty good job: https://www.npmjs.com/package/angular-resize-event

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

hostlistener-event-resize, Angular 7 directive for detecting changes of an element size. This makes them a great option when building UI controls which need to manage some common state. One prominent example is Blazors form and validation components. The EditForm component cascades a EditContext value to all the controls in the form. This is used to coordinate validation and invoke form events. Let's have a look at an example.

Rather than doing all above approaches use ngDoCheck lifecycle hook, it will simply detect any change in the component and you can simply put a condition in doCheck to perform your operation.

This might be not the exact approach but if you want to detect any change in your component, then resizing of the div is also a change so it's better to use doCheck lifecycle hook DoCheck

Angular 2 - window resize events, New File. New Folder. Angular Generator. data:image/svg+xml,%3C?xml version​='1.0 Component. data:image/svg+xml,%3C?xml version='1.0 Service. "The default handled events should be mapped from the original HTML DOM component's events" <- Can you please quote your source, or provide a list of available events? I could not find any official Angular 2 list of events. – Sir4ur0n May 27 '16 at 13:32

onresize Event, import {Component, ViewChild, HostListener} from '@angular/core'; export class AppComponent { title = "Window resize events"; angularVersion = 'RC.5'; on systemjs.config.js in angular.io) * System configuration for Angular 2 samples //packages tells the System loader how to load when no filename and/or no  Not really an Angular question. look at the window object. You can get it's innerHeight and innerWidth properties.. – Sasxa Feb 20 '16 at 18:48. @Sasxa is correct, you just need to do console.log(event.target.innerWidth ) – Pankaj Parkar Feb 20 '16 at 19:10.

How to build a full-page website in Angular: Page 4, Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions. Technical Details. Bubbles: No. Cancelable: No. Event type:  Creating your first Angular component; Passing data into Angular components with @Input; Component events with EventEmitter and @Output in Angular; Introduction. This tutorial will cover stateless component events using the EventEmitter API and @Output decorator. These allow us to emit change or any custom event names from a custom component in Angular.

Detect Responsive Screen Sizes in Angular ― Scotch.io, The CLI is back in our good graces as we can use it to generate a directive. The fundamental difference between a component and a directive is that a directive We will create a resize function that measures the width and height of our the event we want to listen for to fire the method we just decorated. React executes components multiple times, whenever it senses the need. And in each re-render, useEffect is going to be called again. This will create n new event bindings of handleResize to the resize event. If this component is re-rendered often, this could create a serious memory leak in our program. We only ever need or want one event

Comments
  • Thete is no resize event on elements, only on window. jQuery probably uses polling.
  • Thanks for steering me in the right direction, Günter! I'll either make use of Marc's library marcj.github.io/css-element-queries or implement a directive that registers a mutation observer for an element.
  • Perfect solution for listening component resize events !
  • crazy hacks such as this breaks the application ui. And gives developer sleepless nights debugging around. So better to stay away from crazy hacks.