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 CreateSignalOptions<WindowSizeValue> and 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
equal	ValueEqualityFn<WindowSizeValue>	-	Custom equality function (see more)
debugName	string	-	Debug name for the signal (development only)
injector	Injector	-	Optional injector for DI context

Return Value

The windowSize() function returns a Signal<WindowSizeValue>:

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

Property	Description
width	Viewport width — excludes scrollbar by default; includes scrollbar when includeScrollbar: true
height	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;
      const { width, height } = this.size();

      canvasEl.width = width;
      canvasEl.height = height;

      this.redraw();
    });
  }

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

SSR Compatibility

On the server, the signal initializes with initialValue (defaults to { width: 0, height: 0 }).

Type Definitions

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

interface WindowSizeOptions extends CreateSignalOptions<WindowSizeValue>, WithInjector {
  readonly includeScrollbar?: boolean;
  readonly initialValue?: WindowSizeValue;
}

function windowSize(options?: WindowSizeOptions): Signal<WindowSizeValue>;

Related

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

Edit this page on GitHub Last updated: Mar 19, 2026, 23:28:23

PreviousWindowFocusNextActiveElement