feat: abstract classes and destroy subscriptions

apps/NwaifuAnime/src/app/components/header/header.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from "@angular/common";
-import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
+import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";
 import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
-import { filter } from "rxjs";
+import { Subject, filter, takeUntil } from "rxjs";
 
 @Component({
   selector: "app-header",
@@ -10,15 +10,17 @@ import { filter } from "rxjs";
   standalone: true,
   imports: [CommonModule],
 })
-export class HeaderComponent implements AfterViewInit {
+export class HeaderComponent implements AfterViewInit, OnDestroy {
   @ViewChild("searchInput") searchInput: ElementRef<HTMLInputElement> | null = null;
   menuOpened = false;
+  private destroy$ = new Subject<void>();
   constructor(
     private router: Router,
     private route: ActivatedRoute,
   ) {
     this.router.events
       .pipe(filter((event) => event instanceof NavigationEnd))
+      .pipe(takeUntil(this.destroy$))
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       .subscribe((val: any) => {
         if (val.url.startsWith("/detail") || val.url.startsWith("/reader")) {
@@ -46,11 +48,16 @@ export class HeaderComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    this.route.queryParams.subscribe((params) => {
+    this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((params) => {
       const search = params["search"];
       if (search && this.searchInput) {
         this.searchInput.nativeElement.value = search;
       }
     });
   }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }