Angular 2
Detectar eventos de redimensionamiento

Un componente que escucha en el evento de cambio de tamaño de la ventana.

Supongamos que tenemos un componente que se ocultará en un cierto ancho de ventana.

import { Component } from '@angular/core';

@Component({
  ...
  template: `
    <div>
      <p [hidden]="!visible" (window:resize)="onResize($event)" >Now you see me...</p>
      <p>now you dont!</p>
    </div>
  `
  ...
})
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;
    }
  }
}

Una etiqueta p en nuestra plantilla se ocultará cuando sea visible falso. visible cambiará el valor cada vez que se onResize controlador de eventos onResize . Su llamada se produce cada window:resize tiempo window:resize dispara un evento.