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.
When the Vite engine built demo pages for the page (isolated option, or isolatedDemos) is shown in an iframe of its page: the preview widths are then the width of the iframe's viewport, so media queries inside the demo respond to them. Otherwise the demo renders in the page, and the preview widths set the width of its container only.
- Decorators
@Component - Selectors
ng-doc-demo
@Component ({ … })
export class NgDocDemoComponent { … }Members
Properties15 | |||||||
assets: | Source files of the demo, filtered by the | ||||||
componentName: | Name of the demo component in the page's | ||||||
copyText: () => string | Reads the code of the open source file (or the default one) when copy is pressed. | ||||||
The demo component. | |||||||
demoUrl: | The URL of the demo's page, when the page has demo pages and the demo exists: the generated demo route and the demo's name under the base href, with the | ||||||
frameTitle: | The accessible title of the demo's iframe. | ||||||
fullscreen: | Whether the stage is fullscreen. | ||||||
idPrefix: string | Prefix of the ids that tie the view tabs to their panels. | ||||||
isolated: | Whether the demo is shown in an iframe of its page. | ||||||
options: | Options of the | ||||||
previewWidth: | The width the demo is previewed at. | ||||||
previewWidths: readonly { readonly width: | — | ||||||
view: | The open view: | ||||||
views: | The views in tab order: the preview, then the source files. | ||||||
widthReadout: | Readout of the preview width. | ||||||
Methods2 | |||||||
(…): void | Moves between the view tabs with the keyboard. | ||||||
Signature Parameters
Returns void | |||||||
(…): void | Opens a view. | ||||||
Signature Parameters
Returns void | |||||||