Demo Pane

Writing content Demo and Demo Pane

Demo Pane is another way to display a demo, which separates code and demo into separate panes. You can use it to focus your users on the code or demo first.

Displaying demo

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

index.md

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

NgDoc will create a demo panes with your component's code and demo, and show it like this

TypeScript

HTML

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

@Component({
  selector: 'ng-doc-button-demo',
  standalone: true,
  imports: [NgDocButtonComponent],
  templateUrl: './button-demo.component.html',
  styleUrls: ['./button-demo.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ButtonDemoComponent {
  @Input()
  color: NgDocColor = 'primary';

  constructor(private readonly notifyService: NgDocNotifyService) {}

  clickEvent(): void {
    this.notifyService.notify('Button was clicked!');
  }
}

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.demoPane("ButtonInlineDemoComponent", {inputs: {color: "info"} }) }}

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';
}

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.demoPane("ButtonDemoComponent", {fullscreenRoute: "button"}) }}

TypeScript

HTML

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

@Component({
  selector: 'ng-doc-button-demo',
  standalone: true,
  imports: [NgDocButtonComponent],
  templateUrl: './button-demo.component.html',
  styleUrls: ['./button-demo.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ButtonDemoComponent {
  @Input()
  color: NgDocColor = 'primary';

  constructor(private readonly notifyService: NgDocNotifyService) {}

  clickEvent(): void {
    this.notifyService.notify('Button was clicked!');
  }
}

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;

Configuration

The demo action also supports some options that can be passed as the second parameter and must conform to the NgDocDemoPaneActionOptions interface. For example, displaying a code pane by default and only html tab.

index.md

{{ NgDocActions.demoPane("ButtonDemoComponent", {expanded: true, tabs: ["HTML"]}) }}

<button [color]="color" (click)="clickEvent()" ng-doc-button-flat>Just a button</button>

Customization

You can also customize the styles of the demo pane. To do this, need to provide following CSS variables from your styles.scss file.

styles.scss

:root {
  // Fixed height for all demo panes
  --ng-doc-demo-pain-height: 300px;

  // Background color for front and back panes
  --ng-doc-pane-background: #fff;
  // Border for front and back panes
  --ng-doc-pane-border: 1px solid #e5e5e5;

  // Background color for front pane
  --ng-doc-pane-front-background: #fff;
  // Border for front pane
  --ng-doc-pane-front-border: 1px solid #e5e5e5;

  // Background color for back pane
  --ng-doc-pane-back-background: #fff;
  // Border for back pane
  --ng-doc-pane-back-border: 1px solid #e5e5e5;
}

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

index.md

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