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
How is this guide?
Let us know whether this page helped you.