@ng-doc/builder 22.0.0-beta.1 → 22.0.0

package/generator/templates/helpers/method.html.nunj

@@ -0,0 +1,89 @@
+{% import "helpers/code.html.nunj" as codeMacro %}
+{% import "helpers/type.html.nunj" as typeMacro %}
+{% import "helpers/declaration-modifiers.html.nunj" as tagsMacro %}
+{% import "helpers/parameters.html.nunj" as parametersMacro %}
+{% import "helpers/decorators.html.nunj" as decoratorsMacro %}
+{% import "helpers/no-content.html.nunj" as noContentMacro %}
+{% import "helpers/overload.html.nunj" as overloadMacro %}
+{% import "helpers/status.html.nunj" as statusMacro %}
+
+{% macro render(method, origin) %}
+    {% set parameters = method.getParameters() %}
+    {% set methodChain = method | getMethodChain %}
+    {% set inheritedFrom = method | getInheritedParent(origin) %}
+    {% set overriddenMember = method | getOverriddenMember %}
+    {% set implementedMember = method | getImplementedMember %}
+    {% set docNode = methodChain | firstNodeWithComment %}
+    {% set overloads = method.getOverloads() if method.getOverloads else [] %}
+    {% set returnsTag = docNode | getJsDocTag('returns') %}
+
+    <table class="{{ statusMacro.class(method) }}">
+        <thead>
+        <tr>
+            <th indexable="false">
+                {{ decoratorsMacro.render(method.getDecorators()) if method.getDecorators }}
+                {{ tagsMacro.render(method, 'modifier') }}
+                <h3 dataSlugType="member">{{ method.getName() }}()</h3>
+                <div class="ng-doc-node-details">
+                    {%- if inheritedFrom %}
+                        inherited from <code>{{ inheritedFrom.getName() }}</code>
+                    {%- elseif overriddenMember %}
+                        overrides <code>{{ (overriddenMember | getMemberParent).getName() }}</code>
+                    {%- elseif implementedMember %}
+                        implements
+                        <code>{{ (implementedMember | getMemberParent).getName() }}</code>
+                    {%- endif %}
+                </div>
+            </th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>
+                <div class="ng-doc-api-status">
+                    {{ statusMacro.render(method) }}
+                </div>
+
+                {% set description = docNode | getJsDocDescription %}
+
+                {{ description if description else noContentMacro.render('No documentation has been provided.') }}
+
+                {% include "parts/member-remarks.html.nunj" %}
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <h5 class="no-anchor ng-doc-secondary-heading" indexable="false">Presentation</h5>
+                {{ codeMacro.render(method | methodPresentation, "typescript", false) }}
+            </td>
+        </tr>
+        <tr>
+            <td>
+                {%- if parameters.length %}
+                    <h5 class="no-anchor ng-doc-secondary-heading" indexable="false">Parameters</h5>
+                    {{ parametersMacro.render(parameters, docNode) }}
+                {%- endif %}
+                <h5 class="no-anchor ng-doc-secondary-heading" indexable="false">Returns</h5>
+
+                <div class="ng-doc-returns">
+                    {{ typeMacro.returnType(method) }}
+                    {%- if returnsTag.length %}
+                        <span> - </span>
+                        {{ returnsTag | markdownToHtml }}
+                    {%- endif %}
+                </div>
+            </td>
+        </tr>
+
+        {% include "parts/member-examples.html.nunj" %}
+
+        {% if overloads.length %}
+            <tr>
+                <td>
+                    {{ overloadMacro.render(overloads) }}
+                </td>
+            </tr>
+        {% endif %}
+        </tbody>
+    </table>
+{% endmacro %}

package/generator/templates/helpers/methods.html.nunj

@@ -0,0 +1,7 @@
+{% import "helpers/method.html.nunj" as method %}
+
+{% macro render(methods, originalParent) %}
+    {%- for m in methods %}
+        {{ method.render(m, originalParent) }}
+    {% endfor -%}
+{% endmacro %}

package/generator/templates/helpers/modifier.html.nunj

@@ -0,0 +1,4 @@
+{%- macro render(content, attributeOverride) -%}
+    <span class="ng-doc-modifier" indexable="false"
+          data-content="{{ attributeOverride if attributeOverride else content }}">{{ content }}</span>
+{%- endmacro -%}

package/generator/templates/helpers/no-content.html.nunj

