feat(ngx-utils): using new untilDestroy

libs/context-menu/src/lib/context-menu-trigger.directive.ts

@@ -11,7 +11,7 @@ import {
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { Subject, fromEvent } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { untilDestroy } from '@ngx-starter-kit/ngx-utils';
 
 @Directive({
   selector: '[contextMenu]',
@@ -22,17 +22,8 @@ export class ContextMenuTriggerDirective implements OnDestroy {
   @Input()
   contextMenu: TemplateRef<any>;
 
-  private _destroy$: Subject<void>;
-
   constructor(private _overlay: Overlay, private _elementRef: ElementRef, private _vcr: ViewContainerRef) {}
 
-  ngOnDestroy() {
-    if (this._destroy$) {
-      this._destroy$.next();
-      this._destroy$.complete();
-    }
-  }
-
   @HostListener('contextmenu', ['$event'])
   onContextMenu(event: MouseEvent) {
     event.preventDefault();
@@ -54,10 +45,12 @@ export class ContextMenuTriggerDirective implements OnDestroy {
     const templatePortal = new TemplatePortal(this.contextMenu, this._vcr);
     overlayRef.attach(templatePortal);
 
-    this._destroy$ = new Subject();
-
     fromEvent(document, 'click')
-      .pipe(takeUntil(this._destroy$))
+      /** Automatically unsubscribe on destroy */
+      .pipe(untilDestroy(this))
       .subscribe(() => overlayRef.detach());
   }
+
+  /** Must have */
+  ngOnDestroy() {}
 }

libs/draggable/src/lib/directives/draggable/draggable.directive.ts

@@ -1,6 +1,7 @@
 import { AfterViewInit, Directive, ElementRef, HostBinding, Input, NgZone, OnDestroy } from '@angular/core';
-import { fromEvent, merge, Subject } from 'rxjs';
+import { fromEvent, merge } from 'rxjs';
 import { map, switchMap, takeUntil } from 'rxjs/operators';
+import { untilDestroy } from '@ngx-starter-kit/ngx-utils';
 
 @Directive({
   selector: '[draggable]',
@@ -20,8 +21,6 @@ export class DraggableDirective implements AfterViewInit, OnDestroy {
   private delta = { x: 0, y: 0 };
   private offset = { x: 0, y: 0 };
 
-  private destroy$ = new Subject<void>();
-
   constructor(private elementRef: ElementRef, private zone: NgZone) {}
 
   public ngAfterViewInit(): void {
@@ -32,9 +31,7 @@ export class DraggableDirective implements AfterViewInit, OnDestroy {
     this.setupEvents();
   }
 
-  public ngOnDestroy(): void {
-    this.destroy$.next();
-  }
+  ngOnDestroy() {}
 
   private setupEvents() {
     this.zone.runOutsideAngular(() => {
@@ -80,7 +77,7 @@ export class DraggableDirective implements AfterViewInit, OnDestroy {
             takeUntil(end$),
           );
         }),
-        takeUntil(this.destroy$),
+        untilDestroy(this),
       );
 
       drag$.subscribe(() => {
@@ -91,7 +88,7 @@ export class DraggableDirective implements AfterViewInit, OnDestroy {
         this.translate();
       });
 
-      end$.pipe(takeUntil(this.destroy$)).subscribe(() => {
+      end$.pipe(untilDestroy(this)).subscribe(() => {
         this.offset.x += this.delta.x;
         this.offset.y += this.delta.y;
         this.delta = { x: 0, y: 0 };

libs/home/src/lib/components/header/sticky-header.directive.ts

@@ -1,8 +1,9 @@
 import { animate, AnimationBuilder, AnimationMetadata, AnimationPlayer, style } from '@angular/animations';
 
 import { AfterViewInit, Directive, ElementRef, OnDestroy } from '@angular/core';
-import { fromEvent, Subject } from 'rxjs';
-import { distinctUntilChanged, filter, map, pairwise, share, takeUntil, throttleTime } from 'rxjs/operators';
+import { fromEvent } from 'rxjs';
+import { distinctUntilChanged, filter, map, pairwise, share, throttleTime } from 'rxjs/operators';
+import { untilDestroy } from '@ngx-starter-kit/ngx-utils';
 
 enum Direction {
   Up = 'Up',
@@ -13,7 +14,7 @@ enum Direction {
   selector: '[stickyHeader]',
 })
 export class StickyHeaderDirective implements AfterViewInit, OnDestroy {
-  private _destroyed$ = new Subject<void>();
+
   player: AnimationPlayer;
 
   set show(show: boolean) {
@@ -55,7 +56,7 @@ export class StickyHeaderDirective implements AfterViewInit, OnDestroy {
       map(([y1, y2]): Direction => (y2 < y1 ? Direction.Up : Direction.Down)),
       distinctUntilChanged(),
       share(),
-      takeUntil(this._destroyed$),
+      untilDestroy(this),
     );
 
     const goingUp$ = scroll$.pipe(filter(direction => direction === Direction.Up));
@@ -66,8 +67,5 @@ export class StickyHeaderDirective implements AfterViewInit, OnDestroy {
     goingDown$.subscribe(() => (this.show = false));
   }
 
-  ngOnDestroy() {
-    this._destroyed$.next();
-    this._destroyed$.complete();
-  }
+  ngOnDestroy() {}
 }

libs/home/src/lib/containers/about/about.component.ts

@@ -1,18 +1,17 @@
 import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ROUTE_ANIMATIONS_ELEMENTS } from '@ngx-starter-kit/animations';
+import { fromEvent, Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
+import { untilDestroy } from '@ngx-starter-kit/ngx-utils';
 // import * as Trianglify from 'trianglify';
 declare var Trianglify: any;
-import { fromEvent, Subject, Subscription } from 'rxjs';
-import { map, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'ngx-about',
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.scss'],
 })
 export class AboutComponent implements OnInit, OnDestroy, AfterViewInit {
-  private _destroyed = new Subject();
-
   routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
   @ViewChild('trianglify')
   trianglifyCanvasRef: ElementRef;
@@ -26,17 +25,15 @@ export class AboutComponent implements OnInit, OnDestroy, AfterViewInit {
         debounceTime(100),
         map(event => [(<Window>event.target).innerWidth, (<Window>event.target).innerHeight]),
         distinctUntilChanged(),
-        takeUntil(this._destroyed),
+        untilDestroy(this),
       )
       .subscribe(res => {
         // setTimeout(() => {this.renderCanvas() }, 1000)
         this.renderCanvas();
       });
   }
 
-  ngOnDestroy() {
-    this._destroyed.next();
-  }
+  ngOnDestroy() {}
 
   ngAfterViewInit() {
     setTimeout(() => {

libs/scroll-to-top/src/lib/scroll-to-top.component.ts

@@ -1,9 +1,10 @@
 import { AfterViewInit, Component, Inject, OnDestroy } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { scrollFabAnimation } from '@ngx-starter-kit/animations';
-import { PageScrollConfig, PageScrollService, PageScrollInstance } from 'ngx-page-scroll';
-import { map, tap, distinctUntilChanged, throttleTime, takeUntil, share } from 'rxjs/operators';
-import { BehaviorSubject, fromEvent, Subject } from 'rxjs';
+import { PageScrollInstance, PageScrollService } from 'ngx-page-scroll';
+import { distinctUntilChanged, map, share, tap, throttleTime } from 'rxjs/operators';
+import { BehaviorSubject, fromEvent } from 'rxjs';
+import { untilDestroy } from '@ngx-starter-kit/ngx-utils';
 
 enum ShowStatus {
   show = 'show',
@@ -17,8 +18,6 @@ enum ShowStatus {
   animations: [scrollFabAnimation],
 })
 export class ScrollToTopComponent implements AfterViewInit, OnDestroy {
-  private _destroyed$ = new Subject<void>();
-
   private _stateSubject = new BehaviorSubject<string>(ShowStatus.hide);
   state$ = this._stateSubject.asObservable();
 
@@ -41,15 +40,12 @@ export class ScrollToTopComponent implements AfterViewInit, OnDestroy {
       distinctUntilChanged(),
       share(),
       tap(state => this._stateSubject.next(state)),
-      takeUntil(this._destroyed$),
+      untilDestroy(this),
     );
     scroll$.subscribe();
   }
 
-  ngOnDestroy() {
-    this._destroyed$.next();
-    this._destroyed$.complete();
-  }
+  ngOnDestroy() {}
 
   scrollToTop() {
     this.pageScrollService.start(this.pageScrollInstance);

libs/sidenav/src/lib/sidenav.component.ts

@@ -12,8 +12,8 @@ import { Observable, Subject, Subscription } from 'rxjs';
 
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material';
 import { MenuItem, MenuService, SidenavState } from '@ngx-starter-kit/navigator';
+import { untilDestroy } from '@ngx-starter-kit/ngx-utils';
 // import { sidenavAnimation } from '@ngx-starter-kit/animations';
-import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'ngx-sidenav',
@@ -35,11 +35,11 @@ export class SidenavComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.menuService.items$.pipe(takeUntil(this._destroyed$)).subscribe((items: MenuItem[]) => {
+    this.menuService.items$.pipe(untilDestroy(this)).subscribe((items: MenuItem[]) => {
       this.items = items;
     });
 
-    // this.router.events.pipe(takeUntil(this._destroyed$))
+    // this.router.events.pipe(untilDestroy(this))
     //   .subscribe(event => {
     //   if (event instanceof NavigationEnd) {
     //     this.menuService.setCurrentlyOpenByRoute(event.url);
@@ -51,10 +51,7 @@ export class SidenavComponent implements OnInit, OnDestroy {
     // });
   }
 
-  ngOnDestroy() {
-    this._destroyed$.next();
-    this._destroyed$.complete();
-  }
+  ngOnDestroy() {}
 
   toggleIconSidenav() {
     setTimeout(() => {