DanAbdn DanAbdn - 5 days ago 5
Javascript Question

Angular2 window resize event

Angular 2 (beta 6).

I would like to perform some tasks based on the window re-size event (on load and dynamically).

Currently I have my DOM as follows:

<div id="Harbour">
<div id="Port" (window:resize)="onResize($event)" >
<router-outlet></router-outlet>
</div>
</div>


The event correctly fires

export class AppComponent {
onResize(event) {
console.log(event);
}
}


How do I retrieve the Width and Height from this event object?

Thanks.

Answer
<div (window:resize)="onResize($event)"
onResize(event) {
  event.target.innerWidth;
}

or

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

Supported global targets are window, document, and body.