Narcoleptic Programmers' Medicine
    Wondering what’s next for npm?Check out our public roadmap! »

    angular-bound-sensor
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    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.

    Installation

    You can install it from npm repository:

    $ npm install angular-bound-sensor

    or from Yarn repository

    $ yarn add angular-bound-sensor

    Usage

    First import BoundSensorModule to your application module, or any module that is using it:

    import { BoundSensorModule } from 'angular-bound-sensor';
     
    @NgModule({
      (...)
      imports: [
        BoundSensorModule,
      ],
    })
    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';
     
    @Component({
      selector: 'simple-component'
      (...)
    })
    class SimpleComponent {
      @HostListener('resize', ['$event'])
      onResize(event) {
        console.log(event.detail);
      }
    }

    That's it!

    Settings

    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;
      }

    Demo

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

    Install

    npm i angular-bound-sensor

    DownloadsWeekly Downloads

    66

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • avatar