Resize Observer

Service Overview

This service exports functionality related to observing resized elements within a web application. It exposes a factory function, createResizeObserver() that creates an object containing one readable signal with the real time dimensions of the observed element and a directive which will be applied on the HTML element to observe.

Usage

Whenever you want to listen to dimensions changes of an element of the DOM, you can simply:

• use the factory function to create the object containing the signal and the directive.
• use the directive to set the element to be observed for resizing
• use dimensions$ signal and subscribe to it.

import {createResizeObserver} from '@agnos-ui/core';
const {directive, dimensions$} = createResizeObserver();
const resizableElement = document.querySelector('div.main:nth-child(2)');
const directiveApplied = directive(resizableElement);
const unsubscribe = dimensions$.subscribe((dimensions) => {
    console.log(`Resizable element width: ${dimensions.contentRect?.width}`);
});
// Cleanup
unsubscribe();
directiveApplied.destroy?.();