Angular 2
크기 조정 이벤트 감지

윈도우 크기 조절 이벤트를 수신하는 구성 요소입니다.

특정 창 너비에 숨어있는 구성 요소가 있다고 가정합니다.

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

visible 이 false 일 때마다 템플릿의 p 태그가 숨겨집니다. visible 은 onResize 이벤트 핸들러가 호출 될 때마다 값을 변경합니다. 그 호출은 매번 window:resize 발생한다 window:resize 는 이벤트를 발생시킨다.