[DOCUMENTATION] Improve documentation of service usage

[begrs]

trafficstars

🚀 Feature request

Improve documentation of service usage

Is your feature request related to a problem?

I have trouble figuring out how to use the Oberservee Service. Especially on the whole code required to get it to work. On which component do I register the service? a parent of multiple elements I want to observe or on each element? The documentation states that intersections of children in the DI Tree will be observed, which children? all HTML elements? all angular components? or do I have to set a property/directive on each child I want to be observed (-> the latter would be my ideal solution)

Describe the solution you'd like

• Provide another example project which details different options on how to use the services.
• alternative: improve documentation and add a snippet for the html necessary in conjunction with service usage (instead of directive usage with (waIntersectionObservee)="foo(event)" on each element to be observed)

my concrete use case

I have on parent component which has multiple diverse child components. One of those possible children is in-essence a wrapper for a text-input. The ultimate goal is to ensure a user has read/checked all text-inputs before an agree button is enabled. -> I would like to add a function to the parent component, that is called each time one of the text-input components is intersecting, but not when other child components are intersecting. Each child components intersection state should be debounced, to ensure the user has not scrolled very fast by them. For this purpose I want to use the services so I can use rx.js debounce (per text-input).

[begrs]

Push, sorry for pressing for time a bit, but it would be great to get a quick response if you have the time, just to clarify my question as I am working in an active sprint and need to finish the tasks at the latest in the next sprint (~3weeks) :)

[waterplea]

Hello, @begrs. Sorry for slow response, got swarmed by stuff happening around me.

observER service is the one that does the observing, observEE service is the one being observed. You don't really need service to do what you describe, it can be done with directives. Looking at the source code might help, it's a pretty small and straightforward library. You can see that directive just pipes service to the output so it can be used in the template: https://github.com/ng-web-apis/intersection-observer/blob/master/projects/intersection-observer/src/directives/intersection-observee.directive.ts

Basically, wherever you provide IntersectionObserveeService service it would walk up the DI tree until it finds IntersectionObserverService. It will then register its ElementRef to be observed and will emit intersections for that particular element.

Here's a StackBlitz with an example (not production ready obviously, just a sketch): https://stackblitz.com/edit/angular-ivy-kdqhw4

Does this clarify it for you?