What are the options available inViewportOptions? threshold and?

p.s. This is the best inviewport repo I ever came to. Simple, straight forward and works like a charm. Keep up the good work . Thanks a bunch👍

The devDependency karma was updated from 3.1.1 to 3.1.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

karma is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hi,
i want to submit an error:

Warning 1:

client:153 ./node_modules/ng-in-viewport/fesm5/ng-in-viewport.js
273:59-75 "export 'defineInjectable' was not found in '@angular/core'

Warning 2:

./node_modules/ng-in-viewport/fesm5/ng-in-viewport.js
273:155-161 "export 'inject' was not found in '@angular/core'

Error:

Uncaught TypeError: Object(...) is not a function
    at eval (ng-in-viewport.js:273)
    at eval (ng-in-viewport.js:275)

Am I doing something wrong?

Thank you for your support

I tried to install ng-in-viewport v6.0.2 in ionic 3 which currently uses @angular/common:"5.2.11" and rxjs:"5.5.11", but when importing InViewportModule it gives an error "Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
at ng-in-viewport.js:273"

anyone got this working with latest ionic

The devDependency @types/jasmine was updated from 2.8.9 to 2.8.10.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/jasmine is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hello!

Thank you for this great library!

However, is it possible to programmatically query if specified element is in view right now? I need to do this from controller.

Thanks!

Your examples are great, but would be a huge help to include a simple 'Get Started' on the main page.

eg.

Import the directive
import { InViewportDirective } from 'ng-in-viewport';

Explain the different inViewportOptions and requirement for intersection polyfill.

Is any helper for lazy images included in the package? And if not have you considered a 'child' package that does include this? It would be much easier if it was, then if you ever update it I wouldn't have to change mine.

I'm happy reading the source - in fact I like to do so, but it's kind of a pet peeve of mine when great plugins don't have great documentation to go along with them.

The devDependency @types/node was updated from 10.11.0 to 10.11.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

how would i implement this in angular 2? and change the class of a div when enters viewport and leaves? thank you!!

Check if platform is server. Then do not access dom.

HI,
Ng in view port module is working accurately in case of div..
But i need to replicate this.. in mat table ...
For example
working code :
My html:-

<div class="example-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">
    <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
  <tr  mat-row *matRowDef="let row; columns: displayedColumns; let i = index;" inViewport
    [inViewportOptions]="{ threshold: [0], partial: false, rootMargin: '100px, 0px'}"
    (inViewportAction)="onIntersection($event, dataSource[i].position, i)">
  </tr>
  </table>
</div>

i need to trigger first element when it goes under sticky header itself
As of now its triggering when element goes completely out of window

https://github.com/k3nsei/ng-in-viewport/blob/master/src/in-viewport/in-viewport.directive.ts#L41

  ngOnDestroy() {
    this.inViewportService.removeTarget(this.elementRef.nativeElement);
  }

should be

  ngOnDestroy() {
    this.inViewportService.removeTarget(this.elementRef.nativeElement, this.config.rootElement);
  }

Great library, we're using it and are very happy with it!

However I'm running into some issues I want to verify locally. If multiple inViewportAction are fired at the same time (which happens if the list is displayed initially /refreshed), the bindings are not updated properly. I have to run the code explicitly inside an ngZone.run() to make it work...

To test this properly, I want to add this to our unit tests. Of course I can call inViewportAction manually on my component, but how can I let your module do this?

And any idea why I am seeing this issue?

I am using the latest Chrome and I see that { threshold: 0, rootMargin: '-500px' } does not seem to be working. It seems that it gets override by the browser? to 0 again.

The devDependency @angular-devkit/build-angular was updated from 0.10.4 to 0.10.5.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular-devkit/build-angular is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

It would be nice if the peer dependency for Angular will be changed.

4.3.0 was released the last days.

The devDependency @angular-devkit/build-angular was updated from 0.10.6 to 0.10.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular-devkit/build-angular is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

When I try to add this to an element inside a div with overflow: auto it does not trigger the inViewport event when it comes into view. It does trigger on init.

Can this be implemented or am I doing something wrong?

It would be nice to have the intersectionRatio as attribute of the event.

This helps to debounce if the directive is used together with scrolling because you then can determine which target has the biggest intersection.

The devDependency @angular-devkit/build-ng-packagr was updated from 0.8.2 to 0.8.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular-devkit/build-ng-packagr is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hi, Im getting this error.

