Collection of essential Angular inject functions
- useDocumentVisibility - reactively track
document.visibilityState; - useWindowSize - reactive window size;
- useWindowFocus - reactively track window focus with
window.onfocusandwindow.onblurevents; - useResizeObserver - reports changes to the dimensions of an Element's content or the border-box;
- usePreferredLanguages - reactive Navigator Languages. It provides web developers with information about the user's preferred languages.
- useOnline - reactive online state. A wrapper of
useNetwork; - useNetwork - reactive Network status. The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.);
- useMemory - reactive Memory Info;
- useMediaQuery - reactive Media Query;
- useBattery - reactive Battery Status API;
- useTextSelection - reactively track user text selection based on
Window.getSelection; - useWindowScroll - reactive window scroll;
- useElementBounding - Reactive bounding box of an HTML element;
- useElementSize - Reactive size of an HTML element. ResizeObserver MDN;
- useElementVisibility - Tracks the visibility of an element within the viewport;
- useActiveElement - Reactive
document.activeElement; - useFocus - Reactive utility to track the focus state of a DOM element;
- useFocusWithin - Reactive utility to track if an element or one of its decendants has focus. It is meant to match the behavior of the
:focus-withinCSS pseudo-class; - useFavicon - Reactive favicon;
- useTextareaAutosize - Automatically update the height of a textarea depending on the content;
- useMutationObserver - Watch for changes being made to the DOM tree. MutationObserver MDN;
- useTextDirection - Reactive dir of the element's text;
- useIntersectionObserver - Detects that a target element's visibility;
- useIdle - Tracks whether the user is being inactive;
- useMouse - Reactive mouse position;
- useMouseInElement - Reactive mouse position related to an element;
- useMousePressed - Reactive mouse position;
- usePreferredColorScheme - Reactive prefers-color-scheme media query;
- usePageLeave - Reactive state to show whether the mouse leaves the page;
- useElementHover - Reactive element's hover state;
- useInsideZone and
insideZone- RxJs operator, that run subscription function insideNgZone; - useOutsideZone and
outsideZone- RxJs operator, that run subscription function outsideNgZone; - useUntilDestroy - RxJs operator, which automatically unsubscribes from the
Observableon hookOnDestroy;