@volvachev/angularuse

AngularUse

Collection of essential Angular inject functions

inject functions and directives

• useDocumentVisibility - reactively track document.visibilityState;
• useWindowSize - reactive window size;
• useWindowFocus - reactively track window focus with window.onfocus and window.onblur events;
• 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-within CSS 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;

inject rxjs functions

• useInsideZone and insideZone - RxJs operator, that run subscription function inside NgZone;
• useOutsideZone and outsideZone - RxJs operator, that run subscription function outside NgZone;
• useUntilDestroy - RxJs operator, which automatically unsubscribes from the Observable on hook OnDestroy;