feat(demo): add docs for standalone approach

projects/elements-demo/src/app/core/layout/navigation/navigation.component.scss

@@ -23,6 +23,14 @@ a[mat-list-item] {
     padding-left: 32px !important;
     font-size: 1em !important;
   }
+
+  &.active {
+    ::ng-deep {
+      .mdc-list-item__primary-text {
+        font-weight: bold !important;
+      }
+    }
+  }
 }
 
 .image-link {

projects/elements-demo/src/app/core/layout/navigation/navigation.component.scss-theme.scss

@@ -9,7 +9,9 @@
 
   demo-navigation {
     .active {
-      color: mat.m2-get-color-from-palette($primary) !important;
+      .mdc-list-item__primary-text {
+        color: mat.m2-get-color-from-palette($primary) !important;
+      }
     }
 
     .mat-mdc-list-item-unscoped-content {

projects/elements-demo/src/app/core/layout/navigation/navigation.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
 import { MatIconModule } from '@angular/material/icon';
@@ -82,8 +82,6 @@ const NAVIGATION = [
   standalone: true,
   imports: [RouterLink, RouterLinkActive, MatIconModule, MatListModule],
 })
-export class NavigationComponent implements OnInit {
+export class NavigationComponent {
   navigation = NAVIGATION;
-
-  ngOnInit() {}
 }

projects/elements-demo/src/app/core/layout/toolbar/toolbar.component.html

@@ -1,9 +1,9 @@
 <mat-toolbar color="primary">
   @if (isResponsiveLayout()) {
     <button mat-icon-button class="menu" (click)="toggle.emit()">
-      <mat-icon aria-hidden="false" aria-label="Menu">{{
-        navOpened ? 'close' : 'menu'
-      }}</mat-icon>
+      <mat-icon aria-hidden="false" aria-label="Menu">
+        {{ navOpened() ? 'close' : 'menu' }}
+      </mat-icon>
     </button>
   }
 
@@ -17,9 +17,9 @@
       aria-label="&#64;angular-extensions/elements"
     ></mat-icon>
   </a>
-  <span class="project-name"
-    >{{ isResponsiveLayout() ? '' : '&#64;angular-extensions/' }}elements</span
-  >
+  <span class="project-name">
+    {{ isResponsiveLayout() ? '' : '&#64;angular-extensions/' }}elements
+  </span>
   @if (isResponsiveLayout() !== undefined) {
     <img
       alt="downloads per month"
@@ -32,8 +32,9 @@
       class="twitter-follow-button"
       data-lang="en"
       data-show-count="false"
-      >Follow &#64;tomastrajan</a
     >
+      Follow &#64;tomastrajan
+    </a>
   }
 
   <span class="spacer"></span>

projects/elements-demo/src/app/features/docs/configuration/configuration.component.html

@@ -13,11 +13,12 @@ <h2>Pre-configuration with module</h2>
   </p>
   <blockquote>
     Example of such an use case could be that we have a
-    <code>&#60;user-profile-element></code> and we want to display top 3 users
-    for a given month. We would need to pass url in all of the elements...
+    <code>&#60;user-profile-element></code>
+    and we want to display top 3 users for a given month. We would need to pass
+    url in all of the elements...
   </blockquote>
 
-  <pre [highlight]="codeExampleInline" language="typescript"></pre>
+  <demo-example-code [example]="codeExampleInline" />
 
   <p>
     This could be optimized by storing url once in the component variable but
@@ -29,24 +30,36 @@ <h2>Pre-configuration with module</h2>
   <p>
     Compare this to the following solution where we pre-configure all of the
     elements we will be using in our application with the help of the
-    <code>LazyElementsModule.forRoot(options)</code> (or
-    <code>.forFeature()</code>) static functions!
+    <code>LazyElementsModule.forRoot(options)</code>
+    (or
+    <code>.forFeature()</code>
+    ) static functions!
   </p>
 
-  <pre [highlight]="codeExampleModule" language="typescript"></pre>
+  <demo-example-code
+    [example]="codeExampleStandalone"
+    [exampleModule]="codeExampleModule"
+  />
 
   <p>
-    We're creating options of the <code>LazyElementModuleOptions</code> type and
-    passing in array of <code>ElementConfig</code> items. Every item specifies
-    element <code>tag</code> and <code>url</code>...
+    We're creating options of the
+    <code>LazyElementModuleOptions</code>
+    type and passing in array of
+    <code>ElementConfig</code>
+    items. Every item specifies element
+    <code>tag</code>
+    and
+    <code>url</code>
+    ...
   </p>
 
   <p>
     With this configuration in place, we can adjust original
-    <code>FeatureComponent</code> template to look like this...
+    <code>FeatureComponent</code>
+    template to look like this...
   </p>
 
-  <pre [highlight]="codeExamplePreConfigured" language="typescript"></pre>
+  <demo-example-code [example]="codeExamplePreConfigured" />
 
   <p>
     As we can see, the component template got simple! There is less redundant
@@ -55,23 +68,31 @@ <h2>Pre-configuration with module</h2>
   </p>
 
   <p>
-    Check out the <a routerLink="/examples/advanced">working demo</a> of this
-    approach!
+    Check out the
+    <a routerLink="/examples/advanced">working demo</a>
+    of this approach!
   </p>
 
   <h2>Supported features</h2>
   <ul>
     <li>
-      ✅ Global and granular configuration of <code>isModule</code> flag (script
-      type module for ECMAScript modules)
+      ✅ Global and granular configuration of
+      <code>isModule</code>
+      flag (script type module for ECMAScript modules)
     </li>
     <li>
-      ✅ Global and granular configuration of <code>loadingComponent</code> (and
-      <code>loadingTemplate</code>)
+      ✅ Global and granular configuration of
+      <code>loadingComponent</code>
+      (and
+      <code>loadingTemplate</code>
+      )
     </li>
     <li>
-      ✅ Global and granular configuration of <code>errorComponent</code> (and
-      <code>errorTemplate</code>)
+      ✅ Global and granular configuration of
+      <code>errorComponent</code>
+      (and
+      <code>errorTemplate</code>
+      )
     </li>
     <li>✅ Granular element pre-loading (config based)</li>
     <li>

projects/elements-demo/src/app/features/docs/configuration/configuration.component.ts

@@ -1,24 +1,30 @@
 import { Component, OnInit } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { HighlightModule } from 'ngx-highlightjs';
+import { ExampleCodeComponent } from '../../../shared/example-code/example-code.component';
 
 @Component({
   selector: 'demo-configuration',
   templateUrl: './configuration.component.html',
   styleUrls: ['./configuration.component.scss'],
   standalone: true,
-  imports: [RouterLink, HighlightModule],
+  imports: [RouterLink, HighlightModule, ExampleCodeComponent],
 })
 export class ConfigurationComponent implements OnInit {
   codeExampleInline = CODE_EXAMPLE_INLINE;
   codeExampleModule = CODE_EXAMPLE_MODULE;
+  codeExampleStandalone = CODE_EXAMPLE_STANDALONE;
   codeExamplePreConfigured = CODE_EXAMPLE_PRE_CONFIGURED;
 
   ngOnInit() {}
 }
 
 const CODE_EXAMPLE_INLINE = `@Component({
+
   selector: 'your-org-feature',
+  standalone: true,
+  imports: [LazyElementDirective]
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   template: \`
     <user-profile-element *axLazyElement="'https://your-org.com/elements/user-profile-element.js'"></user-profile-element>
     <user-profile-element *axLazyElement="'https://your-org.com/elements/user-profile-element.js'"></user-profile-element>
@@ -27,6 +33,24 @@ const CODE_EXAMPLE_INLINE = `@Component({
 })
 export class FeatureComponent {}`;
 
+const CODE_EXAMPLE_STANDALONE = `// pre-configured route based lazy feature
+const configs: ElementConfig[] = [
+  { tag: 'user-profile-element', url: 'https://your-org.com/elements/user-profile-element.js' }
+  { tag: 'some-other-element', url: 'https://your-org.com/elements/some-other-element.js' }
+];
+
+export default <Routes>[
+  {
+    path: '',
+    providers: [provideAxLazyElementsConfigs(configs)],
+    children: [
+      {
+        path: '',
+        component: FeatureComponent,
+      },
+    ],
+  },
+];`;
 const CODE_EXAMPLE_MODULE = `// pre-configured LazyElementsModule
 const options: LazyElementModuleOptions = {
   elementConfigs: [
@@ -47,6 +71,9 @@ export class FeatureModule { }
 
 const CODE_EXAMPLE_PRE_CONFIGURED = `@Component({
   selector: 'your-org-feature',
+  standalone: true,
+  imports: [LazyElementDirective]
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   template: \`
     <user-profile-element *axLazyElement></user-profile-element>
     <user-profile-element *axLazyElement></user-profile-element>

projects/elements-demo/src/app/features/docs/getting-started/getting-started.component.html

@@ -7,7 +7,10 @@ <h1>Getting started</h1>
   </p>
 
   <ol>
-    <li>Install <code>npm i &#64;angular-extensions/elements</code></li>
+    <li>
+      Install
+      <code>npm i &#64;angular-extensions/elements</code>
+    </li>
     <li>
       Add
       <code>
@@ -16,54 +19,75 @@ <h1>Getting started</h1>
       </code>
     </li>
     <li>
-      Append <code>LazyElementsModule</code> to the <code>imports: []</code> of
-      your
+      Append
+      <code>LazyElementsModule</code>
+      to the
+      <code>imports: []</code>
+      of your
       <code>AppModule</code>
     </li>
     <li>
-      Add new <code>schemas: []</code> property with
-      <code>CUSTOM_ELEMENTS_SCHEMA</code> value to
-      <code>&#64;NgModule</code> decorator of your
+      Add new
+      <code>schemas: []</code>
+      property with
+      <code>CUSTOM_ELEMENTS_SCHEMA</code>
+      value to
+      <code>&#64;NgModule</code>
+      decorator of your
       <code>AppModule</code>
     </li>
     <li>
-      Use <code>*axLazyElement</code> directive on an element you wish to load
-      and pass in the url of the element bundle
+      Use
+      <code>*axLazyElement</code>
+      directive on an element you wish to load and pass in the url of the
+      element bundle
     </li>
   </ol>
 
   <p>That way we get...</p>
 
-  <pre [highlight]="codeExampleAppModule" language="typescript"></pre>
+  <demo-example-code
+    [example]="codeExampleAppConfig"
+    [exampleModule]="codeExampleAppModule"
+  />
 
   <p>
-    and can use <code>*axLazyElement</code> in the template of our component...
+    and can use
+    <code>*axLazyElement</code>
+    in the template of our component...
   </p>
 
-  <pre [highlight]="codeExampleComponent" language="typescript"></pre>
+  <demo-example-code [example]="codeExampleComponent" />
 
   <h2>Using in other (and lazy loaded) modules</h2>
 
   <p>
     Any non-trivial Angular application will usually contain more than a single
-    <code>AppModule</code>.
+    <code>AppModule</code>
+    .
   </p>
   <p>More so, some of these additional modules could be lazy loaded.</p>
 
   <p>
     Any module which contains components which are using
-    <code>*axLazyElement</code> directive has to have
-    <code>schemas: [CUSTOM_ELEMENTS_SCHEMA]</code> in its
-    <code>&#64;NgModule</code> decorator configuration. Also the module has to
-    either import <code>LazyElementsModule</code>. Let's have a look on the
-    following example...
+    <code>*axLazyElement</code>
+    directive has to have
+    <code>schemas: [CUSTOM_ELEMENTS_SCHEMA]</code>
+    in its
+    <code>&#64;NgModule</code>
+    decorator configuration. Also the module has to either import
+    <code>LazyElementsModule</code>
+    . Let's have a look on the following example...
   </p>
 
   <pre [highlight]="codeExampleModule" language="typescript"></pre>
 
   <p>
-    Or import other module (most commonly <code>SharedModule</code>) which both
-    imports and exports <code>LazyElementsModule</code>.
+    Or import other module (most commonly
+    <code>SharedModule</code>
+    ) which both imports and exports
+    <code>LazyElementsModule</code>
+    .
   </p>
 
   <pre [highlight]="codeExampleSharedModule" language="typescript"></pre>

projects/elements-demo/src/app/features/docs/getting-started/getting-started.component.ts

@@ -1,16 +1,18 @@
 import { Component, OnInit } from '@angular/core';
 import { HighlightModule } from 'ngx-highlightjs';
+import { ExampleCodeComponent } from '../../../shared/example-code/example-code.component';
 
 @Component({
   selector: 'demo-getting-started',
   templateUrl: './getting-started.component.html',
   styleUrls: ['./getting-started.component.scss'],
   standalone: true,
-  imports: [HighlightModule],
+  imports: [HighlightModule, ExampleCodeComponent],
 })
 export class GettingStartedComponent implements OnInit {
   codeExampleComponent = CODE_EXAMPLE_COMPONENT;
   codeExampleModule = CODE_EXAMPLE_MODULE;
+  codeExampleAppConfig = CODE_EXAMPLE_APP_CONFIG;
   codeExampleAppModule = CODE_EXAMPLE_APP_MODULE;
   codeExampleSharedModule = CODE_EXAMPLE_SHARED_MODULE;
 
@@ -21,6 +23,9 @@ const CODE_EXAMPLE_COMPONENT = `import { Component } from '@angular/core';
 
 @Component({
   selector: 'your-org-feature',
+  standalone: true,
+  imports: [LazyElementDirective],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
   template: \`
     <some-element *axLazyElement="elementUrl"></some-element>
   \`
@@ -44,6 +49,14 @@ import { FeatureComponent } from './feature-component';
 export class FeatureModule {}
 `;
 
+const CODE_EXAMPLE_APP_CONFIG = `export const appConfig: ApplicationConfig = {
+  providers: [
+    // other providers...
+    provideAxLazyElements(),
+  ]
+);
+`;
+
 const CODE_EXAMPLE_APP_MODULE = `import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { LazyElementsModule } from '@angular-extensions/elements';