Angular DevTools
On this page ▾
Every component and markdown feature on one page. Use it to check styles, dark mode and spacing after a change. It is left out of search and the sitemap.

Kitchen sink

This page follows the writing guide. Each section shows one feature with its common options.

Text

Inline formatting

Plain text, bold, italic, inline code, strikethrough and a UI label like Record. A line with a site link, an anchor link, an external link and keyword links: Angular, Analog, Devframe, NgRx, MCP and Vite.

Lists

  • Unordered item
  • Another item with code
    • Nested item
  1. First step
  2. Second step
  3. Third step

Tables

Column Type Notes
name string Short text.
count number Right after the name.
active boolean A longer note that wraps on small screens to check the cell layout.

Blockquote

A quoted line for the rare case a page needs one.

Headings with extras

A fourth level heading

Headings from #### down get anchors but don't appear in "On this page".

Heading with a badge Beta

The badge is left out of the anchor, so this heading links as #heading-with-a-badge.

Heading with code

Code

Plain fence

// src/app/app.config.ts
import {ApplicationConfig} from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [],
};

Line highlights

// src/main.ts
import {bootstrapApplication} from '@angular/platform-browser';
import {App} from './app/app';
import {appConfig} from './app/app.config';

bootstrapApplication(App, appConfig).then(() => {
  if (typeof ngDevMode === 'undefined' || ngDevMode) {
    return import('@santoshyadavdev/ng-devtools/overlay');
  }
  return undefined;
});

Code group

pnpm add @santoshyadavdev/ng-devtools devframe
npm install @santoshyadavdev/ng-devtools devframe
yarn add @santoshyadavdev/ng-devtools devframe
bun add @santoshyadavdev/ng-devtools devframe

File import

src/ngmd.config.ts#L1-L12
/**
 * NgMd site configuration.
 *
 * Edit this file to customise navigation, site metadata, and external links.
 * Sidebar, command palette, breadcrumb, and header all read from here.
 */

import type {BadgeVariant} from './types/badge.ts';

export interface NavItem {
  label: string;
  href: string;

Other languages

{
  "mcpServers": {
    "ng-devtools": {"command": "npx", "args": ["@santoshyadavdev/ng-devtools", "mcp"]}
  }
}
<button type="button" aria-label="Open devtools">Open</button>
:root {
  --accent: #b45309;
}

Callouts

Context the reader may need, with code and a link.

Callouts are never adjacent on real pages. The text between them here keeps that rule.

A shortcut or a better way to do something.

Text between callouts.

Confirms a result.

Text between callouts.

Something that can go wrong.

Text between callouts.

Data loss or a security risk.

Alerts

An info alert.

Text between alerts.

A helpful alert.

Text between alerts.

An important alert.

Text between alerts.

A warning alert.

Text between alerts.

A critical alert with a custom label.

Badges

New Updated Alpha Beta Stable Deprecated

Cards

Three columns with icons

A card that links inside the site. A card that opens another site in a new tab. A card with inline code and no link.

Two columns with images

A logo instead of an icon. A round profile photo.

Every icon

Workflow

Run pnpm add @santoshyadavdev/ng-devtools devframe. Add the hub to your server. Import the overlay in development builds.

Tabs

Content of the first tab. Content of the second tab, with an image instead of an icon. A tab with no icon.

Accordion

This item starts open. This item starts closed.

Media

Image

Say hi to my cats Angular and Excel 👋

Video

Where to next