Add takeUntilDestroyed (https://angular.io/api/core/rxjs-interop/takeUntilDestroyed) and cleanup other unsubscription examples

ueler · ueler · commit 1eefc446a8c8 · 2024-04-07T12:12:09.000+02:00
diff --git a/angular-app/src/app/app-routing.module.ts b/angular-app/src/app/app-routing.module.ts
@@ -9,13 +9,24 @@ import {
   PATH_ROUTER_EVENTS,
   PATH_ROUTER_PARAM_MAP,
   PATH_RXJS_TIMER,
-  PATH_RXJS_TIMER_COMPLETE
+  PATH_RXJS_TIMER_COMPLETE,
+  PATH_UNSUBSCRIPTION_GATHER,
+  PATH_UNSUBSCRIPTION_TAKE_UNTIL, PATH_UNSUBSCRIPTION_TAKE_UNTIL_DESTROYED,
+  PATH_UNSUBSCRIPTION_UNTIL_DESTROYED
 } from './routing-links';
 import {RxjsTimerCompleteComponent} from './rxjs-timer-complete/rxjs-timer-complete.component';
 import {HttpclientComponent} from './httpclient/httpclient.component';
 import {RouterParamMapComponent} from './router-param-map/router-param-map.component';
 import {RouterEventsComponent} from './router-events/router-events.component';
 import {ComponentTreeComponent} from './component-tree/component-tree.component';
+import {
+  GatherSubscriptionsComponent
+} from "./unsubscription-methods/gather-subscriptions/gather-subscriptions.component";
+import {TakeUntilComponent} from "./unsubscription-methods/take-until/take-until.component";
+import {UntilDestroyedComponent} from "./unsubscription-methods/until-destroyed/until-destroyed.component";
+import {
+  TakeUntilDestroyedComponent
+} from "./unsubscription-methods/take-until-destroyed/take-until-destroyed.component";
 
 
 const routes: Routes = [
@@ -26,7 +37,11 @@ const routes: Routes = [
   {path: PATH_ROUTER_PARAM_MAP, component: RouterParamMapComponent},
   {path: PATH_ROUTER_PARAM_MAP + '/:param', component: RouterParamMapComponent},
   {path: PATH_ROUTER_EVENTS, component: RouterEventsComponent},
-  {path: PATH_COMPONENT_TREE, component: ComponentTreeComponent}
+  {path: PATH_COMPONENT_TREE, component: ComponentTreeComponent},
+  {path: PATH_UNSUBSCRIPTION_GATHER, component: GatherSubscriptionsComponent},
+  {path: PATH_UNSUBSCRIPTION_TAKE_UNTIL, component: TakeUntilComponent},
+  {path: PATH_UNSUBSCRIPTION_UNTIL_DESTROYED, component: UntilDestroyedComponent},
+  {path: PATH_UNSUBSCRIPTION_TAKE_UNTIL_DESTROYED, component: TakeUntilDestroyedComponent},
 ];
 
 @NgModule({
diff --git a/angular-app/src/app/app.component.html b/angular-app/src/app/app.component.html
@@ -1,4 +1,5 @@
-<h1>When to unsubscribe in Angular - Examples</h1>
+<h1>When to unsubscribe in Angular</h1>
+<h2>Examples</h2>
 <ul>
   <li>
     <a [routerLink]="RoutingLinks.emptyComponent">Empty component</a>
@@ -29,5 +30,20 @@ <h1>When to unsubscribe in Angular - Examples</h1>
     <a [routerLink]="RoutingLinks.componentTree">Component tree</a>
   </li>
 </ul>
+<h2>Unsubscription methods</h2>
+<ul>
+  <li>
+    <a [routerLink]="RoutingLinks.unsubscriptionUntilDestroyed">Unsubscribe with untilDestroyed</a>
+  </li>
+  <li>
+    <a [routerLink]="RoutingLinks.unsubscriptionTakeUntilDestroyed">Unsubscribe with takeUntilDestroyed</a>
+  </li>
+  <li>
+    <a [routerLink]="RoutingLinks.unsubscriptionTakeUntil">Unsubscribe with takeUntil</a>
+  </li>
+  <li>
+    <a [routerLink]="RoutingLinks.unsubscriptionGather">Unsubscribe with subscription gathering</a>
+  </li>
+</ul>
 <hr>
 <router-outlet></router-outlet>
diff --git a/angular-app/src/app/app.module.ts b/angular-app/src/app/app.module.ts
@@ -16,6 +16,9 @@ import { RouterEventsComponent } from './router-events/router-events.component';
 import { ComponentTreeComponent } from './component-tree/component-tree.component';
 import { SubComponentOneComponent } from './component-tree/sub-component-one/sub-component-one.component';
 import { SubComponentTwoComponent } from './component-tree/sub-component-one/sub-component-two/sub-component-two.component';
+import {
+  TakeUntilDestroyedComponent
+} from "./unsubscription-methods/take-until-destroyed/take-until-destroyed.component";
 
 @NgModule({
   declarations: [
@@ -31,7 +34,8 @@ import { SubComponentTwoComponent } from './component-tree/sub-component-one/sub
     RouterEventsComponent,
     ComponentTreeComponent,
     SubComponentOneComponent,
-    SubComponentTwoComponent
+    SubComponentTwoComponent,
+    TakeUntilDestroyedComponent
   ],
   imports: [
     BrowserModule,
diff --git a/angular-app/src/app/component-tree/component-tree.component.ts b/angular-app/src/app/component-tree/component-tree.component.ts
@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-component-tree',
   templateUrl: './component-tree.component.html',
   styleUrls: ['./component-tree.component.scss']
 })
-export class ComponentTreeComponent implements OnInit {
+export class ComponentTreeComponent {
 
-  constructor() { }
-
-  ngOnInit() {
+  constructor() {
   }
-
 }
diff --git a/angular-app/src/app/component-tree/sub-component-one/sub-component-one.component.ts b/angular-app/src/app/component-tree/sub-component-one/sub-component-one.component.ts
@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-sub-component-one',
   templateUrl: './sub-component-one.component.html',
   styleUrls: ['./sub-component-one.component.scss']
 })
-export class SubComponentOneComponent implements OnInit {
+export class SubComponentOneComponent  {
 
   constructor() { }
 
-  ngOnInit() {
-  }
-
 }
diff --git a/angular-app/src/app/router-param-map/router-param-map.component.ts b/angular-app/src/app/router-param-map/router-param-map.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, ParamMap} from '@angular/router';
 import {Title} from '@angular/platform-browser';
 
@@ -7,7 +7,7 @@ import {Title} from '@angular/platform-browser';
   templateUrl: './router-param-map.component.html',
   styleUrls: ['./router-param-map.component.scss']
 })
-export class RouterParamMapComponent implements OnInit, OnDestroy {
+export class RouterParamMapComponent implements OnInit {
 
   paramMap?: ParamMap;
   queryParamMap?: ParamMap;
@@ -27,7 +27,4 @@ export class RouterParamMapComponent implements OnInit, OnDestroy {
     });
   }
 
-  ngOnDestroy() {
-  }
-
 }
diff --git a/angular-app/src/app/routing-links.ts b/angular-app/src/app/routing-links.ts
@@ -5,6 +5,10 @@ export const PATH_HTTP_CLIENT = 'http-client';
 export const PATH_ROUTER_PARAM_MAP = 'param-map';
 export const PATH_ROUTER_EVENTS = 'router-events';
 export const PATH_COMPONENT_TREE = 'component-tree';
+export const PATH_UNSUBSCRIPTION_GATHER = 'unsubscription-gather';
+export const PATH_UNSUBSCRIPTION_TAKE_UNTIL = 'unsubscription-take-until';
+export const PATH_UNSUBSCRIPTION_UNTIL_DESTROYED = 'unsubscription-until-destroyed';
+export const PATH_UNSUBSCRIPTION_TAKE_UNTIL_DESTROYED = 'unsubscription-take-until-destroyed';
 
 export class RoutingLinks {
   static emptyComponent = PATH_EMPTY;
@@ -14,4 +18,8 @@ export class RoutingLinks {
   static paramMap = PATH_ROUTER_PARAM_MAP;
   static routerEvents = PATH_ROUTER_EVENTS;
   static componentTree = PATH_COMPONENT_TREE;
+  static unsubscriptionGather = PATH_UNSUBSCRIPTION_GATHER;
+  static unsubscriptionTakeUntil = PATH_UNSUBSCRIPTION_TAKE_UNTIL;
+  static unsubscriptionUntilDestroyed = PATH_UNSUBSCRIPTION_UNTIL_DESTROYED;
+  static unsubscriptionTakeUntilDestroyed = PATH_UNSUBSCRIPTION_TAKE_UNTIL_DESTROYED;
 }
diff --git a/angular-app/src/app/unsubscription-methods/gather-subscriptions/gather-subscriptions.component.ts b/angular-app/src/app/unsubscription-methods/gather-subscriptions/gather-subscriptions.component.ts
@@ -1,26 +1,25 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnDestroy} from '@angular/core';
 import {Subscription, timer} from 'rxjs';
 
 @Component({
   selector: 'app-gather-subscriptions',
   templateUrl: './gather-subscriptions.component.html',
   styleUrls: ['./gather-subscriptions.component.scss']
 })
-export class GatherSubscriptionsComponent implements OnInit, OnDestroy {
+export class GatherSubscriptionsComponent implements OnDestroy {
 
   private readonly subscription = new Subscription();
 
-  private everySecond = timer(0, 1000);
-  private everyThirdSecond = timer(0, 3000);
+  private everySecond$ = timer(0, 1000);
+  private everyThirdSecond$ = timer(0, 3000);
 
   constructor() {
-  }
-
-  ngOnInit() {
-    this.subscription.add(this.everySecond.subscribe(() => {
+    this.subscription.add(this.everySecond$.subscribe(() => {
+      console.log("GatherSubscriptionsComponent everySecond$ emitted");
       // some logic here
     }));
-    this.subscription.add(this.everyThirdSecond.subscribe(() => {
+    this.subscription.add(this.everyThirdSecond$.subscribe(() => {
+      console.log("GatherSubscriptionsComponent everyThirdSecond$ emitted");
       // some logic here
     }));
   }
diff --git a/angular-app/src/app/unsubscription-methods/take-until-destroyed/take-until-destroyed.component.html b/angular-app/src/app/unsubscription-methods/take-until-destroyed/take-until-destroyed.component.html
diff --git a/angular-app/src/app/unsubscription-methods/take-until-destroyed/take-until-destroyed.component.scss b/angular-app/src/app/unsubscription-methods/take-until-destroyed/take-until-destroyed.component.scss
diff --git a/angular-app/src/app/unsubscription-methods/take-until-destroyed/take-until-destroyed.component.ts b/angular-app/src/app/unsubscription-methods/take-until-destroyed/take-until-destroyed.component.ts
@@ -0,0 +1,28 @@
+import {Component} from '@angular/core';
+import {timer} from 'rxjs';
+import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
+
+@Component({
+  selector: 'app-until-destroyed',
+  templateUrl: './take-until-destroyed.component.html',
+  styleUrls: ['./take-until-destroyed.component.scss']
+})
+export class TakeUntilDestroyedComponent {
+
+  private everySecond$ = timer(0, 1000);
+  private everyThirdSecond$ = timer(0, 3000);
+
+  constructor() {
+    this.everySecond$.pipe(takeUntilDestroyed())
+      .subscribe(() => {
+        console.log("TakeUntilDestroyedComponent everySecond$ emitted");
+        // some logic here
+      });
+
+    this.everyThirdSecond$.pipe(takeUntilDestroyed())
+      .subscribe(() => {
+        console.log("TakeUntilDestroyedComponent everyThirdSecond$ emitted");
+        // some logic here
+      });
+  }
+}
diff --git a/angular-app/src/app/unsubscription-methods/take-until/take-until.component.ts b/angular-app/src/app/unsubscription-methods/take-until/take-until.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnDestroy} from '@angular/core';
 import {Subject, timer} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
@@ -7,24 +7,23 @@ import {takeUntil} from 'rxjs/operators';
   templateUrl: './take-until.component.html',
   styleUrls: ['./take-until.component.scss']
 })
-export class TakeUntilComponent implements OnInit, OnDestroy {
+export class TakeUntilComponent implements OnDestroy {
 
   private readonly ngDestroy = new Subject<void>();
 
-  private everySecond = timer(0, 1000);
-  private everyThirdSecond = timer(0, 3000);
+  private everySecond$ = timer(0, 1000);
+  private everyThirdSecond$ = timer(0, 3000);
 
   constructor() {
-  }
-
-  ngOnInit() {
-    this.everySecond.pipe(takeUntil(this.ngDestroy))
+    this.everySecond$.pipe(takeUntil(this.ngDestroy))
       .subscribe(() => {
+        console.log("TakeUntilComponent everySecond$ emitted");
         // some logic here
       });
 
-    this.everyThirdSecond.pipe(takeUntil(this.ngDestroy))
+    this.everyThirdSecond$.pipe(takeUntil(this.ngDestroy))
       .subscribe(() => {
+        console.log("TakeUntilComponent everyThirdSecond$ emitted");
         // some logic here
       });
   }
diff --git a/angular-app/src/app/unsubscription-methods/until-destroyed/until-destroyed.component.ts b/angular-app/src/app/unsubscription-methods/until-destroyed/until-destroyed.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 import {UntilDestroy, untilDestroyed} from '@ngneat/until-destroy';
 import {timer} from 'rxjs';
 
@@ -8,22 +8,21 @@ import {timer} from 'rxjs';
   templateUrl: './until-destroyed.component.html',
   styleUrls: ['./until-destroyed.component.scss']
 })
-export class UntilDestroyedComponent implements OnInit {
+export class UntilDestroyedComponent {
 
-  private everySecond = timer(0, 1000);
-  private everyThirdSecond = timer(0, 3000);
+  private everySecond$ = timer(0, 1000);
+  private everyThirdSecond$ = timer(0, 3000);
 
   constructor() {
-  }
-
-  ngOnInit() {
-    this.everySecond.pipe(untilDestroyed(this))
+    this.everySecond$.pipe(untilDestroyed(this))
       .subscribe(() => {
+        console.log("UntilDestroyedComponent everySecond$ emitted");
         // some logic here
       });
 
-    this.everyThirdSecond.pipe(untilDestroyed(this))
+    this.everyThirdSecond$.pipe(untilDestroyed(this))
       .subscribe(() => {
+        console.log("UntilDestroyedComponent everyThirdSecond$ emitted");
         // some logic here
       });
   }
