From 3eb9e2dacc36c38bc4452c75a4311f75e47a4c9a Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Thu, 11 Jul 2024 09:14:50 +0200
Subject: [PATCH 1/2] fix: issue with angular build missing package.json

---
 .github/workflows/01-build-stencil-targets.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/01-build-stencil-targets.yml b/.github/workflows/01-build-stencil-targets.yml
index bffbcad98..893def202 100644
--- a/.github/workflows/01-build-stencil-targets.yml
+++ b/.github/workflows/01-build-stencil-targets.yml
@@ -32,6 +32,7 @@ jobs:
         run: |
           if echo ${{ matrix.targets }} | grep -c "ngx-elements"
           then
+            cat ./packages/db-ui-elements-angular/dist/lib/package.json
             echo "framework=angular" >> $GITHUB_OUTPUT
           elif echo ${{ matrix.targets }} | grep -c "react-elements"
           then

From 82987712e5286912aeeff3f296da808ab7cf7e95 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Fri, 12 Jul 2024 14:13:09 +0200
Subject: [PATCH 2/2] feat: convert angular output to standalone

---
 .../projects/lib/src/config.testing.ts        |  24 ----
 .../projects/lib/src/db-ui-elements-module.ts | 102 -----------------
 .../projects/lib/src/index.ts                 |   3 -
 .../projects/lib/src/jestGlobalMocks.ts       |  40 -------
 .../projects/lib/src/public_api.ts            |   9 --
 .../db-mainnavigation/db-mainnavigation.tsx   |  65 ++++++++---
 .../components/db-sidenavi/db-sidenavi.tsx    |   4 +-
 .../src/components/db-table/db-table.tsx      |   2 +-
 .../db-ui-elements-stencil/stencil.config.ts  |   9 +-
 .../src/app/app.component.ts                  |   3 +-
 .../src/app/app.module.ts                     |   4 +-
 showcase/angular-lts-showcase/angular.json    |  96 +++++++---------
 .../src/app/app.component.html                |  11 +-
 .../src/app/app.component.ts                  |  42 +++++--
 .../src/app/app.module.ts                     |  35 ------
 .../src/app/app.routing.module.ts             |  25 ++---
 .../app/components/form/form.component.html   |  22 ++--
 .../src/app/components/form/form.component.ts |  42 +++++--
 .../navigation/navigation.component.html      |  12 +-
 .../navigation/navigation.component.ts        |   9 +-
 .../other-components.component.html           |  40 +++----
 .../other-components.component.ts             |  21 +++-
 .../other-elements.component.ts               |  13 ++-
 .../components/tab-bar/tab-bar.component.ts   |  21 +++-
 .../app/components/tables/tables.component.ts |  12 +-
 showcase/angular-lts-showcase/src/main.ts     |  20 ++--
 .../angular-lts-showcase/tsconfig.app.json    |   9 +-
 .../angular-lts-showcase/tsconfig.base.json   |  17 ---
 showcase/angular-lts-showcase/tsconfig.json   |  43 +++++---
 .../angular-lts-showcase/tsconfig.spec.json   |  12 --
 showcase/angular-lts-showcase/tslint.json     | 104 ------------------
 31 files changed, 332 insertions(+), 539 deletions(-)
 delete mode 100644 packages/db-ui-elements-angular/projects/lib/src/config.testing.ts
 delete mode 100644 packages/db-ui-elements-angular/projects/lib/src/db-ui-elements-module.ts
 delete mode 100644 packages/db-ui-elements-angular/projects/lib/src/jestGlobalMocks.ts
 delete mode 100644 packages/db-ui-elements-angular/projects/lib/src/public_api.ts
 delete mode 100644 showcase/angular-lts-showcase/src/app/app.module.ts
 delete mode 100644 showcase/angular-lts-showcase/tsconfig.base.json
 delete mode 100644 showcase/angular-lts-showcase/tsconfig.spec.json
 delete mode 100644 showcase/angular-lts-showcase/tslint.json

