From 42d460029dc88bceb1ff4d01e98691ccdb2706b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20St=C4=99pniewski?= <k3nsei.pl@gmail.com>
Date: Sat, 3 Oct 2020 21:32:45 +0200
Subject: [PATCH] fix: Make options input public

---
 .../src/lib/in-viewport.directive.ts          | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/projects/ng-in-viewport/src/lib/in-viewport.directive.ts b/projects/ng-in-viewport/src/lib/in-viewport.directive.ts
index 56bfe423..793c9b4c 100644
--- a/projects/ng-in-viewport/src/lib/in-viewport.directive.ts
+++ b/projects/ng-in-viewport/src/lib/in-viewport.directive.ts
@@ -19,8 +19,8 @@ import {
   Output,
   PLATFORM_ID
 } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
 
 import { InViewportConfig, InViewportConfigOptions } from './in-viewport-config';
 import { InViewportService } from './in-viewport.service';
@@ -32,36 +32,44 @@ export const InViewportMetadata = Symbol('InViewportMetadata');
 })
 export class InViewportDirective implements AfterViewInit, OnDestroy {
   private config: InViewportConfig = new InViewportConfig();
-  private readonly subscription: Subscription = new Subscription();
+  private readonly destroyed$: Subject<void> = new Subject();
 
   @Input('inViewportOptions')
-  private set options(value: InViewportConfigOptions) {
+  public set options(value: InViewportConfigOptions) {
     this.config = new InViewportConfig(value);
   }
 
   @Output() public readonly inViewportAction: EventEmitter<any> = new EventEmitter<any>();
 
   constructor(
-    @Inject(PLATFORM_ID) private platformId: Object, // tslint:disable-line
-    private elementRef: ElementRef,
-    private inViewport: InViewportService
-  ) {}
+    @Inject(PLATFORM_ID) private readonly platformId: Object, // tslint:disable-line
+    private readonly elementRef: ElementRef,
+    private readonly inViewport: InViewportService
+  ) {
+  }
 
   public ngAfterViewInit(): void {
     if (isPlatformBrowser(this.platformId)) {
       this.inViewport.register(this.elementRef.nativeElement, this.config);
-      this.subscription.add(
-        this.inViewport.trigger$
-          .pipe(filter((entry: IntersectionObserverEntry) => entry && entry.target === this.elementRef.nativeElement))
-          .subscribe((entry: IntersectionObserverEntry) => this.emitAction(entry, false))
-      );
+      this.inViewport.trigger$
+        .pipe(
+          filter((entry: IntersectionObserverEntry): boolean => {
+            return entry && entry.target === this.elementRef.nativeElement;
+          }),
+          takeUntil(this.destroyed$)
+        )
+        .subscribe((entry: IntersectionObserverEntry): void => {
+          this.emitAction(entry, false);
+        });
     } else {
       this.emitAction(undefined, true);
     }
   }
 
   public ngOnDestroy(): void {
-    this.subscription.unsubscribe();
+    this.destroyed$.next();
+    this.destroyed$.complete();
+
     if (isPlatformBrowser(this.platformId)) {
       this.inViewport.unregister(this.elementRef.nativeElement, this.config);
     }