[Angular Reactivity Streamlined] Clearing RxJS subscriptions in an Angular component #blog #angular #rxjs

post-viewer.component.ts

import { Component, OnDestroy } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { Subscription } from "rxjs";
import { map, withLatestFrom } from "rxjs/operators";

@Component({
  template: `
    <div class="posts">
      <app-nav icon="prev" [link]="prev" [disabled]="!prev"></app-nav>

      <div class="card mx-4">
        <div class="card-body">
          <router-outlet></router-outlet>
        </div>
      </div>

      <app-nav icon="next" [link]="next" [disabled]="!next"></app-nav>
    </div>
  `,
})
export class PostViewerComponent implements OnDestroy {
  prev: string;

  next: string;

  private subscription: Subscription;

  constructor(route: ActivatedRoute) {
    const count$ = route.data.pipe(map(data => data.postCount));
    const id$ = route.params.pipe(map(params => Number(params.id)));

    this.subscription = id$.pipe(withLatestFrom(count$)).subscribe(([id, count]) => {
      this.prev = id > 1 ? `../${id - 1}` : undefined;
      this.next = id < count ? `../${id + 1}` : undefined;
    });
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}