All Utilities
Every utility in Signality, on one page. Search by name or by what it does, and filter by category.
Showing 76 of 76 utilities
Browser 36
batteryReactive wrapper around the Battery Status API.bluetoothReactive wrapper around the Web Bluetooth API. Connect to Bluetooth devices and track connection state with Angular signals.breakpointsReactive breakpoint matching using matchMedia. Track responsive breakpoints with Angular signals.broadcastChannelReactive wrapper around the Broadcast Channel API. Communicate between browser tabs/windows with Angular signals.browserLanguageReactive wrapper around the browser's language preference. Returns a signal that tracks the current language of the browser UI and updates automatically when the user changes their language preference.clipboardReactive wrapper around the Clipboard API. Read and write clipboard content with Angular signals.devicePixelRatioReactive wrapper around window.devicePixelRatio. Track device pixel ratio changes (zoom level or display density) with Angular signals.devicePostureReactive wrapper around the Device Posture API. Track device posture state for foldable devices with Angular signals.displayMediaReactive wrapper around the Screen Capture API. Capture screen content with Angular signals.eyeDropperReactive wrapper around the EyeDropper API. Sample colors from anywhere on the screen with Angular signals.faviconReactive favicon manipulation. Dynamically change the page favicon based on application state.fileDialogSignal-based utility for programmatically opening the native file picker dialog.fpsReactive FPS (Frames Per Second) monitor using requestAnimationFrame. Track rendering performance with Angular signals.fullscreenReactive wrapper around the Fullscreen API. Control fullscreen mode for any element with Angular signals.gamepadReactive wrapper around the Gamepad API. Track connected gamepads and their input state with Angular signals.geolocationReactive wrapper around the Geolocation API. Track user location with Angular signals.inputModalityReactively track the user's current input method (keyboard, mouse, or touch).listenerReactive event listener with automatic cleanup. Attach event handlers to DOM elements, window, or document with automatic removal on component destroy.mediaQueryReactive wrapper around matchMedia. Track a single media query match state with Angular signals.networkReactive wrapper around the Network Information API. Track network connection information with Angular signals.onlineReactive wrapper around the browser's online/offline status. Returns a signal that tracks whether the browser is currently online or offline.pageVisibilityReactive wrapper around the Page Visibility API. Returns a signal that tracks the current visibility state of the page.permissionStateReactive wrapper around the Permissions API. Queries the permission state for a given name and returns a signal that reactively tracks changes.pictureInPictureReactive wrapper around the Picture-in-Picture API. Control Picture-in-Picture mode for video elements with Angular signals.screenOrientationReactive wrapper around the Screen Orientation API. Returns a signal that tracks the current screen orientation.speechRecognitionReactive wrapper around the Speech Recognition API. Convert speech to text with Angular signals.speechSynthesisReactive wrapper around the Speech Synthesis API. Convert text to speech with Angular signals.storageSignal-based wrapper around Web Storage API (localStorage/sessionStorage). Persist and sync state across tabs with automatic type-aware serialization.textDirectionReactive read/write wrapper around an element's dir attribute for detecting and controlling text directionality.textSelectionReactive tracking of text selection using the Selection API. Track what text the user has selected.vibrationReactive wrapper around the Vibration API. Trigger device vibration patterns with Angular signals.webNotificationReactive wrapper around the Notifications API. Show browser notifications with Angular signals.webShareReactive wrapper around the Web Share API. Share content using the native share dialog with Angular signals.webWorkerReactive wrapper around the Web Workers API. Communicate with web workers using Angular signals.windowFocusReactive wrapper around the browser's Window focus/blur events. Returns a signal that tracks whether the window is currently focused.windowSizeReactive tracking of browser window dimensions. Automatically updates on window resize.
Elements 15
activeElementReactive tracking of the currently focused element in the document. Wraps document.activeElement as an Angular signal.dropzoneReactive wrapper around the Drag and Drop API. Create file drop zones with Angular signals.elementFocusReactive tracking of focus state on an element. Detects when an element gains or loses focus, and allows programmatically setting focus.elementFocusWithinReactive tracking of focus-within state on an element. Detects when focus is inside an element or any of its descendants, analogous to the CSS :focus-within pseudo-class.elementHoverReactive tracking of hover state on an element. Detects when the mouse enters or leaves an element.elementSizeReactive tracking of element dimensions using ResizeObserver. Automatically updates when element size changes.elementVisibilityReactive tracking of element visibility in the viewport using IntersectionObserver. Perfect for lazy loading and scroll animations.mousePositionReactive tracking of mouse position. Track cursor coordinates globally or relative to an element.onClickOutsideDetects clicks outside a target element and invokes a callback. Useful for closing dropdowns, modals, and popovers when the user clicks elsewhere.onDisconnectExecutes a callback when an element is disconnected from the DOM.onKeyListen for keyboard events matching a key filter: a single key, a key combination, a reactive signal of either, or a custom predicate.onLongPressDetect long press gestures on an element. Calls a callback after a configurable delay if the pointer stays down without moving beyond the distance threshold.pointerSwipeReactive pointer-swipe detection on an element. Tracks swipe gestures using Pointer Events and provides direction and distance signals. Works with mouse, touch, and pen input.scrollPositionReactive tracking of scroll position. Track scroll offset of window or any scrollable element.swipeReactive touch-swipe detection on an element using Touch Events API. Tracks single-finger swipe gestures and provides direction and distance signals.
Observers 3
intersectionObserverReactive element intersection detection using the IntersectionObserver API with automatic lifecycle management.mutationObserverReactive DOM mutation detection using the MutationObserver API with automatic lifecycle management.resizeObserverReactive element size change detection using the ResizeObserver API with automatic lifecycle management.
Reactivity 4
debouncedCreates a debounced signal that delays value updates until a specified time has passed without changes.proxySignalCreates a wrapper around a signal that intercepts get and set operations.throttledCreates a throttled signal that limits how often the value can update. The signal updates immediately on the first change, then at most once per interval.watcherWatches one or more signals and calls a callback when they change, skipping the initial call.
Scheduling 3
debounceCallbackCreates a debounced version of a callback function. The callback will only be executed after the specified wait time has elapsed since the last invocation.intervalSignal-based wrapper around setInterval. Creates a reactive interval that executes a callback at specified intervals. The interval starts immediately upon creation and can be stopped with destroy().throttleCallbackCreates a throttled version of a callback function. The callback runs immediately on the first call, then at most once per specified wait interval.
Router 7
fragmentReactive wrapper around Angular Router's URL fragment. Access the hash fragment as a writable signal.paramsReactive wrapper around Angular Router's route parameters. Access route params as signals with full type-safety.queryParamsReactive wrapper around Angular Router's query parameters. Access the query parameters as a writable signal that can be set to update the URL. Optionally validate parameters at runtime using schema validators for type checking, type coercion, and error handling.routeDataReactive wrapper around Angular Router's route data. Access route data as signals with full type-safety.routerListenerEvent-driven listener for Angular Router's navigation lifecycle and events. Subscribe to specific router events with type-safe handlers.titleReactive wrapper around Angular Router's route title. Access the resolved route title as a writable signal that can be set to update the page title.urlReactive wrapper around Angular Router's current URL. Access the full URL as a signal.
Forms 1
Utilities 4
createInjectableDefines a typed factory function for creating injectable dependencies that return a tuple of injection utilities. Offers an alternative to class-based Angular services with functional, composable dependency factories.generateIdCreates a unique ID string with optional prefix.toElementConverts a MaybeElementSignal to a raw DOM element. Handles element refs, signals, and plain elements uniformly.toValueUnwraps a MaybeSignal value. If the input is a signal, it returns the signal's value; otherwise, it returns the input as-is.
CDK Interop 3
focusMonitorSignal-based wrapper around Angular CDK's FocusMonitor. Reactively track focus state with focus origin detection (keyboard, mouse, touch, or program).inputModalitySignal-based wrapper around Angular CDK's InputModalityDetector. Reactively track the user's current input method (keyboard, mouse, or touch).liveAnnouncerSignal-based wrapper around Angular CDK's LiveAnnouncer. Reactively track and announce messages for screen readers.