D:/xampp/htdocs/angular2/node_modules/ng-in-viewport/in-viewport/in-viewport.service.ts (6,13): Cannot find name 'IntersectionObserver'. D:/xampp/htdocs/angular2/node_modules/ng-in-viewport/in-viewport/in-viewport.service.ts (12,33): Cannot find name 'IntersectionObserverEntry'. D:/xampp/htdocs/angular2/node_modules/ng-in-viewport/in-viewport/in-viewport.service.ts (19,32): Cannot find name 'IntersectionObserverEntry'. D:/xampp/htdocs/angular2/node_modules/ng-in-viewport/in-viewport/in-viewport.service.ts (37,23): Cannot find name 'IntersectionObserver'. D:/xampp/htdocs/angular2/node_modules/ng-in-viewport/in-viewport/in-viewport.service.ts (38,21): Cannot find name 'IntersectionObserverEntry'. D:/xampp/htdocs/angular2/node_modules/ng-in-viewport/in-viewport/in-viewport.directive.ts (36,57): Cannot find name 'IntersectionObserverEntry'. D:/xampp/htdocs/angular2/node_modules/ng-in-viewport/in-viewport/in-viewport.directive.ts (44,18): Cannot find name 'IntersectionObserverEntry'.

How toreslve this isse?

Looking to use this in a commercial product. Can you clarify the license?

Thanks!

Similar blocks of code found in 2 locations. Consider refactoring.

https://codeclimate.com/github/k3nsei/ng-in-viewport/projects/ng-in-viewport/src/lib/in-viewport.directive.ts#issue_5b368621acafef000100004f

The code for determining whether an element is completely visible assumes that intersectionRatio is capped at 1.0. At least on Chrome 70 this is not the case. It seems that, as opposed to Firefox, for the purpose of calculating the intersectionRect, the position values of (at least) the boundingClientRect are ceiled and floored. As a result, the calculated intersectionRect may have a dimension that is actually one or two pixels larger than the boundingClientRect. From what I can tell this is spec compliant. It just says that the value is guaranteed to be either 0 or 1 for zero-area elements. For all others it is determined as the ratio between boundingClientRect and intersectionRect.

An easy solution would be to change the check from entry.intersectionRatio === 1 to entry.intersectionRatio >=1 on this line:

If I have some time I will whip up a PR for this.

Below a screenshot of a sample event from the directive that shows the intersectionRect being larger:

The devDependency ng-packagr was updated from 4.5.0 to 4.6.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

ng-packagr is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

We've found an issue when ng-bootstrap's NgbPopover is used in combination with ng-in-viewport as well as the IntersectionObserver polyfill. When the popover is opened, browsers that use the polyfill will freeze. After a lot of debugging and cursing at unresponsive browsers, I found that Angular gets stuck in an infinite change detection cycle. I've put together the following minimal reproduction: https://stackblitz.com/edit/inviewport-popover-crash

The crash should occur on any browser that depends on the IntersectionObserver polyfill (most notably IE11 and older Firefox/Chrome versions).

This seems to be caused by the MutationObserver used in the polyfill's implementation, which gets hooked by NgZone to be able to run change detection. This in turn triggers NgbPopover to determine placement for the popover, which updates classes which in turn triggers the MutationObserver again.

Now I'm not quite sure whether this is an issue with ng-in-viewport, ng-bootstrap or both, which is why I'm reporting an issue with both.

For this module, I would say it's not necessary to run the IntersectionObserver inside Angular's zone, and return to the Angular zone for the callback. I've tested this in IE, Firefox and Chrome and it does resolve the issue. I'll create a PR for these changes for you to merge if you approve.

Regards,
Jan-Willem

Hi,

How to call a function when a div comes only at center of the viewport ? . Currently the function is called so soon as it is visible at the viewport..

Instead of firing an event for each element every time, it would be nice to get an array of all elements.

yarn run webpack:prod
ERROR in node_modules/ng-in-viewport/in-viewport/in-viewport.directive.d.ts(3,49): error TS1005: '=' expected.

Hello
when i use ng-in-viewport with IE 11
i get this exception
"ERROR ReferenceError: 'IntersectionObserver' is undefined"

I tried installing the plugin on a project I am working on and got the following errors when trying to build the project:

ERROR in PROJECT-DIRETORY/node_modules/ng-in-viewport/in-viewport/in-viewport.directive.d.ts (3,49): '=' expected.
ERROR in PROJECT-DIRETORY/node_modules/ng-in-viewport/in-viewport/in-viewport.directive.d.ts (3,42): Cannot find name 'unique'.
ERROR in PROJECT-DIRETORY/node_modules/ng-in-viewport/in-viewport/in-viewport.directive.d.ts (3,49): Cannot find name 'symbol'.

I checked the file inside node_modules which looks like this:

