refactor(docs-infra): Use new APIs in search dialog (angular#57215)

This updates the search dialog component to use signal APIs

PR Close angular#57215

Author: atscott

adev/shared-docs/components/search-dialog/BUILD.bazel

@@ -46,8 +46,10 @@ ts_library(
         "//adev/shared-docs/services",
         "//adev/shared-docs/testing",
         "//packages/core",
+        "//packages/core/testing",
         "//packages/platform-browser",
         "//packages/router",
+        "//packages/router/testing",
     ],
 )
 

adev/shared-docs/components/search-dialog/search-dialog.component.spec.ts

@@ -56,7 +56,6 @@ describe('SearchDialog', () => {
 
     fakeSearch.searchResults.and.returnValue(fakeSearchResults);
     fixture.detectChanges();
-    fixture.componentInstance.ngAfterViewInit();
 
     fakeWindow.dispatchEvent(
       new KeyboardEvent('keydown', {

adev/shared-docs/components/search-dialog/search-dialog.component.ts

@@ -7,20 +7,18 @@
  */
 
 import {
-  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
-  DestroyRef,
   ElementRef,
-  EventEmitter,
-  NgZone,
+  Injector,
   OnDestroy,
-  OnInit,
-  Output,
-  QueryList,
-  ViewChild,
-  ViewChildren,
+  Signal,
+  afterNextRender,
+  effect,
   inject,
+  output,
+  viewChild,
+  viewChildren,
 } from '@angular/core';
 
 import {WINDOW} from '../../providers/index';
@@ -53,95 +51,82 @@ import {RelativeLink} from '../../pipes/relative-link.pipe';
   templateUrl: './search-dialog.component.html',
   styleUrls: ['./search-dialog.component.scss'],
 })
-export class SearchDialog implements OnInit, AfterViewInit, OnDestroy {
-  @Output() onClose = new EventEmitter<void>();
-  @ViewChild('searchDialog') dialog?: ElementRef<HTMLDialogElement>;
-  @ViewChildren(SearchItem) items?: QueryList<SearchItem>;
+export class SearchDialog implements OnDestroy {
+  onClose = output();
+  dialog = viewChild.required('searchDialog', {read: ElementRef}) as Signal<
+    ElementRef<HTMLDialogElement>
+  >;
+  items = viewChildren(SearchItem);
 
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly ngZone = inject(NgZone);
   private readonly search = inject(Search);
   private readonly relativeLink = new RelativeLink();
   private readonly router = inject(Router);
   private readonly window = inject(WINDOW);
-
-  private keyManager?: ActiveDescendantKeyManager<SearchItem>;
+  private readonly injector = inject(Injector);
+  private readonly keyManager = new ActiveDescendantKeyManager(
+    this.items,
+    this.injector,
+  ).withWrap();
 
   searchQuery = this.search.searchQuery;
   searchResults = this.search.searchResults;
 
-  ngOnInit(): void {
-    this.ngZone.runOutsideAngular(() => {
-      fromEvent<KeyboardEvent>(this.window, 'keydown')
-        .pipe(
-          filter((_) => !!this.keyManager),
-          takeUntilDestroyed(this.destroyRef),
-        )
-        .subscribe((event) => {
-          // When user presses Enter we can navigate to currently selected item in the search result list.
-          if (event.key === 'Enter') {
-            this.navigateToTheActiveItem();
-          } else {
-            this.ngZone.run(() => {
-              this.keyManager?.onKeydown(event);
-            });
-          }
-        });
+  constructor() {
+    effect(() => {
+      this.items();
+      afterNextRender(
+        {
+          write: () => this.keyManager.setFirstItemActive(),
+        },
+        {injector: this.injector},
+      );
     });
-  }
-
-  ngAfterViewInit() {
-    if (!this.dialog?.nativeElement.open) {
-      this.dialog?.nativeElement.showModal?.();
-    }
 
-    if (!this.items) {
-      return;
-    }
+    this.keyManager.change.pipe(takeUntilDestroyed()).subscribe(() => {
+      this.keyManager.activeItem?.scrollIntoView();
+    });
 
-    this.keyManager = new ActiveDescendantKeyManager(this.items).withWrap();
-    this.keyManager?.setFirstItemActive();
+    afterNextRender({
+      write: () => {
+        if (!this.dialog().nativeElement.open) {
+          this.dialog().nativeElement.showModal?.();
+        }
+      },
+    });
 
-    this.updateActiveItemWhenResultsChanged();
-    this.scrollToActiveItem();
+    fromEvent<KeyboardEvent>(this.window, 'keydown')
+      .pipe(takeUntilDestroyed())
+      .subscribe((event) => {
+        // When user presses Enter we can navigate to currently selected item in the search result list.
+        if (event.key === 'Enter') {
+          this.navigateToTheActiveItem();
+        } else {
+          this.keyManager.onKeydown(event);
+        }
+      });
   }
 
   ngOnDestroy(): void {
-    this.keyManager?.destroy();
+    this.keyManager.destroy();
   }
 
   closeSearchDialog() {
-    this.dialog?.nativeElement.close();
-    this.onClose.next();
+    this.dialog().nativeElement.close();
+    this.onClose.emit();
   }
 
   updateSearchQuery(query: string) {
     this.search.updateSearchQuery(query);
   }
 
-  private updateActiveItemWhenResultsChanged(): void {
-    this.items?.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-      // Change detection should be run before execute `setFirstItemActive`.
-      Promise.resolve().then(() => {
-        this.keyManager?.setFirstItemActive();
-      });
-    });
-  }
-
   private navigateToTheActiveItem(): void {
-    const activeItemLink: string | undefined = this.keyManager?.activeItem?.item?.url;
+    const activeItemLink: string | undefined = this.keyManager.activeItem?.item?.url;
 
     if (!activeItemLink) {
       return;
     }
 
     this.router.navigateByUrl(this.relativeLink.transform(activeItemLink));
-    this.onClose.next();
-  }
-
-  private scrollToActiveItem(): void {
-    this.keyManager?.change.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-      this.keyManager?.activeItem?.scrollIntoView();
-    });
+    this.onClose.emit();
   }
 }