"In view" state could change not only by scrolling

[slavafomin]

Hello!

Thank you for this great library!

However, are you only using scrolling event to determine the point in time when "in view" state should be updated? It looks like this.

However, this is not true in some circumstances. On dynamic page, the element could get out of the user's view not only when user is scrolling away, but also, when another element on the page pushes the watched element out of the view.

I'm implementing an infinite scrolling feature in our web application, but I'm getting an incorrect behavior, because I'm relying on "in view" state change events to determine if more items should be loaded. The reason for this is that more items are loaded dynamically and added to the table, this in effect pushes the table footer out of the view, but the "in view" state is not updated accordingly, so the app continues to load more items, until user scrolls the page at least a bit.

What could you recommend to fix this behavior?

Is there a way to force the directive to update it's state programmatically?

Thanks!

[slavafomin]

By looking at source code of the library I've found a workaround:

window.document.dispatchEvent(new Event('scroll'));
setTimeout(() => {
  this.loading$.next(false);
}, 0);

I have to manually trigger scroll event on window.document object in order for directive to update it's state. Then, I'm checking the updated state again in the next event loop.

However, this is cumbersome and not very convenient. I think the better workaround would be if library would provide some API to force it to update the state. Even better would be to find a way to update the state automatically. Maybe we could update it with every change detection?

Also, have you looked into native browser API for in-view detection? I saw an article on Smashing Magazine about it, maybe we could use it if it's supported by the browser and fallback to scroll/resize events.

[ajaysinghj8]

Hi @slavafomin ,

I got the point, and I am thinking about it, the best way possible. As of now can you try something the [trigger] input attribute, using trigger you can force recalculation of in view logic.

<div in-view-container (inview) =handler($event) [tigger]="tigger"> 
     // in view items
</div>
```js
  trigger: any = new BehaviorSubject(0);
 // on some condition 
 this.trigger.next(0)

[slavafomin]

Okay, thanks. If you have some ideas how to solve this problem, I'm open to help.

Also, wouldn't it be easier to call the method directly on the directive? We could obtain a reference to it through @ViewChild(). It looks simpler than creating another BehaviorSubject.