Migrate UIF to use takeuntilDestroyed (#15777)

libs/components/src/tabs/tab-group/tab-group.component.ts

@@ -11,13 +11,14 @@ import {
   ContentChildren,
   EventEmitter,
   Input,
-  OnDestroy,
   Output,
   QueryList,
   ViewChildren,
   input,
+  inject,
+  DestroyRef,
 } from "@angular/core";
-import { Subject, takeUntil } from "rxjs";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 
 import { TabHeaderComponent } from "../shared/tab-header.component";
 import { TabListContainerDirective } from "../shared/tab-list-container.directive";
@@ -40,11 +41,10 @@ let nextId = 0;
     TabBodyComponent,
   ],
 })
-export class TabGroupComponent
-  implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy
-{
+export class TabGroupComponent implements AfterContentChecked, AfterContentInit, AfterViewInit {
+  private readonly destroyRef = inject(DestroyRef);
+
   private readonly _groupId: number;
-  private readonly destroy$ = new Subject<void>();
   private _indexToSelect: number | null = 0;
 
   /**
@@ -150,7 +150,7 @@ export class TabGroupComponent
   ngAfterContentInit() {
     // Subscribe to any changes in the number of tabs, in order to be able
     // to re-render content when new tabs are added or removed.
-    this.tabs.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
+    this.tabs.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
       const indexToSelect = this._clampTabIndex(this._indexToSelect);
 
       // If the selected tab didn't explicitly change, keep the previously
@@ -183,11 +183,6 @@ export class TabGroupComponent
     });
   }
 
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
   private _clampTabIndex(index: number): number {
     return Math.min(this.tabs.length - 1, Math.max(index || 0, 0));
   }

libs/components/src/tabs/tab-nav-bar/tab-link.component.ts

@@ -6,12 +6,13 @@ import {
   Component,
   HostListener,
   Input,
-  OnDestroy,
   ViewChild,
   input,
+  inject,
+  DestroyRef,
 } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { IsActiveMatchOptions, RouterLinkActive, RouterModule } from "@angular/router";
-import { Subject, takeUntil } from "rxjs";
 
 import { TabListItemDirective } from "../shared/tab-list-item.directive";
 
@@ -22,9 +23,8 @@ import { TabNavBarComponent } from "./tab-nav-bar.component";
   templateUrl: "tab-link.component.html",
   imports: [TabListItemDirective, RouterModule],
 })
-export class TabLinkComponent implements FocusableOption, AfterViewInit, OnDestroy {
-  private destroy$ = new Subject<void>();
-
+export class TabLinkComponent implements FocusableOption, AfterViewInit {
+  private readonly destroyRef = inject(DestroyRef);
   @ViewChild(TabListItemDirective) tabItem: TabListItemDirective;
   @ViewChild("rla") routerLinkActive: RouterLinkActive;
 
@@ -61,12 +61,7 @@ export class TabLinkComponent implements FocusableOption, AfterViewInit, OnDestr
     // The active state of tab links are tracked via the routerLinkActive directive
     // We need to watch for changes to tell the parent nav group when the tab is active
     this.routerLinkActive.isActiveChange
-      .pipe(takeUntil(this.destroy$))
+      .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((_) => this._tabNavBar.updateActiveLink());
   }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
 }