DEV Community

John Carroll
John Carroll

Posted on • Updated on

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

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 {}
Enter fullscreen mode Exit fullscreen mode

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'],
  ]),
};
Enter fullscreen mode Exit fullscreen mode

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

  1. >= 1200 px, apply the 'sw-container-width-xlarge' CSS class.
  2. >= 1024 px, apply the 'sw-container-width-large' CSS class.
  3. >= 768 px, apply the 'sw-container-width-medium' CSS class.
  4. etc ...
  5. 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

Top comments (2)

Collapse
 
karytonn profile image
Karytonn Oliveira

Do you know any solution to change the font size dynamically in Angular?

Collapse
 
johncarroll profile image
John Carroll • Edited

There are multiple ways, but NgStyle and NgClass would be the most common and easiest choices. Also see: angular.io/guide/attribute-binding