WindowSize

Reactive tracking of browser window dimensions. Automatically updates on window resize.

Loading demo...

Usage

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

@Component({
  template: `
    <p>Window: {{ size.width() }} × {{ size.height() }}</p>
  `,
})
export class WindowSizeDemo {
  readonly size = windowSize(); 
}

Use InjectionToken for Singleton

For global state tracking like windowSize, consider using the provided WINDOW_SIZE token instead of calling the function directly. This provides a singleton instance that can be shared across your entire application, reducing memory usage and event listener overhead:

import { inject } from '@angular/core';
import { WINDOW_SIZE } from '@signality/core';

const size = windowSize(); 
const size = inject(WINDOW_SIZE); 

Learn more about Token-based utilities.

Parameters

Parameter	Type	Description
options	WindowSizeOptions	Optional configuration (see Options below)

Options

The WindowSizeOptions extends WithInjector:

Option	Type	Default	Description
includeScrollbar	boolean	false	Include scrollbar in dimensions
initialValue	WindowSizeValue	{ width: 0, height: 0 }	Initial value for SSR and before the first measurement
injector	Injector	-	Optional injector for DI context

Return Value

The windowSize() function returns a WindowSizeRef:

Property	Type	Description
width	Signal<number>	Viewport width — excludes scrollbar by default; includes scrollbar when includeScrollbar: true
height	Signal<number>	Viewport height — excludes scrollbar by default; includes scrollbar when includeScrollbar: true

Examples

Aspect ratio detection

import { Component, computed } from '@angular/core';
import { windowSize } from '@signality/core';

@Component({
  template: `
    <div [attr.data-orientation]="orientation()">
      <ng-content />
    </div>
  `,
})
export class OrientationAware {
  readonly size = windowSize();

  readonly isPortrait = computed(() => this.size.height() > this.size.width());

  readonly orientation = computed(() => {
    return this.isPortrait() ? 'portrait' : 'landscape'; 
  });
}

Viewport-sized canvas

import { Component, effect, viewChild, ElementRef } from '@angular/core';
import { windowSize } from '@signality/core';

@Component({
  template: `<canvas #canvas></canvas>`,
  styles: `canvas { display: block; }`,
})
export class FullscreenCanvas {
  readonly canvas = viewChild.required<ElementRef>('canvas');
  readonly size = windowSize();

  constructor() {
    effect(() => {
      const canvasEl = this.canvas().nativeElement;

      canvasEl.width = this.size.width();
      canvasEl.height = this.size.height();

      this.redraw();
    });
  }

  private redraw() {
    // Draw to canvas
  }
}

SSR Compatibility

On the server, both signals initialize from initialValue (defaults to { width: 0, height: 0 }).

Type Definitions

interface WindowSizeValue {
  readonly width: number;
  readonly height: number;
}

interface WindowSizeOptions extends WithInjector {
  readonly includeScrollbar?: boolean;
  readonly initialValue?: WindowSizeValue;
}

interface WindowSizeRef {
  readonly width: Signal<number>;
  readonly height: Signal<number>;
}

function windowSize(options?: WindowSizeOptions): WindowSizeRef;

const WINDOW_SIZE: InjectionToken<WindowSizeRef>;

Related

• ElementSize — Track element dimensions
• ScrollPosition — Track scroll position

Edit this page on GitHub Last updated: Aug 23, 2026, 18:15:17

PreviousWindowFocusNextActiveElement