angular/adev/shared-docs/components/navigation-list/navigation-list.component.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}" />
        }
      </li>
    }
  </ul>
</ng-template>

<ng-container *ngTemplateOutlet="navigationList; context: {$implicit: navigationItems()}" />