From 2e85d3d03e82e83f27be9383ec338032d573aac0 Mon Sep 17 00:00:00 2001
From: kyubisation <lukas.spirig@gmail.com>
Date: Fri, 13 Sep 2019 19:27:39 +0200
Subject: [PATCH] fix(showcase): fix example code loading (#167)

Closes #165
---
 package.json                                  |  10 +-
 .../business-examples.module.ts}              |   8 +-
 .../simple-contextmenu.component.html}        |   0
 .../simple-contextmenu.component.scss}        |   0
 .../simple-contextmenu.component.ts           |  12 ++
 .../skippable-processflow.component.html      |  29 ++++
 .../skippable-processflow.component.scss      |   3 +
 .../skippable-processflow.component.ts}       |  10 +-
 .../src/app/business/business.module.ts       |   4 +-
 .../business/business/business.component.ts   |  24 +--
 .../component-viewer.component.html           |   8 +-
 .../component-viewer.component.ts             |  11 +-
 .../contextmenu-showcase.component.ts         |  12 --
 .../processflow-showcase.component.html       |  36 -----
 .../component-viewer.component.ts             |  11 +-
 .../src/app/core/core/core.component.ts       |  12 +-
 .../src/app/icons/icons/icons.component.ts    |   5 +-
 .../keycloak/keycloak/keycloak.component.ts   |   5 +-
 .../component-viewer.component.html           |   8 +-
 .../component-viewer.component.ts             |  11 +-
 .../processflow-showcase.component.scss       |   0
 .../accordion-showcase.component.html         |   0
 .../accordion-showcase.component.scss         |   0
 .../accordion-showcase.component.ts           |   0
 .../autocomplete-showcase.component.html      |   0
 .../autocomplete-showcase.component.scss      |   0
 .../autocomplete-showcase.component.ts        |   0
 .../badge-showcase.component.html             |   0
 .../badge-showcase.component.scss             |   0
 .../badge-showcase.component.ts               |   0
 .../breadcrumb-showcase.component.html        |   0
 .../breadcrumb-showcase.component.scss        |   0
 .../breadcrumb-showcase.component.ts          |   0
 .../button-showcase.component.html            |   0
 .../button-showcase.component.scss            |   0
 .../button-showcase.component.ts              |   0
 .../captcha-showcase.component.html           |   0
 .../captcha-showcase.component.scss           |   0
 .../captcha-showcase.component.ts             |   0
 .../checkbox-panel-showcase.component.html    |   0
 .../checkbox-panel-showcase.component.scss    |   0
 .../checkbox-panel-showcase.component.ts      |   0
 .../checkbox-showcase.component.html          |   0
 .../checkbox-showcase.component.scss          |   0
 .../checkbox-showcase.component.ts            |   0
 .../datepicker-showcase.component.html        |   0
 .../datepicker-showcase.component.scss        |   0
 .../datepicker-showcase.component.ts          |   0
 .../dropdown-showcase.component.html          |   0
 .../dropdown-showcase.component.scss          |   0
 .../dropdown-showcase.component.ts            |   0
 .../field-showcase.component.html             |   0
 .../field-showcase.component.scss             |   0
 .../field-showcase.component.ts               |   0
 .../file-selector-showcase.component.html     |   0
 .../file-selector-showcase.component.scss     |   0
 .../file-selector-showcase.component.ts       |   0
 .../ghettobox-showcase.component.html         |   0
 .../ghettobox-showcase.component.scss         |   0
 .../ghettobox-showcase.component.ts           |   0
 ...lightbox-showcase-content-1.component.html |   0
 ...lightbox-showcase-content-2.component.html |   0
 ...lightbox-showcase-content-3.component.html |   0
 ...lightbox-showcase-content-4.component.html |   0
 .../lightbox-showcase.component.html          |   0
 .../lightbox-showcase.component.scss          |   0
 .../lightbox-showcase.component.ts            |   0
 .../links-showcase.component.html             |   0
 .../links-showcase.component.scss             |   0
 .../links-showcase.component.ts               |   0
 .../loading-showcase.component.html           |   0
 .../loading-showcase.component.scss           |   0
 .../loading-showcase.component.ts             |   0
 .../notification-showcase.component.html      |   0
 .../notification-showcase.component.scss      |   0
 .../notification-showcase.component.ts        |   0
 .../pagination-showcase.component.html        |   0
 .../pagination-showcase.component.scss        |   0
 .../pagination-showcase.component.ts          |   0
 .../processflow-showcase.component.html       |   0
 .../processflow-showcase.component.scss       |   0
 .../processflow-showcase.component.ts         |   0
 .../public-examples.module.ts}                |   6 +-
 ...radio-button-panel-showcase.component.html |   0
 ...radio-button-panel-showcase.component.scss |   0
 .../radio-button-panel-showcase.component.ts  |   0
 .../radio-button-showcase.component.html      |   0
 .../radio-button-showcase.component.scss      |   0
 .../radio-button-showcase.component.ts        |   0
 .../search-showcase.component.html            |   0
 .../search-showcase.component.scss            |   0
 .../search-showcase.component.ts              |   0
 .../select-showcase.component.html            |   0
 .../select-showcase.component.scss            |   0
 .../select-showcase.component.ts              |   0
 .../table-showcase.component.html             |   0
 .../table-showcase.component.scss             |   0
 .../table-showcase.component.ts               |   0
 .../person-list/person-list.component.html    |   0
 .../person-list/person-list.component.scss    |   0
 .../person-list/person-list.component.ts      |   0
 .../tabs-showcase.component.html              |   0
 .../tabs-showcase.component.scss              |   0
 .../tabs-showcase/tabs-showcase.component.ts  |   0
 .../tag-showcase/tag-showcase.component.html  |   0
 .../tag-showcase/tag-showcase.component.scss  |   0
 .../tag-showcase/tag-showcase.component.ts    |   0
 .../textarea-showcase.component.html          |   0
 .../textarea-showcase.component.scss          |   0
 .../textarea-showcase.component.ts            |   0
 .../textexpand-showcase.component.html        |   0
 .../textexpand-showcase.component.scss        |   0
 .../textexpand-showcase.component.ts          |   0
 .../time-input-showcase.component.html        |   0
 .../time-input-showcase.component.scss        |   0
 .../time-input-showcase.component.ts          |   0
 .../toggle-showcase.component.html            |   0
 .../toggle-showcase.component.scss            |   0
 .../toggle-showcase.component.ts              |   0
 .../tooltip-showcase.component.html           |   0
 .../tooltip-showcase.component.scss           |   0
 .../tooltip-showcase.component.ts             |   0
 .../usermenu-showcase.component.html          |   0
 .../usermenu-showcase.component.scss          |   0
 .../usermenu-showcase.component.ts            |   2 +-
 .../src/app/public/public.module.ts           |   4 +-
 .../src/app/public/public/public.component.ts | 144 +++++++++---------
 .../shared/api-viewer/api-viewer.component.ts |  21 ++-
 .../src/app/shared/component-viewer-base.ts   |  24 ++-
 .../src/app/shared/example-provider.ts        |   6 +-
 .../example-viewer.component.html             |   8 +-
 .../example-viewer.component.ts               |  32 +++-
 .../src/app/shared/html-loader.service.ts     |  72 ++-------
 .../src/app/shared/loader-builder.ts          |  52 +++++++
 .../markdown-viewer.component.ts              |  21 ++-
 projects/angular-showcase/src/styles.scss     |   4 +
 schematics/collection.json                    |   4 +
 schematics/example-migration/index.js         |  72 +++++++++
 schematics/example-migration/index.ts         |  44 ++++++
 schematics/rollup.config.js                   |   9 +-
 140 files changed, 478 insertions(+), 266 deletions(-)
 rename projects/angular-showcase/src/app/business/{examples/examples.module.ts => business-examples/business-examples.module.ts} (74%)
 rename projects/angular-showcase/src/app/business/{examples/contextmenu-showcase/contextmenu-showcase.component.html => business-examples/simple-contextmenu/simple-contextmenu.component.html} (100%)
 rename projects/angular-showcase/src/app/business/{examples/contextmenu-showcase/contextmenu-showcase.component.scss => business-examples/simple-contextmenu/simple-contextmenu.component.scss} (100%)
 create mode 100644 projects/angular-showcase/src/app/business/business-examples/simple-contextmenu/simple-contextmenu.component.ts
 create mode 100644 projects/angular-showcase/src/app/business/business-examples/skippable-processflow/skippable-processflow.component.html
 create mode 100644 projects/angular-showcase/src/app/business/business-examples/skippable-processflow/skippable-processflow.component.scss
 rename projects/angular-showcase/src/app/{public/examples/processflow-showcase/processflow-showcase.component.ts => business/business-examples/skippable-processflow/skippable-processflow.component.ts} (61%)
 delete mode 100644 projects/angular-showcase/src/app/business/examples/contextmenu-showcase/contextmenu-showcase.component.ts
 delete mode 100644 projects/angular-showcase/src/app/business/examples/processflow-showcase/processflow-showcase.component.html
 delete mode 100644 projects/angular-showcase/src/app/public/examples/processflow-showcase/processflow-showcase.component.scss
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/accordion-showcase/accordion-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/accordion-showcase/accordion-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/accordion-showcase/accordion-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/autocomplete-showcase/autocomplete-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/autocomplete-showcase/autocomplete-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/autocomplete-showcase/autocomplete-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/badge-showcase/badge-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/badge-showcase/badge-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/badge-showcase/badge-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/breadcrumb-showcase/breadcrumb-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/breadcrumb-showcase/breadcrumb-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/breadcrumb-showcase/breadcrumb-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/button-showcase/button-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/button-showcase/button-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/button-showcase/button-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/captcha-showcase/captcha-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/captcha-showcase/captcha-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/captcha-showcase/captcha-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/checkbox-panel-showcase/checkbox-panel-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/checkbox-panel-showcase/checkbox-panel-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/checkbox-panel-showcase/checkbox-panel-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/checkbox-showcase/checkbox-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/checkbox-showcase/checkbox-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/checkbox-showcase/checkbox-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/datepicker-showcase/datepicker-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/datepicker-showcase/datepicker-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/datepicker-showcase/datepicker-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/dropdown-showcase/dropdown-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/dropdown-showcase/dropdown-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/dropdown-showcase/dropdown-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/field-showcase/field-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/field-showcase/field-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/field-showcase/field-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/file-selector-showcase/file-selector-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/file-selector-showcase/file-selector-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/file-selector-showcase/file-selector-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/ghettobox-showcase/ghettobox-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/ghettobox-showcase/ghettobox-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/ghettobox-showcase/ghettobox-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/lightbox-showcase/lightbox-showcase-content-1.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/lightbox-showcase/lightbox-showcase-content-2.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/lightbox-showcase/lightbox-showcase-content-3.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/lightbox-showcase/lightbox-showcase-content-4.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/lightbox-showcase/lightbox-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/lightbox-showcase/lightbox-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/lightbox-showcase/lightbox-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/links-showcase/links-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/links-showcase/links-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/links-showcase/links-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/loading-showcase/loading-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/loading-showcase/loading-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/loading-showcase/loading-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/notification-showcase/notification-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/notification-showcase/notification-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/notification-showcase/notification-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/pagination-showcase/pagination-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/pagination-showcase/pagination-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/pagination-showcase/pagination-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/processflow-showcase/processflow-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/{business/examples => public/public-examples}/processflow-showcase/processflow-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/{business/examples => public/public-examples}/processflow-showcase/processflow-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples/examples.module.ts => public-examples/public-examples.module.ts} (98%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/radio-button-panel-showcase/radio-button-panel-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/radio-button-panel-showcase/radio-button-panel-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/radio-button-panel-showcase/radio-button-panel-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/radio-button-showcase/radio-button-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/radio-button-showcase/radio-button-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/radio-button-showcase/radio-button-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/search-showcase/search-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/search-showcase/search-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/search-showcase/search-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/select-showcase/select-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/select-showcase/select-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/select-showcase/select-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/table-showcase/table-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/table-showcase/table-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/table-showcase/table-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/tabs-showcase/person/person-list/person-list.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/tabs-showcase/person/person-list/person-list.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/tabs-showcase/person/person-list/person-list.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/tabs-showcase/tabs-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/tabs-showcase/tabs-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/tabs-showcase/tabs-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/tag-showcase/tag-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/tag-showcase/tag-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/tag-showcase/tag-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/textarea-showcase/textarea-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/textarea-showcase/textarea-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/textarea-showcase/textarea-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/textexpand-showcase/textexpand-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/textexpand-showcase/textexpand-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/textexpand-showcase/textexpand-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/time-input-showcase/time-input-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/time-input-showcase/time-input-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/time-input-showcase/time-input-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/toggle-showcase/toggle-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/toggle-showcase/toggle-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/toggle-showcase/toggle-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/tooltip-showcase/tooltip-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/tooltip-showcase/tooltip-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/tooltip-showcase/tooltip-showcase.component.ts (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/usermenu-showcase/usermenu-showcase.component.html (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/usermenu-showcase/usermenu-showcase.component.scss (100%)
 rename projects/angular-showcase/src/app/public/{examples => public-examples}/usermenu-showcase/usermenu-showcase.component.ts (96%)
 create mode 100644 projects/angular-showcase/src/app/shared/loader-builder.ts
 create mode 100644 schematics/example-migration/index.js
 create mode 100644 schematics/example-migration/index.ts

diff --git a/package.json b/package.json
index 27526ce2d0..26fd6fe584 100644
--- a/package.json
+++ b/package.json
@@ -174,15 +174,7 @@
   "prettier": {
     "singleQuote": true,
     "endOfLine": "lf",
-    "printWidth": 100,
-    "overrides": [
-      {
-        "files": "*.html",
-        "options": {
-          "parser": "angular"
-        }
-      }
-    ]
+    "printWidth": 100
   },
   "stylelint": {
     "extends": "stylelint-config-recommended-scss",
diff --git a/projects/angular-showcase/src/app/business/examples/examples.module.ts b/projects/angular-showcase/src/app/business/business-examples/business-examples.module.ts
similarity index 74%
rename from projects/angular-showcase/src/app/business/examples/examples.module.ts
rename to projects/angular-showcase/src/app/business/business-examples/business-examples.module.ts
index 7da03a6290..721949dc18 100644
--- a/projects/angular-showcase/src/app/business/examples/examples.module.ts
+++ b/projects/angular-showcase/src/app/business/business-examples/business-examples.module.ts
@@ -9,10 +9,10 @@ import { HeaderModule } from '@sbb-esta/angular-business/header';
 import { ProcessflowModule } from '@sbb-esta/angular-business/processflow';
 import { IconCollectionModule } from '@sbb-esta/angular-icons';
 
-import { ContextmenuShowcaseComponent } from './contextmenu-showcase/contextmenu-showcase.component';
-import { ProcessflowShowcaseComponent } from './processflow-showcase/processflow-showcase.component';
+import { SimpleContextmenuComponent } from './simple-contextmenu/simple-contextmenu.component';
+import { SkippableProcessflowComponent } from './skippable-processflow/skippable-processflow.component';
 
-const exampleComponents = [ContextmenuShowcaseComponent, ProcessflowShowcaseComponent];
+const exampleComponents = [SimpleContextmenuComponent, SkippableProcessflowComponent];
 
 @NgModule({
   declarations: exampleComponents,
@@ -31,4 +31,4 @@ const exampleComponents = [ContextmenuShowcaseComponent, ProcessflowShowcaseComp
     ProcessflowModule
   ]
 })
-export class ExamplesModule {}
+export class BusinessExamplesModule {}
diff --git a/projects/angular-showcase/src/app/business/examples/contextmenu-showcase/contextmenu-showcase.component.html b/projects/angular-showcase/src/app/business/business-examples/simple-contextmenu/simple-contextmenu.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/business/examples/contextmenu-showcase/contextmenu-showcase.component.html
rename to projects/angular-showcase/src/app/business/business-examples/simple-contextmenu/simple-contextmenu.component.html
diff --git a/projects/angular-showcase/src/app/business/examples/contextmenu-showcase/contextmenu-showcase.component.scss b/projects/angular-showcase/src/app/business/business-examples/simple-contextmenu/simple-contextmenu.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/business/examples/contextmenu-showcase/contextmenu-showcase.component.scss
rename to projects/angular-showcase/src/app/business/business-examples/simple-contextmenu/simple-contextmenu.component.scss
diff --git a/projects/angular-showcase/src/app/business/business-examples/simple-contextmenu/simple-contextmenu.component.ts b/projects/angular-showcase/src/app/business/business-examples/simple-contextmenu/simple-contextmenu.component.ts
new file mode 100644
index 0000000000..08551ed940
--- /dev/null
+++ b/projects/angular-showcase/src/app/business/business-examples/simple-contextmenu/simple-contextmenu.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sbb-simple-contextmenu',
+  templateUrl: './simple-contextmenu.component.html',
+  styleUrls: ['./simple-contextmenu.component.scss']
+})
+export class SimpleContextmenuComponent {
+  action1() {}
+  action2() {}
+  action3() {}
+}
diff --git a/projects/angular-showcase/src/app/business/business-examples/skippable-processflow/skippable-processflow.component.html b/projects/angular-showcase/src/app/business/business-examples/skippable-processflow/skippable-processflow.component.html
new file mode 100644
index 0000000000..05eaaf4722
--- /dev/null
+++ b/projects/angular-showcase/src/app/business/business-examples/skippable-processflow/skippable-processflow.component.html
@@ -0,0 +1,29 @@
+<div>
+  <sbb-processflow #processflow skippable="true">
+    <sbb-processflow-step title="Schritt 1">
+      <div>
+        Schrittinhalt 1
+      </div>
+    </sbb-processflow-step>
+    <sbb-processflow-step title="Schritt 2">
+      <div>
+        Schrittinhalt 2
+      </div>
+    </sbb-processflow-step>
+    <sbb-processflow-step title="Schritt 3">
+      <div>
+        Schrittinhalt 3
+      </div>
+    </sbb-processflow-step>
+  </sbb-processflow>
+  <button sbbButton (click)="processflow.prevStep()">
+    Vorheriger Schritt
+  </button>
+  <button sbbButton (click)="processflow.nextStep()">
+    Nächster Schritt
+  </button>
+</div>
+<div>
+  <h4>Properties</h4>
+  <button mode="ghost" sbbButton (click)="reset()">Reset</button>
+</div>
diff --git a/projects/angular-showcase/src/app/business/business-examples/skippable-processflow/skippable-processflow.component.scss b/projects/angular-showcase/src/app/business/business-examples/skippable-processflow/skippable-processflow.component.scss
new file mode 100644
index 0000000000..79ff2d5269
--- /dev/null
+++ b/projects/angular-showcase/src/app/business/business-examples/skippable-processflow/skippable-processflow.component.scss
@@ -0,0 +1,3 @@
+:host {
+  display: flex;
+}
diff --git a/projects/angular-showcase/src/app/public/examples/processflow-showcase/processflow-showcase.component.ts b/projects/angular-showcase/src/app/business/business-examples/skippable-processflow/skippable-processflow.component.ts
similarity index 61%
rename from projects/angular-showcase/src/app/public/examples/processflow-showcase/processflow-showcase.component.ts
rename to projects/angular-showcase/src/app/business/business-examples/skippable-processflow/skippable-processflow.component.ts
index 5cfa2da829..9d6e706394 100644
--- a/projects/angular-showcase/src/app/public/examples/processflow-showcase/processflow-showcase.component.ts
+++ b/projects/angular-showcase/src/app/business/business-examples/skippable-processflow/skippable-processflow.component.ts
@@ -1,12 +1,12 @@
 import { AfterViewInit, Component, ViewChild } from '@angular/core';
-import { ProcessflowComponent, ProcessflowStep } from '@sbb-esta/angular-public/processflow';
+import { ProcessflowComponent, ProcessflowStep } from '@sbb-esta/angular-business/processflow';
 
 @Component({
-  selector: 'sbb-processflow-showcase',
-  templateUrl: './processflow-showcase.component.html',
-  styleUrls: ['./processflow-showcase.component.scss']
+  selector: 'sbb-skippable-processflow',
+  templateUrl: './skippable-processflow.component.html',
+  styleUrls: ['./skippable-processflow.component.scss']
 })
-export class ProcessflowShowcaseComponent implements AfterViewInit {
+export class SkippableProcessflowComponent implements AfterViewInit {
   @ViewChild('processflow', { static: true }) processflow: ProcessflowComponent;
 
   ngAfterViewInit(): void {
diff --git a/projects/angular-showcase/src/app/business/business.module.ts b/projects/angular-showcase/src/app/business/business.module.ts
index 18036ea52c..53d89dd9a1 100644
--- a/projects/angular-showcase/src/app/business/business.module.ts
+++ b/projects/angular-showcase/src/app/business/business.module.ts
@@ -6,10 +6,10 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { SharedModule } from '../shared/shared.module';
 
+import { BusinessExamplesModule } from './business-examples/business-examples.module';
 import { BusinessRoutingModule } from './business-routing.module';
 import { BusinessComponent } from './business/business.component';
 import { ComponentViewerComponent } from './component-viewer/component-viewer.component';
-import { ExamplesModule } from './examples/examples.module';
 
 @NgModule({
   declarations: [BusinessComponent, ComponentViewerComponent],
@@ -17,7 +17,7 @@ import { ExamplesModule } from './examples/examples.module';
     CommonModule,
     PerfectScrollbarModule,
     PortalModule,
-    ExamplesModule,
+    BusinessExamplesModule,
     SharedModule,
     TabsModule,
     BusinessRoutingModule
diff --git a/projects/angular-showcase/src/app/business/business/business.component.ts b/projects/angular-showcase/src/app/business/business/business.component.ts
index 5a7c9e5ac3..49b74e023e 100644
--- a/projects/angular-showcase/src/app/business/business/business.component.ts
+++ b/projects/angular-showcase/src/app/business/business/business.component.ts
@@ -1,15 +1,15 @@
-import { Component, Type } from '@angular/core';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Component } from '@angular/core';
 
 import { ExampleProvider } from '../../shared/example-provider';
-import { HtmlLoader } from '../../shared/html-loader.service';
-import { ContextmenuShowcaseComponent } from '../examples/contextmenu-showcase/contextmenu-showcase.component';
-import { ProcessflowShowcaseComponent } from '../examples/processflow-showcase/processflow-showcase.component';
+import { SimpleContextmenuComponent } from '../business-examples/simple-contextmenu/simple-contextmenu.component';
+import { SkippableProcessflowComponent } from '../business-examples/skippable-processflow/skippable-processflow.component';
 
 @Component({
   selector: 'sbb-business',
   templateUrl: './business.component.html',
   styleUrls: ['./business.component.scss'],
-  providers: [{ provide: ExampleProvider, useExisting: BusinessComponent }, HtmlLoader]
+  providers: [{ provide: ExampleProvider, useExisting: BusinessComponent }]
 })
 export class BusinessComponent implements ExampleProvider {
   formComponents = {
@@ -34,12 +34,18 @@ export class BusinessComponent implements ExampleProvider {
     contextmenu: 'Contextmenu'
   };
   popupsAndModals = {};
-  private _examples = {
-    processflow: ProcessflowShowcaseComponent,
-    contextmenu: ContextmenuShowcaseComponent
+  private _examples: { [component: string]: { [name: string]: ComponentPortal<any> } } = {
+    processflow: {
+      'skippable-processflow': new ComponentPortal(SkippableProcessflowComponent)
+    },
+    contextmenu: {
+      'simple-contextmenu': new ComponentPortal(SimpleContextmenuComponent)
+    }
   };
 
-  resolveExample<TComponent = any>(component: string): Type<TComponent> {
+  resolveExample<TComponent = any>(
+    component: string
+  ): { [name: string]: ComponentPortal<TComponent> } {
     return this._examples[component];
   }
 }
diff --git a/projects/angular-showcase/src/app/business/component-viewer/component-viewer.component.html b/projects/angular-showcase/src/app/business/component-viewer/component-viewer.component.html
index 1b5ad6ac9c..84e7227dc0 100644
--- a/projects/angular-showcase/src/app/business/component-viewer/component-viewer.component.html
+++ b/projects/angular-showcase/src/app/business/component-viewer/component-viewer.component.html
@@ -7,8 +7,12 @@
       <sbb-tab label="API">
         <div #api></div>
       </sbb-tab>
-      <sbb-tab *ngIf="example | async as examplePortal" label="Examples">
-        <sbb-example-viewer [example]="examplePortal"></sbb-example-viewer>
+      <sbb-tab *ngIf="example | async as examplePortals" label="Examples">
+        <sbb-example-viewer
+          *ngFor="let entry of examplePortals | keyvalue"
+          [name]="entry.key"
+          [example]="entry.name"
+        ></sbb-example-viewer>
       </sbb-tab>
     </sbb-tabs>
   </article>
diff --git a/projects/angular-showcase/src/app/business/component-viewer/component-viewer.component.ts b/projects/angular-showcase/src/app/business/component-viewer/component-viewer.component.ts
index 4ef09767f0..be3a9cb39f 100644
--- a/projects/angular-showcase/src/app/business/component-viewer/component-viewer.component.ts
+++ b/projects/angular-showcase/src/app/business/component-viewer/component-viewer.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Renderer2 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { ComponentViewerBase } from '../../shared/component-viewer-base';
@@ -11,7 +11,12 @@ import { HtmlLoader } from '../../shared/html-loader.service';
   styleUrls: ['./component-viewer.component.scss']
 })
 export class ComponentViewerComponent extends ComponentViewerBase {
-  constructor(htmlLoader: HtmlLoader, exampleProvider: ExampleProvider, route: ActivatedRoute) {
-    super(htmlLoader, exampleProvider, route);
+  constructor(
+    htmlLoader: HtmlLoader,
+    exampleProvider: ExampleProvider,
+    route: ActivatedRoute,
+    renderer: Renderer2
+  ) {
+    super(htmlLoader, exampleProvider, route, renderer);
   }
 }
diff --git a/projects/angular-showcase/src/app/business/examples/contextmenu-showcase/contextmenu-showcase.component.ts b/projects/angular-showcase/src/app/business/examples/contextmenu-showcase/contextmenu-showcase.component.ts
deleted file mode 100644
index 19e0469407..0000000000
--- a/projects/angular-showcase/src/app/business/examples/contextmenu-showcase/contextmenu-showcase.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'sbb-contextmenu-showcase',
-  templateUrl: './contextmenu-showcase.component.html',
-  styleUrls: ['./contextmenu-showcase.component.scss']
-})
-export class ContextmenuShowcaseComponent {
-  action1() {}
-  action2() {}
-  action3() {}
-}
diff --git a/projects/angular-showcase/src/app/business/examples/processflow-showcase/processflow-showcase.component.html b/projects/angular-showcase/src/app/business/examples/processflow-showcase/processflow-showcase.component.html
deleted file mode 100644
index 2078a31eb9..0000000000
--- a/projects/angular-showcase/src/app/business/examples/processflow-showcase/processflow-showcase.component.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<div class="container-fluid">
-  <div class="row">
-    <div class="col-lg-6 sbbsc-v-sep">
-      <h4 class="sbbsc-block">Processflow</h4>
-      <sbb-processflow #processflow skippable="true">
-        <sbb-processflow-step title="Schritt 1">
-          <div>
-            Schrittinhalt 1
-          </div>
-        </sbb-processflow-step>
-        <sbb-processflow-step title="Schritt 2">
-          <div>
-            Schrittinhalt 2
-          </div>
-        </sbb-processflow-step>
-        <sbb-processflow-step title="Schritt 3">
-          <div>
-            Schrittinhalt 3
-          </div>
-        </sbb-processflow-step>
-      </sbb-processflow>
-      <button sbbButton (click)="processflow.prevStep()">
-        Vorheriger Schritt
-      </button>
-      <button sbbButton (click)="processflow.nextStep()">
-        Nächster Schritt
-      </button>
-    </div>
-    <div class="col-lg-6">
-      <h4 class="sbbsc-block">Properties</h4>
-      <div class="sbbsc-block">
-        <button mode="ghost" sbbButton (click)="reset()">Reset</button>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/projects/angular-showcase/src/app/core/component-viewer/component-viewer.component.ts b/projects/angular-showcase/src/app/core/component-viewer/component-viewer.component.ts
index 4ef09767f0..be3a9cb39f 100644
--- a/projects/angular-showcase/src/app/core/component-viewer/component-viewer.component.ts
+++ b/projects/angular-showcase/src/app/core/component-viewer/component-viewer.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Renderer2 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { ComponentViewerBase } from '../../shared/component-viewer-base';
@@ -11,7 +11,12 @@ import { HtmlLoader } from '../../shared/html-loader.service';
   styleUrls: ['./component-viewer.component.scss']
 })
 export class ComponentViewerComponent extends ComponentViewerBase {
-  constructor(htmlLoader: HtmlLoader, exampleProvider: ExampleProvider, route: ActivatedRoute) {
-    super(htmlLoader, exampleProvider, route);
+  constructor(
+    htmlLoader: HtmlLoader,
+    exampleProvider: ExampleProvider,
+    route: ActivatedRoute,
+    renderer: Renderer2
+  ) {
+    super(htmlLoader, exampleProvider, route, renderer);
   }
 }
diff --git a/projects/angular-showcase/src/app/core/core/core.component.ts b/projects/angular-showcase/src/app/core/core/core.component.ts
index b690c13522..049bb32cec 100644
--- a/projects/angular-showcase/src/app/core/core/core.component.ts
+++ b/projects/angular-showcase/src/app/core/core/core.component.ts
@@ -1,22 +1,24 @@
-import { Component, Type } from '@angular/core';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Component } from '@angular/core';
 
 import { ExampleProvider } from '../../shared/example-provider';
-import { HtmlLoader } from '../../shared/html-loader.service';
 
 @Component({
   selector: 'sbb-core',
   templateUrl: './core.component.html',
   styleUrls: ['./core.component.scss'],
-  providers: [{ provide: ExampleProvider, useExisting: CoreComponent }, HtmlLoader]
+  providers: [{ provide: ExampleProvider, useExisting: CoreComponent }]
 })
 export class CoreComponent implements ExampleProvider {
   modules = {
     breakpoints: 'Breakpoints',
     datetime: 'Datetime'
   };
-  private _examples = {};
+  private _examples: { [component: string]: { [name: string]: ComponentPortal<any> } } = {};
 
-  resolveExample<TComponent = any>(component: string): Type<TComponent> {
+  resolveExample<TComponent = any>(
+    component: string
+  ): { [name: string]: ComponentPortal<TComponent> } {
     return this._examples[component];
   }
 }
diff --git a/projects/angular-showcase/src/app/icons/icons/icons.component.ts b/projects/angular-showcase/src/app/icons/icons/icons.component.ts
index 3bc47fe0da..dd44638879 100644
--- a/projects/angular-showcase/src/app/icons/icons/icons.component.ts
+++ b/projects/angular-showcase/src/app/icons/icons/icons.component.ts
@@ -2,13 +2,10 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { Component } from '@angular/core';
 import { ICON_COMPONENT_META_INFORMATION } from '@sbb-esta/angular-icons';
 
-import { HtmlLoader } from '../../shared/html-loader.service';
-
 @Component({
   selector: 'sbb-icons',
   templateUrl: './icons.component.html',
-  styleUrls: ['./icons.component.scss'],
-  providers: [HtmlLoader]
+  styleUrls: ['./icons.component.scss']
 })
 export class IconsComponent {
   icons = ICON_COMPONENT_META_INFORMATION.map(i => ({
diff --git a/projects/angular-showcase/src/app/keycloak/keycloak/keycloak.component.ts b/projects/angular-showcase/src/app/keycloak/keycloak/keycloak.component.ts
index 46059522d0..453e84fc25 100644
--- a/projects/angular-showcase/src/app/keycloak/keycloak/keycloak.component.ts
+++ b/projects/angular-showcase/src/app/keycloak/keycloak/keycloak.component.ts
@@ -1,11 +1,8 @@
 import { Component } from '@angular/core';
 
-import { HtmlLoader } from '../../shared/html-loader.service';
-
 @Component({
   selector: 'sbb-keycloak',
   templateUrl: './keycloak.component.html',
-  styleUrls: ['./keycloak.component.scss'],
-  providers: [HtmlLoader]
+  styleUrls: ['./keycloak.component.scss']
 })
 export class KeycloakComponent {}
diff --git a/projects/angular-showcase/src/app/public/component-viewer/component-viewer.component.html b/projects/angular-showcase/src/app/public/component-viewer/component-viewer.component.html
index 1b5ad6ac9c..e3a04c9dae 100644
--- a/projects/angular-showcase/src/app/public/component-viewer/component-viewer.component.html
+++ b/projects/angular-showcase/src/app/public/component-viewer/component-viewer.component.html
@@ -7,8 +7,12 @@
       <sbb-tab label="API">
         <div #api></div>
       </sbb-tab>
-      <sbb-tab *ngIf="example | async as examplePortal" label="Examples">
-        <sbb-example-viewer [example]="examplePortal"></sbb-example-viewer>
+      <sbb-tab *ngIf="example | async as examplePortals" label="Examples">
+        <sbb-example-viewer
+          *ngFor="let entry of examplePortals | keyvalue"
+          [name]="entry.key"
+          [example]="entry.value"
+        ></sbb-example-viewer>
       </sbb-tab>
     </sbb-tabs>
   </article>
diff --git a/projects/angular-showcase/src/app/public/component-viewer/component-viewer.component.ts b/projects/angular-showcase/src/app/public/component-viewer/component-viewer.component.ts
index 4ef09767f0..be3a9cb39f 100644
--- a/projects/angular-showcase/src/app/public/component-viewer/component-viewer.component.ts
+++ b/projects/angular-showcase/src/app/public/component-viewer/component-viewer.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Renderer2 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import { ComponentViewerBase } from '../../shared/component-viewer-base';
@@ -11,7 +11,12 @@ import { HtmlLoader } from '../../shared/html-loader.service';
   styleUrls: ['./component-viewer.component.scss']
 })
 export class ComponentViewerComponent extends ComponentViewerBase {
-  constructor(htmlLoader: HtmlLoader, exampleProvider: ExampleProvider, route: ActivatedRoute) {
-    super(htmlLoader, exampleProvider, route);
+  constructor(
+    htmlLoader: HtmlLoader,
+    exampleProvider: ExampleProvider,
+    route: ActivatedRoute,
+    renderer: Renderer2
+  ) {
+    super(htmlLoader, exampleProvider, route, renderer);
   }
 }
diff --git a/projects/angular-showcase/src/app/public/examples/processflow-showcase/processflow-showcase.component.scss b/projects/angular-showcase/src/app/public/examples/processflow-showcase/processflow-showcase.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/projects/angular-showcase/src/app/public/examples/accordion-showcase/accordion-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/accordion-showcase/accordion-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/accordion-showcase/accordion-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/accordion-showcase/accordion-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/accordion-showcase/accordion-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/accordion-showcase/accordion-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/accordion-showcase/accordion-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/accordion-showcase/accordion-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/accordion-showcase/accordion-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/accordion-showcase/accordion-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/accordion-showcase/accordion-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/accordion-showcase/accordion-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/autocomplete-showcase/autocomplete-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/autocomplete-showcase/autocomplete-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/autocomplete-showcase/autocomplete-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/autocomplete-showcase/autocomplete-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/autocomplete-showcase/autocomplete-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/autocomplete-showcase/autocomplete-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/autocomplete-showcase/autocomplete-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/autocomplete-showcase/autocomplete-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/autocomplete-showcase/autocomplete-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/autocomplete-showcase/autocomplete-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/autocomplete-showcase/autocomplete-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/autocomplete-showcase/autocomplete-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/badge-showcase/badge-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/badge-showcase/badge-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/badge-showcase/badge-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/badge-showcase/badge-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/badge-showcase/badge-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/badge-showcase/badge-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/badge-showcase/badge-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/badge-showcase/badge-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/badge-showcase/badge-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/badge-showcase/badge-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/badge-showcase/badge-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/badge-showcase/badge-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/breadcrumb-showcase/breadcrumb-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/breadcrumb-showcase/breadcrumb-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/breadcrumb-showcase/breadcrumb-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/breadcrumb-showcase/breadcrumb-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/breadcrumb-showcase/breadcrumb-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/breadcrumb-showcase/breadcrumb-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/breadcrumb-showcase/breadcrumb-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/breadcrumb-showcase/breadcrumb-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/breadcrumb-showcase/breadcrumb-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/breadcrumb-showcase/breadcrumb-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/breadcrumb-showcase/breadcrumb-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/breadcrumb-showcase/breadcrumb-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/button-showcase/button-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/button-showcase/button-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/button-showcase/button-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/button-showcase/button-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/button-showcase/button-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/button-showcase/button-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/button-showcase/button-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/button-showcase/button-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/button-showcase/button-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/button-showcase/button-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/button-showcase/button-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/button-showcase/button-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/captcha-showcase/captcha-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/captcha-showcase/captcha-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/captcha-showcase/captcha-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/captcha-showcase/captcha-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/captcha-showcase/captcha-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/captcha-showcase/captcha-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/captcha-showcase/captcha-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/captcha-showcase/captcha-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/captcha-showcase/captcha-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/captcha-showcase/captcha-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/captcha-showcase/captcha-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/captcha-showcase/captcha-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/checkbox-panel-showcase/checkbox-panel-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/checkbox-panel-showcase/checkbox-panel-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/checkbox-panel-showcase/checkbox-panel-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/checkbox-panel-showcase/checkbox-panel-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/checkbox-panel-showcase/checkbox-panel-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/checkbox-panel-showcase/checkbox-panel-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/checkbox-panel-showcase/checkbox-panel-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/checkbox-panel-showcase/checkbox-panel-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/checkbox-panel-showcase/checkbox-panel-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/checkbox-panel-showcase/checkbox-panel-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/checkbox-panel-showcase/checkbox-panel-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/checkbox-panel-showcase/checkbox-panel-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/checkbox-showcase/checkbox-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/checkbox-showcase/checkbox-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/checkbox-showcase/checkbox-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/checkbox-showcase/checkbox-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/checkbox-showcase/checkbox-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/checkbox-showcase/checkbox-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/checkbox-showcase/checkbox-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/checkbox-showcase/checkbox-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/checkbox-showcase/checkbox-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/checkbox-showcase/checkbox-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/checkbox-showcase/checkbox-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/checkbox-showcase/checkbox-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/datepicker-showcase/datepicker-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/datepicker-showcase/datepicker-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/datepicker-showcase/datepicker-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/datepicker-showcase/datepicker-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/datepicker-showcase/datepicker-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/datepicker-showcase/datepicker-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/datepicker-showcase/datepicker-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/datepicker-showcase/datepicker-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/datepicker-showcase/datepicker-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/datepicker-showcase/datepicker-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/datepicker-showcase/datepicker-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/datepicker-showcase/datepicker-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/dropdown-showcase/dropdown-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/dropdown-showcase/dropdown-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/dropdown-showcase/dropdown-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/dropdown-showcase/dropdown-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/dropdown-showcase/dropdown-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/dropdown-showcase/dropdown-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/dropdown-showcase/dropdown-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/dropdown-showcase/dropdown-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/dropdown-showcase/dropdown-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/dropdown-showcase/dropdown-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/dropdown-showcase/dropdown-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/dropdown-showcase/dropdown-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/field-showcase/field-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/field-showcase/field-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/field-showcase/field-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/field-showcase/field-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/field-showcase/field-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/field-showcase/field-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/field-showcase/field-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/field-showcase/field-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/field-showcase/field-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/field-showcase/field-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/field-showcase/field-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/field-showcase/field-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/file-selector-showcase/file-selector-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/file-selector-showcase/file-selector-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/file-selector-showcase/file-selector-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/file-selector-showcase/file-selector-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/file-selector-showcase/file-selector-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/file-selector-showcase/file-selector-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/file-selector-showcase/file-selector-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/file-selector-showcase/file-selector-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/file-selector-showcase/file-selector-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/file-selector-showcase/file-selector-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/file-selector-showcase/file-selector-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/file-selector-showcase/file-selector-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/ghettobox-showcase/ghettobox-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/ghettobox-showcase/ghettobox-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/ghettobox-showcase/ghettobox-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/ghettobox-showcase/ghettobox-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/ghettobox-showcase/ghettobox-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/ghettobox-showcase/ghettobox-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/ghettobox-showcase/ghettobox-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/ghettobox-showcase/ghettobox-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/ghettobox-showcase/ghettobox-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/ghettobox-showcase/ghettobox-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/ghettobox-showcase/ghettobox-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/ghettobox-showcase/ghettobox-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/lightbox-showcase/lightbox-showcase-content-1.component.html b/projects/angular-showcase/src/app/public/public-examples/lightbox-showcase/lightbox-showcase-content-1.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/lightbox-showcase/lightbox-showcase-content-1.component.html
rename to projects/angular-showcase/src/app/public/public-examples/lightbox-showcase/lightbox-showcase-content-1.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/lightbox-showcase/lightbox-showcase-content-2.component.html b/projects/angular-showcase/src/app/public/public-examples/lightbox-showcase/lightbox-showcase-content-2.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/lightbox-showcase/lightbox-showcase-content-2.component.html
rename to projects/angular-showcase/src/app/public/public-examples/lightbox-showcase/lightbox-showcase-content-2.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/lightbox-showcase/lightbox-showcase-content-3.component.html b/projects/angular-showcase/src/app/public/public-examples/lightbox-showcase/lightbox-showcase-content-3.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/lightbox-showcase/lightbox-showcase-content-3.component.html
rename to projects/angular-showcase/src/app/public/public-examples/lightbox-showcase/lightbox-showcase-content-3.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/lightbox-showcase/lightbox-showcase-content-4.component.html b/projects/angular-showcase/src/app/public/public-examples/lightbox-showcase/lightbox-showcase-content-4.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/lightbox-showcase/lightbox-showcase-content-4.component.html
rename to projects/angular-showcase/src/app/public/public-examples/lightbox-showcase/lightbox-showcase-content-4.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/lightbox-showcase/lightbox-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/lightbox-showcase/lightbox-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/lightbox-showcase/lightbox-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/lightbox-showcase/lightbox-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/lightbox-showcase/lightbox-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/lightbox-showcase/lightbox-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/lightbox-showcase/lightbox-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/lightbox-showcase/lightbox-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/lightbox-showcase/lightbox-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/lightbox-showcase/lightbox-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/lightbox-showcase/lightbox-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/lightbox-showcase/lightbox-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/links-showcase/links-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/links-showcase/links-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/links-showcase/links-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/links-showcase/links-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/links-showcase/links-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/links-showcase/links-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/links-showcase/links-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/links-showcase/links-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/links-showcase/links-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/links-showcase/links-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/links-showcase/links-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/links-showcase/links-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/loading-showcase/loading-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/loading-showcase/loading-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/loading-showcase/loading-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/loading-showcase/loading-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/loading-showcase/loading-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/loading-showcase/loading-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/loading-showcase/loading-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/loading-showcase/loading-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/loading-showcase/loading-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/loading-showcase/loading-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/loading-showcase/loading-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/loading-showcase/loading-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/notification-showcase/notification-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/notification-showcase/notification-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/notification-showcase/notification-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/notification-showcase/notification-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/notification-showcase/notification-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/notification-showcase/notification-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/notification-showcase/notification-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/notification-showcase/notification-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/notification-showcase/notification-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/notification-showcase/notification-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/notification-showcase/notification-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/notification-showcase/notification-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/pagination-showcase/pagination-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/pagination-showcase/pagination-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/pagination-showcase/pagination-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/pagination-showcase/pagination-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/pagination-showcase/pagination-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/pagination-showcase/pagination-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/pagination-showcase/pagination-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/pagination-showcase/pagination-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/pagination-showcase/pagination-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/pagination-showcase/pagination-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/pagination-showcase/pagination-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/pagination-showcase/pagination-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/processflow-showcase/processflow-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/processflow-showcase/processflow-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/processflow-showcase/processflow-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/processflow-showcase/processflow-showcase.component.html
diff --git a/projects/angular-showcase/src/app/business/examples/processflow-showcase/processflow-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/processflow-showcase/processflow-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/business/examples/processflow-showcase/processflow-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/processflow-showcase/processflow-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/business/examples/processflow-showcase/processflow-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/processflow-showcase/processflow-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/business/examples/processflow-showcase/processflow-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/processflow-showcase/processflow-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/examples.module.ts b/projects/angular-showcase/src/app/public/public-examples/public-examples.module.ts
similarity index 98%
rename from projects/angular-showcase/src/app/public/examples/examples.module.ts
rename to projects/angular-showcase/src/app/public/public-examples/public-examples.module.ts
index 168be7ede5..15ac3b139e 100644
--- a/projects/angular-showcase/src/app/public/examples/examples.module.ts
+++ b/projects/angular-showcase/src/app/public/public-examples/public-examples.module.ts
@@ -83,7 +83,7 @@ import { TextexpandShowcaseComponent } from './textexpand-showcase/textexpand-sh
 import { TimeInputShowcaseComponent } from './time-input-showcase/time-input-showcase.component';
 import { ToggleShowcaseComponent } from './toggle-showcase/toggle-showcase.component';
 import { TooltipShowcaseComponent } from './tooltip-showcase/tooltip-showcase.component';
-import { UserMenuShowcaseComponent } from './usermenu-showcase/usermenu-showcase.component';
+import { UsermenuShowcaseComponent } from './usermenu-showcase/usermenu-showcase.component';
 
 const exampleComponents = [
   AccordionShowcaseComponent,
@@ -128,7 +128,7 @@ const exampleComponents = [
   ToggleShowcaseComponent,
   TooltipShowcaseComponent,
   TagShowcaseComponent,
-  UserMenuShowcaseComponent
+  UsermenuShowcaseComponent
 ];
 
 @NgModule({
@@ -178,4 +178,4 @@ const exampleComponents = [
     UserMenuModule
   ]
 })
-export class ExamplesModule {}
+export class PublicExamplesModule {}
diff --git a/projects/angular-showcase/src/app/public/examples/radio-button-panel-showcase/radio-button-panel-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/radio-button-panel-showcase/radio-button-panel-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/radio-button-panel-showcase/radio-button-panel-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/radio-button-panel-showcase/radio-button-panel-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/radio-button-panel-showcase/radio-button-panel-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/radio-button-panel-showcase/radio-button-panel-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/radio-button-panel-showcase/radio-button-panel-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/radio-button-panel-showcase/radio-button-panel-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/radio-button-panel-showcase/radio-button-panel-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/radio-button-panel-showcase/radio-button-panel-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/radio-button-panel-showcase/radio-button-panel-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/radio-button-panel-showcase/radio-button-panel-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/radio-button-showcase/radio-button-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/radio-button-showcase/radio-button-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/radio-button-showcase/radio-button-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/radio-button-showcase/radio-button-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/radio-button-showcase/radio-button-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/radio-button-showcase/radio-button-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/radio-button-showcase/radio-button-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/radio-button-showcase/radio-button-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/radio-button-showcase/radio-button-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/radio-button-showcase/radio-button-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/radio-button-showcase/radio-button-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/radio-button-showcase/radio-button-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/search-showcase/search-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/search-showcase/search-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/search-showcase/search-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/search-showcase/search-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/search-showcase/search-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/search-showcase/search-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/search-showcase/search-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/search-showcase/search-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/search-showcase/search-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/search-showcase/search-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/search-showcase/search-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/search-showcase/search-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/select-showcase/select-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/select-showcase/select-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/select-showcase/select-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/select-showcase/select-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/select-showcase/select-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/select-showcase/select-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/select-showcase/select-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/select-showcase/select-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/select-showcase/select-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/select-showcase/select-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/select-showcase/select-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/select-showcase/select-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/table-showcase/table-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/table-showcase/table-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/table-showcase/table-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/table-showcase/table-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/table-showcase/table-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/table-showcase/table-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/table-showcase/table-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/table-showcase/table-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/table-showcase/table-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/table-showcase/table-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/table-showcase/table-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/table-showcase/table-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/tabs-showcase/person/person-list/person-list.component.html b/projects/angular-showcase/src/app/public/public-examples/tabs-showcase/person/person-list/person-list.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/tabs-showcase/person/person-list/person-list.component.html
rename to projects/angular-showcase/src/app/public/public-examples/tabs-showcase/person/person-list/person-list.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/tabs-showcase/person/person-list/person-list.component.scss b/projects/angular-showcase/src/app/public/public-examples/tabs-showcase/person/person-list/person-list.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/tabs-showcase/person/person-list/person-list.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/tabs-showcase/person/person-list/person-list.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/tabs-showcase/person/person-list/person-list.component.ts b/projects/angular-showcase/src/app/public/public-examples/tabs-showcase/person/person-list/person-list.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/tabs-showcase/person/person-list/person-list.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/tabs-showcase/person/person-list/person-list.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/tabs-showcase/tabs-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/tabs-showcase/tabs-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/tabs-showcase/tabs-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/tabs-showcase/tabs-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/tabs-showcase/tabs-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/tabs-showcase/tabs-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/tabs-showcase/tabs-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/tabs-showcase/tabs-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/tabs-showcase/tabs-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/tabs-showcase/tabs-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/tabs-showcase/tabs-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/tabs-showcase/tabs-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/tag-showcase/tag-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/tag-showcase/tag-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/tag-showcase/tag-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/tag-showcase/tag-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/tag-showcase/tag-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/tag-showcase/tag-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/tag-showcase/tag-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/tag-showcase/tag-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/tag-showcase/tag-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/tag-showcase/tag-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/tag-showcase/tag-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/tag-showcase/tag-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/textarea-showcase/textarea-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/textarea-showcase/textarea-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/textarea-showcase/textarea-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/textarea-showcase/textarea-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/textarea-showcase/textarea-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/textarea-showcase/textarea-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/textarea-showcase/textarea-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/textarea-showcase/textarea-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/textarea-showcase/textarea-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/textarea-showcase/textarea-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/textarea-showcase/textarea-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/textarea-showcase/textarea-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/textexpand-showcase/textexpand-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/textexpand-showcase/textexpand-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/textexpand-showcase/textexpand-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/textexpand-showcase/textexpand-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/textexpand-showcase/textexpand-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/textexpand-showcase/textexpand-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/textexpand-showcase/textexpand-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/textexpand-showcase/textexpand-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/textexpand-showcase/textexpand-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/textexpand-showcase/textexpand-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/textexpand-showcase/textexpand-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/textexpand-showcase/textexpand-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/time-input-showcase/time-input-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/time-input-showcase/time-input-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/time-input-showcase/time-input-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/time-input-showcase/time-input-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/time-input-showcase/time-input-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/time-input-showcase/time-input-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/time-input-showcase/time-input-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/time-input-showcase/time-input-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/time-input-showcase/time-input-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/time-input-showcase/time-input-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/time-input-showcase/time-input-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/time-input-showcase/time-input-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/toggle-showcase/toggle-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/toggle-showcase/toggle-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/toggle-showcase/toggle-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/toggle-showcase/toggle-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/toggle-showcase/toggle-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/toggle-showcase/toggle-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/toggle-showcase/toggle-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/toggle-showcase/toggle-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/toggle-showcase/toggle-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/toggle-showcase/toggle-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/toggle-showcase/toggle-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/toggle-showcase/toggle-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/tooltip-showcase/tooltip-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/tooltip-showcase/tooltip-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/tooltip-showcase/tooltip-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/tooltip-showcase/tooltip-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/tooltip-showcase/tooltip-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/tooltip-showcase/tooltip-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/tooltip-showcase/tooltip-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/tooltip-showcase/tooltip-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/tooltip-showcase/tooltip-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/tooltip-showcase/tooltip-showcase.component.ts
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/tooltip-showcase/tooltip-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/tooltip-showcase/tooltip-showcase.component.ts
diff --git a/projects/angular-showcase/src/app/public/examples/usermenu-showcase/usermenu-showcase.component.html b/projects/angular-showcase/src/app/public/public-examples/usermenu-showcase/usermenu-showcase.component.html
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/usermenu-showcase/usermenu-showcase.component.html
rename to projects/angular-showcase/src/app/public/public-examples/usermenu-showcase/usermenu-showcase.component.html
diff --git a/projects/angular-showcase/src/app/public/examples/usermenu-showcase/usermenu-showcase.component.scss b/projects/angular-showcase/src/app/public/public-examples/usermenu-showcase/usermenu-showcase.component.scss
similarity index 100%
rename from projects/angular-showcase/src/app/public/examples/usermenu-showcase/usermenu-showcase.component.scss
rename to projects/angular-showcase/src/app/public/public-examples/usermenu-showcase/usermenu-showcase.component.scss
diff --git a/projects/angular-showcase/src/app/public/examples/usermenu-showcase/usermenu-showcase.component.ts b/projects/angular-showcase/src/app/public/public-examples/usermenu-showcase/usermenu-showcase.component.ts
similarity index 96%
rename from projects/angular-showcase/src/app/public/examples/usermenu-showcase/usermenu-showcase.component.ts
rename to projects/angular-showcase/src/app/public/public-examples/usermenu-showcase/usermenu-showcase.component.ts
index 74f1ddc7d6..1706be140b 100644
--- a/projects/angular-showcase/src/app/public/examples/usermenu-showcase/usermenu-showcase.component.ts
+++ b/projects/angular-showcase/src/app/public/public-examples/usermenu-showcase/usermenu-showcase.component.ts
@@ -6,7 +6,7 @@ import { LinkGeneratorResult } from '@sbb-esta/angular-core/models';
   templateUrl: './usermenu-showcase.component.html',
   styleUrls: ['./usermenu-showcase.component.scss']
 })
-export class UserMenuShowcaseComponent {
+export class UsermenuShowcaseComponent {
   userName1 = 'john_64';
   userName2 = 'max_98';
   userName3 = 'walter_14';
diff --git a/projects/angular-showcase/src/app/public/public.module.ts b/projects/angular-showcase/src/app/public/public.module.ts
index 9c427284ab..e4bde550ec 100644
--- a/projects/angular-showcase/src/app/public/public.module.ts
+++ b/projects/angular-showcase/src/app/public/public.module.ts
@@ -7,7 +7,7 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { SharedModule } from '../shared/shared.module';
 
 import { ComponentViewerComponent } from './component-viewer/component-viewer.component';
-import { ExamplesModule } from './examples/examples.module';
+import { PublicExamplesModule } from './public-examples/public-examples.module';
 import { PublicRoutingModule } from './public-routing.module';
 import { PublicComponent } from './public/public.component';
 
@@ -17,7 +17,7 @@ import { PublicComponent } from './public/public.component';
     CommonModule,
     PerfectScrollbarModule,
     PortalModule,
-    ExamplesModule,
+    PublicExamplesModule,
     SharedModule,
     TabsModule,
     PublicRoutingModule
diff --git a/projects/angular-showcase/src/app/public/public/public.component.ts b/projects/angular-showcase/src/app/public/public/public.component.ts
index fc76c4b438..c1648765d8 100644
--- a/projects/angular-showcase/src/app/public/public/public.component.ts
+++ b/projects/angular-showcase/src/app/public/public/public.component.ts
@@ -1,45 +1,45 @@
+import { ComponentPortal } from '@angular/cdk/portal';
 import { Component, Type } from '@angular/core';
 
 import { ExampleProvider } from '../../shared/example-provider';
-import { HtmlLoader } from '../../shared/html-loader.service';
-import { AccordionShowcaseComponent } from '../examples/accordion-showcase/accordion-showcase.component';
-import { AutocompleteShowcaseComponent } from '../examples/autocomplete-showcase/autocomplete-showcase.component';
-import { BadgeShowcaseComponent } from '../examples/badge-showcase/badge-showcase.component';
-import { BreadcrumbShowcaseComponent } from '../examples/breadcrumb-showcase/breadcrumb-showcase.component';
-import { ButtonShowcaseComponent } from '../examples/button-showcase/button-showcase.component';
-import { CaptchaShowcaseComponent } from '../examples/captcha-showcase/captcha-showcase.component';
-import { CheckboxPanelShowcaseComponent } from '../examples/checkbox-panel-showcase/checkbox-panel-showcase.component';
-import { CheckboxShowcaseComponent } from '../examples/checkbox-showcase/checkbox-showcase.component';
-import { DatepickerShowcaseComponent } from '../examples/datepicker-showcase/datepicker-showcase.component';
-import { DropdownShowcaseComponent } from '../examples/dropdown-showcase/dropdown-showcase.component';
-import { FieldShowcaseComponent } from '../examples/field-showcase/field-showcase.component';
-import { FileSelectorShowcaseComponent } from '../examples/file-selector-showcase/file-selector-showcase.component';
-import { GhettoboxShowcaseComponent } from '../examples/ghettobox-showcase/ghettobox-showcase.component';
-import { LightboxShowcaseComponent } from '../examples/lightbox-showcase/lightbox-showcase.component';
-import { LinksShowcaseComponent } from '../examples/links-showcase/links-showcase.component';
-import { LoadingShowcaseComponent } from '../examples/loading-showcase/loading-showcase.component';
-import { NotificationShowcaseComponent } from '../examples/notification-showcase/notification-showcase.component';
-import { PaginationShowcaseComponent } from '../examples/pagination-showcase/pagination-showcase.component';
-import { ProcessflowShowcaseComponent } from '../examples/processflow-showcase/processflow-showcase.component';
-import { RadioButtonPanelShowcaseComponent } from '../examples/radio-button-panel-showcase/radio-button-panel-showcase.component';
-import { RadioButtonShowcaseComponent } from '../examples/radio-button-showcase/radio-button-showcase.component';
-import { SearchShowcaseComponent } from '../examples/search-showcase/search-showcase.component';
-import { SelectShowcaseComponent } from '../examples/select-showcase/select-showcase.component';
-import { TableShowcaseComponent } from '../examples/table-showcase/table-showcase.component';
-import { TabsShowcaseComponent } from '../examples/tabs-showcase/tabs-showcase.component';
-import { TagShowcaseComponent } from '../examples/tag-showcase/tag-showcase.component';
-import { TextareaShowcaseComponent } from '../examples/textarea-showcase/textarea-showcase.component';
-import { TextexpandShowcaseComponent } from '../examples/textexpand-showcase/textexpand-showcase.component';
-import { TimeInputShowcaseComponent } from '../examples/time-input-showcase/time-input-showcase.component';
-import { ToggleShowcaseComponent } from '../examples/toggle-showcase/toggle-showcase.component';
-import { TooltipShowcaseComponent } from '../examples/tooltip-showcase/tooltip-showcase.component';
-import { UserMenuShowcaseComponent } from '../examples/usermenu-showcase/usermenu-showcase.component';
+import { AccordionShowcaseComponent } from '../public-examples/accordion-showcase/accordion-showcase.component';
+import { AutocompleteShowcaseComponent } from '../public-examples/autocomplete-showcase/autocomplete-showcase.component';
+import { BadgeShowcaseComponent } from '../public-examples/badge-showcase/badge-showcase.component';
+import { BreadcrumbShowcaseComponent } from '../public-examples/breadcrumb-showcase/breadcrumb-showcase.component';
+import { ButtonShowcaseComponent } from '../public-examples/button-showcase/button-showcase.component';
+import { CaptchaShowcaseComponent } from '../public-examples/captcha-showcase/captcha-showcase.component';
+import { CheckboxPanelShowcaseComponent } from '../public-examples/checkbox-panel-showcase/checkbox-panel-showcase.component';
+import { CheckboxShowcaseComponent } from '../public-examples/checkbox-showcase/checkbox-showcase.component';
+import { DatepickerShowcaseComponent } from '../public-examples/datepicker-showcase/datepicker-showcase.component';
+import { DropdownShowcaseComponent } from '../public-examples/dropdown-showcase/dropdown-showcase.component';
+import { FieldShowcaseComponent } from '../public-examples/field-showcase/field-showcase.component';
+import { FileSelectorShowcaseComponent } from '../public-examples/file-selector-showcase/file-selector-showcase.component';
+import { GhettoboxShowcaseComponent } from '../public-examples/ghettobox-showcase/ghettobox-showcase.component';
+import { LightboxShowcaseComponent } from '../public-examples/lightbox-showcase/lightbox-showcase.component';
+import { LinksShowcaseComponent } from '../public-examples/links-showcase/links-showcase.component';
+import { LoadingShowcaseComponent } from '../public-examples/loading-showcase/loading-showcase.component';
+import { NotificationShowcaseComponent } from '../public-examples/notification-showcase/notification-showcase.component';
+import { PaginationShowcaseComponent } from '../public-examples/pagination-showcase/pagination-showcase.component';
+import { ProcessflowShowcaseComponent } from '../public-examples/processflow-showcase/processflow-showcase.component';
+import { RadioButtonPanelShowcaseComponent } from '../public-examples/radio-button-panel-showcase/radio-button-panel-showcase.component';
+import { RadioButtonShowcaseComponent } from '../public-examples/radio-button-showcase/radio-button-showcase.component';
+import { SearchShowcaseComponent } from '../public-examples/search-showcase/search-showcase.component';
+import { SelectShowcaseComponent } from '../public-examples/select-showcase/select-showcase.component';
+import { TableShowcaseComponent } from '../public-examples/table-showcase/table-showcase.component';
+import { TabsShowcaseComponent } from '../public-examples/tabs-showcase/tabs-showcase.component';
+import { TagShowcaseComponent } from '../public-examples/tag-showcase/tag-showcase.component';
+import { TextareaShowcaseComponent } from '../public-examples/textarea-showcase/textarea-showcase.component';
+import { TextexpandShowcaseComponent } from '../public-examples/textexpand-showcase/textexpand-showcase.component';
+import { TimeInputShowcaseComponent } from '../public-examples/time-input-showcase/time-input-showcase.component';
+import { ToggleShowcaseComponent } from '../public-examples/toggle-showcase/toggle-showcase.component';
+import { TooltipShowcaseComponent } from '../public-examples/tooltip-showcase/tooltip-showcase.component';
+import { UsermenuShowcaseComponent } from '../public-examples/usermenu-showcase/usermenu-showcase.component';
 
 @Component({
   selector: 'sbb-public',
   templateUrl: './public.component.html',
   styleUrls: ['./public.component.scss'],
-  providers: [{ provide: ExampleProvider, useExisting: PublicComponent }, HtmlLoader]
+  providers: [{ provide: ExampleProvider, useExisting: PublicComponent }]
 })
 export class PublicComponent implements ExampleProvider {
   formComponents = {
@@ -82,42 +82,50 @@ export class PublicComponent implements ExampleProvider {
     lightbox: 'Lightbox',
     tooltip: 'Tooltip'
   };
-  private _examples = {
-    autocomplete: AutocompleteShowcaseComponent,
-    captcha: CaptchaShowcaseComponent,
-    checkbox: CheckboxShowcaseComponent,
-    'checkbox-panel': CheckboxPanelShowcaseComponent,
-    datepicker: DatepickerShowcaseComponent,
-    field: FieldShowcaseComponent,
-    'file-selector': FileSelectorShowcaseComponent,
-    'radio-button': RadioButtonShowcaseComponent,
-    'radio-button-panel': RadioButtonPanelShowcaseComponent,
-    search: SearchShowcaseComponent,
-    select: SelectShowcaseComponent,
-    tag: TagShowcaseComponent,
-    textarea: TextareaShowcaseComponent,
-    'time-input': TimeInputShowcaseComponent,
-    toggle: ToggleShowcaseComponent,
-    accordion: AccordionShowcaseComponent,
-    breadcrumb: BreadcrumbShowcaseComponent,
-    ghettobox: GhettoboxShowcaseComponent,
-    notification: NotificationShowcaseComponent,
-    pagination: PaginationShowcaseComponent,
-    processflow: ProcessflowShowcaseComponent,
-    table: TableShowcaseComponent,
-    tabs: TabsShowcaseComponent,
-    textexpand: TextexpandShowcaseComponent,
-    usermenu: UserMenuShowcaseComponent,
-    badge: BadgeShowcaseComponent,
-    button: ButtonShowcaseComponent,
-    links: LinksShowcaseComponent,
-    loading: LoadingShowcaseComponent,
-    dropdown: DropdownShowcaseComponent,
-    lightbox: LightboxShowcaseComponent,
-    tooltip: TooltipShowcaseComponent
+  private _examples: { [component: string]: { [name: string]: ComponentPortal<any> } } = {
+    autocomplete: { 'autocomplete-showcase': new ComponentPortal(AutocompleteShowcaseComponent) },
+    captcha: { 'captcha-showcase': new ComponentPortal(CaptchaShowcaseComponent) },
+    checkbox: { 'checkbox-showcase': new ComponentPortal(CheckboxShowcaseComponent) },
+    'checkbox-panel': {
+      'checkbox-panel-showcase': new ComponentPortal(CheckboxPanelShowcaseComponent)
+    },
+    datepicker: { 'datepicker-showcase': new ComponentPortal(DatepickerShowcaseComponent) },
+    field: { 'field-showcase': new ComponentPortal(FieldShowcaseComponent) },
+    'file-selector': {
+      'fileSelector-showcase': new ComponentPortal(FileSelectorShowcaseComponent)
+    },
+    'radio-button': { 'radioButton-showcase': new ComponentPortal(RadioButtonShowcaseComponent) },
+    'radio-button-panel': {
+      'radioButtonPanel-showcase': new ComponentPortal(RadioButtonPanelShowcaseComponent)
+    },
+    search: { 'search-showcase': new ComponentPortal(SearchShowcaseComponent) },
+    select: { 'select-showcase': new ComponentPortal(SelectShowcaseComponent) },
+    tag: { 'tag-showcase': new ComponentPortal(TagShowcaseComponent) },
+    textarea: { 'textarea-showcase': new ComponentPortal(TextareaShowcaseComponent) },
+    'time-input': { 'timeInput-showcase': new ComponentPortal(TimeInputShowcaseComponent) },
+    toggle: { 'toggle-showcase': new ComponentPortal(ToggleShowcaseComponent) },
+    accordion: { 'accordion-showcase': new ComponentPortal(AccordionShowcaseComponent) },
+    breadcrumb: { 'breadcrumb-showcase': new ComponentPortal(BreadcrumbShowcaseComponent) },
+    ghettobox: { 'ghettobox-showcase': new ComponentPortal(GhettoboxShowcaseComponent) },
+    notification: { 'notification-showcase': new ComponentPortal(NotificationShowcaseComponent) },
+    pagination: { 'pagination-showcase': new ComponentPortal(PaginationShowcaseComponent) },
+    processflow: { 'processflow-showcase': new ComponentPortal(ProcessflowShowcaseComponent) },
+    table: { 'table-showcase': new ComponentPortal(TableShowcaseComponent) },
+    tabs: { 'tabs-showcase': new ComponentPortal(TabsShowcaseComponent) },
+    textexpand: { 'textexpand-showcase': new ComponentPortal(TextexpandShowcaseComponent) },
+    usermenu: { 'usermenu-showcase': new ComponentPortal(UsermenuShowcaseComponent) },
+    badge: { 'badge-showcase': new ComponentPortal(BadgeShowcaseComponent) },
+    button: { 'button-showcase': new ComponentPortal(ButtonShowcaseComponent) },
+    links: { 'links-showcase': new ComponentPortal(LinksShowcaseComponent) },
+    loading: { 'loading-showcase': new ComponentPortal(LoadingShowcaseComponent) },
+    dropdown: { 'dropdown-showcase': new ComponentPortal(DropdownShowcaseComponent) },
+    lightbox: { 'lightbox-showcase': new ComponentPortal(LightboxShowcaseComponent) },
+    tooltip: { 'tooltip-showcase': new ComponentPortal(TooltipShowcaseComponent) }
   };
 
-  resolveExample<TComponent = any>(component: string): Type<TComponent> {
+  resolveExample<TComponent = any>(
+    component: string
+  ): { [name: string]: ComponentPortal<TComponent> } {
     return this._examples[component];
   }
 }
diff --git a/projects/angular-showcase/src/app/shared/api-viewer/api-viewer.component.ts b/projects/angular-showcase/src/app/shared/api-viewer/api-viewer.component.ts
index c8ecac8ef0..084fb87aeb 100644
--- a/projects/angular-showcase/src/app/shared/api-viewer/api-viewer.component.ts
+++ b/projects/angular-showcase/src/app/shared/api-viewer/api-viewer.component.ts
@@ -1,4 +1,11 @@
-import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  OnDestroy,
+  Renderer2,
+  ViewChild
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subject } from 'rxjs';
 
@@ -13,10 +20,18 @@ export class ApiViewerComponent implements AfterViewInit, OnDestroy {
   @ViewChild('content', { static: true, read: ElementRef }) content: ElementRef<any>;
   private _destroyed = new Subject<void>();
 
-  constructor(private _htmlLoader: HtmlLoader, private _route: ActivatedRoute) {}
+  constructor(
+    private _htmlLoader: HtmlLoader,
+    private _route: ActivatedRoute,
+    private _renderer: Renderer2
+  ) {}
 
   ngAfterViewInit(): void {
-    this._htmlLoader.loadApiDocumentation(this._route, this._destroyed, this.content);
+    this._htmlLoader
+      .with(this._route, this._renderer)
+      .until(this._destroyed)
+      .fromApiDocumentation()
+      .applyTo(this.content);
   }
 
   ngOnDestroy(): void {
diff --git a/projects/angular-showcase/src/app/shared/component-viewer-base.ts b/projects/angular-showcase/src/app/shared/component-viewer-base.ts
index 9392e23430..d45d5ff85b 100644
--- a/projects/angular-showcase/src/app/shared/component-viewer-base.ts
+++ b/projects/angular-showcase/src/app/shared/component-viewer-base.ts
@@ -1,6 +1,6 @@
 import { ComponentPortal } from '@angular/cdk/portal';
-import { AfterViewInit, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { AfterViewInit, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { TabsComponent } from '@sbb-esta/angular-public/tabs';
 import { Observable, Subject } from 'rxjs';
 import { distinctUntilChanged, filter, first, map, skip, takeUntil } from 'rxjs/operators';
@@ -12,20 +12,20 @@ export class ComponentViewerBase implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(TabsComponent, { static: true }) tabs: TabsComponent;
   @ViewChild('overview', { static: true }) overview: ElementRef;
   @ViewChild('api', { static: true }) api: ElementRef;
-  example: Observable<ComponentPortal<any>>;
+  example: Observable<{ [component: string]: ComponentPortal<any> }>;
   private _destroyed = new Subject<void>();
 
   constructor(
     private _htmlLoader: HtmlLoader,
     private _exampleProvider: ExampleProvider,
-    private _route: ActivatedRoute
+    private _route: ActivatedRoute,
+    private _renderer: Renderer2
   ) {}
 
   ngOnInit() {
     this.example = this._route.params.pipe(
       takeUntil(this._destroyed),
-      map(({ id }) => this._exampleProvider.resolveExample(id)),
-      map(e => (e ? new ComponentPortal(e) : null))
+      map(({ id }) => this._exampleProvider.resolveExample(id))
     );
   }
 
@@ -45,8 +45,16 @@ export class ComponentViewerBase implements OnInit, AfterViewInit, OnDestroy {
         skip(1)
       )
       .subscribe(() => this.tabs.openTabByIndex(0));
-    this._htmlLoader.loadDocumentation(this._route, this._destroyed, this.overview);
-    this._htmlLoader.loadApiDocumentation(this._route, this._destroyed, this.api);
+    this._htmlLoader
+      .with(this._route, this._renderer)
+      .until(this._destroyed)
+      .fromDocumentation()
+      .applyTo(this.overview);
+    this._htmlLoader
+      .with(this._route, this._renderer)
+      .until(this._destroyed)
+      .fromApiDocumentation()
+      .applyTo(this.api);
   }
 
   ngOnDestroy(): void {
diff --git a/projects/angular-showcase/src/app/shared/example-provider.ts b/projects/angular-showcase/src/app/shared/example-provider.ts
index ce078729f0..6005909162 100644
--- a/projects/angular-showcase/src/app/shared/example-provider.ts
+++ b/projects/angular-showcase/src/app/shared/example-provider.ts
@@ -1,5 +1,7 @@
-import { Type } from '@angular/core';
+import { ComponentPortal } from '@angular/cdk/portal';
 
 export abstract class ExampleProvider {
-  abstract resolveExample<TComponent = any>(component: string): Type<TComponent>;
+  abstract resolveExample<TComponent = any>(
+    component: string
+  ): { [name: string]: ComponentPortal<TComponent> };
 }
diff --git a/projects/angular-showcase/src/app/shared/example-viewer/example-viewer.component.html b/projects/angular-showcase/src/app/shared/example-viewer/example-viewer.component.html
index bf70a29df0..eed474bbe2 100644
--- a/projects/angular-showcase/src/app/shared/example-viewer/example-viewer.component.html
+++ b/projects/angular-showcase/src/app/shared/example-viewer/example-viewer.component.html
@@ -1,5 +1,5 @@
 <div>
-  <h3>{{ title | async }}</h3>
+  <h3>{{ label }}</h3>
   <button type="button" (click)="showSource = !showSource">
     <svg
       focusable="false"
@@ -17,13 +17,13 @@ <h3>{{ title | async }}</h3>
 
 <sbb-tabs [hidden]="!showSource">
   <sbb-tab label="HTML">
-    <pre #html></pre>
+    <pre><code #html></code></pre>
   </sbb-tab>
   <sbb-tab label="TS">
-    <pre #ts></pre>
+    <pre><code #ts></code></pre>
   </sbb-tab>
   <sbb-tab label="SCSS">
-    <pre #scss></pre>
+    <pre><code #scss></code></pre>
   </sbb-tab>
 </sbb-tabs>
 <ng-template [cdkPortalOutlet]="example"></ng-template>
diff --git a/projects/angular-showcase/src/app/shared/example-viewer/example-viewer.component.ts b/projects/angular-showcase/src/app/shared/example-viewer/example-viewer.component.ts
index cee1877eab..264a028a33 100644
--- a/projects/angular-showcase/src/app/shared/example-viewer/example-viewer.component.ts
+++ b/projects/angular-showcase/src/app/shared/example-viewer/example-viewer.component.ts
@@ -6,6 +6,7 @@ import {
   Input,
   OnDestroy,
   OnInit,
+  Renderer2,
   ViewChild
 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
@@ -21,14 +22,25 @@ import { HtmlLoader } from '../html-loader.service';
 })
 export class ExampleViewerComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() example: ComponentPortal<any>;
+  @Input() name: string;
   @ViewChild('html', { static: false }) html: ElementRef;
   @ViewChild('ts', { static: false }) ts: ElementRef;
   @ViewChild('scss', { static: false }) scss: ElementRef;
   showSource = false;
   title: Observable<string>;
+  get label() {
+    return this.name
+      .replace(/-/g, ' ')
+      .replace(/(^[a-z]| [a-z])/g, m => m.toUpperCase())
+      .replace(' Showcase', '');
+  }
   private _destroyed = new Subject<void>();
 
-  constructor(private _htmlLoader: HtmlLoader, private _route: ActivatedRoute) {}
+  constructor(
+    private _htmlLoader: HtmlLoader,
+    private _route: ActivatedRoute,
+    private _renderer: Renderer2
+  ) {}
 
   ngOnInit(): void {
     this.title = combineLatest(this._route.params, this._route.data, (p, d) => ({
@@ -44,9 +56,21 @@ export class ExampleViewerComponent implements OnInit, AfterViewInit, OnDestroy
   }
 
   ngAfterViewInit(): void {
-    this._htmlLoader.loadExample(this._route, this._destroyed, this.html, this.example, 'html');
-    this._htmlLoader.loadExample(this._route, this._destroyed, this.ts, this.example, 'ts');
-    this._htmlLoader.loadExample(this._route, this._destroyed, this.scss, this.example, 'scss');
+    this._htmlLoader
+      .with(this._route, this._renderer)
+      .until(this._destroyed)
+      .fromExamples(this.name, 'html')
+      .applyTo(this.html);
+    this._htmlLoader
+      .with(this._route, this._renderer)
+      .until(this._destroyed)
+      .fromExamples(this.name, 'ts')
+      .applyTo(this.ts);
+    this._htmlLoader
+      .with(this._route, this._renderer)
+      .until(this._destroyed)
+      .fromExamples(this.name, 'scss')
+      .applyTo(this.scss);
   }
 
   ngOnDestroy(): void {
diff --git a/projects/angular-showcase/src/app/shared/html-loader.service.ts b/projects/angular-showcase/src/app/shared/html-loader.service.ts
index 6f50f2af25..3392665a08 100644
--- a/projects/angular-showcase/src/app/shared/html-loader.service.ts
+++ b/projects/angular-showcase/src/app/shared/html-loader.service.ts
@@ -1,70 +1,16 @@
-import { ComponentPortal } from '@angular/cdk/portal';
 import { HttpClient } from '@angular/common/http';
-import { ElementRef, Injectable, Renderer2 } from '@angular/core';
+import { Injectable, Renderer2 } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { combineLatest, Observable } from 'rxjs';
-import { switchMap, takeUntil } from 'rxjs/operators';
 
-@Injectable()
-export class HtmlLoader {
-  constructor(private _http: HttpClient, private _renderer: Renderer2) {}
-
-  loadDocumentation(
-    route: ActivatedRoute,
-    destroyable: Observable<void>,
-    targetElement: ElementRef
-  ) {
-    this._loadHtml(
-      route,
-      destroyable,
-      targetElement,
-      (library, id) => `assets/docs/${library}/${id}.html`
-    );
-  }
+import { LoaderBuilder } from './loader-builder';
 
-  loadApiDocumentation(
-    route: ActivatedRoute,
-    destroyable: Observable<void>,
-    targetElement: ElementRef
-  ) {
-    this._loadHtml(
-      route,
-      destroyable,
-      targetElement,
-      (library, id) => `assets/docs/api/${library}-${id}.html`
-    );
-  }
-
-  loadExample(
-    route: ActivatedRoute,
-    destroyable: Observable<void>,
-    targetElement: ElementRef,
-    componentPortal: ComponentPortal<any>,
-    type: 'html' | 'ts' | 'scss'
-  ) {
-    const component = componentPortal.component.name
-      .replace(/Component$/, '.component')
-      .replace(/^([A-Z])/, m => m.toLowerCase())
-      .replace(/([A-Z])/g, m => `-${m.toLowerCase()}`);
-    this._loadHtml(
-      route,
-      destroyable,
-      targetElement,
-      library => `assets/docs/${library}/examples/${component}.${type}.html`
-    );
-  }
+@Injectable({
+  providedIn: 'root'
+})
+export class HtmlLoader {
+  constructor(private _http: HttpClient) {}
 
-  private _loadHtml(
-    route: ActivatedRoute,
-    destroyable: Observable<void>,
-    targetElement: ElementRef,
-    url: (library: string, id?: string) => string
-  ) {
-    combineLatest(route.params, route.data, (p, d) => ({ ...p, ...d }))
-      .pipe(
-        takeUntil(destroyable),
-        switchMap(({ id, library }) => this._http.get(url(library, id), { responseType: 'text' }))
-      )
-      .subscribe(c => this._renderer.setProperty(targetElement.nativeElement, 'innerHTML', c));
+  with(route: ActivatedRoute, renderer: Renderer2) {
+    return new LoaderBuilder(this._http, renderer, route);
   }
 }
diff --git a/projects/angular-showcase/src/app/shared/loader-builder.ts b/projects/angular-showcase/src/app/shared/loader-builder.ts
new file mode 100644
index 0000000000..acffb27b4e
--- /dev/null
+++ b/projects/angular-showcase/src/app/shared/loader-builder.ts
@@ -0,0 +1,52 @@
+import { HttpClient } from '@angular/common/http';
+import { ElementRef, Renderer2 } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { combineLatest, Observable, of } from 'rxjs';
+import { catchError, switchMap, takeUntil } from 'rxjs/operators';
+
+export class LoaderBuilder {
+  private _notifier: Observable<void>;
+  private _urlBuilder: (library: string, id?: string) => string;
+
+  constructor(
+    private _http: HttpClient,
+    private _renderer: Renderer2,
+    private _route: ActivatedRoute
+  ) {}
+
+  until(notifier: Observable<void>) {
+    this._notifier = notifier;
+    return this;
+  }
+
+  from(urlBuilder: (library: string, id?: string) => string) {
+    this._urlBuilder = urlBuilder;
+    return this;
+  }
+
+  fromDocumentation() {
+    return this.from((library, id) => `assets/docs/${library}/${id}.html`);
+  }
+
+  fromApiDocumentation() {
+    return this.from((library, id) => `assets/docs/api/${library}-${id}.html`);
+  }
+
+  fromExamples(example: string, type: 'html' | 'ts' | 'scss') {
+    return this.from(
+      library => `assets/docs/${library}/examples/${example}.component.${type}.html`
+    );
+  }
+
+  applyTo(targetElement: ElementRef) {
+    return combineLatest(this._route.params, this._route.data, (p, d) => ({ ...p, ...d }))
+      .pipe(
+        takeUntil(this._notifier),
+        switchMap(({ id, library }) =>
+          this._http.get(this._urlBuilder(library, id), { responseType: 'text' })
+        ),
+        catchError(() => of(''))
+      )
+      .subscribe(c => this._renderer.setProperty(targetElement.nativeElement, 'innerHTML', c));
+  }
+}
diff --git a/projects/angular-showcase/src/app/shared/markdown-viewer/markdown-viewer.component.ts b/projects/angular-showcase/src/app/shared/markdown-viewer/markdown-viewer.component.ts
index 758a09ed9b..cd9a106f6c 100644
--- a/projects/angular-showcase/src/app/shared/markdown-viewer/markdown-viewer.component.ts
+++ b/projects/angular-showcase/src/app/shared/markdown-viewer/markdown-viewer.component.ts
@@ -1,4 +1,11 @@
-import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  OnDestroy,
+  Renderer2,
+  ViewChild
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subject } from 'rxjs';
 
@@ -13,10 +20,18 @@ export class MarkdownViewerComponent implements AfterViewInit, OnDestroy {
   @ViewChild('content', { static: true, read: ElementRef }) content: ElementRef<any>;
   private _destroyed = new Subject<void>();
 
-  constructor(private _htmlLoader: HtmlLoader, private _route: ActivatedRoute) {}
+  constructor(
+    private _htmlLoader: HtmlLoader,
+    private _route: ActivatedRoute,
+    private _renderer: Renderer2
+  ) {}
 
   ngAfterViewInit(): void {
-    this._htmlLoader.loadDocumentation(this._route, this._destroyed, this.content);
+    this._htmlLoader
+      .with(this._route, this._renderer)
+      .until(this._destroyed)
+      .fromDocumentation()
+      .applyTo(this.content);
   }
 
   ngOnDestroy(): void {
diff --git a/projects/angular-showcase/src/styles.scss b/projects/angular-showcase/src/styles.scss
index ee56891b99..f42c2c901a 100644
--- a/projects/angular-showcase/src/styles.scss
+++ b/projects/angular-showcase/src/styles.scss
@@ -78,6 +78,10 @@ code {
   padding: 3px;
 }
 
+pre code {
+  padding: 0;
+}
+
 .content h4 {
   margin-bottom: 0.5rem;
 }
diff --git a/schematics/collection.json b/schematics/collection.json
index 29b5b2a347..099c053fa5 100644
--- a/schematics/collection.json
+++ b/schematics/collection.json
@@ -5,6 +5,10 @@
       "description": "Generate documentation for the showcase.",
       "factory": "./documentation/index#documentation"
     },
+    "example-migration": {
+      "description": "Mirate examples",
+      "factory": "./example-migration/index#exampleMigration"
+    },
     "public2business": {
       "description": "Copy public components to business",
       "factory": "./public2business/index#public2business"
diff --git a/schematics/example-migration/index.js b/schematics/example-migration/index.js
new file mode 100644
index 0000000000..3f73e84443
--- /dev/null
+++ b/schematics/example-migration/index.js
@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@angular-devkit/core');
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function exampleMigration(_options) {
+    return (tree, _context) => __awaiter(this, void 0, void 0, function* () {
+        const examples = tree.getDir('projects/angular-showcase/src/app/public/examples');
+        const targetDir = tree.getDir('projects/angular-showcase/src/app/public/public-examples');
+        const moduleFile = targetDir.file(core.fragment('public-examples.module.ts'));
+        // tslint:disable-next-line: no-non-null-assertion
+        let moduleContent = moduleFile.content.toString('utf8');
+        for (const dir of examples.subdirs) {
+            const directory = examples.dir(dir);
+            const renamed = `simple-${dir.replace('-showcase', '')}-example`;
+            directory.visit((path, entry) => {
+                if (entry) {
+                    const rel = core.relative(directory.path, path).replace(dir, renamed);
+                    const originalComponentName = componentName(dir);
+                    const renamedComponentName = componentName(renamed);
+                    const content = entry.content
+                        .toString('utf8')
+                        .replace(new RegExp(dir, 'g'), renamed)
+                        .replace(originalComponentName, renamedComponentName);
+                    const target = core.join(targetDir.path, renamed, rel);
+                    if (tree.exists(target)) {
+                        tree.overwrite(target, content);
+                    }
+                    else {
+                        tree.create(target, content);
+                        moduleContent = moduleContent
+                            .replace(`${dir}/${dir}.component`, `${renamed}/${renamed}.component`)
+                            .replace(new RegExp(originalComponentName, 'g'), renamedComponentName);
+                    }
+                }
+            });
+        }
+        // tslint:disable-next-line: no-non-null-assertion
+        tree.overwrite(moduleFile.path, moduleContent);
+    });
+}
+function componentName(name) {
+    const pascalCase = name.replace(/(^[a-z]|-[a-z])/g, m => m.replace('-', '').toUpperCase());
+    return `${pascalCase}Component`;
+}
+
+exports.exampleMigration = exampleMigration;
diff --git a/schematics/example-migration/index.ts b/schematics/example-migration/index.ts
new file mode 100644
index 0000000000..495357cb60
--- /dev/null
+++ b/schematics/example-migration/index.ts
@@ -0,0 +1,44 @@
+import { fragment, join, relative } from '@angular-devkit/core';
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+
+export function exampleMigration(_options: any): Rule {
+  return async (tree: Tree, _context: SchematicContext) => {
+    const examples = tree.getDir('projects/angular-showcase/src/app/public/examples');
+    const targetDir = tree.getDir('projects/angular-showcase/src/app/public/public-examples');
+    const moduleFile = targetDir.file(fragment('public-examples.module.ts'));
+    // tslint:disable-next-line: no-non-null-assertion
+    let moduleContent = moduleFile!.content.toString('utf8');
+    for (const dir of examples.subdirs) {
+      const directory = examples.dir(dir);
+      const renamed = `simple-${dir.replace('-showcase', '')}-example`;
+      directory.visit((path, entry) => {
+        if (entry) {
+          const rel = relative(directory.path, path).replace(dir, renamed);
+          const originalComponentName = componentName(dir);
+          const renamedComponentName = componentName(renamed);
+          const content = entry.content
+            .toString('utf8')
+            .replace(new RegExp(dir, 'g'), renamed)
+            .replace(originalComponentName, renamedComponentName);
+          const target = join(targetDir.path, renamed, rel);
+          if (tree.exists(target)) {
+            tree.overwrite(target, content);
+          } else {
+            tree.create(target, content);
+            moduleContent = moduleContent
+              .replace(`${dir}/${dir}.component`, `${renamed}/${renamed}.component`)
+              .replace(new RegExp(originalComponentName, 'g'), renamedComponentName);
+          }
+        }
+      });
+    }
+
+    // tslint:disable-next-line: no-non-null-assertion
+    tree.overwrite(moduleFile!.path, moduleContent);
+  };
+}
+
+function componentName(name: string) {
+  const pascalCase = name.replace(/(^[a-z]|-[a-z])/g, m => m.replace('-', '').toUpperCase());
+  return `${pascalCase}Component`;
+}
diff --git a/schematics/rollup.config.js b/schematics/rollup.config.js
index 198e35ce6c..ce4d407f6f 100644
--- a/schematics/rollup.config.js
+++ b/schematics/rollup.config.js
@@ -1,7 +1,12 @@
 import typescript from 'rollup-plugin-typescript2';
 import { join } from 'path';
 
-export default ['documentation', 'generate-icon-modules', 'public2business'].map(directory => ({
+export default [
+  'documentation',
+  'example-migration',
+  'generate-icon-modules',
+  'public2business'
+].map(directory => ({
   input: join(__dirname, directory, 'index.ts'),
   output: {
     file: join(__dirname, directory, 'index.js'),
@@ -30,7 +35,7 @@ export default ['documentation', 'generate-icon-modules', 'public2business'].map
     typescript({
       tsconfig: join(__dirname, 'tsconfig.json'),
       //useTsconfigDeclarationDir: true,
-      cacheRoot: `${require('os').tmpdir()}/.rpt2_cache_sbb_angular_schematics_${directory}`
+      cacheRoot: `${require('os').tmpdir()}/.rpt2_csas_${directory}`
     })
   ]
 }));