Angular2 Component listen when parent's resize change

Question

I have a requirement in which I want to change properties of a child component depending on the size of its parent component though a method call. The issue I am running into is that the only resize event I can listen to is that of the window, which doesn't help as the window size is not changing, only the parent component is due to a side panel div opening and closing.

The only possibility I can see at the moment is to have some sort of polling in which we within the child component itself that checks if its width has changed every x amount of time.

Thanks for your help!

Answer 1

You are correct that you can't get the resize event on a div (without installing some js extension). But something like this works.

The Parent Component:

import {Component, AfterContentInit, ElementRef} from '@angular/core';
import { ChildComponent } from "./ChildComponent";

export interface IParentProps {
    width: number;
    height: number;
}
@Component({
    selector: 'theParent',
    template: `text text  text text text text
               text text text text text text
               <the-child [parentProps]="parentProps"></the-child>`,
    directives: [ChildComponent] 
})

export class ParentComponent implements AfterContentInit {
    sizeCheckInterval = null;
    parentProps: IParentProps = {
        width: 0,
        height: 0
    }
    constructor(private el: ElementRef) {
    }
    ngAfterContentInit() {
        this.sizeCheckInterval = setInterval(() => {
            let h = this.el.nativeElement.offsetHeight;
            let w = this.el.nativeElement.offsetWidth;
            if ((h !== this.parentProps.height) || (w !== this.parentProps.width)) {
                this.parentProps = {
                    width: w,
                    height: h

                }
            }
        }, 100);

    }
    ngOnDestroy() {
        if (this.sizeCheckInterval !== null) {
            clearInterval(this.sizeCheckInterval);
        }
    }
}

The Child Component:

import {Component, Input, SimpleChange} from "@angular/core";
import { IParentProps } from "./ParentComponent";

@Component({
    directives: [],
    selector: "the-child",
    template: `child`
})
export class ChildComponent {
    @Input() parentProps: IParentProps;
    constructor() {
        this.parentProps = {
            width: 0,
            height: 0
        }
    }
    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        this.parentProps = changes["parentProps"].currentValue;
        console.log("parent dims changed");
    }

}