Angular Bound Sensor
Receive element's boundary size changes by events in Angular(v4).
This is very useful to refresh component's contents if the size of
height of its boundary changes.
You can install it from npm repository:
$ npm install angular-bound-sensor
or from Yarn repository
$ yarn add angular-bound-sensor
BoundSensorModule to your application module, or any module that is using it:
then add the directive to your component:
and receive the event by
You may pass an object or its reference to directive to setup the sensor with specific settings as example below:
stringthat will be the custom event name. Default is
resize. Every time sensor dispatches an event, you will receive it by that specific name. This is useful if you want to have different hierarchy of component and easily handle multiple sensors in the same DOM hierarchy.
numberin milliseconds. Default is
10milliseconds. Once there is a change in boundary, sensor will dispatch an event based on this setting. 1000 means that events will be dispatched every 1 second and all the other within 1 seconds will be ignored.
boolean. Default is
true. This is useful if you want to handle the style of the host by yourself. There are some cases that you want to have very specific styles on your DOM element. If you want to take advantage of custom styles by setting it to
falseyou need to set two styles to the host element manually so sensor can work properly:
positionneeds to be
displayneeds to be
The css equivalent will be: