Class AppComponent

adev/src/app/app.component.ts:46–118

  },
})
export class AppComponent {
  private readonly document = inject(DOCUMENT);
  private readonly router = inject(Router);
  private readonly headerService = inject(HeaderService);

  protected isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  protected readonly displaySecondaryNav = signal(false);
  protected readonly displayFooter = signal(false);
  protected readonly displaySearchDialog = inject(IS_SEARCH_DIALOG_OPEN);

  constructor() {
    this.closeSearchDialogOnNavigationSkipped();
    this.router.events
      .pipe(
        filter((e): e is NavigationEnd => e instanceof NavigationEnd),
        map((event) => event.urlAfterRedirects),
      )
      .subscribe((url) => {
        // We can't use an input binded to the route here
        // because AppComponent itself is not a routed component
        // so we access it via the snapshot
        const activatedRoute = getActivatedRouteSnapshotFromRouter(this.router);
        this.displayFooter.set(!activatedRoute.data['hideFooter']);
        this.displaySecondaryNav.set(activatedRoute.data['displaySecondaryNav']);

        this.displaySearchDialog.set(false);
        this.updateCanonicalLink(url);
      });
  }

  protected focusFirstHeading(): void {
    const main = this.document.querySelector<HTMLElement>('main');
    if (main) {
      main.setAttribute('tabindex', '-1');
      main.focus();
      return;
    }

    // Fallback: focus the first h1 (legacy support for pages without main)
    const h1 = this.document.querySelector<HTMLHeadingElement>('h1:not(docs-top-level-banner h1)');
    h1?.focus();
  }

  protected setSearchDialogVisibilityOnKeyPress(event: KeyboardEvent): void {
    if (event.key === SEARCH_TRIGGER_KEY && (event.metaKey || event.ctrlKey)) {
      event.preventDefault();
      this.displaySearchDialog.update((display) => !display);
    }

    if (event.key === ESCAPE && this.displaySearchDialog()) {
      event.preventDefault();
      this.displaySearchDialog.set(false);
    }

    if (isDevMode() && event.key === 'o' && (event.metaKey || event.ctrlKey)) {
      // In debug this shortcut allows us to open the same page on adev
      // Helpful to compare differences