Find out once boundary size of element changes in Angular

Downloads in past


1.1.06 years ago6 years agoMinified + gzip package size for angular-bound-sensor in KB


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 width or 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


First import BoundSensorModule to your application module, or any module that is using it:
import { BoundSensorModule } from 'angular-bound-sensor';

  imports: [
export class AppModule { }
then add the directive to your component:
<simple-component boundSensor></simple-component>
and receive the event by HostListener from @angular/core:
import { HostListener } from '@angular/core';

  selector: 'simple-component'
class SimpleComponent {
  @HostListener('resize', ['$event'])
  onResize(event) {
That's it!


You may pass an object or its reference to directive to setup the sensor with specific settings as example below:
<simple-component [boundSensor]="{eventName: 'my_resize_event', debounceTime: 1000, modifyStyles: false}"></simple-component>

Settings properties

  • eventName is a string that 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.
  • debounceTime is a number in milliseconds. Default is 10 milliseconds. 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.
  • modifyStyles is a 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 false you need to set two styles to the host element manually so sensor can work properly:
position needs to be relative display needs to be block, inline-block, table or flex
The css equivalent will be:
simple-component {
  position: relative;
  display: inline-block;


Take a look at this live demo, and you can find the source here.