diff --git a/packages/db-ui-elements-angular/projects/lib/src/config.testing.ts b/packages/db-ui-elements-angular/projects/lib/src/config.testing.ts
deleted file mode 100644
index 5138c7719..000000000
--- a/packages/db-ui-elements-angular/projects/lib/src/config.testing.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-type CompilerOptions = Partial<{
-  providers: any[];
-  useJit: boolean;
-  preserveWhitespaces: boolean;
-}>;
-export type ConfigureFn = (testBed: typeof TestBed) => void;
-
-export const configureTests = (
-  configure: ConfigureFn,
-  compilerOptions: CompilerOptions = {}
-) => {
-  const compilerConfig: CompilerOptions = {
-    preserveWhitespaces: false,
-    ...compilerOptions
-  };
-
-  const configuredTestBed = TestBed.configureCompiler(compilerConfig);
-
-  configure(configuredTestBed);
-
-  return configuredTestBed.compileComponents().then(() => configuredTestBed);
-};
diff --git a/packages/db-ui-elements-angular/projects/lib/src/db-ui-elements-module.ts b/packages/db-ui-elements-angular/projects/lib/src/db-ui-elements-module.ts
deleted file mode 100644
index 841552b7a..000000000
--- a/packages/db-ui-elements-angular/projects/lib/src/db-ui-elements-module.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { defineCustomElements } from '@db-ui/elements/loader';
-
-import { BooleanValueAccessor } from './boolean-value-accessor';
-import {
-  DbBrand,
-  DbBreadcrumb,
-  DbButton,
-  DbChip,
-  DbCheckbox,
-  DbDropdown,
-  DbAccordion,
-  DbFooter,
-  DbHeader,
-  DbIcon,
-  DbImage,
-  DbInput,
-  DbLink,
-  DbLinklist,
-  DbLogo,
-  DbMeta,
-  DbMetanavigation,
-  DbOverflowMenu,
-  DbPage,
-  DbProgress,
-  DbRadio,
-  DbSelect,
-  DbSidenavi,
-  DbTabBar,
-  DbTable,
-  DbTag,
-  DbTextarea,
-  DbToggle,
-  DbPagination,
-  DbCards,
-  DbCard,
-  DbTab,
-  DbHeadline,
-  DbLanguageSwitcher,
-  DbMainnavigation,
-  DbNotification,
-  DbNotifications
-} from './components';
-import { SelectValueAccessor } from './select-value-accessor';
-import { TextValueAccessor } from './text-value-accessor';
-
-defineCustomElements(window);
-
-const DECLARATIONS = [
-  // proxies
-  DbBrand,
-  DbBreadcrumb,
-  DbButton,
-  DbCard,
-  DbCards,
-  DbChip,
-  DbCheckbox,
-  DbDropdown,
-  DbAccordion,
-  DbFooter,
-  DbHeader,
-  DbHeadline,
-  DbIcon,
-  DbImage,
-  DbInput,
-  DbLanguageSwitcher,
-  DbLink,
-  DbLinklist,
-  DbLogo,
-  DbMainnavigation,
-  DbMeta,
-  DbMetanavigation,
-  DbNotification,
-  DbNotifications,
-  DbOverflowMenu,
-  DbPage,
-  DbPagination,
-  DbProgress,
-  DbRadio,
-  DbSelect,
-  DbSidenavi,
-  DbTab,
-  DbTabBar,
-  DbTable,
-  DbTag,
-  DbTextarea,
-  DbToggle,
-
-  // Value Accessors
-  BooleanValueAccessor,
-  SelectValueAccessor,
-  TextValueAccessor
-];
-
-@NgModule({
-  declarations: DECLARATIONS,
-  exports: DECLARATIONS,
-  imports: [],
-  providers: [],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class DBUIElementsModule {}
diff --git a/packages/db-ui-elements-angular/projects/lib/src/index.ts b/packages/db-ui-elements-angular/projects/lib/src/index.ts
index 85ce3d295..2db7acc71 100644
--- a/packages/db-ui-elements-angular/projects/lib/src/index.ts
+++ b/packages/db-ui-elements-angular/projects/lib/src/index.ts
@@ -10,6 +10,3 @@ export * from './text-value-accessor';
 export * from './select-value-accessor';
 export * from './value-accessor';
 export * from './index';
-
-// PACKAGE MODULE
-export { DBUIElementsModule } from './db-ui-elements-module';
diff --git a/packages/db-ui-elements-angular/projects/lib/src/jestGlobalMocks.ts b/packages/db-ui-elements-angular/projects/lib/src/jestGlobalMocks.ts
deleted file mode 100644
index 487896f63..000000000
--- a/packages/db-ui-elements-angular/projects/lib/src/jestGlobalMocks.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-Object.defineProperty(window, 'CSS', { value: null });
-Object.defineProperty(document, 'doctype', {
-  value: '<!DOCTYPE html>'
-});
-Object.defineProperty(window, 'getComputedStyle', {
-  value: () => {
-    return {
-      display: 'none',
-      appearance: ['-webkit-appearance']
-    };
-  }
-});
-/**
- * ISSUE: https://github.com/angular/material2/issues/7101
- * Workaround for JSDOM missing transform property
- */
-Object.defineProperty(document.body.style, 'transform', {
-  value: () => {
-    return {
-      enumerable: true,
-      configurable: true
-    };
-  }
-});
-
-window.matchMedia =
-  window.matchMedia ||
-  (function () {
-    return {
-      matches: false,
-      addListener() {},
-      removeListener() {}
-    };
-  } as any);
-
-(window as any).CSSStyleSheet = class {
-  constructor() {
-    throw Error();
-  }
-} as any;
diff --git a/packages/db-ui-elements-angular/projects/lib/src/public_api.ts b/packages/db-ui-elements-angular/projects/lib/src/public_api.ts
deleted file mode 100644
index 8dbcfd7c9..000000000
--- a/packages/db-ui-elements-angular/projects/lib/src/public_api.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * Public API Surface of lib
- */
-
-export * from './boolean-value-accessor';
-export * from './text-value-accessor';
-export * from './select-value-accessor';
-export * from './value-accessor';
-export * from './index';
diff --git a/packages/db-ui-elements-stencil/src/components/db-mainnavigation/db-mainnavigation.tsx b/packages/db-ui-elements-stencil/src/components/db-mainnavigation/db-mainnavigation.tsx
index 6aeb495a8..ec5630c8c 100644
--- a/packages/db-ui-elements-stencil/src/components/db-mainnavigation/db-mainnavigation.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-mainnavigation/db-mainnavigation.tsx
@@ -99,6 +99,33 @@ const addAreaPopupsRecursive = (children: Element[]) => {
   styleUrl: 'db-mainnavigation.scss'
 })
 export class DbMainnavigation {
+  get onlyLinks(): DbMainnavigationItemType[] {
+    return this._onlyLinks;
+  }
+
+  set onlyLinks(value: DbMainnavigationItemType[]) {
+    this._onlyLinks = value;
+  }
+  get hasItemsWrapper(): boolean {
+    return this._hasItemsWrapper;
+  }
+
+  set hasItemsWrapper(value: boolean) {
+    this._hasItemsWrapper = value;
+  }
+  get compData(): DbMainnavigationDataType[] {
+    return this._compData;
+  }
+
+  set compData(value: DbMainnavigationDataType[]) {
+    this._compData = value;
+  }
+  set children(value: Element[]) {
+    this._children = value;
+  }
+  get children(): Element[] {
+    return this._children;
+  }
   /**
    * The site-name attribute can be set to have the site name for small screens.
    */
@@ -109,24 +136,26 @@ export class DbMainnavigation {
    */
   @Prop({ reflect: true }) data?: string;
 
-  private hasItemsWrapper: boolean;
+  private _hasItemsWrapper: boolean;
 
-  private compData: DbMainnavigationDataType[];
+  private _compData: DbMainnavigationDataType[];
 
-  private children: Element[];
-  private onlyLinks: DbMainnavigationItemType[];
+  private _children: Element[];
+  private _onlyLinks: DbMainnavigationItemType[];
 
   @Element() host: HTMLDbMainnavigationElement;
 
   componentWillLoad() {
     if (this.data) {
-      this.compData = parseData(this.data);
-    } else {
-      this.children = Array.from(this.host.children);
-      this.onlyLinks = setupOnlyDbLinkNavigation(this.children);
-      if (this.children.find((child) => child.tagName.toLowerCase() === 'li')) {
-        this.hasItemsWrapper = true;
-        addAreaPopupsRecursive(this.children);
+      this._compData = parseData(this.data);
+    } else if (this.host) {
+      this._children = Array.from(this.host.children);
+      this._onlyLinks = setupOnlyDbLinkNavigation(this._children);
+      if (
+        this._children.find((child) => child.tagName.toLowerCase() === 'li')
+      ) {
+        this._hasItemsWrapper = true;
+        addAreaPopupsRecursive(this._children);
       } else {
         this.host.innerHTML = '';
       }
@@ -144,19 +173,19 @@ export class DbMainnavigation {
         >
           {this.siteName}
         </label>
-        {this.compData && <ul innerHTML={getCompDataHtml(this.compData)} />}
-        {!this.compData && (
+        {this._compData && <ul innerHTML={getCompDataHtml(this._compData)} />}
+        {!this._compData && (
           <ul>
-            {this.onlyLinks && getJsxLinks(this.onlyLinks)}
-            {!this.hasItemsWrapper &&
-              !this.onlyLinks &&
-              this.children.map((child, index) => (
+            {this._onlyLinks && getJsxLinks(this._onlyLinks)}
+            {!this._hasItemsWrapper &&
+              !this._onlyLinks &&
+              this._children?.map((child, index) => (
                 <li
                   key={`cmp-mainnavigation-item-${index}`}
                   innerHTML={child.outerHTML}
                 />
               ))}
-            {this.hasItemsWrapper && <slot />}
+            {this._hasItemsWrapper && <slot />}
           </ul>
         )}
       </nav>
diff --git a/packages/db-ui-elements-stencil/src/components/db-sidenavi/db-sidenavi.tsx b/packages/db-ui-elements-stencil/src/components/db-sidenavi/db-sidenavi.tsx
index 3a1965e5e..a6f6fca4d 100644
--- a/packages/db-ui-elements-stencil/src/components/db-sidenavi/db-sidenavi.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-sidenavi/db-sidenavi.tsx
@@ -48,7 +48,7 @@ export class DbSidenavi {
       this.compData = parseData(this.data);
     } else {
       addIconVariantToAllDbLinksRecursive(this.host, '32-outline');
-      this._children = Array.from(this.host.children);
+      this._children = Array.from(this.host?.children);
       if (this.children.find((child) => child.tagName.toLowerCase() === 'li')) {
         this.hasItemsWrapper = true;
       } else {
@@ -64,7 +64,7 @@ export class DbSidenavi {
         {!this.compData && (
           <ol>
             {!this.hasItemsWrapper &&
-              this._children.map((child, index) => (
+              this._children?.map((child, index) => (
                 <li
                   key={`sidenavi-item-${index}`}
                   innerHTML={child.outerHTML}
diff --git a/packages/db-ui-elements-stencil/src/components/db-table/db-table.tsx b/packages/db-ui-elements-stencil/src/components/db-table/db-table.tsx
index f009edd10..245b8a604 100644
--- a/packages/db-ui-elements-stencil/src/components/db-table/db-table.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-table/db-table.tsx
@@ -156,7 +156,7 @@ export class DbTable {
   }
 
   private isRowData(tableData) {
-    return !!Array.isArray(tableData.rows);
+    return !!Array.isArray(tableData?.rows);
   }
 
   render() {
diff --git a/packages/db-ui-elements-stencil/stencil.config.ts b/packages/db-ui-elements-stencil/stencil.config.ts
index e7161374c..5a7a1f61c 100644
--- a/packages/db-ui-elements-stencil/stencil.config.ts
+++ b/packages/db-ui-elements-stencil/stencil.config.ts
@@ -77,11 +77,16 @@ export const config: Config = {
   taskQueue: 'async',
   hashFileNames: isNotWatching(),
   outputTargets: [
+    {
+      type: 'dist-custom-elements',
+      customElementsExportBehavior: 'single-export-module'
+    },
     angularOutputTarget({
-      componentCorePackage: '@db-ui/elements',
+      componentCorePackage: '@db-ui/elements/dist',
       directivesProxyFile:
         '../db-ui-elements-angular/projects/lib/src/components.ts',
-      valueAccessorConfigs: angularValueAccessorBindings
+      valueAccessorConfigs: angularValueAccessorBindings,
+      outputType: 'standalone'
     }),
     reactOutputTarget({
       componentCorePackage: '@db-ui/elements',
diff --git a/showcase/angular-active-showcase/src/app/app.component.ts b/showcase/angular-active-showcase/src/app/app.component.ts
index 60bec4b02..b6157e20e 100644
--- a/showcase/angular-active-showcase/src/app/app.component.ts
+++ b/showcase/angular-active-showcase/src/app/app.component.ts
@@ -5,7 +5,8 @@ import { isAreaCurrent, NAVIGATION_ITEMS } from './utils/navigation-item';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  standalone: true
 })
 export class AppComponent implements OnInit {
   title = 'angular-active-showcase';
diff --git a/showcase/angular-active-showcase/src/app/app.module.ts b/showcase/angular-active-showcase/src/app/app.module.ts
index 2eae94ad1..3c1c0a580 100644
--- a/showcase/angular-active-showcase/src/app/app.module.ts
+++ b/showcase/angular-active-showcase/src/app/app.module.ts
@@ -10,7 +10,7 @@ import { OtherElementsComponent } from './components/other-elements/other-elemen
 import { TabBarComponent } from './components/tab-bar/tab-bar.component';
 import { TablesComponent } from './components/tables/tables.component';
 import { AppRoutingModule } from './app.routing.module';
-import { DBUIElementsModule } from '../../../../packages/db-ui-elements-angular/projects/lib/src';
+import { DbButton } from '../../../../packages/db-ui-elements-angular/projects/lib/src';
 
 @NgModule({
   declarations: [
@@ -27,7 +27,7 @@ import { DBUIElementsModule } from '../../../../packages/db-ui-elements-angular/
     ReactiveFormsModule,
     FormsModule,
     AppRoutingModule,
-    DBUIElementsModule
+    DbButton
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/showcase/angular-lts-showcase/angular.json b/showcase/angular-lts-showcase/angular.json
index 2bbd71b7d..a792619dd 100644
--- a/showcase/angular-lts-showcase/angular.json
+++ b/showcase/angular-lts-showcase/angular.json
@@ -3,97 +3,83 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "angular-lts-showcase": {
+    "angular-showcase": {
       "projectType": "application",
-      "schematics": {},
+      "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/angular-lts-showcase",
+            "deleteOutputPath": false,
+            "outputPath": {
+              "browser": "angular-lts-showcase",
+              "base": ".dist/angular-lts-showcase"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": ["src/assets"],
             "styles": ["src/styles.css"],
-            "scripts": []
+            "scripts": [],
+            "preserveSymlinks": true,
+            "browser": "src/main.ts",
+            "extractLicenses": false
           },
           "configurations": {
             "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "2mb",
+                  "maximumWarning": "500kb",
                   "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "10kb",
+                  "maximumError": "20kb"
                 }
-              ]
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true,
+              "outputHashing": "media"
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "buildTarget": "angular-lts-showcase:build"
-          },
           "configurations": {
             "production": {
-              "buildTarget": "angular-lts-showcase:build:production"
+              "buildTarget": "angular-showcase:build:production"
+            },
+            "development": {
+              "buildTarget": "angular-showcase:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "buildTarget": "angular-lts-showcase:build"
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": ["**/node_modules/**"]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "angular-lts-showcase:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "angular-lts-showcase:serve:production"
-            }
+            "buildTarget": "angular-showcase:build"
           }
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }
diff --git a/showcase/angular-lts-showcase/src/app/app.component.html b/showcase/angular-lts-showcase/src/app/app.component.html
index 8fdb1f897..9767390cc 100644
--- a/showcase/angular-lts-showcase/src/app/app.component.html
+++ b/showcase/angular-lts-showcase/src/app/app.component.html
@@ -6,12 +6,11 @@
     <db-mainnavigation>
       <db-link href="/" current="page">
         Pages
-        <db-link
-          *ngFor="let item of navigationItems; index as i"
-          [attr.current]="isAria(i)"
-        >
-          <a [routerLink]="item.link">{{ item.label }}</a>
-        </db-link>
+        @for (item of navigationItems; track item; let i = $index) {
+          <db-link [attr.current]="isAria(i)">
+            <a [routerLink]="item.link">{{ item.label }}</a>
+          </db-link>
+        }
       </db-link>
     </db-mainnavigation>
     <div></div>
diff --git a/showcase/angular-lts-showcase/src/app/app.component.ts b/showcase/angular-lts-showcase/src/app/app.component.ts
index d808d94e3..3c5a6ddb7 100644
--- a/showcase/angular-lts-showcase/src/app/app.component.ts
+++ b/showcase/angular-lts-showcase/src/app/app.component.ts
@@ -1,22 +1,50 @@
 import { Component, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { isAreaCurrent, NAVIGATION_ITEMS } from './utils/navigation-item';
+import {
+  DbButton,
+  DbCheckbox,
+  DbPage,
+  DbLink,
+  DbHeader,
+  DbMainnavigation,
+  DbFooter,
+  DbBrand
+} from '../../../../packages/db-ui-elements-angular/projects/lib/src';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  standalone: true,
+
+  imports: [
+    ReactiveFormsModule,
+    FormsModule,
+    DbButton,
+    DbCheckbox,
+    DbPage,
+    DbLink,
+    DbHeader,
+    DbMainnavigation,
+    DbFooter,
+    DbBrand,
+    RouterOutlet,
+    RouterLink
+  ]
 })
 export class AppComponent implements OnInit {
   title = 'angular-lts-showcase';
   navigationItems = NAVIGATION_ITEMS;
   isAria = isAreaCurrent;
 
-  input: string;
-  checkbox: boolean;
-  radio: string;
-  select: string;
-  textarea: string;
+  input: string = '';
+  checkbox: boolean | null = false;
+  radio: string = '';
+  select: string | null = '';
+  textarea: string | null = '';
+  toggle: boolean = false;
 
   checkboxControl = new FormControl<boolean>(false, { nonNullable: false });
   radioControl = new FormControl<string>('', { nonNullable: true });
diff --git a/showcase/angular-lts-showcase/src/app/app.module.ts b/showcase/angular-lts-showcase/src/app/app.module.ts
deleted file mode 100644
index 2eae94ad1..000000000
--- a/showcase/angular-lts-showcase/src/app/app.module.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { FormComponent } from './components/form/form.component';
-import { NavigationComponent } from './components/navigation/navigation.component';
-import { OtherComponentsComponent } from './components/other-components/other-components.component';
-import { OtherElementsComponent } from './components/other-elements/other-elements.component';
-import { TabBarComponent } from './components/tab-bar/tab-bar.component';
-import { TablesComponent } from './components/tables/tables.component';
-import { AppRoutingModule } from './app.routing.module';
-import { DBUIElementsModule } from '../../../../packages/db-ui-elements-angular/projects/lib/src';
-
-@NgModule({
-  declarations: [
-    AppComponent,
-    FormComponent,
-    NavigationComponent,
-    OtherComponentsComponent,
-    OtherElementsComponent,
-    TabBarComponent,
-    TablesComponent
-  ],
-  imports: [
-    BrowserModule,
-    ReactiveFormsModule,
-    FormsModule,
-    AppRoutingModule,
-    DBUIElementsModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule {}
diff --git a/showcase/angular-lts-showcase/src/app/app.routing.module.ts b/showcase/angular-lts-showcase/src/app/app.routing.module.ts
index 2d014e0a8..7491e0d99 100644
--- a/showcase/angular-lts-showcase/src/app/app.routing.module.ts
+++ b/showcase/angular-lts-showcase/src/app/app.routing.module.ts
@@ -1,5 +1,4 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import { Routes } from '@angular/router';
 import { TabBarComponent } from './components/tab-bar/tab-bar.component';
 import { FormComponent } from './components/form/form.component';
 import { OtherElementsComponent } from './components/other-elements/other-elements.component';
@@ -7,17 +6,15 @@ import { OtherComponentsComponent } from './components/other-components/other-co
 import { NavigationComponent } from './components/navigation/navigation.component';
 import { TablesComponent } from './components/tables/tables.component';
 
-const routes: Routes = [
-  { path: 'form', component: FormComponent },
-  { path: 'elements', component: OtherElementsComponent },
-  { path: 'components', component: OtherComponentsComponent },
-  { path: 'navigation', component: NavigationComponent },
-  { path: 'tables', component: TablesComponent },
+export const routes: Routes = [
+  { path: 'form', component: FormComponent, pathMatch: 'full' },
+  { path: 'elements', component: OtherElementsComponent, pathMatch: 'full' },
+  {
+    path: 'components',
+    component: OtherComponentsComponent,
+    pathMatch: 'full'
+  },
+  { path: 'navigation', component: NavigationComponent, pathMatch: 'full' },
+  { path: 'tables', component: TablesComponent, pathMatch: 'full' },
   { path: '', component: TabBarComponent, pathMatch: 'full' }
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes, { useHash: true })],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
diff --git a/showcase/angular-lts-showcase/src/app/components/form/form.component.html b/showcase/angular-lts-showcase/src/app/components/form/form.component.html
index b00c3f691..79d3f849b 100644
--- a/showcase/angular-lts-showcase/src/app/components/form/form.component.html
+++ b/showcase/angular-lts-showcase/src/app/components/form/form.component.html
@@ -16,14 +16,20 @@
         ></db-checkbox>
         <p>DbRadio:</p>
         <ol>
-          <li *ngFor="let radioButton of radioButtons; index as i">
-            <db-radio
-              [label]="radioButton"
-              name="radio-name"
-              [formControl]="radioControl"
-              [value]="radioButton"
-            ></db-radio>
-          </li>
+          @for (
+            radioButton of radioButtons;
+            track radioButton;
+            let i = $index
+          ) {
+            <li>
+              <db-radio
+                [label]="radioButton"
+                name="radio-name"
+                [formControl]="radioControl"
+                [value]="radioButton"
+              ></db-radio>
+            </li>
+          }
         </ol>
         <p>DbSelect:</p>
         <db-select
diff --git a/showcase/angular-lts-showcase/src/app/components/form/form.component.ts b/showcase/angular-lts-showcase/src/app/components/form/form.component.ts
index e00dee899..69aa7fc24 100644
--- a/showcase/angular-lts-showcase/src/app/components/form/form.component.ts
+++ b/showcase/angular-lts-showcase/src/app/components/form/form.component.ts
@@ -1,18 +1,42 @@
 import { Component, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {
+  DbButton,
+  DbInput,
+  DbCheckbox,
+  DbRadio,
+  DbTextarea,
+  DbSelect,
+  DbToggle,
+  DbSidenavi
+} from '../../../../../../packages/db-ui-elements-angular/projects/lib/src';
+import { NAVIGATION_ITEMS } from '../../utils/navigation-item';
 
 @Component({
   selector: 'app-form',
   templateUrl: './form.component.html',
-  styleUrls: ['./form.component.css']
+  styleUrls: ['./form.component.css'],
+  standalone: true,
+  imports: [
+    DbButton,
+    DbSelect,
+    DbInput,
+    DbRadio,
+    DbCheckbox,
+    DbTextarea,
+    DbToggle,
+    FormsModule,
+    ReactiveFormsModule,
+    DbSidenavi
+  ]
 })
 export class FormComponent implements OnInit {
-  input: string;
-  checkbox: boolean;
-  radio: string;
-  select: string;
-  textarea: string;
-  toggle: boolean;
+  input: string = '';
+  checkbox: boolean | null = false;
+  radio: string = '';
+  select: string | null = '';
+  textarea: string | null = '';
+  toggle: boolean = false;
 
   checkboxControl = new FormControl<boolean>(false, { nonNullable: false });
   radioControl = new FormControl<string>('', { nonNullable: true });
@@ -44,4 +68,6 @@ export class FormComponent implements OnInit {
       })
     );
   }
+
+  protected readonly navigationItems = NAVIGATION_ITEMS;
 }
diff --git a/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.html b/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.html
index a950683b8..c1d9a6db2 100644
--- a/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.html
+++ b/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.html
@@ -1,12 +1,10 @@
 <div>
   <p>DbSidenavi:</p>
   <db-sidenavi>
-    <db-link
-      *ngFor="let item of navigationItems; index as i"
-      [attr.current]="isAria(i)"
-      [attr.icon]="item.icon"
-    >
-      <a [routerLink]="item.link">{{ item.label }}</a>
-    </db-link>
+    @for (item of navigationItems; track item; let i = $index) {
+      <db-link [attr.current]="isAria(i)" [attr.icon]="item.icon">
+        <a [routerLink]="item.link">{{ item.label }}</a>
+      </db-link>
+    }
   </db-sidenavi>
 </div>
diff --git a/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.ts b/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.ts
index 80e7c0e0e..e14597f6d 100644
--- a/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.ts
+++ b/showcase/angular-lts-showcase/src/app/components/navigation/navigation.component.ts
@@ -1,9 +1,16 @@
 import { Component } from '@angular/core';
 import { isAreaCurrent, NAVIGATION_ITEMS } from '../../utils/navigation-item';
+import {
+  DbLink,
+  DbSidenavi
+} from '../../../../../../packages/db-ui-elements-angular/projects/lib/src';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-navigation',
-  templateUrl: './navigation.component.html'
+  templateUrl: './navigation.component.html',
+  standalone: true,
+  imports: [DbSidenavi, DbLink, RouterLink]
 })
 export class NavigationComponent {
   navigationItems = NAVIGATION_ITEMS;
diff --git a/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.html b/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.html
index d52f25eea..c24c03041 100644
--- a/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.html
+++ b/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.html
@@ -16,23 +16,25 @@
   <db-button variant="primary" (click)="notification = true">
     Open Notification!
   </db-button>
-  <db-notifications *ngIf="notification" variant="hovering">
-    <db-notification type="success">
-      <db-icon
-        icon="account"
-        slot="prenotification"
-        variant="20-outline"
-      ></db-icon>
-      success: Lorem ipsum dolor sit amet, consectetur adipisicing elit
-      <db-icon
-        icon="close"
-        slot="postnotification"
-        variant="20-outline"
-        (keypress)="notification = false"
-        (click)="notification = false"
-        tabindex="0"
-        role="button"
-      ></db-icon>
-    </db-notification>
-  </db-notifications>
+  @if (notification) {
+    <db-notifications variant="hovering">
+      <db-notification type="success">
+        <db-icon
+          icon="account"
+          slot="prenotification"
+          variant="20-outline"
+        ></db-icon>
+        success: Lorem ipsum dolor sit amet, consectetur adipisicing elit
+        <db-icon
+          icon="close"
+          slot="postnotification"
+          variant="20-outline"
+          (keypress)="notification = false"
+          (click)="notification = false"
+          tabindex="0"
+          role="button"
+        ></db-icon>
+      </db-notification>
+    </db-notifications>
+  }
 </div>
diff --git a/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.ts b/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.ts
index 3420880ac..bf95303b7 100644
--- a/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.ts
+++ b/showcase/angular-lts-showcase/src/app/components/other-components/other-components.component.ts
@@ -1,10 +1,27 @@
 import { Component } from '@angular/core';
+import {
+  DbLinklist,
+  DbButton,
+  DbNotification,
+  DbNotifications,
+  DbLink,
+  DbIcon
+} from '../../../../../../packages/db-ui-elements-angular/projects/lib/src';
 
 @Component({
   selector: 'app-other-components',
   templateUrl: './other-components.component.html',
-  styleUrls: ['other-components.component.css']
+  styleUrls: ['other-components.component.css'],
+  standalone: true,
+  imports: [
+    DbButton,
+    DbNotification,
+    DbNotifications,
+    DbLink,
+    DbLinklist,
+    DbIcon
+  ]
 })
 export class OtherComponentsComponent {
-  notification: boolean;
+  notification: boolean = false;
 }
diff --git a/showcase/angular-lts-showcase/src/app/components/other-elements/other-elements.component.ts b/showcase/angular-lts-showcase/src/app/components/other-elements/other-elements.component.ts
index 38aaf59db..889bd7a00 100644
--- a/showcase/angular-lts-showcase/src/app/components/other-elements/other-elements.component.ts
+++ b/showcase/angular-lts-showcase/src/app/components/other-elements/other-elements.component.ts
@@ -1,7 +1,18 @@
 import { Component } from '@angular/core';
+import {
+  DbIcon,
+  DbChip,
+  DbTag,
+  DbProgress,
+  DbImage,
+  DbLogo,
+  DbLink
+} from '../../../../../../packages/db-ui-elements-angular/projects/lib/src';
 
 @Component({
   selector: 'app-other-elements',
-  templateUrl: './other-elements.component.html'
+  templateUrl: './other-elements.component.html',
+  standalone: true,
+  imports: [DbIcon, DbChip, DbTag, DbProgress, DbImage, DbLogo, DbLink]
 })
 export class OtherElementsComponent {}
diff --git a/showcase/angular-lts-showcase/src/app/components/tab-bar/tab-bar.component.ts b/showcase/angular-lts-showcase/src/app/components/tab-bar/tab-bar.component.ts
index c195cfe4a..50bf6d976 100644
--- a/showcase/angular-lts-showcase/src/app/components/tab-bar/tab-bar.component.ts
+++ b/showcase/angular-lts-showcase/src/app/components/tab-bar/tab-bar.component.ts
@@ -1,7 +1,26 @@
 import { Component } from '@angular/core';
+import {
+  DbTab,
+  DbTabBar
+} from '../../../../../../packages/db-ui-elements-angular/projects/lib/src';
+import { FormComponent } from '../form/form.component';
+import { OtherElementsComponent } from '../other-elements/other-elements.component';
+import { OtherComponentsComponent } from '../other-components/other-components.component';
+import { TablesComponent } from '../tables/tables.component';
+import { NavigationComponent } from '../navigation/navigation.component';
 
 @Component({
   selector: 'app-tab-bar',
-  templateUrl: './tab-bar.component.html'
+  templateUrl: './tab-bar.component.html',
+  standalone: true,
+  imports: [
+    DbTabBar,
+    DbTab,
+    FormComponent,
+    OtherElementsComponent,
+    OtherComponentsComponent,
+    TablesComponent,
+    NavigationComponent
+  ]
 })
 export class TabBarComponent {}
diff --git a/showcase/angular-lts-showcase/src/app/components/tables/tables.component.ts b/showcase/angular-lts-showcase/src/app/components/tables/tables.component.ts
index 32a941875..104f97373 100644
--- a/showcase/angular-lts-showcase/src/app/components/tables/tables.component.ts
+++ b/showcase/angular-lts-showcase/src/app/components/tables/tables.component.ts
@@ -1,17 +1,23 @@
 import { Component } from '@angular/core';
 import { columnExampleData } from './mockData';
+import {
+  DbTable,
+  DbPagination
+} from '../../../../../../packages/db-ui-elements-angular/projects/lib/src';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-tables',
-  templateUrl: './tables.component.html'
+  templateUrl: './tables.component.html',
+  standalone: true,
+  imports: [DbTable, DbPagination, FormsModule]
 })
 export class TablesComponent {
-  columnExampleData;
   columnExampleDataString = JSON.stringify(columnExampleData);
 
   currentPage = 2;
 
-  logEvent(event) {
+  logEvent(event: any) {
     // eslint-disable-next-line no-console
     console.log('PagEvent: ', event);
   }
diff --git a/showcase/angular-lts-showcase/src/main.ts b/showcase/angular-lts-showcase/src/main.ts
index 28c63f8ac..1515397c2 100644
--- a/showcase/angular-lts-showcase/src/main.ts
+++ b/showcase/angular-lts-showcase/src/main.ts
@@ -1,14 +1,8 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { provideRouter, withHashLocation } from '@angular/router';
+import { routes } from './app/app.routing.module';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  // eslint-disable-next-line no-console
-  .catch((err) => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [provideRouter(routes, withHashLocation())]
+});
diff --git a/showcase/angular-lts-showcase/tsconfig.app.json b/showcase/angular-lts-showcase/tsconfig.app.json
index 3171ab11f..c3317bcd2 100644
--- a/showcase/angular-lts-showcase/tsconfig.app.json
+++ b/showcase/angular-lts-showcase/tsconfig.app.json
@@ -1,13 +1,8 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "./tsconfig.base.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": [],
-    "paths": {
-      "@angular/*": ["./node_modules/@angular/*"],
-      "@db-ui/*": ["../../packages/db-ui-elements-angular/dist/lib/*"]
-    }
+    "types": ["node"]
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"]
diff --git a/showcase/angular-lts-showcase/tsconfig.base.json b/showcase/angular-lts-showcase/tsconfig.base.json
deleted file mode 100644
index f1830d0f8..000000000
--- a/showcase/angular-lts-showcase/tsconfig.base.json
+++ /dev/null
@@ -1,17 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": false,
-    "downlevelIteration": true,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "es2015",
-    "module": "es2020",
-    "lib": ["es2018", "dom"]
-  }
-}
diff --git a/showcase/angular-lts-showcase/tsconfig.json b/showcase/angular-lts-showcase/tsconfig.json
index 8f1a8f47f..50918b582 100644
--- a/showcase/angular-lts-showcase/tsconfig.json
+++ b/showcase/angular-lts-showcase/tsconfig.json
@@ -1,17 +1,30 @@
-/*
-  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
-  It is not intended to be used to perform a compilation.
-
-  To learn more about this file see: https://angular.io/config/solution-tsconfig.
-*/
 {
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ]
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": ["ES2022", "dom"]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
 }
diff --git a/showcase/angular-lts-showcase/tsconfig.spec.json b/showcase/angular-lts-showcase/tsconfig.spec.json
deleted file mode 100644
index cc1c150e2..000000000
--- a/showcase/angular-lts-showcase/tsconfig.spec.json
+++ /dev/null
@@ -1,12 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/spec",
-    "module": "commonjs",
-    "types": ["jest", "node"],
-    "emitDecoratorMetadata": true,
-    "allowJs": true
-  },
-  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
-}
diff --git a/showcase/angular-lts-showcase/tslint.json b/showcase/angular-lts-showcase/tslint.json
deleted file mode 100644
index f5de97038..000000000
--- a/showcase/angular-lts-showcase/tslint.json
+++ /dev/null
@@ -1,104 +0,0 @@
-{
-  "extends": "tslint:recommended",
-  "rules": {
-    "align": {
-      "options": ["parameters", "statements"]
-    },
-    "array-type": false,
-    "arrow-return-shorthand": true,
-    "curly": true,
-    "deprecation": {
-      "severity": "warning"
-    },
-    "component-class-suffix": true,
-    "contextual-lifecycle": true,
-    "directive-class-suffix": true,
-    "directive-selector": [true, "attribute", "app", "camelCase"],
-    "component-selector": [true, "element", "app", "kebab-case"],
-    "eofline": true,
-    "import-blacklist": [true, "rxjs/Rx"],
-    "import-spacing": true,
-    "indent": {
-      "options": ["spaces"]
-    },
-    "max-classes-per-file": false,
-    "max-line-length": [true, 140],
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "static-field",
-          "instance-field",
-          "static-method",
-          "instance-method"
-        ]
-      }
-    ],
-    "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
-    "no-empty": false,
-    "no-inferrable-types": [true, "ignore-params"],
-    "no-non-null-assertion": true,
-    "no-redundant-jsdoc": true,
-    "no-switch-case-fall-through": true,
-    "no-var-requires": false,
-    "object-literal-key-quotes": [true, "as-needed"],
-    "quotemark": [true, "single"],
-    "semicolon": {
-      "options": ["always"]
-    },
-    "space-before-function-paren": {
-      "options": {
-        "anonymous": "never",
-        "asyncArrow": "always",
-        "constructor": "never",
-        "method": "never",
-        "named": "never"
-      }
-    },
-    "typedef": [true, "call-signature"],
-    "typedef-whitespace": {
-      "options": [
-        {
-          "call-signature": "nospace",
-          "index-signature": "nospace",
-          "parameter": "nospace",
-          "property-declaration": "nospace",
-          "variable-declaration": "nospace"
-        },
-        {
-          "call-signature": "onespace",
-          "index-signature": "onespace",
-          "parameter": "onespace",
-          "property-declaration": "onespace",
-          "variable-declaration": "onespace"
-        }
-      ]
-    },
-    "variable-name": {
-      "options": ["ban-keywords", "check-format", "allow-pascal-case"]
-    },
-    "whitespace": {
-      "options": [
-        "check-branch",
-        "check-decl",
-        "check-operator",
-        "check-separator",
-        "check-type",
-        "check-typecast"
-      ]
-    },
-    "no-conflicting-lifecycle": true,
-    "no-host-metadata-property": true,
-    "no-input-rename": true,
-    "no-inputs-metadata-property": true,
-    "no-output-native": true,
-    "no-output-on-prefix": true,
-    "no-output-rename": true,
-    "no-outputs-metadata-property": true,
-    "template-banana-in-box": true,
-    "template-no-negated-async": true,
-    "use-lifecycle-interface": true,
-    "use-pipe-transform-interface": true
-  },
-  "rulesDirectory": ["codelyzer"]
-}