Repository: angular/angular
File: adev/src/app/features/not-found/not-found.ts (TypeScript)

Code before:
      <header class="docs-header">
        <div class="docs-page-title">
          <h1 tabindex="-1"><span class="docs-emoji">Page Not Found 🙃</span></h1>
        </div>
      </header>
      <p>
        We couldn't find what you were looking for. We have initiated a search for the term
        extracted from the URL.
      </p>
      <p>
        If you think this is a mistake, please
        <a
          href="https://github.com/angular/angular/issues/new?template=3-docs-bug.yaml"
          target="_blank"
        >
          open an issue</a
        >
        so we can fix it.
      </p>

      <!-- Search results that match the queried URL that we couldn't find  -->
      @if (searchResults().length > 0) {
        <!-- The search results are faded in if/once we have results -->
        <div animate.enter="enter-animation">
          <br /><br />
          <h2>Feeling lucky ?</h2>
          <p>Maybe what you're looking for is in the list below:</p>

          <ul class="docs-search-results docs-mini-scroll-track">
            @for (result of searchResults(); track $index) {
              <li docsSearchItem [item]="result" class="docs-search-result">
                <a
                  [routerLink]="'/' + result.url | relativeLink: 'pathname'"
                  [fragment]="result.url | relativeLink: 'hash'"
                >
                  <div>
                    <p class="docs-search-result__label">
                      <!-- Icon -->
                      <span class="docs-search-result-icon" aria-hidden="true">
                        <i role="presentation" class="material-symbols-outlined docs-icon-small">
                          {{ result.type === 'code' ? 'code' : 'description' }}
                        </i>
                      </span>

                      <!-- Page title -->
                      <span [innerHtml]="result.labelHtml"></span>
                      @if (result.package) {
                        <span
                          [innerHTML]="result.package"
                          class="docs-search-result__label__package"
                        ></span>

Review comment (suggestion):
```suggestion
          <h2>Feeling lucky?</h2>
```

Code after:
/*!
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.dev/license
 */

import {Component, inject, signal} from '@angular/core';
import {ActivatedRoute, RouterLink, UrlSegment} from '@angular/router';
import {Search, SearchItem, RelativeLink, SearchResultItem} from '@angular/docs';

@Component({
  imports: [SearchItem, RouterLink, RelativeLink],
  templateUrl: './not-found.html',
  styleUrl: './not-found.scss',
})
export class NotFound {
  private readonly search = inject(Search);
  protected readonly searchResults = signal<SearchResultItem[]>([]);

  constructor() {
    const activatedRoute = inject(ActivatedRoute);
    const searchTerms = this.extractSearchTerm(activatedRoute.snapshot.url);
    if (searchTerms) {
      // We're using the one-shot query request to not interfere with the main search signal
      this.search.searchWithQuery(searchTerms).then((results) => {
        this.searchResults.set(results ?? []);
      });
    }
  }

  private extractSearchTerm(url: UrlSegment[]): string {
    return url.join(' ').replace(/[-_/]/g, ' ');
  }
}