Angular Size Observer: a library for styling DOM elements based on their size in the browser.

#angular #githunt #ux #library

Angular Size Observer includes tools for Angular apps to monitor and react to the display size of elements in the browser. Think CSS media queries, except applying CSS based on DOM element size rather than browser screen size (tangentially related: see the CSS element query spec proposal).

The primary component of the library is a SWObserveSize directive. At its most basic, simply apply the directive to a DOM element and the directive will automatically apply a special CSS class based on the element's display width, and a second CSS class based on the element's display height.

Example:

@Component({
  selector: 'app-root',
  template: `
    <div id="the-div" swObserveSize>
      <!-- div content... -->
    </div>
  `,
})
export class AppComponent {}

Lets assume that the display size of 'the-div' is 1250 px wide and 650 px tall in the above example. SWObserveSize Directive will apply two CSS classes to 'the-div' element:

'sw-container-width-xlarge'.
'sw-container-height-small'.

When the display size of 'the-div' changes in the browser, SWObserveSize will automatically update the CSS classes of 'the-div' as appropriate.

By providing an optional SW_SIZE_OBSERVER_CONFIG config token, you can customize the CSS classes that SWObserveSize applies to elements, along with the width/height breakpoints associated with these classes.

The default config token which is automatically used if you do nothing:

const defaultSizeObserverConfig: ISWSizeObserverConfig = {
  defaultWidthClass: 'sw-container-width-xtiny',
  defaultHeightClass: 'sw-container-height-xtiny',
  widthBreakpoints: new Map([
    [1200, 'sw-container-width-xlarge'],
    [1024, 'sw-container-width-large'],
    [768, 'sw-container-width-medium'],
    [600, 'sw-container-width-small'],
    [500, 'sw-container-width-xsmall'],
    [250, 'sw-container-width-tiny'],
  ]),
  heightBreakpoints: new Map([
    [1200, 'sw-container-height-xlarge'],
    [1024, 'sw-container-height-large'],
    [768, 'sw-container-height-medium'],
    [600, 'sw-container-height-small'],
    [500, 'sw-container-height-xsmall'],
    [250, 'sw-container-height-tiny'],
  ]),
};

This config translates to, "If an element's display width is..."

>= 1200 px, apply the 'sw-container-width-xlarge' CSS class.
>= 1024 px, apply the 'sw-container-width-large' CSS class.
>= 768 px, apply the 'sw-container-width-medium' CSS class.
etc ...
Otherwise, apply the 'sw-container-width-xtiny' CSS class.

The same logic applies for the display element's height.

Learn more

You can find more information about the Angular Size Observer library, including the SizeObserverService for more advanced usage, in its repo on GitLab: https://gitlab.com/service-work/size-observer