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

Question

I am writing an Angular2 component that should dynamically change its contents when resized. I am using the experimental Renderer in @ angular / core (v2.1.0) and can connect a click listener with the following:

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

But, unfortunately, I cannot do the same for the resize event - both "resize" and "onresize" do not work:

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

I can select browser resize events using the following:

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

But, unfortunately, not all resizing components in my application are due to resizing the browser.

Basically, I'm looking for a jQuery equivalent:

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

Answer 1

I ended up deploying a service using the element-size-detector library ( https://github.com/wnr/element-resize-detector ). The TypeScript definition file could not be found, but with a little help ( Use the -resize-detector library of elements in an Angular2 application), the following is implemented:

element-resizing-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); } } 

Answer 2

I wrote this Angular2 directive to solve this problem.

You can install it on npm install bound-sensor . The advantage of using this method is that it tells you how the size of the component's parent changes, and it does not depend on the resizing of the window! Imagine that you need to expand and update the content base to the size of your parent, this will easily resolve.