Detecting real time window size changes in Angular 4

javascript

responsive-design

performance

best-practices

byAlex Kataev·Dec 31, 2024

Detecting window size changes in Angular is an output of HostListener from the @angular/core. To implement this, include it in your Angular component:

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

export class AppComponent {

  @HostListener('window:resize')
  onWindowResize() {
    // You've resized the window, let's party!
    this.adjustLayout(window.innerWidth);
  }

  adjustLayout(width) {
    // Switches layout based on width, like a Transformer!
  }
}

This delightful piece of code sets up an event listener that triggers onWindowResize whenever the browser window resizes, ensuring your UI is as adaptable as a chameleon in a rainbow.

Managing Responsiveness and Optimizing Performance

Maximizing Efficiency with BehaviorSubject

Use a BehaviorSubject within a service to efficiently track window size changes. This approach enables multiple components to react to size changes without duplicating event listeners.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class WindowSizeService {
  private windowSize = new BehaviorSubject<{ width: number, height: number }>({ width: window.innerWidth, height: window.innerHeight });

  get size() {
    return this.windowSize.asObservable();
  }

  updateSize() {
    this.windowSize.next({ width: window.innerWidth, height: window.innerHeight });
  }
}

Then on your component:

constructor(private windowSizeService: WindowSizeService) {}

ngOnInit() {
  this.windowSizeService.size.subscribe(size => {
    this.adjustLayout(size.width);
  });
}

Throttling Resize Events for Performance

Prevent performance hiccups by using debounceTime to throttle resize events. It's like putting a speed limiter on your super-fast racing car.

import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

fromEvent(window, 'resize')
  .pipe(debounceTime(150))
  .subscribe(event => this.onWindowResize(event));

Remember to Unsubscribe to Prevent Memory Leaks

Always unsubscribe from the event observables in the ngOnDestroy() lifecycle hook to avoid memory leaks. It's like housekeeping, but in your code!

import { Subscription } from 'rxjs';

private subscription: Subscription;

ngOnInit() {
  this.subscription = this.windowSizeService.size.subscribe(size => {
    this.adjustLayout(size.width);
  });
}

ngOnDestroy() {
  this.subscription.unsubscribe();
  // Feels so good to tidy up!
}

Handling of Breakpoints

Angular CDK BreakpointObserver

With BreakpointObserver from @angular/cdk/layout, you get a friendly sidekick to handle breakpoints offering a more refined and effortless breakpoint management:

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

constructor(private breakpointObserver: BreakpointObserver) {}

ngOnInit() {
  this.breakpointObserver.observe([
    Breakpoints.Small,
    Breakpoints.Medium,
    Breakpoints.Large
  ]).subscribe(result => {
    if (result.matches) {
      this.adjustLayoutBasedOnBreakpoint(result);
    }
  });
}

Ditch Media Queries for Angular Services

Upgrading your coding style to the modern age! Angular services and CDK utilities are the way to go, leaving CSS media queries in the past. These tools fit into Angular's lifecycle and change detection mechanisms smoothening the dynamic sizing process.

Advanced Topics

Caching for Optimized Performance

A performance boost from caching the initial values of window.innerWidth and window.innerHeight can be a game-changer. Serving cached values and watching for changes limits DOM access, resulting in an optimally functional app.

private cachedWidth = window.innerWidth;

get currentWidth() {
  return this.cachedWidth;
}

@HostListener('window:resize', ['$event'])
onResize(event) {
  // Throttle the updates to prevent performance lag
  debounceTime(100);
  this.cachedWidth = event.target.innerWidth;
}

Media Queries Alternative for Dynamic UI Elements

Who needs CSS media queries when you can implement dynamic UI elements like a responsive nav-bar using *ngIf and window size from the Angular service:

<nav *ngIf="currentWidth > breakpoint">
  <!-- Full-size navigation -->
</nav>
<nav *ngIf="currentWidth <= breakpoint">
  <!-- Mobile-navigation -->
</nav>

Platform-Specific Behavior

Ionic or hybrid platform developers, listen up! Employ platform.width() and platform.height() to detect window size. This approach respects the unique properties of different devices and platforms.

Error Handling in Services

Always plan for rain! Implement robust error handling in service layers to manage exceptions during window size detection effortlessly.

this.subscription = this.windowSizeService.size.subscribe({
  next: size => this.adjustLayout(size.width),
  error: err => handleWindowSizeError(err)
});

function handleWindowSizeError(error) {
  //React accordingly to the error
}