All files / src/app/shared/cms/components/content-navigation content-navigation.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (currentContentPage$ | async; as currentContentPage) {
  <ish-skip-content-link linkText="common.skip_content.link.text.navigation" skipToElementId="nav-breadcrumbs" />
  <ul>
    <ng-container
      [ngTemplateOutlet]="pageTreeNode"
      [ngTemplateOutletContext]="{ treeNodes: [contentPageTree], counter: 1 }"
    />
  </ul>
  <!-- the recursively used template to render the tree nodes -->
  <ng-template #pageTreeNode let-counter="counter" let-treeNodes="treeNodes">
    @for (treeNode of treeNodes; track treeNode.contentPageId) {
      <li [ngClass]="{ 'page-navigation-active': treeNode.contentPageId === currentContentPage.id }">
        <a class="link-decoration-hover" [routerLink]="treeNode | ishContentPageRoute" [title]="treeNode.name">{{
          treeNode.name
        }}</a>
        @if (treeNode.children.length && depth > counter) {
          <ul [ngClass]="'page-navigation-' + counter">
            <ng-container
              [ngTemplateOutlet]="pageTreeNode"
              [ngTemplateOutletContext]="{ treeNodes: treeNode.children, counter: counter + 1 }"
            />
          </ul>
        }
      </li>
    }
  </ng-template>
}