mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
2d8635d29d
To increase the ease of development we are moving @angular/docs into the adev directory within this repo. While we are doing this to improve our development experience in the short term, efforts are also in place to maintain a division between this @angular/docs (shared) code and adev itself, so that it can be extracted back out in the future when components is ready to leverage it as well. PR Close #57132
81 lines
3 KiB
HTML
81 lines
3 KiB
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"
|
|
></docs-text-field>
|
|
|
|
@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">
|
|
@if (result.url) {
|
|
<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">
|
|
@if (result.hierarchy?.lvl0 === 'Docs') {
|
|
<i role="presentation" class="material-symbols-outlined docs-icon-small">
|
|
description
|
|
</i>
|
|
} @else if (result.hierarchy?.lvl0 === 'Tutorials') {
|
|
<i role="presentation" class="material-symbols-outlined docs-icon-small">code</i>
|
|
} @else if (result.hierarchy?.lvl0 === 'Reference') {
|
|
<i role="presentation" class="material-symbols-outlined docs-icon-small">
|
|
description
|
|
</i>
|
|
}
|
|
</span>
|
|
<!-- Results type -->
|
|
<span class="docs-search-results__type">{{ result.hierarchy?.lvl1 }}</span>
|
|
</div>
|
|
|
|
<!-- Hide level 2 if level 3 exists -->
|
|
<!-- Level 2 -->
|
|
@if (result.hierarchy?.lvl2 && !result.hierarchy?.lvl3) {
|
|
<span class="docs-search-results__type docs-search-results__lvl2">
|
|
{{ result.hierarchy?.lvl2 }}
|
|
</span>
|
|
}
|
|
<!-- Level 3 -->
|
|
@if (result.hierarchy?.lvl3) {
|
|
<span class="docs-search-results__type docs-search-results__lvl3">
|
|
{{ result.hierarchy?.lvl3 }}
|
|
</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 href="https://www.algolia.com/developers/" target="_blank" rel="noopener">
|
|
<docs-algolia-icon />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</dialog>
|