Demo

Writing content Demo and Demo Pane

To display the created demo on the page, you should use the demo method from NgDocActions, passing the name of your component to it as follows

index.md

{{ NgDocActions.demo("ButtonDemoComponent") }}

NgDoc will separate your component's code into multiple tabs to make it easier to view, and show it like this

Configuration

The demo action also supports some options that can be passed as the second parameter and must conform to the NgDocDemoActionOptions interface. For example, displaying a demo without a container.

index.md

{{ NgDocActions.demo("ButtonDemoComponent", {container: false}) }}

Inputs

You can also add input fields to your demo component and then pass their values during rendering of the demo. This will give you greater reusability.

button-demo.component.ts

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { NgDocButtonComponent, NgDocColor } from '@ng-doc/ui-kit';

@Component({
  selector: 'ng-doc-button-inline-demo',
  standalone: true,
  imports: [NgDocButtonComponent],
  template: ` <button ng-doc-button [color]="color">Button</button> `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ButtonInlineDemoComponent {
  @Input()
  color: NgDocColor = 'primary';
}

index.md

{{ NgDocActions.demo("ButtonInlineDemoComponent", {inputs: {color: "info"} }) }}

Fullscreen mode

To open a demo in fullscreen mode, you need to specify route in ng-doc.page.ts

ng-doc.page.ts

import { NgDocPage } from '@ng-doc/core';
import { ButtonDemoComponent } from './button-demo.component';

const MyAwesomePage: NgDocPage = {
  title: 'MyAwesomePage',
  mdFile: './index.md',
  demos: { ButtonDemoComponent },
  route: {
    children: [
      {
        path: 'button',
        component: ButtonDemoComponent,
      },
    ],
  },
};

export default MyAwesomePage;

After that, you can provide fullscreenRoute parameter to method that renders demo.

index.md

{{ NgDocActions.demo("ButtonDemoComponent", {fullscreenRoute: "button"}) }}

Open demo in a new tab

Disable fullscreen routes

To disable the fullscreen mode and manage child routes yourself, you need to specify disableFullscreenRoutes in ng-doc.page.ts. You will then need a <router-outlet /> in your page (for example in the demo).

By default disableFullscreenRoutes is false.

ng-doc.page.ts

import { NgDocPage } from '@ng-doc/core';
import { MasterDetailComponent } from './master-detail.component';
import { MasterComponent } from './master.component';
import { DetailComponent } from './detail.component';

const MyAwesomePage: NgDocPage = {
  title: 'MyAwesomePage',
  mdFile: './index.md',
  demos: { MasterDetailComponent },
  disableFullscreenRoutes: true,
  route: {
    children: [
      {
        path: '',
        component: MasterComponent,
      },
      {
        path: ':id',
        component: DetailComponent,
      },
    ],
  },
};

export default MyAwesomePage;

Customization

You can customize the demo component via CSS variables.

Be careful --ng-doc-demo-displayer-* variables will be applied to all playgrounds as well.

styles.scss

:root {
  // Demo border
  --ng-doc-demo-displayer-border: 1px solid #ccc;
  // Demo border radius
  --ng-doc-demo-displayer-border-radius: 4px;
  // Demo background
  --ng-doc-demo-displayer-background: #fff;
}

To customize only specific demo, you can provide CSS class to the options of the demo method.

index.md

{{ NgDocActions.demo("ButtonDemoComponent", {class: "my-demo"}) }}