Angular

Chapter 25: Detecting resize events
Section 25.1: A component listening in on the window resize
event
Suppose we have a component which will hide at a certain window width.
import { Component } from '@angular/core';
@Component({
...
template: `
Now you see me...
now you don't!
`
...
})
export class MyComponent {
visible: boolean = false;
breakpoint: number = 768;
constructor() {
}
}
onResize(event) {
const w = event.target.innerWidth;
if (w >= this.breakpoint) {
this.visible = true;
} else {
// whenever the window is less than 768, hide this component.
this.visible = false;
}
}
A p tag in our template will hide whenever visible is false. visible will change value whenever the onResize event
handler is invoked. Its call occurs every time window:resize fires an event.
GoalKicker.com – Angular 2 Notes for Professionals 111