angular/adev/shared-docs/components/search-dialog/search-dialog.component.html

<dialog #searchDialog>
  <div class="docs-search-container" (docsClickOutside)="closeSearchDialog()">
    <docs-text-field
      [autofocus]="true"
      [hideIcon]="true"
      [ngModel]="searchQuery()"
      (ngModelChange)="updateSearchQuery($event)"
      class="docs-search-input"
      placeholder="Search docs"
    />

    @if (searchResults() && searchResults()!.length > 0) {
      <ul class="docs-search-results docs-mini-scroll-track">
        @for (result of searchResults(); track result.objectID) {
          <li docsSearchItem [item]="result">
            <a
              [routerLink]="'/' + result.url | relativeLink: 'pathname'"
              [fragment]="result.url | relativeLink: 'hash'"
            >
              <div>
                <div class="docs-result-icon-and-type">
                  <!-- Icon -->
                  <span class="docs-search-result-icon" aria-hidden="true">
                    <i role="presentation" class="material-symbols-outlined docs-icon-small">
                      {{ result.hierarchy.lvl0 === 'Tutorials' ? 'code' : 'description'}}
                    </i>
                  </span>
                  <!-- Results type -->
                  <span class="docs-search-results__type">
                    @let snippet = result._snippetResult.hierarchy?.lvl1?.value ?? '';
                    <ng-container
                      [ngTemplateOutlet]="highlightSnippet"
                      [ngTemplateOutletContext]="{snippet}"
                    />
                  </span>
                </div>

                @let content = result._snippetResult.content;
                @let hierarchy = result._snippetResult.hierarchy;
                @if (content || hierarchy?.lvl2 || hierarchy?.lvl3 || hierarchy?.lvl4) {
                  <span class="docs-search-results__type docs-search-results__lvl2">
                    @let snippet = getBestSnippetForMatch(result);
                    <ng-container
                      [ngTemplateOutlet]="highlightSnippet"
                      [ngTemplateOutletContext]="{snippet}"
                    />
                  </span>
                }
              </div>

              <!-- Page title -->
              <span class="docs-result-page-title">{{ result.hierarchy?.lvl0 }}</span>
            </a>
          </li>
        }
      </ul>
    } @else {
      <div class="docs-search-results docs-mini-scroll-track">
        @if (searchResults() === undefined) {
          <div class="docs-search-results__start-typing">
            <span>Start typing to see results</span>
          </div>
        } @else if (searchResults()?.length === 0) {
          <div class="docs-search-results__no-results">
            <span>No results found</span>
          </div>
        }
      </div>
    }

    <div class="docs-algolia">
      <span>Search by</span>
      <a target="_blank" rel="noopener"
         href="https://www.algolia.com/developers/?utm_source=angular.dev&utm_medium=referral&utm_content=powered_by&utm_campaign=docsearch">
        <docs-algolia-icon />
      </a>
    </div>
  </div>
</dialog>

<ng-template #highlightSnippet let-snippet="snippet">
  @let parts = splitMarkedText(snippet);
  @for (part of parts; track $index) {
    @if (part.highlight) {
      <mark>{{part.text}}</mark>
    } @else {
      <span>{{part.text}}</span>
    }
  }
</ng-template>