Angular Size Observer: a library for styling DOM elements based on their size in the browser.
Tags: angular, githunt, ux, library
Published: 2019-06-12 15:20:49

---
title: Angular Size Observer: a library for styling DOM elements based on their size in the browser.
published: true
description: A library for styling DOM elements based on their size in the browser.
tags: angular, githunt, ux, library
---

[Angular Size Observer](https://gitlab.com/service-work/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](https://github.com/tomhodgins/element-queries-spec)).

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:

```ts
@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:

```ts
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..."

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 ...
7. 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