import { AfterViewInit, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
import { InViewportService } from './in-viewport.service';
export declare const InViewportMetadata: unique symbol;
export declare class InViewportDirective implements AfterViewInit, OnDestroy {
    elementRef: ElementRef;
    private inViewportService;
    private config;
    action$: EventEmitter<any>;
    constructor(elementRef: ElementRef, inViewportService: InViewportService);
    updateConfig: any;
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    check(entry: IntersectionObserverEntry): void;
}

It seems there is a problem with the line:
export declare const InViewportMetadata: unique symbol;
especially the unique symbol part, it can't seem to handle it (as stated by the error messages posted above).
Am I missing something else? How can I get it working?
Thanks in advance

This is an odd one - we're using this directive inside angular material tabs, where there is a tab using this which isn't initially shown.

It all works completely fine on chrome, but on Safari (Mac and iPad) it locks the browser solid (which feels like a loop in the layout engine as it does not appear to be a javascript issue).

I'm assuming modern safari doesn't need the polyfill to work correctly, otherwise maybe it's a bug in that.

Wondering what the best place to start is - we've tried other 'in viewport' components, but they don't actually seem to work correctly..

It seems to be that the rootMargin in the [inViewportOptions] for a second Element don't overwrite the rootMargin from the first Element. So you can't use two different rootMargins for two Elements. Both use the first rootMargin. Is there a solution?

Kind regards

It should be possible to configure the debouncer - when scrolling stops

Hi and thanks for this!

On Ionic2 I have this weird dependency error.

Cannot find module './in-viewport-events.service'.

Trying to fix this but I can't.

Any help welcome !

The devDependency @angular-devkit/build-angular was updated from 0.8.1 to 0.8.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular-devkit/build-angular is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Is it possible to have some documentation on the inViewportOptions object? I'm not too sure what options are available and how they affect behaviour.

Cheers

I follow this import-the-modules doc import ng-in-viewpor.
But, In my project( angular 5), when run npm start , an error throw:

ERROR in node_modules/ng-in-viewport/lib/in-viewport.directive.d.ts(3,49): error TS1005: '=' expected.

Could you please help me figure out why?

Add support for https://compodoc.app/ or https://www.docz.site/

Hi, I'm getting this error after install this package.

ERROR in D:/xampp/htdocs/angular2/node_modules/ng-in-viewport/in-viewport/in-viewport.service.d.ts (5,15): Cannot find name 'IntersectionObserver'.)
D:/xampp/htdocs/angular2/node_modules/ng-in-viewport/in-viewport/in-viewport.service.d.ts (9,28): Cannot find name 'IntersectionObserverEntry'.)
D:/xampp/htdocs/angular2/node_modules/ng-in-viewport/in-viewport/in-viewport.service.d.ts (11,34): Cannot find name 'IntersectionObserverEntry'.)

ERROR in D:/xampp/htdocs/angular2/node_modules/ng-in-viewport/in-viewport/in-viewport.directive.d.ts (12,20): Cannot find name 'IntersectionObserverEntry'.)
.

Hello!
Just found this directive and my, it does the work elegantly!
One thing i found as an issue was the I needed to have some unique cases where i needed only a part of the element visible in order to trigger event. This was an easy fix just to change the mentioned variables to Input() instead of private:

@Input() partial: boolean = false;

@Input() direction: string = 'both';

This enabled me to change partial/direction in markup when calling the directive:
<div class="element-class" in-viewport [partial]="true" (inViewport)="callback($event)">

Just a friendly suggestion :)

There is no document for other [inViewportOptions] params.

The devDependency @angular-devkit/build-ng-packagr was updated from 0.10.6 to 0.10.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular-devkit/build-ng-packagr is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

I have tested the new version of ng-in-view and it works fine in Chrome but it hangs in IE.

The plunker example works fine in IE but if you scroll you probably notice that it is a bit slow.
https://embed.plnkr.co/jJe2MTPKQ1avFxKhgBRb/

In my app which is a lot more complex then the example IE instead it hangs.

I for example have a the following tag:
<ng-template ngFor [ngForOf]="getTabsOrdered()" let-tab>

The getTabsOrdered() is called on user interaction (hover) in chrome but with the polyfill in IE it is called continuously and then the app crashes. I think the ng-in-view forces "dirty checking" or whatever it is called in angular 2 and that hangs the application.

Let me know if I need to do more to explain the issue.

It would be really nice if this plugin was updated to be compatible with RxJS 6 (so it could be used with Angular 6 without the rxjs-compat package).
As far as I can see the only thing in the way of upgrading is the import of BehaviorSubject that need to be changed, but I might miss some details.

Thing is, though, upgrading to RxJS 6 would be a major change and might only be compatible with Angular v6+.

Do you think it could be possible?

Thanks for this module! I'm using the in-viewport directive on a component and am able to successfully apply attributes to the component host element.

I'm wondering if there is a way to use the InViewportAction method to set an @input value on the component?

The idea is to set a flag value in the component class that tells it whether the component is in view.

Hey,

Nice tool!

I have a question, how can I trigger the event and make the class inactive when the element is partially out of viewpoint? Lets say 25%. I have tried changing threshold: to [0.25] and [0.75] with no luck, still getting it triggered only when the element is fully out of the screen.

Thanks.

The dependency intersection-observer was updated from 0.5.0 to 0.5.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

intersection-observer is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Your Greenkeeper Bot 🌴

The devDependency @angular-devkit/build-ng-packagr was updated from 0.10.4 to 0.10.5.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@angular-devkit/build-ng-packagr is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