Resize

Resize provides multiple angular utility directives to monitor the size of an html element. Only supports box model.

OnResize

A directive that simply spits out the current inline (width) and block (height) sizes of an Element.

$3

In component.ts:

``ts
handleSize(size: CurrentSize) {
// ... do something
}
`

In template:

`html


`html


@let inlineSize = resize.currentSize().inlineSize;

`

ResizeBreakpointsDirective

A directive that matches your element width to a breakpoint. Essentially a directive implementation of the
matchContainer() function which will eventually come to CSS. The
current implementation does not depend on the matchContainer polyfill.

$3

In component.ts:

`ts
handleBreakpointChange(breakpoints: CurrentBreakpoints) {
// ... do something
}
`

In template:

`html
plsResizeBreakpoints="{ inlineBreakpoints: [200, 400, 1600] }"
(inlineBreakpointChanged)="handleBreakpointChange($event)"
>
...