NgxViewed

Angular library for fixing the fact of viewing posts, comments, images, etc.

The library uses IntersectionObserver

Demo

Installation

Run npm install @smip/ngx-viewed -S

Add NgxViewedModule import to your module:

import { NgxViewedModule } from '@smip/ngx-viewed';

...

@NgModule({
  imports: [
    ...
    NgxViewedModule
    ...
  ],
  ...
})

Usage

Add ngxViewedWatcher directive to element witch will be observable.

Directive ngxViewedWatcher provide next input parameters:

• ngxViewedId: any - variable to help you handle outputs. Will be included in every callback.
• ngxViewedDisabled: boolean - Disable directive.
• visiblePercent: number - value from 0 to 1. How element should be visible on the screen to start timer. Default: 0.8 (80%)
• timeToViewed: number - value from 0 in ms. Time when library will emit output event. After this time library finish observe element. Default: 3000
• auditTime: number - value from 0 in ms. To optimize the work, the library checks the visibility of the element no more than once every x ms. Default: 500 [deprecated]
• tickTime: number - value from 0 in ms. Value must be less of timeToViewed. How often will be emitted ngxViewedTick. Default: 1000;
• parentScroll: Element - a parent element with scroll (see demo);

Outputs:

• ngxViewedViewed: { id: any } - will be emitted once for every element after timeToViewed ms. You can use it to fix fact of viewing.
• ngxViewedTick: { id: any, time: number } - will be emitted every tickTime ms.
• ngxViewedShown: { id: any } - will be emitted when element is shown.
• ngxViewedHidden: { id: any, time: number } - will be emitted when element is hidden.

Example

<div
    ngxViewedWatcher
    [ngxViewedId]="'post1'"
    [timeToViewed]="3000"
    [visiblePercent]="0.8"
    (ngxViewedTick)="onTick($event)"
    (ngxViewedShown)="onShown($event)"
    (ngxViewedHidden)="onHidden($event)"
    (ngxViewedViewed)="onViewed($event)"
  >

Deprecated in version 3.0

When your observable elements in some block with scroll you should use ngxViewedContainer directive for parent element (with scroll) and ngxViewedContainerWatcher for observable elements.

ngxViewedContainer directive has next inputs:

- visiblePercent: number - value from 0 to 1. How container should be visible on the screen to start observe child elements. Default: 0.8 (80%) - auditTime: number - value from 0 in ms. To optimize the work, the library checks the visibility of the container no more than once every x ms. Default: 500

And outputs:

- ngxViewedContainerShown: true - will be emitted when container is shown. - ngxViewedContainerHidden: true - will be emitted when container is hidden.

ngxViewedContainerWatcher directive has same inputs and outputs as ngxViewedWatcher

Issues

If you have questions or issues feel free to create new an topic in issues.

License

Licensed under MIT.