Angular window resize event

by 
<div (window:resize)="onResize($event)"

onResize(event) {
  event.target.innerWidth;
}

or using the HostListener decorator:

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

Supported global targets are window, document, and body.

Until https://github.com/angular/angular/issues/13248 is implemented in Angular it is better for performance to subscribe to DOM events imperatively and use RXJS to reduce the amount of events as shown in some of the other answers.

More Related Contents:

  1. What is the meaning of the “at” (@) prefix on npm packages?
  2. How to get current value of RxJS Subject or Observable?
  3. angular 2 how to return data from subscribe
  4. Adding script tags in Angular component template
  5. Deep copy an array in Angular 2 + TypeScript
  6. angular 2 disable url encoding
  7. Load new modules dynamically in run-time with Angular CLI & Angular 5
  8. How to call JavaScript functions from Typescript in Angular 5?
  9. ngOnInit not being called when Injectable class is Instantiated
  10. Angular 2 – communication of typescript functions with external js libraries
  11. How to expose angular 2 methods publicly?
  12. Use external javaScript library in angular application
  13. How to set Angular 4 background image?
  14. Rxjs toPromise() deprecated
  15. How to check for isBrowser in Angular 4
  16. How to achieve a debounce service on input keyup event in angular2 with rxjs
  17. Joining Flattened Data
  18. CORS and Google Maps Places Autocomplete API calls [duplicate]
  19. Change route params without reloading in Angular 2
  20. What is the difference between Observable and a Subject in rxjs?
  21. Safe value must use [property]=binding after bypass security with DomSanitizer
  22. What is the difference between BehaviorSubject and Observable?
  23. Angular 2 binding/events not working when adding template as innerHTML
  24. Storing Objects in localStorage
  25. Subscribe to observable is returning undefined
  26. TypeScript TS7015: Element implicitly has an ‘any’ type because index expression is not of type ‘number’
  27. Observable.forkJoin with a for loop
  28. binding data to angular checkbox
  29. How to detect firestore connection failure
  30. iframe inside angular2 component, Property ‘contentWindow’ does not exist on type ‘HTMLElement’

Leave a Comment