WindowFocus ​

Reactive wrapper around the browser's Window focus/blur events. Returns a signal that tracks whether the window is currently focused.

Loading demo...

Usage ​

angular-ts
import { Component, effect } from '@angular/core';
import { windowFocus } from '@signality/core';

@Component({
  template: `
    <p>Window is {{ isFocused() ? 'focused' : 'not focused' }}</p>
  `,
})
export class FocusDemo {
  readonly isFocused = windowFocus(); 

  constructor() {
    effect(() => {
      if (!this.isFocused()) {
        console.log('User left the window');
      }
    });
  }
}

Use InjectionToken for Singleton

For global state tracking like windowFocus, consider using the provided WINDOW_FOCUS 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:

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

const isFocused = windowFocus(); 
const isFocused = inject(WINDOW_FOCUS);

Learn more about Token-based utilities.

Parameters ​

ParameterTypeDescription
optionsWindowFocusOptionsOptional configuration (see Options below)

Options ​

The WindowFocusOptions extends Angular's CreateSignalOptions<boolean> and WithInjector:

OptionTypeDescription
equalValueEqualityFn<boolean>Custom equality function (see more)
debugNamestringDebug name for the signal (development only)
injectorInjectorOptional injector for DI context

Return Value ​

Returns a Signal<boolean> containing the current window focus state:

  • true - Window is focused
  • false - Window is not focused (blurred)

Examples ​

Pause polling when unfocused ​

angular-ts
import { Component, effect } from '@angular/core';
import { windowFocus } from '@signality/core';

@Component({
  template: `<p>Data refreshes while window is focused</p>`,
})
export class SmartPolling {
  readonly isFocused = windowFocus();

  constructor() {
    effect(() => {
      if (this.isFocused()) {
        this.startPolling();
      } else {
        this.stopPolling();
      }
    });
  }

  private startPolling() { /* ... */ }
  private stopPolling() { /* ... */ }
}

SSR Compatibility ​

On the server, the signal initializes with true.

Type Definitions ​

typescript
type WindowFocusOptions = CreateSignalOptions<boolean> & WithInjector;

function windowFocus(options?: WindowFocusOptions): Signal<boolean>;
Edit this page on GitHub Last updated: Mar 19, 2026, 23:28:23