fix: ngzone issue in inject-is-intersecting and docs fixes

ngxtension · Oct 15, 2023 · 7a903b2 · 7a903b2
1 parent da38aa8
commit 7a903b2
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/docs/src/content/docs/utilities/Injectors/inject-is-intersecting.md b/docs/src/content/docs/utilities/Injectors/inject-is-intersecting.md
@@ -22,7 +22,10 @@ export class MyComponent {
 
 	isIntersecting$ = injectIsIntersecting();
 
-	isInViewport$ = this.isIntersecting$.pipe(filter(x.intersectionRatio > 0), take(1));
+	isInViewport$ = this.isIntersecting$.pipe(
+		filter((x) => x.intersectionRatio > 0),
+		take(1)
+	);
 
 	ngOnInit() {
 		this.getData().subscribe();
@@ -55,7 +58,7 @@ export class MyComponent implements OnInit {
 		const divInViewport$ = injectIsIntersecting({
 			element: this.myDivEl,
 			injector: this.injector,
-		}).pipe(filter(x.intersectionRatio > 0));
+		}).pipe(filter((x) => x.intersectionRatio > 0));
 
 		// Only fetch data when the element is in the viewport
 		divInViewport$

diff --git a/libs/ngxtension/inject-is-intersecting/src/inject-is-intersecting.ts b/libs/ngxtension/inject-is-intersecting/src/inject-is-intersecting.ts
@@ -25,7 +25,7 @@ export interface InjectIsIntersectingOptions {
  *
  *   isIntersecting$ = injectIsIntersecting();
  *   isInViewport$ = this.isIntersecting$.pipe(
- *     filter(x.intersectionRatio > 0),
+ *     filter(x => x.intersectionRatio > 0),
  *     take(1),
  *   );
  *

diff --git a/libs/ngxtension/inject-is-intersecting/src/is-in-viewport.service.ts b/libs/ngxtension/inject-is-intersecting/src/is-in-viewport.service.ts
@@ -49,7 +49,11 @@ export class IsInViewportService implements IsInViewportServiceInterface {
 	}
 
 	intersect(element: Element, entry: IntersectionObserverEntry) {
-		this.#observerListeners.get(element)?.next(entry);
+		const subject = this.#observerListeners.get(element);
+		// only emit if the subject is subscribed to
+		if (subject?.observed) {
+			this.ngZone.run(() => subject.next(entry));
+		}
 	}
 
 	#disconnect() {