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
Top comments (2)
Do you know any solution to change the font size dynamically in Angular?
There are multiple ways, but NgStyle and NgClass would be the most common and easiest choices. Also see: angular.io/guide/attribute-binding