🌐

Browser Web APIs

Interactive demonstrations of 18 native Web APIs powered by Angular signals.

👁️ Page Visibility

unsupportedService

Tracks whether this tab is visible or hidden. Switch to another tab and watch the state change in real-time.

Visibility Statevisible

Is Page Visible?YES

Service Implementation

Typescript

import { PageVisibilityService } from '@angular-helpers/browser-web-apis';

readonly svc = inject(PageVisibilityService);

this.svc.watch().subscribe(state => {
  console.log('Visibility changed:', state);
});

Best for: Side effects that need to trigger outside of the template, global logging, or legacy RxJS architectures.

📶 Network Information

partialService

Live connection quality tracking. Detect bandwidth changes, effective connection types, and offline/online transitions.

StatusONLINE

Connection TypeN/A

Effective TypeN/A

Downlink0 Mbps

RTT0 ms

Manual RxJS Stream

Typescript

import { NetworkInformationService } from '@angular-helpers/browser-web-apis';

readonly svc = inject(NetworkInformationService);

ngOnInit() {
  const current = this.svc.getSnapshot();
  this.svc.watch().subscribe(info => { ... });
}

📏 Resize Observer

unsupportedService

Track dimensions of any element. Useful for dynamic layouts that don't depend on the window size.

Target

Resize Demo

Measured Width0px

Measured Height0px

Service implementation

Typescript

import { ResizeObserverService } from '@angular-helpers/browser-web-apis';

readonly svc = inject(ResizeObserverService);

this.svc.observe(element).subscribe(entry => {
  const { width, height } = entry[0].contentRect;
  // handle resize
});

👁️‍🗨️ Intersection Observer

unsupportedService

Detect when elements enter or leave the viewport. Essential for lazy loading and scroll-triggered animations.

ViewportHIDDEN

↓ Scroll down inside this box

Target Element

Service Subscription

Typescript

import { IntersectionObserverService } from '@angular-helpers/browser-web-apis';

readonly svc = inject(IntersectionObserverService);

this.svc.observeVisibility(element, { threshold: 0.5 })
  .subscribe(isVisible => { ... });