Add asyncPipe example

Author: ueler

angular-app/src/app/app-routing.module.ts

@@ -9,7 +9,7 @@ import {
   PATH_ROUTER_EVENTS,
   PATH_ROUTER_PARAM_MAP,
   PATH_RXJS_TIMER,
-  PATH_RXJS_TIMER_COMPLETE,
+  PATH_RXJS_TIMER_COMPLETE, PATH_UNSUBSCRIPTION_ASYNC_PIPE,
   PATH_UNSUBSCRIPTION_GATHER,
   PATH_UNSUBSCRIPTION_TAKE_UNTIL, PATH_UNSUBSCRIPTION_TAKE_UNTIL_DESTROYED,
   PATH_UNSUBSCRIPTION_UNTIL_DESTROYED
@@ -27,6 +27,7 @@ import {UntilDestroyedComponent} from "./unsubscription-methods/until-destroyed/
 import {
   TakeUntilDestroyedComponent
 } from "./unsubscription-methods/take-until-destroyed/take-until-destroyed.component";
+import {AsyncPipeComponent} from "./unsubscription-methods/async-pipe/async-pipe.component";
 
 
 const routes: Routes = [
@@ -42,6 +43,7 @@ const routes: Routes = [
   {path: PATH_UNSUBSCRIPTION_TAKE_UNTIL, component: TakeUntilComponent},
   {path: PATH_UNSUBSCRIPTION_UNTIL_DESTROYED, component: UntilDestroyedComponent},
   {path: PATH_UNSUBSCRIPTION_TAKE_UNTIL_DESTROYED, component: TakeUntilDestroyedComponent},
+  {path: PATH_UNSUBSCRIPTION_ASYNC_PIPE, component: AsyncPipeComponent},
 ];
 
 @NgModule({

angular-app/src/app/app.component.html

@@ -44,6 +44,9 @@ <h2>Unsubscription methods</h2>
   <li>
     <a [routerLink]="RoutingLinks.unsubscriptionGather">Unsubscribe with subscription gathering</a>
   </li>
+  <li>
+    <a [routerLink]="RoutingLinks.unsubscriptionAsyncPipe">Async pipe</a>
+  </li>
 </ul>
 <hr>
 <router-outlet></router-outlet>

angular-app/src/app/app.module.ts

@@ -1,24 +1,30 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
 
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { RxjsTimerComponent } from './rxjs-timer/rxjs-timer.component';
-import { EmptyComponent } from './empty/empty.component';
-import { RxjsTimerCompleteComponent } from './rxjs-timer-complete/rxjs-timer-complete.component';
-import { HttpclientComponent } from './httpclient/httpclient.component';
+import {AppRoutingModule} from './app-routing.module';
+import {AppComponent} from './app.component';
+import {RxjsTimerComponent} from './rxjs-timer/rxjs-timer.component';
+import {EmptyComponent} from './empty/empty.component';
+import {RxjsTimerCompleteComponent} from './rxjs-timer-complete/rxjs-timer-complete.component';
+import {HttpclientComponent} from './httpclient/httpclient.component';
 import {HttpClientModule} from '@angular/common/http';
-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 { 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 { 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 {
+  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 {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 {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";
+import {AsyncPipeComponent} from "./unsubscription-methods/async-pipe/async-pipe.component";
+import {CommonModule} from '@angular/common';
 
 @NgModule({
   declarations: [
@@ -35,14 +41,17 @@ import {
     ComponentTreeComponent,
     SubComponentOneComponent,
     SubComponentTwoComponent,
-    TakeUntilDestroyedComponent
+    TakeUntilDestroyedComponent,
+    AsyncPipeComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    HttpClientModule
+    HttpClientModule,
+    CommonModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

angular-app/src/app/routing-links.ts

@@ -9,6 +9,7 @@ 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 const PATH_UNSUBSCRIPTION_ASYNC_PIPE = 'unsubscription-async-pipe';
 
 export class RoutingLinks {
   static emptyComponent = PATH_EMPTY;
@@ -22,4 +23,5 @@ export class RoutingLinks {
   static unsubscriptionTakeUntil = PATH_UNSUBSCRIPTION_TAKE_UNTIL;
   static unsubscriptionUntilDestroyed = PATH_UNSUBSCRIPTION_UNTIL_DESTROYED;
   static unsubscriptionTakeUntilDestroyed = PATH_UNSUBSCRIPTION_TAKE_UNTIL_DESTROYED;
+  static unsubscriptionAsyncPipe = PATH_UNSUBSCRIPTION_ASYNC_PIPE;
 }

angular-app/src/app/unsubscription-methods/async-pipe/async-pipe.component.html

@@ -0,0 +1,2 @@
+{{ everySecond$ | async }}
+{{ everyThirdSecond$ | async }}

angular-app/src/app/unsubscription-methods/async-pipe/async-pipe.component.scss

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {tap, timer} from 'rxjs';
+
+@Component({
+  selector: 'app-until-destroyed',
+  templateUrl: './async-pipe.component.html',
+  styleUrls: ['./async-pipe.component.scss']
+})
+export class AsyncPipeComponent {
+
+  everySecond$ = timer(0, 1000).pipe(
+    tap(() => console.log("AsyncPipeComponent everySecond$ emitted"))
+  );
+  everyThirdSecond$ = timer(0, 3000).pipe(
+    tap(() => console.log("AsyncPipeComponent everyThirdSecond$ emitted"))
+  );
+
+  constructor() {
+  }
+}