ngxdocs
Documentation

Manual Installation

Add ngxdocs to an existing Analog application.

On this page

Use manual installation when the documentation is part of an existing Analog application or when you want to own the route and layout files.

Install the runtime packages

pnpm add ngxdocs-core ngxdocs-ui @ngxdocs/content @analogjs/content

The application also needs Angular Router and the Analog file router, which are already present in a standard Analog project.

Provide ngxdocs

Add the content renderer, Analog content adapter, and ngxdocs configuration to your application providers.

provideContent(withMarkdownRenderer()),
provideAnalogDocs(),
provideNgxDocs(() => ({
  brand: {
    name: "My docs",
    logoSrc: "/logo.svg",
  },
  search: { type: "local" },
  sidebar: getSidebar(),
})),

Add the styles

Import the UI styles and one theme from the global application stylesheet:

@import "ngxdocs-ui/styles.css";
@import "ngxdocs-ui/themes.css";

Continue with Analog for the route shell and Configuration for the available site options.

Last updated on