@@ -0,0 +1,3 @@
+{%- macro render(content) -%}
+    <p class="ng-doc-no-content" indexable="false">{{ content }}</p>
+{%- endmacro -%}

package/generator/templates/helpers/overload.html.nunj

@@ -0,0 +1,57 @@
+{% import "helpers/no-content.html.nunj" as noContentMacro %}
+{% import "helpers/parameters.html.nunj" as parametersMacro %}
+{% import "helpers/type.html.nunj" as typeMacro %}
+{% import "helpers/code.html.nunj" as codeMacro %}
+
+{% macro render(overloads) %}
+    {% for overload in overloads %}
+        {% set docNode = overload %}
+        {% set parameters = overload.getParameters() %}
+        {% set returnsTag = docNode | getJsDocTag('returns') %}
+
+        <table class="ng-doc-overload-table">
+            <thead indexable="false">
+            <tr>
+                <th>Overload #{{ loop.index }}</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td>
+                    {% set description = docNode | getJsDocDescription %}
+
+                    {{ description if description else noContentMacro.render('No documentation has been provided.') }}
+
+                    {% include "parts/member-remarks.html.nunj" %}
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <h5 class="no-anchor" indexable="false">Presentation</h5>
+                    {{ codeMacro.render(overload | methodPresentation, "typescript", false) }}
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    {%- if parameters.length %}
+                        <h5 class="no-anchor" indexable="false">Parameters</h5>
+                        {{ parametersMacro.render(parameters, docNode) }}
+                    {%- endif %}
+                    <h5 class="no-anchor" indexable="false">Returns</h5>
+                    <div class="ng-doc-returns">
+                        {{ typeMacro.returnType(overload) }}
+                        {%- if returnsTag.length %}
+                            <span> - </span>
+                            {{ returnsTag | markdownToHtml }}
+                        {%- endif %}
+                    </div>
+                </td>
+            </tr>
+
+            {% include "parts/member-examples.html.nunj" %}
+
+            </tbody>
+        </table>
+    {% endfor %}
+{% endmacro %}
+

package/generator/templates/helpers/parameters.html.nunj

@@ -0,0 +1,44 @@
+{% import "helpers/type.html.nunj" as typeMacro %}
+{% import "helpers/declaration-modifiers.html.nunj" as tagsMacro %}
+{% import "helpers/decorators.html.nunj" as decoratorsMacro %}
+
+{% macro render(parameters, origin, slugger) %}
+    <table class="ng-doc-api-table">
+        <thead>
+        <tr indexable="false">
+            <th>Name</th>
+            <th>Type</th>
+            <th>Description</th>
+        </tr>
+        </thead>
+        <tbody>
+        {%- for param in parameters %}
+            {% set paramChain = param | getPropertyChain %}
+            {% set inheritedFrom = param | getInheritedParent(origin) %}
+            {% set overriddenMember = param | getOverriddenMember %}
+            {% set implementedMember = param | getImplementedMember %}
+            {% set docNode = paramChain | firstNodeWithComment %}
+
+            <tr {{ 'dataSlug="'+param.getName()+'" dataSlugType="member"' if slugger }}>
+                <td indexable="false">
+                    {{ decoratorsMacro.render(param.getDecorators(), true) if param.getDecorators }}
+                    {{ tagsMacro.render(param, "badge") }}{{ param.getName() }}
+                    <div class="ng-doc-node-details">
+                        {%- if inheritedFrom %}
+                            inherited from <code>{{ inheritedFrom.getName() }}</code>
+                        {%- elseif overriddenMember %}
+                            overrides
+                            <code>{{ (overriddenMember | getMemberParent).getName() }}</code>
+                        {%- elseif implementedMember %}
+                            implements
+                            <code>{{ (implementedMember | getMemberParent).getName() }}</code>
+                        {%- endif %}
+                    </div>
+                </td>
+                <td>{{ typeMacro.type(param) }}</td>
+                <td>{{ origin | getJsDocParam(param.getName()) }}</td>
+            </tr>
+        {%- endfor %}
+        </tbody>
+    </table>
+{% endmacro %}

package/generator/templates/helpers/properties.html.nunj

@@ -0,0 +1,61 @@
+{% import "helpers/type.html.nunj" as typeMacro %}
+{% import "helpers/declaration-modifiers.html.nunj" as tagsMacro %}
+{% import "helpers/decorators.html.nunj" as decoratorsMacro %}
+{% import "helpers/status.html.nunj" as statusMacro %}
+{% set examplesColSpan = 3 %}
+
+{# mode='inheritedFrom' (classes/interfaces) or mode='definedIn' (type aliases) #}
+{% macro render(properties, origin, mode='inheritedFrom') %}
+    <table class="ng-doc-api-table sticky first-colum-highlighted">
+        <thead>
+        <tr indexable="false">
+            <th class="ng-doc-api-table-name">Name</th>
+            <th class="ng-doc-api-table-type">Type</th>
+            <th class="ng-doc-api-table-description">Description</th>
+        </tr>
+        </thead>
+        <tbody>
+        {%- for property in properties %}
+            {% set propertyChain = property | getPropertyChain %}
+            {% set definedIn = property | getDefinedInParent(origin) %}
+            {% set definedInHasName = definedIn | isNamed %}
+            {% set inheritedFrom = property | getInheritedParent(origin) %}
+            {% set overriddenMember = property | getOverriddenMember %}
+            {% set implementedMember = property | getImplementedMember %}
+            {% set docNode = propertyChain | firstNodeWithComment %}
+
+            <tr class="{{ statusMacro.class(property) }}" dataSlug="{{ property.getName() }}" dataSlugType="member">
+                <td indexable="false">
+                    {{ decoratorsMacro.render(property.getDecorators(), true) if property.getDecorators }}
+                    <span>{{ property.getName() }}{{ tagsMacro.render(property, "badge") }}</span>
+                    <div class="ng-doc-node-details">
+                        {%- if mode == 'definedIn' and definedIn and definedInHasName %}
+                            defined in <code>{{ definedIn.getName() }}</code>
+                        {%- elseif mode == 'inheritedFrom' and inheritedFrom %}
+                            inherited from <code>{{ inheritedFrom.getName() }}</code>
+                        {%- elseif overriddenMember %}
+                            overrides
+                            <code>{{ (overriddenMember | getMemberParent).getName() }}</code>
+                        {%- elseif implementedMember %}
+                            implements
+                            <code>{{ (implementedMember | getMemberParent).getName() }}</code>
+                        {%- endif %}
+                    </div>
+                </td>
+                <td class="ng-doc-api-table-type">{{ typeMacro.type(property) }}</td>
+                <td>
+                    <div class="ng-doc-api-status">
+                        {{ statusMacro.render(property) }}
+                    </div>
+                    {{ docNode | getJsDocDescription }}
+
+                    {% include "parts/member-remarks.html.nunj" %}
+                </td>
+            </tr>
+
+            {% include "parts/member-examples.html.nunj" %}
+
+        {%- endfor %}
+        </tbody>
+    </table>
+{% endmacro %}

package/generator/templates/helpers/status.html.nunj

@@ -0,0 +1,33 @@
+{% macro render(member) %}
+    {% set deprecated = member | getJsDocTag('deprecated') %}
+    {% if deprecated %}
+        <ng-doc-blockquote type="warning" icon="activity" label="Deprecated">
+            {{ deprecated }}
+        </ng-doc-blockquote>
+    {% endif %}
+
+    {% set experimental = member | getJsDocTag('experimental') %}
+    {% if experimental %}
+        <ng-doc-blockquote type="alert" icon="activity" label="Experimental">
+            {{ experimental }}
+        </ng-doc-blockquote>
+    {% endif %}
+
+    {% set alpha = member | getJsDocTag('alpha') %}
+    {% if alpha %}
+        <ng-doc-blockquote type="alert" icon="activity" label="Alpha">
+            {{ alpha }}
+        </ng-doc-blockquote>
+    {% endif %}
+
+    {% set beta = member | getJsDocTag('beta') %}
+    {% if beta %}
+        <ng-doc-blockquote type="warning" icon="activity" label="Beta">
+            {{ beta }}
+        </ng-doc-blockquote>
+    {% endif %}
+{% endmacro %}
+
+{% macro class(member) -%}
+    {{ "ng-doc-deprecated" if member | hasJsDocTag('deprecated') }} {{ "ng-doc-alpha" if member | hasJsDocTag('alpha') }} {{ "ng-doc-beta" if member | hasJsDocTag('beta') }} {{ "ng-doc-experimental" if member | hasJsDocTag('experimental') }}
+{%- endmacro %}

package/generator/templates/helpers/tag.html.nunj

@@ -0,0 +1,4 @@
+{%- macro render(content, attributeOverride) -%}
+    <span class="ng-doc-tag" indexable="false"
+          data-content="{{ attributeOverride if attributeOverride else content }}">{{ content }}</span>
+{%- endmacro -%}

package/generator/templates/helpers/type.html.nunj

@@ -0,0 +1,11 @@
+{% macro type(node) -%}
+    <code indexable="false">{{ node | displayType | escape }}</code>
+{%- endmacro %}
+
+{%- macro returnType(node) -%}
+    <code indexable="false">{{ node | displayReturnType | escape }}</code>
+{%- endmacro %}
+
+{% macro render(type) -%}
+    <code indexable="false">{{ type | escape }}</code>
+{%- endmacro %}

package/generator/templates/index.ts.nunj

@@ -0,0 +1,2 @@
+export * from './context';
+export * from './routes';

package/generator/templates/page-header.html.nunj

@@ -0,0 +1,5 @@
+<h1 class="ngde">{{ NgDocPage.title }}</h1>
+
+{% if Metadata.description %}
+<p class="ngde">{{ Metadata.description }}</p>
+{% endif %}

package/generator/templates/page-wrapper.ts.nunj

@@ -0,0 +1,64 @@
+// @ts-nocheck
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {Routes} from '@angular/router';
+import {NgDocPageWrapperComponent} from '@ng-doc/app';
+import {NgDocPageType} from '@ng-doc/core';
+{%- if headerContentSourceImport %}
+import {ɵwithNgDocContent} from '@ng-doc/app';
+import headerContentSource from '{{ headerContentSourceImport }}';
+{%- endif %}
+
+{%- if headerContentSourceImport %}
+const headerContent: string = '';
+{%- else %}
+const headerContent: string = `{{ headerContent | toTemplateString }}`
+{%- endif %}
+
+@Component({
+  selector: 'ng-doc-page-wrapper-{{ id }}',
+  template: `<ng-doc-page-wrapper [routes]="routes" [headerContent]="headerContent"{%- if headerContentSourceImport %} [headerContentSource]="headerContentSource"{%- endif %} [hasBreadcrumb]="hasBreadcrumb" [pageType]="pageType"></ng-doc-page-wrapper>`,
+  imports: [NgDocPageWrapperComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PageWrapperComponent {
+    routes = routes[0].children!;
+    headerContent = headerContent;
+    {%- if headerContentSourceImport %}
+    headerContentSource = headerContentSource;
+    {%- endif %}
+    pageType: NgDocPageType = '{{ pageType }}';
+    hasBreadcrumb = {{ hasBreadcrumb }};
+}
+{%- if headerContentSourceImport %}
+
+
+// The router shows the page only once its header has loaded, so the previous page stays on
+// screen instead of an empty page.
+const routes: Routes = [ɵwithNgDocContent({
+{%- else %}
+
+
+const routes: Routes = [{
+{%- endif %}
+  path: '',
+  component: PageWrapperComponent,
+  title: `{{ metadata.title | toTemplateString }}`,
+  children: [
+    {%- for importPath, entry in entries  %}
+    {
+      path: '{{ entry.route }}',
+      loadChildren: () => import('./{{ importPath }}'),
+      title: `{{ entry.title | toTemplateString }}`,
+      data: {
+        icon: '{{ entry.entry.icon }}',
+      }
+    },
+    {%- endfor %}
+  ]
+{%- if headerContentSourceImport %}
+}, headerContentSource)]
+{%- else %}
+}]
+{%- endif %}
+
+export default routes;

package/generator/templates/page.ts.nunj

@@ -0,0 +1,97 @@
+// @ts-nocheck
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {Routes} from '@angular/router';
+import {NgDocDemoAssets, NgDocPageComponent, NgDocRootPage} from '@ng-doc/app';
+import {isRoute, NgDocPage, NgDocPageType} from '@ng-doc/core';
+{%- if entryPath %}
+import entry from '{{ metadata.outDir | createImportPath(entryPath) }}';
+{%- endif %}
+{%- if playgroundsPath %}
+import {PLAYGROUND_COMPONENTS, PLAYGROUND_PROVIDERS} from '{{ metadata.outDir | createImportPath(playgroundsPath) }}';
+{%- endif %}
+{%- if demoAssetsPath %}
+import demoAssets from '{{ metadata.outDir | createImportPath(demoAssetsPath) }}';
+{%- endif %}
+{%- if contentSourceImport %}
+import {ɵwithNgDocContent} from '@ng-doc/app';
+import pageContentSource from '{{ contentSourceImport }}';
+{%- endif %}
+
+{%- if contentSourceImport %}
+const pageContent: string = '';
+{%- else %}
+const pageContent: string = `{{ content | toTemplateString }}`
+{%- endif %}
+
+@Component({
+  selector: 'ng-doc-page-{{ id }}',
+  template: `<ng-doc-page></ng-doc-page>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    NgDocPageComponent,
+      {%- if entryPath and entryHasImports %}
+    ...entry.imports,
+      {%- endif %}
+      {%- if playgroundsPath %}
+    ...PLAYGROUND_COMPONENTS,
+      {%- endif %}
+  ],
+  providers: [
+    {provide: NgDocRootPage, useExisting: PageComponent},
+      {%- if playgroundsPath %}
+    PLAYGROUND_PROVIDERS,
+      {%- endif %}
+      {%- if entryPath %}
+    (entry.providers ?? []),
+      {%- endif %}
+  ],
+})
+export class PageComponent extends NgDocRootPage {
+  readonly pageType: NgDocPageType = '{{ pageType }}';
+  readonly pageContent: string = pageContent;
+    {%- if contentSourceImport %}
+  readonly pageContentSource = pageContentSource;
+    {%- endif %}
+    {%- if editSourceFileUrl %}
+  readonly editSourceFileUrl: string = '{{ editSourceFileUrl }}';
+    {%- endif %}
+    {%- if viewSourceFileUrl %}
+  readonly viewSourceFileUrl: string = '{{ viewSourceFileUrl }}';
+    {%- endif -%}
+    {%- if entryPath %}
+  readonly page?: NgDocPage = entry;
+    {%- endif %}
+    {%- if demoAssetsPath %}
+  readonly demoAssets: NgDocDemoAssets = demoAssets;
+    {%- endif %}
+
+  constructor() {
+    super();
+  }
+}
+{%- if contentSourceImport %}
+
+// The router shows the page only once its content has loaded, so the previous page stays on
+// screen instead of an empty page.
+const routes: Routes = [ɵwithNgDocContent({
+    {%- if entryPath %}
+  ...(isRoute(entry.route) ? entry.route : {}),
+    {%- endif %}
+  path: '',
+  component: PageComponent,
+  title: `{{ metadata.title | toTemplateString }}`,
+}, pageContentSource)]
+{%- else %}
+
+const routes: Routes = [{
+    {%- if entryPath %}
+  ...(isRoute(entry.route) ? entry.route : {}),
+    {%- endif %}
+  path: '',
+  component: PageComponent,
+  title: `{{ metadata.title | toTemplateString }}`,
+}]
+{%- endif %}
+
+export default routes;
+

package/generator/templates/parts/examples.html.nunj

@@ -0,0 +1,11 @@
+{%- set examples = docNode | getJsDocTags('example') -%}
+
+{% if examples.length -%}
+    <section indexable="false">
+        <h2>Example usage</h2>
+
+        {% for example in examples -%}
+            {{ example }}
+        {%- endfor %}
+    </section>
+{%- endif %}

package/generator/templates/parts/member-examples.html.nunj

@@ -0,0 +1,12 @@
+{%- set examples = docNode | getJsDocTags('example') -%}
+
+{% if examples.length -%}
+    <tr indexable="false">
+        <td {% if examplesColSpan %}colspan="{{ examplesColSpan }}"{% endif %}>
+            <h5 class="no-anchor ng-doc-secondary-heading" indexable="false">Example usage</h5>
+            {% for example in examples -%}
+                {{ example }}
+            {%- endfor %}
+        </td>
+    </tr>
+{%- endif %}

package/generator/templates/parts/member-remarks.html.nunj

@@ -0,0 +1,8 @@
+{%- set remarks = docNode | getJsDocTags('remarks') -%}
+
+{% if remarks.length %}
+    <h5 class="no-anchor ng-doc-secondary-heading" indexable="false">Notes</h5>
+    {%- for remark in remarks %}
+        {{ remark | markdownToHtml }}
+    {%- endfor %}
+{% endif %}

package/generator/templates/parts/page-tags.html.nunj

@@ -0,0 +1,10 @@
+{% import "helpers/tag.html.nunj" as tagMacro %}
+
+<div class="ng-doc-page-tags">
+    {% set declarationType = declaration | getDeclarationType %}
+
+    {{ tagMacro.render(scope.name, "ng-doc-scope") }}
+    <span class="ng-doc-inline-delimiter" indexable="false">/</span>
+    {{ tagMacro.render("Type alias" if declarationType == "TypeAlias" else declarationType, declarationType) if declarationType }}
+</div>
+

package/generator/templates/parts/remarks.html.nunj

@@ -0,0 +1,10 @@
+{%- set remarks = docNode | getJsDocTags('remarks') -%}
+
+{% if remarks.length %}
+    <h2>Notes</h2>
+    <section>
+    {%- for remark in remarks %}
+        {{ remark | markdownToHtml }}
+    {%- endfor %}
+    </section>
+{% endif %}

package/generator/templates/parts/see-also.html.nunj

@@ -0,0 +1,23 @@
+{%- set seeDocs = docNode | getJsDocTags('see') %}
+
+{% set derivedClasses %}
+    {%- if declaration.getDerivedClasses %}
+        {%- set derived = declaration.getDerivedClasses() %}
+        {%- for cls in derived %}
+            <li><code>{{ cls.getName() }}</code> (extended)</li>
+        {%- endfor %}
+    {%- endif %}
+{% endset %}
+
+{%- if seeDocs.length or derivedClasses | trim %}
+    <section indexable="false">
+        <h2>See Also</h2>
+
+        <ul class="ng-doc-see-also">
+            {{ derivedClasses }}
+            {%- for see in seeDocs %}
+                <li>{{ see }}</li>
+            {%- endfor %}
+        </ul>
+    </section>
+{%- endif %}

package/generator/templates/parts/usage-notes.html.nunj

@@ -0,0 +1,8 @@
+{%- set usageNotes = docNode | getJsDocTag('usageNotes') -%}
+
+{% if usageNotes %}
+    <h2>Usage Notes</h2>
+    <section>
+        {{ usageNotes | markdownToHtml }}
+    </section>
+{% endif %}

package/generator/templates/playgrounds.ts.nunj

@@ -0,0 +1,63 @@
+// @ts-nocheck
+import {ChangeDetectionStrategy, Component, viewChild, ViewContainerRef} from '@angular/core';
+import {NgDocBasePlayground, providePlaygroundDemo} from '@ng-doc/app';
+// noinspection ES6UnusedImports
+import pageEntity from '{{ entryImportPath }}';
+import {CommonModule} from '@angular/common';
+
+{%- set components = [] %}
+{%- set index = 1 %}
+{%- set playgrounds = playgroundMetadata %}
+
+
+{%- for id, metadata in playgrounds -%}
+
+{%- for selector, template in metadata.templateForComponents %}
+{%- set comp = {id: id, name: 'PlaygroundComponent' + index, selector: selector } %}
+{%- set components = (components.push(comp), components) %}
+
+@Component({
+    selector: 'ng-doc-playground-{{ index }}',
+    {#- Two pages with the same playground would otherwise compile to identical components, which
+        Angular gives the same component ID (NG0912). The page route keeps them apart. #}
+    host: {'data-ng-doc-playground-page': '{{ pageRoute }}'},
+    template: `
+		{{ template }}
+	`,
+    imports: [
+        CommonModule,
+        {%- if hasImports %}
+        ...pageEntity.imports,
+        {%- endif %}
+        {%- if metadata.standalone %}
+        pageEntity.playgrounds['{{ id }}'].target,
+        {%- endif %}
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class {{ comp.name }} extends NgDocBasePlayground {
+    static readonly selector: string = '{{ comp.selector }}';
+
+    readonly target = pageEntity.playgrounds['{{ id }}'].target;
+
+    readonly playground = viewChild(pageEntity.playgrounds['{{ id }}'].target);
+
+    readonly viewContainerRef = viewChild(pageEntity.playgrounds['{{ id }}'].target, {read: ViewContainerRef});
+
+    readonly configData: any = pageEntity.playgrounds['{{ id }}'].data;
+}
+{%- set index = index + 1 -%}
+{%- endfor %}
+{%- endfor %}
+
+export const PLAYGROUND_COMPONENTS = [
+    {%- for comp in components %}
+    {{ comp.name }},
+    {%- endfor %}
+];
+
+export const PLAYGROUND_PROVIDERS = [
+    {%- for comp in components %}
+    providePlaygroundDemo('{{ comp.id }}', {{ comp.name }}),
+    {%- endfor %}
+];