PageVisibility

Reactive wrapper around the Page Visibility API. Returns a signal that tracks the current visibility state of the page.

Loading demo...

Usage

import { Component, effect } from '@angular/core';
import { pageVisibility } from '@signality/core';

@Component({
  template: `
    <p>Page is {{ visibility() === 'visible' ? 'visible' : 'hidden' }}</p>
  `,
})
export class VisibilityDemo {
  readonly visibility = pageVisibility(); 
  
  constructor() {
    effect(() => {
      if (this.visibility() === 'hidden') {
        console.log('User switched tabs');
      }
    });
  }
}

Use InjectionToken for Singleton

For global state tracking like pageVisibility, consider using the provided PAGE_VISIBILITY 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 { PAGE_VISIBILITY } from '@signality/core';

const visibility = pageVisibility(); 
const visibility = inject(PAGE_VISIBILITY); 

Learn more about Token-based utilities.

Parameters

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

Options

The PageVisibilityOptions extends CreateSignalOptions<DocumentVisibilityState> and WithInjector:

Option	Type	Description
equal	ValueEqualityFn<DocumentVisibilityState>	Custom equality function (see more)
debugName	string	Debug name for the signal (development only)
injector	Injector	Optional injector for DI context

Return Value

Returns a Signal<DocumentVisibilityState> containing the current page visibility state. Possible values:

• 'visible' - The page content is at least partially visible
• 'hidden' - The page content is not visible to the user

Examples

Pause video when hidden

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

@Component({
  template: `<video #video src="video.mp4" autoplay></video>`,
})
export class SmartVideo {
  readonly video = viewChild.required<ElementRef<HTMLVideoElement>>('video');
  readonly visibility = pageVisibility();
  
  constructor() {
    effect(() => {
      const videoEl = this.video().nativeElement;
      if (this.visibility() === 'visible') {
        videoEl.play();
      } else {
        videoEl.pause();
      }
    });
  }
}

SSR Compatibility

On the server, the signal initializes with 'visible'.

Type Definitions

type PageVisibilityOptions = CreateSignalOptions<DocumentVisibilityState> & WithInjector;

function pageVisibility(options?: PageVisibilityOptions): Signal<DocumentVisibilityState>;

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

PreviousOnlineNextPermissionState