Angular 2
Detecteert formaatwijzigingen

Een component die luistert naar de gebeurtenis voor het wijzigen van het formaat van het venster.

Stel dat we een component hebben die zich op een bepaalde vensterbreedte verbergt.

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;
    }
  }
}

Een p tag in onze sjabloon wordt verborgen wanneer visible onwaar is. visible verandert van waarde wanneer de gebeurtenishandler onResize wordt aangeroepen. De aanroep vindt elke keer plaats window:resize start een gebeurtenis.