ngxdocs
Documentation

Analog

Connect the ngxdocs shell to Analog file-based routes.

On this page

Create the docs layout

Add src/app/pages/docs.page.ts and render the ngxdocs layout around Analog's child route outlet.

import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { DocsLayoutShell } from "ngxdocs-ui/layouts/docs";

@Component({
  imports: [DocsLayoutShell, RouterOutlet],
  template: `
    <docs-layout-shell>
      <router-outlet />
    </docs-layout-shell>
  `,
})
export default class DocsLayoutPage {}

Add the catch-all page

Use src/app/pages/docs/[...slug].page.ts for documentation URLs. Resolve the route slug against the injected docs source, render the Markdown content, and pass the page tree to the sidebar and pagination components.

The ngxdocs example application in this repository is a complete reference implementation of this route.

Server rendering

The content loader and navigation are SSR-safe. Avoid reading window, document, or localStorage outside browser guards in custom docs components so prerendered routes and client hydration produce the same markup.

Last updated on