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
76 lines
2.7 KiB
HTML
76 lines
2.7 KiB
HTML
<ng-template #navigationList let-navigationItems>
|
|
<ul
|
|
class="docs-navigation-list docs-faceted-list"
|
|
[class.docs-navigation-list-dropdown]="isDropdownView"
|
|
>
|
|
@for (item of navigationItems; track $index) {
|
|
<li
|
|
class="docs-faceted-list-item"
|
|
[class.docs-navigation-link-hidden]="displayItemsToLevel && item.level > displayItemsToLevel"
|
|
>
|
|
@if (item.path) { @if (item.isExternal) {
|
|
<a [href]="item.path" target="_blank">
|
|
<span [class.docs-external-link]="item.isExternal">{{ item.label }}</span>
|
|
@if (item.children && item.level! > 1 && !item.isExpanded) {
|
|
<docs-icon>chevron_right</docs-icon>
|
|
}
|
|
</a>
|
|
} @else {
|
|
<a
|
|
[routerLink]="'/' + item.path"
|
|
[routerLinkActiveOptions]="{
|
|
queryParams: 'ignored',
|
|
fragment: 'ignored',
|
|
matrixParams: 'exact',
|
|
paths: 'exact',
|
|
exact: false
|
|
}"
|
|
routerLinkActive="docs-faceted-list-item-active"
|
|
(click)="emitClickOnLink()"
|
|
>
|
|
<span>{{ item.label }}</span>
|
|
@if (item.children && !item.isExpanded) {
|
|
<docs-icon>chevron_right</docs-icon>
|
|
}
|
|
</a>
|
|
} } @else {
|
|
<!-- Nav Section Header -->
|
|
@if (item.level !== collapsableLevel && item.level !== expandableLevel) {
|
|
<div class="docs-secondary-nav-header">
|
|
<span>{{ item.label }}</span>
|
|
</div>
|
|
}
|
|
|
|
<!-- Nav Button Expand/Collapse -->
|
|
@if ((item.children && item.level === expandableLevel) || item.level === collapsableLevel) {
|
|
<button
|
|
type="button"
|
|
(click)="toggle(item)"
|
|
attr.aria-label="{{ item.isExpanded ? 'Collapse' : 'Expand' }} {{ item.label }}"
|
|
[attr.aria-expanded]="item.isExpanded"
|
|
class="docs-secondary-nav-button"
|
|
[class.docs-faceted-list-item-active]="item | isActiveNavigationItem: activeItem()"
|
|
[class.docs-expanded-button]="item.children && item.level == collapsableLevel"
|
|
[class.docs-not-expanded-button]="item.children && item.level === expandableLevel"
|
|
[class.docs-nav-item-has-icon]="
|
|
item.children && item.level === expandableLevel && !item.isExpanded
|
|
"
|
|
>
|
|
@if (item.children && item.level === collapsableLevel) {
|
|
<docs-icon>arrow_back</docs-icon>
|
|
}
|
|
<span>{{ item.label }}</span>
|
|
</button>
|
|
} } @if (item.children?.length > 0) {
|
|
<ng-container
|
|
*ngTemplateOutlet="navigationList; context: {$implicit: item.children}"
|
|
></ng-container>
|
|
}
|
|
</li>
|
|
}
|
|
</ul>
|
|
</ng-template>
|
|
|
|
<ng-container
|
|
*ngTemplateOutlet="navigationList; context: {$implicit: navigationItems}"
|
|
></ng-container>
|