NgDocDemoComponent

Renders a demo of the page in a panel: a toolbar with Preview and source tabs, the preview width, copy and fullscreen controls, over the demo on a dot-grid stage. The fullscreen control shows the stage fullscreen with the browser Fullscreen API; it is hidden where the browser does not support it.

The preview widths set the width of the demo's container; they do not emulate a device, so media queries inside the demo do not respond to them.

Decorators: @Component
Selectors: ng-doc-demo

DeclarationTypeScript

@Component({ … })
export class NgDocDemoComponent { … }

Members

Properties

assets: Signal<NgDocDemoAsset[]>

readonly

Source files of the demo, filtered by the tabs option.

componentName: InputSignal<string | undefined>

readonly input()

Name of the demo component in the page's demos.

copyText: () => string

protectedreadonly

Reads the code of the open source file (or the default one) when copy is pressed.

demo: Signal<Type<unknown> | undefined>

readonly

The demo component.

idPrefix: string

protectedreadonly

Prefix of the ids that tie the view tabs to their panels.

options: InputSignal<NgDocDemoActionOptions>

readonly input()

Options of the demo action.

previewWidth: WritableSignal<NgDocDemoPreviewWidth>

readonly

The width the demo is previewed at.

previewWidths: readonly { readonly width: NgDocDemoPreviewWidth; readonly label: string; readonly readout: string; }[]

protectedreadonly

—

view: WritableSignal<string>

readonly

The open view: preview, or the title of a source file. It starts on the preview, or on the default source file when the expanded option is set.

views: Signal<string[]>

protectedreadonly

The views in tab order: the preview, then the source files.

widthReadout: Signal<string>

protectedreadonly

Readout of the preview width.

Methods

(…): void

protected

Moves between the view tabs with the keyboard.

Signature

protected onViewKeydown(event: KeyboardEvent): void;

Parameters

Name	Type	Description
event	`KeyboardEvent`	The key press on a view tab.

Returns

void

(…): void

Opens a view.

Signature

openView(view: string): void;

Parameters

Name	Type	Description
view	`string`	`preview` or the title of a source file.

Returns

void