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

File

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

Description

Table of contents demo

Metadata

changeDetection ChangeDetectionStrategy.OnPush
providers ...providePageSectionNavigation()
selector hra-table-of-contents-demo
imports CommonModule PageSectionComponent TableOfContentsComponent
templateUrl ./table-of-contents-demo.component.html

Index

Inputs

Constructor

constructor()
Defined in navigation/table-of-contents/src/lib/table-of-contents/demo/table-of-contents-demo.component.ts:33

Initialize demo component

Inputs

activeSection
Default value : undefined, { transform: numberAttribute }
Defined in navigation/table-of-contents/src/lib/table-of-contents/demo/table-of-contents-demo.component.ts:28

Active section index

 
import { CommonModule } from '@angular/common';
import {
  ChangeDetectionStrategy,
  Component,
  effect,
  inject,
  input,
  numberAttribute,
  viewChildren,
} from '@angular/core';
import {
  PageSectionActivationService,
  PageSectionComponent,
  providePageSectionNavigation,
} from '@hra-ui/design-system/content-templates/page-section';
import { TableOfContentsComponent } from '../table-of-contents.component';

/** Table of contents demo */
@Component({
  selector: 'hra-table-of-contents-demo',
  imports: [CommonModule, PageSectionComponent, TableOfContentsComponent],
  templateUrl: './table-of-contents-demo.component.html',
  providers: [...providePageSectionNavigation()],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TableOfContentsDemoComponent {
  /** Active section index */
  readonly activeSection = input(undefined, { transform: numberAttribute });

  /** Section activation service */
  private readonly activationService = inject(PageSectionActivationService);
  /** All sections under this component */
  private readonly sections = viewChildren(PageSectionComponent);

  /** Initialize demo component */
  constructor() {
    effect(() => {
      const index = this.activeSection();
      const sections = this.sections();
      if (index !== undefined && index > 0 && index <= sections.length) {
        this.activationService.activate(sections[index - 1]);
      }
    });
  }
}

<hra-table-of-contents />

<div style="display: none">
  @for (level of [1, 2, 3, 4, 5, 6, 1, 2, 3, 3]; track $index) {
    <hra-page-section
      [tagline]="`Section label in sentence case ${$index + 1}`"
      [level]="level"
      [anchor]="`section-label-in-sentence-case-${$index + 1}`"
    >
      <ng-container *ngTemplateOutlet="sectionContentPlaceholder" />
    </hra-page-section>
  }
</div>

<ng-template #sectionContentPlaceholder>
  This is placeholder text. We should try to keep this short. When writing content, imagine you've never been to the HRA
  before. What would you want to learn here?
  <ul>
    <li>Text always goes on top.</li>
    <li>Other components may be swapped out for the button set.</li>
  </ul>
</ng-template>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""