Page skeleton

The page skeleton is the set of components that NgDoc renders around the content of every page: the breadcrumbs above the title, the links to the previous and next page below the content, and the "On this page" rail beside it. You choose these components with providePageSkeleton, so you can replace any of them or leave it out.

🧰 Use it

Provide the default skeleton in the application configuration. ng add does this for you:

import { ApplicationConfig } from '@angular/core';
import { NG_DOC_DEFAULT_PAGE_SKELETON, providePageSkeleton } from '@ng-doc/app';

export const appConfig: ApplicationConfig = {
  providers: [providePageSkeleton(NG_DOC_DEFAULT_PAGE_SKELETON)],
};

The skeleton has three parts:

Leave a field out to remove that part from every page. This skeleton has no breadcrumbs:

import { ApplicationConfig } from '@angular/core';
import { NgDocPageNavigationComponent, NgDocTocComponent, providePageSkeleton } from '@ng-doc/app';

export const appConfig: ApplicationConfig = {
  providers: [
    providePageSkeleton({
      navigation: NgDocPageNavigationComponent,
      toc: NgDocTocComponent,
    }),
  ],
};

💡 Tip

List the components you want instead of spreading NG_DOC_DEFAULT_PAGE_SKELETON and overriding a field. The default skeleton imports all three default components, so a component you replace would stay in the bundle.

Write your own component

A skeleton component is a standalone Angular component that implements the interface of its part. NgDoc creates it and sets its fields with the setInput() method of ComponentRef, so declare them as signal inputs:

import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { NgDocPageBreadcrumbs } from '@ng-doc/app';

@Component({
  selector: 'app-breadcrumbs',
  template: `
    <ol>
      @for (breadcrumb of breadcrumbs(); track $index) {
        <li>{{ breadcrumb }}</li>
      }
    </ol>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BreadcrumbsComponent implements NgDocPageBreadcrumbs {
  readonly breadcrumbs = input.required<string[]>();
}

Then provide it in place of the default one:

import { ApplicationConfig } from '@angular/core';
import { NgDocPageNavigationComponent, NgDocTocComponent, providePageSkeleton } from '@ng-doc/app';

import { BreadcrumbsComponent } from './breadcrumbs.component';

export const appConfig: ApplicationConfig = {
  providers: [
    providePageSkeleton({
      breadcrumbs: BreadcrumbsComponent,
      navigation: NgDocPageNavigationComponent,
      toc: NgDocTocComponent,
    }),
  ],
};

Inputs

Each part receives these inputs:

A navigation component, for example:

import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { RouterLink } from '@angular/router';
import { NgDocNavigation, NgDocPageNavigation } from '@ng-doc/app';

@Component({
  selector: 'app-pager',
  imports: [RouterLink],
  template: `
    @if (prevPage(); as page) {
      <a rel="prev" [routerLink]="page.route">← {{ page.title }}</a>
    }
    @if (nextPage(); as page) {
      <a rel="next" [routerLink]="page.route">{{ page.title }} →</a>
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PagerComponent implements NgDocPageNavigation {
  readonly prevPage = input<NgDocNavigation>();
  readonly nextPage = input<NgDocNavigation>();
}

🚧 Gotchas

Note

The [ and ] keyboard shortcuts click the links marked rel="prev" and rel="next" (Search and command palette [Keyboard shortcuts]). Keep these attributes in your navigation component so the shortcuts still work.

Note

The L shortcut copies the link to the page. The default table of contents takes it over to confirm the copy; with your own component, the shortcut still copies the link.

Next: Themes and colors