refactor: unsubscribe on destroy (#2112)

docs/app/@theme/components/fragment-target/fragment-target.directive.ts

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, Inject, Input, OnDestroy, OnInit, PLATFORM_ID, Renderer2 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { timer } from 'rxjs';
-import { takeWhile, publish, refCount, filter, tap, debounce } from 'rxjs/operators';
+import { timer, Subject } from 'rxjs';
+import { takeUntil, publish, refCount, filter, tap, debounce } from 'rxjs/operators';
 import { NB_WINDOW, NbLayoutScrollService } from '@nebular/theme';
 import { NgdVisibilityService } from '../../../@theme/services';
 
@@ -15,7 +15,7 @@ export class NgdFragmentTargetDirective implements OnInit, OnDestroy {
  private readonly marginFromTop = 120;
  private isCurrentlyViewed: boolean = false;
  private isScrolling: boolean = false;
- private alive = true;
+ private destroy$ = new Subject<void>();
 
  @Input() ngdFragment: string;
  @Input() ngdFragmentClass: string;
@@ -37,7 +37,7 @@ export class NgdFragmentTargetDirective implements OnInit, OnDestroy {
  .pipe(
  publish(null),
  refCount(),
- takeWhile(() => this.alive),
+ takeUntil(this.destroy$),
  filter(() => this.ngdFragmentSync),
  )
  .subscribe((fragment: string) => {
@@ -49,7 +49,7 @@ export class NgdFragmentTargetDirective implements OnInit, OnDestroy {
  });
 
  this.visibilityService.isTopmostVisible(this.el.nativeElement, OBSERVER_OPTIONS)
- .pipe(takeWhile(() => this.alive))
+ .pipe(takeUntil(this.destroy$))
  .subscribe((isTopmost: boolean) => {
  this.isCurrentlyViewed = isTopmost;
  if (isTopmost) {
@@ -59,9 +59,9 @@ export class NgdFragmentTargetDirective implements OnInit, OnDestroy {
 
  this.scrollService.onScroll()
  .pipe(
- takeWhile(() => this.alive),
  tap(() => this.isScrolling = true),
  debounce(() => timer(100)),
+ takeUntil(this.destroy$),
  )
  .subscribe(() => this.isScrolling = false);
  }
@@ -88,7 +88,8 @@ export class NgdFragmentTargetDirective implements OnInit, OnDestroy {
  }
 
  ngOnDestroy() {
- this.alive = false;
+ this.destroy$.next();
+ this.destroy$.complete();
  this.visibilityService.unobserve(this.el.nativeElement, OBSERVER_OPTIONS);
  }
 }

docs/app/@theme/components/page-tabs/page-tabs.component.ts

@@ -5,9 +5,9 @@
  */
 
 import { ChangeDetectionStrategy, Component, Input, OnDestroy, HostBinding } from '@angular/core';
-import { takeWhile, map, publishReplay, refCount } from 'rxjs/operators';
+import { takeUntil, map, publishReplay, refCount } from 'rxjs/operators';
 import { ActivatedRoute } from '@angular/router';
-import { Observable, of as observableOf, combineLatest } from 'rxjs';
+import { Observable, of as observableOf, combineLatest, Subject } from 'rxjs';
 
 @Component({
  selector: 'ngd-page-tabs',
@@ -25,6 +25,8 @@ import { Observable, of as observableOf, combineLatest } from 'rxjs';
 })
 export class NgdPageTabsComponent implements OnDestroy {
 
+ private destroy$ = new Subject<void>();
+
  items$: Observable<any[]> = observableOf([]);
 
  @Input()
@@ -36,8 +38,8 @@ export class NgdPageTabsComponent implements OnDestroy {
  this.activatedRoute.params.pipe(publishReplay(), refCount()),
  )
  .pipe(
- takeWhile(() => this.alive),
  map(([tabs, params]) => (tabs.map((item: any) => ({ ...item, selected: item.tab === params.tab })))),
+ takeUntil(this.destroy$),
  );
  }
 
@@ -76,12 +78,12 @@ export class NgdPageTabsComponent implements OnDestroy {
  icon: 'image-outline',
  },
  ];
- private alive = true;
 
  constructor(private activatedRoute: ActivatedRoute) {
  }
 
  ngOnDestroy() {
- this.alive = false;
+ this.destroy$.next();
+ this.destroy$.complete();
  }
 }

docs/app/@theme/components/page-toc/page-toc.component.ts

@@ -5,9 +5,9 @@
  */
 
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy } from '@angular/core';
-import { takeWhile, map } from 'rxjs/operators';
+import { takeUntil, map } from 'rxjs/operators';
 import { ActivatedRoute } from '@angular/router';
-import { of as observableOf, combineLatest } from 'rxjs';
+import { of as observableOf, combineLatest, Subject } from 'rxjs';
 
 @Component({
  selector: 'ngd-page-toc',
@@ -26,6 +26,8 @@ import { of as observableOf, combineLatest } from 'rxjs';
 })
 export class NgdPageTocComponent implements OnDestroy {
 
+ private destroy$ = new Subject<void>();
+
  items: any[];
 
  @Input()
@@ -35,27 +37,26 @@ export class NgdPageTocComponent implements OnDestroy {
  this.activatedRoute.fragment,
  )
  .pipe(
- takeWhile(() => this.alive),
  map(([toc, fragment]) => {
  toc = toc.map((item: any) => ({ ...item, selected: fragment === item.fragment }));
  if (toc.length && !toc.find(item => item.selected)) {
  toc[0].selected = true;
  }
  return toc;
  }),
+ takeUntil(this.destroy$),
  )
  .subscribe((toc) => {
  this.items = toc;
  this.cd.detectChanges();
  })
  }
 
- private alive = true;
-
  constructor(private activatedRoute: ActivatedRoute, private cd: ChangeDetectorRef) {
  }
 
  ngOnDestroy() {
- this.alive = false;
+ this.destroy$.next();
+ this.destroy$.complete();
  }
 }

docs/app/blocks/components/live-example-block/live-example-block.component.ts

@@ -13,7 +13,8 @@ import {
  AfterViewInit,
 } from '@angular/core';
 import { Location } from '@angular/common';
-import { takeWhile } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 import { NgdAnalytics, NgdIframeCommunicatorService } from '../../../@theme/services';
 import { NgdExampleView } from '../../enum.example-view';
 
@@ -51,7 +52,8 @@ export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDe
  }
 
  iframeHeight = 0;
- alive: boolean = true;
+
+ private destroy$ = new Subject<void>();
 
  themes: {label: string; value: string}[] = [
  { label: 'Default', value: 'default' },
@@ -79,7 +81,7 @@ export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDe
 
  ngOnInit() {
  this.communicator.receive(this.content.id)
- .pipe(takeWhile(() => this.alive))
+ .pipe(takeUntil(this.destroy$))
  .subscribe(it => {
  this.iframeHeight = it.height;
  this.loading = false;
@@ -97,7 +99,8 @@ export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDe
  }
 
  ngOnDestroy() {
- this.alive = false;
+ this.destroy$.next();
+ this.destroy$.complete();
  }
 
  switchTheme(theme: string) {

docs/app/blocks/components/theme-block/theme-block.component.ts

@@ -6,8 +6,8 @@
 
 import {Component, Input, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef} from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { takeWhile, skip, distinctUntilChanged, debounceTime } from 'rxjs/operators';
-
+import { takeUntil, skip, distinctUntilChanged, debounceTime } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 @Component({
  selector: 'ngd-theme-block',
@@ -18,7 +18,7 @@ import { takeWhile, skip, distinctUntilChanged, debounceTime } from 'rxjs/operat
 export class NgdThemeComponent implements OnInit, OnDestroy {
  searchControl = new FormControl();
 
- private alive: boolean = true;
+ private destroy$ = new Subject<void>();
 
  properties = [];
  filtered = [];
@@ -47,7 +47,7 @@ export class NgdThemeComponent implements OnInit, OnDestroy {
 
  ngOnInit() {
  this.searchControl.valueChanges
- .pipe(skip(1), distinctUntilChanged(), debounceTime(300), takeWhile(() => this.alive))
+ .pipe(skip(1), distinctUntilChanged(), debounceTime(300), takeUntil(this.destroy$))
  .subscribe((value: string) => {
  this.filtered = this.properties
  .filter(({ name }) => name.toLowerCase().includes(value.toLowerCase()));
@@ -60,6 +60,7 @@ export class NgdThemeComponent implements OnInit, OnDestroy {
  }
 
  ngOnDestroy() {
- this.alive = false;
+ this.destroy$.next();
+ this.destroy$.complete();
  }
 }

docs/app/documentation/documentation.component.ts

@@ -6,7 +6,8 @@
 
 import { Component, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
-import { takeWhile, withLatestFrom, map } from 'rxjs/operators';
+import { takeUntil, withLatestFrom, map } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 import { NbThemeService, NbMenuItem, NbSidebarService, NbMenuService } from '@nebular/theme';
 
 import { NgdMenuService } from '../@theme/services/menu.service';
@@ -24,7 +25,7 @@ export class NgdDocumentationComponent implements OnDestroy {
  collapsedBreakpoints = ['xs', 'is', 'sm', 'md', 'lg'];
  sidebarTag = 'menuSidebar';
 
- private alive = true;
+ private destroy$ = new Subject<void>();
 
  constructor(
  private service: NgdMenuService,
@@ -42,7 +43,7 @@ export class NgdDocumentationComponent implements OnDestroy {
  this.router.events
  .pipe(
  withLatestFrom(this.themeService.onMediaQueryChange().pipe(map((changes: any[]) => changes[1]))),
- takeWhile(() => this.alive),
+ takeUntil(this.destroy$),
  )
  .subscribe(([event, mediaQuery]: [any, NbMediaBreakpoint]) => {
  if (event.url === '/docs') {
@@ -62,6 +63,7 @@ export class NgdDocumentationComponent implements OnDestroy {
  }
 
  ngOnDestroy() {
- this.alive = false;
+ this.destroy$.next();
+ this.destroy$.complete();
  }
 }

docs/app/documentation/page/page.component.ts

@@ -7,7 +7,8 @@
 import { Component, Inject, NgZone, OnDestroy, OnInit, ViewChild, AfterContentChecked } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
-import { filter, map, publishReplay, refCount, tap, takeWhile } from 'rxjs/operators';
+import { filter, map, publishReplay, refCount, tap, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 import { NB_WINDOW } from '@nebular/theme';
 import { NgdTabbedBlockComponent } from '../../blocks/components/tabbed-block/tabbed-block.component';
 import { NgdStructureService } from '../../@theme/services';
@@ -20,7 +21,7 @@ import { NgdStructureService } from '../../@theme/services';
 export class NgdPageComponent implements OnInit, AfterContentChecked, OnDestroy {
 
  currentItem;
- private alive = true;
+ private destroy$ = new Subject<void>();
 
  currentTabName: string = '';
 
@@ -52,13 +53,13 @@ export class NgdPageComponent implements OnInit, AfterContentChecked, OnDestroy
  }
 
  ngOnDestroy() {
- this.alive = false;
+ this.destroy$.next();
+ this.destroy$.complete();
  }
 
  handlePageNavigation() {
  this.activatedRoute.params
  .pipe(
- takeWhile(() => this.alive),
  filter((params: any) => params.subPage),
  map((params: any) => {
  const slag = `${params.page}_${params.subPage}`;
@@ -75,6 +76,7 @@ export class NgdPageComponent implements OnInit, AfterContentChecked, OnDestroy
  }),
  publishReplay(),
  refCount(),
+ takeUntil(this.destroy$),
  )
  .subscribe((item) => {
  this.currentItem = item;

docs/app/example/example.component.ts

@@ -1,7 +1,7 @@
 import { AfterViewInit, Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { of as observableOf } from 'rxjs';
-import { takeWhile, delay } from 'rxjs/operators';
+import { of as observableOf, Subject } from 'rxjs';
+import { takeUntil, delay } from 'rxjs/operators';
 import { NB_DOCUMENT, NbThemeService } from '@nebular/theme';
 import { NgdAnalytics, NgdIframeCommunicatorService } from '../@theme/services';
 
@@ -12,7 +12,7 @@ import { NgdAnalytics, NgdIframeCommunicatorService } from '../@theme/services';
 })
 export class NgdExampleComponent implements OnInit, AfterViewInit, OnDestroy {
  private id: string;
- private alive: boolean = true;
+ private destroy$ = new Subject<void>();
 
  constructor(private communicator: NgdIframeCommunicatorService,
  private themeService: NbThemeService,
@@ -34,7 +34,8 @@ export class NgdExampleComponent implements OnInit, AfterViewInit, OnDestroy {
  }
 
  ngOnDestroy() {
- this.alive = false;
+ this.destroy$.next();
+ this.destroy$.complete();
  }
 
  private setupId() {
@@ -43,7 +44,7 @@ export class NgdExampleComponent implements OnInit, AfterViewInit, OnDestroy {
 
  private subscribeOnThemeSwitch() {
  this.communicator.receive(this.id)
- .pipe(takeWhile(() => this.alive))
+ .pipe(takeUntil(this.destroy$))
  .subscribe(payload => this.changeTheme(payload))
  }
 

docs/articles/auth/oauth2.md

@@ -140,17 +140,18 @@ And finally, let's add code to our component to initiate the authentication. Fir
 })
 export class NbOAuth2LoginComponent implements OnDestroy {
 
- alive = true;
+ private destroy$ = new Subject<void>();
 
  login() {
  this.authService.authenticate('google')
- .pipe(takeWhile(() => this.alive))
+ .pipe(takeUntil(this.destroy$))
  .subscribe((authResult: NbAuthResult) => {
  });
  }
 
  ngOnDestroy(): void {
- this.alive = false;
+ this.destroy$.next();
+ this.destroy$.complete();
  }
 }
 ```
@@ -170,11 +171,11 @@ Now, we need to configure that "callback" URL to be able to properly handle resp
 })
 export class NbOAuth2CallbackPlaygroundComponent implements OnDestroy {
 
- alive = true;
+ private destroy$ = new Subject<void>();
 
  constructor(private authService: NbAuthService, private router: Router) {
  this.authService.authenticate('google')
- .pipe(takeWhile(() => this.alive))
+ .pipe(takeUntil(this.destroy$))
  .subscribe((authResult: NbAuthResult) => {
  if (authResult.isSuccess()) {
  this.router.navigateByUrl('/pages/dashboard');
@@ -183,7 +184,8 @@ export class NbOAuth2CallbackPlaygroundComponent implements OnDestroy {
  }
 
  ngOnDestroy(): void {
- this.alive = false;
+ this.destroy$.next();
+ this.destroy$.complete();
  }
 }
 ```