Code Documentation for design-system
  1. Components
  2. TableOfContentsComponent

File

navigation/table-of-contents/src/lib/table-of-contents/table-of-contents.component.ts

Description

Table of contents component for navigating between different sections on a page

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector hra-table-of-contents
imports HraCommonModule MatRippleModule RouterModule ScrollingModule
templateUrl ./table-of-contents.component.html
styleUrl ./table-of-contents.component.scss

Index

Properties
Inputs

Inputs

tagline
Default value : 'On this page'
Defined in navigation/table-of-contents/src/lib/table-of-contents/table-of-contents.component.ts:20

Title for the table of content

Properties

Protected Readonly activeSection
Type : unknown
Default value : inject(PageSectionActivationService).activeSection
Defined in navigation/table-of-contents/src/lib/table-of-contents/table-of-contents.component.ts:25

Currently active section
Protected Readonly sections
Type : unknown
Default value : inject(PageSectionService).sortedSections
Defined in navigation/table-of-contents/src/lib/table-of-contents/table-of-contents.component.ts:23

All page sections sorted by dom order

 
import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
import { MatRippleModule } from '@angular/material/core';
import { RouterModule } from '@angular/router';
import { HraCommonModule } from '@hra-ui/common';
import { PageSectionActivationService, PageSectionService } from '@hra-ui/design-system/content-templates/page-section';
import { ScrollingModule } from '@hra-ui/design-system/scrolling';

/**
 * Table of contents component for navigating between different sections on a page
 */
@Component({
  selector: 'hra-table-of-contents',
  imports: [HraCommonModule, MatRippleModule, RouterModule, ScrollingModule],
  templateUrl: './table-of-contents.component.html',
  styleUrl: './table-of-contents.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TableOfContentsComponent {
  /** Title for the table of content */
  readonly tagline = input('On this page');

  /** All page sections sorted by dom order */
  protected readonly sections = inject(PageSectionService).sortedSections;
  /** Currently active section */
  protected readonly activeSection = inject(PageSectionActivationService).activeSection;
}

<ng-scrollbar class="scrollbar">
  <nav class="nav" aria-labelledby="table-of-contents-navigation">
    <div id="table-of-contents-navigation" class="tagline">{{ tagline() }}</div>
    <div class="links">
      @for (section of sections(); track section) {
        <a
          class="link"
          matRipple
          [class.active]="activeSection() === section"
          [style.--indentation-level]="section.level()"
          [routerLink]="[]"
          [fragment]="section.anchor()"
        >
          {{ section.tagline() }}
        </a>
      }
    </div>
  </nav>
</ng-scrollbar>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""