From 0efa2a2f9a577b0371754bc155026a4c09635160 Mon Sep 17 00:00:00 2001
From: Danny Koppenhagen <Danny.Koppenhagen@deutschebahn.com>
Date: Thu, 8 Feb 2024 11:19:12 +0100
Subject: [PATCH] refactor(ngx-components)!: completely switch to standalone
 (#2184)

* refactor(ngx-components)!: completely switch to standalone

BREAKING CHANGE:
All Angular components are `standalone` now.
SCAM (Single Component Angular Modules) have been removed.
please import the standalone components directly in your `imports` section.

```ts app.component.ts
//app.component.ts
import { DBButton } from '@db-ui/ngx-components';

@Component({
	// ...
	imports: [
		// ...,
		DBButton
    ],
	// ...
})
```

closes #237

* fix: use withHashLocation

* fix: add missing NavigationContentDirective import

* fix: add missing NavigationContentDirective import

* fix: remove --ui flag from test

* fix: add standalone for angular mitosis specific config as well
---
 output/angular/README.md                      |  20 +--
 .../new/component/angular-overrides.ejs.t     |   2 +-
 .../angular-showcase-component.ejs.t          |   5 +-
 .../angular-showcase-module-declaration.ejs.t |   6 -
 ...lar-showcase-module-import-component.ejs.t |   6 -
 ...ngular-showcase-module-import-module.ejs.t |   6 -
 .../angular-showcase-module-import.ejs.t      |   6 -
 packages/components/mitosis-angular.config.js |   3 +-
 packages/components/mitosis.config.js         |   3 +-
 .../src/components/accordion-item/index.ts    |   2 +-
 .../angular/src/components/accordion/index.ts |   2 +-
 .../angular/src/components/alert/index.ts     |   2 +-
 .../angular/src/components/badge/index.ts     |   2 +-
 .../angular/src/components/brand/index.ts     |   2 +-
 .../angular/src/components/button/index.ts    |   2 +-
 .../angular/src/components/card/index.ts      |   2 +-
 .../angular/src/components/checkbox/index.ts  |   2 +-
 .../angular/src/components/code-docs/index.ts |   2 +-
 .../angular/src/components/divider/index.ts   |   2 +-
 .../angular/src/components/drawer/index.ts    |   2 +-
 .../angular/src/components/header/index.ts    |   2 +-
 .../angular/src/components/icon/index.ts      |   2 +-
 .../angular/src/components/infotext/index.ts  |   2 +-
 .../angular/src/components/input/index.ts     |   2 +-
 .../angular/src/components/link/index.ts      |   2 +-
 .../src/components/main-navigation/index.ts   |   2 +-
 .../src/components/navigation-item/index.ts   |   2 +-
 .../angular/src/components/page/index.ts      |   2 +-
 .../angular/src/components/popover/index.ts   |   2 +-
 .../angular/src/components/radio/index.ts     |   2 +-
 .../angular/src/components/section/index.ts   |   2 +-
 .../angular/src/components/select/index.ts    |   2 +-
 .../src/components/sub-navigation/index.ts    |   2 +-
 .../angular/src/components/tab-bar/index.ts   |   2 +-
 .../angular/src/components/tab/index.ts       |   2 +-
 .../angular/src/components/tag/index.ts       |   2 +-
 .../angular/src/components/textarea/index.ts  |   2 +-
 .../angular/src/components/tooltip/index.ts   |   2 +-
 .../components/scripts/post-build/angular.js  |  23 +--
 .../scripts/post-build/components.js          |   9 +-
 .../components/accordion-item/docs/Angular.md |   4 +-
 .../src/components/accordion/docs/Angular.md  |   4 +-
 .../src/components/alert/docs/Angular.md      |   4 +-
 .../src/components/badge/docs/Angular.md      |   4 +-
 .../src/components/brand/docs/Angular.md      |   4 +-
 .../src/components/button/docs/Angular.md     |   4 +-
 .../src/components/card/docs/Angular.md       |  17 +-
 .../src/components/checkbox/docs/Angular.md   |  20 ++-
 .../src/components/divider/docs/Angular.md    |   4 +-
 .../src/components/drawer/docs/Angular.md     |   4 +-
 .../src/components/header/docs/Angular.md     |  26 ++--
 .../src/components/icon/docs/Angular.md       |   4 +-
 .../src/components/infotext/docs/Angular.md   |   4 +-
 .../src/components/input/docs/Angular.md      |  55 ++++---
 .../src/components/link/docs/Angular.md       |   4 +-
 .../main-navigation/docs/Angular.md           |   4 +-
 .../navigation-item/docs/Angular.md           |  17 +-
 .../src/components/page/docs/Angular.md       |  18 ++-
 .../src/components/popover/docs/Angular.md    |   4 +-
 .../src/components/radio/docs/Angular.md      |  20 ++-
 .../src/components/section/docs/Angular.md    |   4 +-
 .../src/components/select/docs/Angular.md     |   4 +-
 .../src/components/tag/docs/Angular.md        |   4 +-
 .../src/components/textarea/docs/Angular.md   |   4 +-
 .../src/components/tooltip/docs/Angular.md    |   4 +-
 showcases/angular-showcase/angular.json       |   2 +-
 .../src/app/app.component.html                | 132 ++++++++--------
 .../angular-showcase/src/app/app.component.ts |  36 ++++-
 .../angular-showcase/src/app/app.module.ts    | 147 ------------------
 .../src/app/app.routing.module.ts             |  12 --
 .../accordion-item.component.ts               |   6 +-
 .../accordion/accordion.component.ts          |   8 +-
 .../app/components/alert/alert.component.ts   |   6 +-
 .../app/components/badge/badge.component.html |  45 +++---
 .../app/components/badge/badge.component.ts   |   9 +-
 .../app/components/button/button.component.ts |   6 +-
 .../app/components/card/card.component.html   |   6 +-
 .../src/app/components/card/card.component.ts |   6 +-
 .../components/checkbox/checkbox.component.ts |   6 +-
 .../src/app/components/default.component.html | 119 +++++++-------
 .../src/app/components/default.component.ts   |  23 ++-
 .../components/divider/divider.component.ts   |   7 +-
 .../app/components/drawer/drawer.component.ts |   7 +-
 .../app/components/form/form.component.html   |  54 ++++---
 .../src/app/components/form/form.component.ts |  35 ++++-
 .../src/app/components/icon/icon.component.ts |   7 +-
 .../components/infotext/infotext.component.ts |   6 +-
 .../app/components/input/input.component.ts   |   6 +-
 .../src/app/components/link/link.component.ts |   6 +-
 .../main-navigation.component.ts              |  13 +-
 .../navigation-item.component.html            |  48 +++---
 .../navigation-item.component.ts              |   7 +-
 .../components/popover/popover.component.ts   |   7 +-
 .../app/components/radio/radio.component.ts   |   6 +-
 .../components/section/section.component.ts   |   6 +-
 .../app/components/select/select.component.ts |   6 +-
 .../src/app/components/tag/tag.component.html |  46 +++---
 .../src/app/components/tag/tag.component.ts   |  10 +-
 .../components/textarea/textarea.component.ts |   6 +-
 .../components/tooltip/tooltip.component.ts   |   7 +-
 .../src/app/nav-item/nav-item.component.html  |  45 +++---
 .../src/app/nav-item/nav-item.component.ts    |  10 +-
 showcases/angular-showcase/src/main.ts        |  16 +-
 showcases/angular-showcase/src/polyfills.ts   |  52 -------
 showcases/angular-showcase/tsconfig.app.json  |   3 +-
 showcases/angular-showcase/tsconfig.json      |  14 +-
 showcases/playwright.config.ts                |   2 +-
 107 files changed, 696 insertions(+), 697 deletions(-)
 delete mode 100644 packages/components/_templates/mitosis/new/showcases/angular-showcase-module-declaration.ejs.t
 delete mode 100644 packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import-component.ejs.t
 delete mode 100644 packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import-module.ejs.t
 delete mode 100644 packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import.ejs.t
 delete mode 100644 showcases/angular-showcase/src/app/app.module.ts
 delete mode 100644 showcases/angular-showcase/src/app/app.routing.module.ts
 delete mode 100644 showcases/angular-showcase/src/polyfills.ts

diff --git a/output/angular/README.md b/output/angular/README.md
index 3a6c506521d..f912f72a228 100644
--- a/output/angular/README.md
+++ b/output/angular/README.md
@@ -39,16 +39,18 @@ Import the styles in scss or css. Based on your technology the file names could
 
 ## Usage
 
-```ts app.module.ts
-//app.module.ts
-import { DBButtonModule } from '@db-ui/ngx-components';
-
-@NgModule({
-	...
-		imports: [..., DBButtonModule],
-...
-})
+```ts app.component.ts
+//app.component.ts
+import { DBButton } from '@db-ui/ngx-components';
 
+@Component({
+	// ...
+	imports: [
+		// ...,
+		DBButton
+    ],
+	// ...
+})
 ```
 
 ```html app.component.html
diff --git a/packages/components/_templates/mitosis/new/component/angular-overrides.ejs.t b/packages/components/_templates/mitosis/new/component/angular-overrides.ejs.t
index 7fa0e8c12d4..5eafcb8485b 100644
--- a/packages/components/_templates/mitosis/new/component/angular-overrides.ejs.t
+++ b/packages/components/_templates/mitosis/new/component/angular-overrides.ejs.t
@@ -1,4 +1,4 @@
 ---
 to: overrides/angular/src/components/<%= name %>/index.ts
 ---
-export { DB<%= h.changeCase.pascal(name) %>, DB<%= h.changeCase.pascal(name) %>Module } from "./<%= name %>";
+export { DB<%= h.changeCase.pascal(name) %> } from "./<%= name %>";
diff --git a/packages/components/_templates/mitosis/new/showcases/angular-showcase-component.ejs.t b/packages/components/_templates/mitosis/new/showcases/angular-showcase-component.ejs.t
index a503c4b6618..a6981c66f9f 100644
--- a/packages/components/_templates/mitosis/new/showcases/angular-showcase-component.ejs.t
+++ b/packages/components/_templates/mitosis/new/showcases/angular-showcase-component.ejs.t
@@ -3,11 +3,14 @@ to: "<%= showcases ? `../../showcases/angular-showcase/src/app/components/${name
 ---
 import { Component } from '@angular/core';
 
+import { DefaultComponent } from '../default.component';
 import defaultComponentVariants from '../../../../../shared/<%= name %>.json';
 
 @Component({
 	selector: 'app-<%= name %>',
-	templateUrl: './<%= name %>.component.html'
+	templateUrl: './<%= name %>.component.html',
+	imports: [DefaultComponent],
+	standalone: true
 })
 export class <%= h.changeCase.pascal(name) %>Component {
 	variants = defaultComponentVariants;
diff --git a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-declaration.ejs.t b/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-declaration.ejs.t
deleted file mode 100644
index 53257429d98..00000000000
--- a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-declaration.ejs.t
+++ /dev/null
@@ -1,6 +0,0 @@
----
-inject: true
-to: "<%= showcases ? `../../showcases/angular-showcase/src/app/app.module.ts` : null %>"
-after: declarations
----
-<%= h.changeCase.pascal(name) %>Component,
diff --git a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import-component.ejs.t b/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import-component.ejs.t
deleted file mode 100644
index 76aca42c4a9..00000000000
--- a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import-component.ejs.t
+++ /dev/null
@@ -1,6 +0,0 @@
----
-inject: true
-to: "<%= showcases ? `../../showcases/angular-showcase/src/app/app.module.ts` : null %>"
-before: NgModule
----
-import { <%= h.changeCase.pascal(name) %>Component } from './components/<%= name %>/<%= name %>.component';
diff --git a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import-module.ejs.t b/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import-module.ejs.t
deleted file mode 100644
index 447fb48b354..00000000000
--- a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import-module.ejs.t
+++ /dev/null
@@ -1,6 +0,0 @@
----
-inject: true
-to: "<%= showcases ? `../../showcases/angular-showcase/src/app/app.module.ts` : null %>"
-after: imports
----
-DB<%= h.changeCase.pascal(name) %>Module,
diff --git a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import.ejs.t b/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import.ejs.t
deleted file mode 100644
index c5782ab74d1..00000000000
--- a/packages/components/_templates/mitosis/new/showcases/angular-showcase-module-import.ejs.t
+++ /dev/null
@@ -1,6 +0,0 @@
----
-inject: true
-to: "<%= showcases ? `../../showcases/angular-showcase/src/app/app.module.ts` : null %>"
-before: output/angular/src
----
-,DB<%= h.changeCase.pascal(name) %>Module
diff --git a/packages/components/mitosis-angular.config.js b/packages/components/mitosis-angular.config.js
index 1d908dd93dc..74d3340ce13 100644
--- a/packages/components/mitosis-angular.config.js
+++ b/packages/components/mitosis-angular.config.js
@@ -4,7 +4,8 @@ module.exports = {
 	dest: '../../output/tmp',
 	options: {
 		angular: {
-			typescript: true
+			typescript: true,
+			standalone: true
 		}
 	}
 };
diff --git a/packages/components/mitosis.config.js b/packages/components/mitosis.config.js
index a96044b3495..460e0949645 100644
--- a/packages/components/mitosis.config.js
+++ b/packages/components/mitosis.config.js
@@ -7,7 +7,8 @@ module.exports = {
 			typescript: true
 		},
 		angular: {
-			typescript: true
+			typescript: true,
+			standalone: true
 		},
 		vue3: {
 			typescript: true
diff --git a/packages/components/overrides/angular/src/components/accordion-item/index.ts b/packages/components/overrides/angular/src/components/accordion-item/index.ts
index 27ab670b43d..c7554059b95 100644
--- a/packages/components/overrides/angular/src/components/accordion-item/index.ts
+++ b/packages/components/overrides/angular/src/components/accordion-item/index.ts
@@ -1 +1 @@
-export { DBAccordionItem, DBAccordionItemModule } from './accordion-item';
+export { DBAccordionItem } from './accordion-item';
diff --git a/packages/components/overrides/angular/src/components/accordion/index.ts b/packages/components/overrides/angular/src/components/accordion/index.ts
index f1954d19cc0..10c779d7ec6 100644
--- a/packages/components/overrides/angular/src/components/accordion/index.ts
+++ b/packages/components/overrides/angular/src/components/accordion/index.ts
@@ -1 +1 @@
-export { DBAccordion, DBAccordionModule } from './accordion';
+export { DBAccordion } from './accordion';
diff --git a/packages/components/overrides/angular/src/components/alert/index.ts b/packages/components/overrides/angular/src/components/alert/index.ts
index 803d74d46b3..1ae1d4a6ebe 100644
--- a/packages/components/overrides/angular/src/components/alert/index.ts
+++ b/packages/components/overrides/angular/src/components/alert/index.ts
@@ -1 +1 @@
-export { DBAlert, DBAlertModule } from './alert';
+export { DBAlert } from './alert';
diff --git a/packages/components/overrides/angular/src/components/badge/index.ts b/packages/components/overrides/angular/src/components/badge/index.ts
index e775ca2345e..ed4c763397e 100644
--- a/packages/components/overrides/angular/src/components/badge/index.ts
+++ b/packages/components/overrides/angular/src/components/badge/index.ts
@@ -1 +1 @@
-export { DBBadge, DBBadgeModule } from './badge';
+export { DBBadge } from './badge';
diff --git a/packages/components/overrides/angular/src/components/brand/index.ts b/packages/components/overrides/angular/src/components/brand/index.ts
index 3a39c495376..658e2b76ae8 100644
--- a/packages/components/overrides/angular/src/components/brand/index.ts
+++ b/packages/components/overrides/angular/src/components/brand/index.ts
@@ -1 +1 @@
-export { DBBrand, DBBrandModule } from './brand';
+export { DBBrand } from './brand';
diff --git a/packages/components/overrides/angular/src/components/button/index.ts b/packages/components/overrides/angular/src/components/button/index.ts
index dfeb2d797a9..1172034acd5 100644
--- a/packages/components/overrides/angular/src/components/button/index.ts
+++ b/packages/components/overrides/angular/src/components/button/index.ts
@@ -1 +1 @@
-export { DBButton, DBButtonModule } from './button';
+export { DBButton } from './button';
diff --git a/packages/components/overrides/angular/src/components/card/index.ts b/packages/components/overrides/angular/src/components/card/index.ts
index 6fcd90d5919..9ba4f99fd83 100644
--- a/packages/components/overrides/angular/src/components/card/index.ts
+++ b/packages/components/overrides/angular/src/components/card/index.ts
@@ -1 +1 @@
-export { DBCard, DBCardModule } from './card';
+export { DBCard } from './card';
diff --git a/packages/components/overrides/angular/src/components/checkbox/index.ts b/packages/components/overrides/angular/src/components/checkbox/index.ts
index 2b74f10f193..2012009fdd1 100644
--- a/packages/components/overrides/angular/src/components/checkbox/index.ts
+++ b/packages/components/overrides/angular/src/components/checkbox/index.ts
@@ -1 +1 @@
-export { DBCheckbox, DBCheckboxModule } from './checkbox';
+export { DBCheckbox } from './checkbox';
diff --git a/packages/components/overrides/angular/src/components/code-docs/index.ts b/packages/components/overrides/angular/src/components/code-docs/index.ts
index 45816d6d8fe..a91da77f265 100644
--- a/packages/components/overrides/angular/src/components/code-docs/index.ts
+++ b/packages/components/overrides/angular/src/components/code-docs/index.ts
@@ -1 +1 @@
-export { DBCodeDocs, DBCodeDocsModule } from './code-docs';
+export { DBCodeDocs } from './code-docs';
diff --git a/packages/components/overrides/angular/src/components/divider/index.ts b/packages/components/overrides/angular/src/components/divider/index.ts
index 1d3db8f6f70..7601287d1a9 100644
--- a/packages/components/overrides/angular/src/components/divider/index.ts
+++ b/packages/components/overrides/angular/src/components/divider/index.ts
@@ -1 +1 @@
-export { DBDivider, DBDividerModule } from './divider';
+export { DBDivider } from './divider';
diff --git a/packages/components/overrides/angular/src/components/drawer/index.ts b/packages/components/overrides/angular/src/components/drawer/index.ts
index 14860486c26..2928adc42ac 100644
--- a/packages/components/overrides/angular/src/components/drawer/index.ts
+++ b/packages/components/overrides/angular/src/components/drawer/index.ts
@@ -1 +1 @@
-export { DBDrawer, DBDrawerModule } from './drawer';
+export { DBDrawer } from './drawer';
diff --git a/packages/components/overrides/angular/src/components/header/index.ts b/packages/components/overrides/angular/src/components/header/index.ts
index b35fc509855..7971adc96b7 100644
--- a/packages/components/overrides/angular/src/components/header/index.ts
+++ b/packages/components/overrides/angular/src/components/header/index.ts
@@ -1 +1 @@
-export { DBHeader, DBHeaderModule } from './header';
+export { DBHeader } from './header';
diff --git a/packages/components/overrides/angular/src/components/icon/index.ts b/packages/components/overrides/angular/src/components/icon/index.ts
index 9f8de045364..477db3c7403 100644
--- a/packages/components/overrides/angular/src/components/icon/index.ts
+++ b/packages/components/overrides/angular/src/components/icon/index.ts
@@ -1 +1 @@
-export { DBIcon, DBIconModule } from './icon';
+export { DBIcon } from './icon';
diff --git a/packages/components/overrides/angular/src/components/infotext/index.ts b/packages/components/overrides/angular/src/components/infotext/index.ts
index 614cc239160..ab235537250 100644
--- a/packages/components/overrides/angular/src/components/infotext/index.ts
+++ b/packages/components/overrides/angular/src/components/infotext/index.ts
@@ -1 +1 @@
-export { DBInfotext, DBInfotextModule } from './infotext';
+export { DBInfotext } from './infotext';
diff --git a/packages/components/overrides/angular/src/components/input/index.ts b/packages/components/overrides/angular/src/components/input/index.ts
index c20ee7aee0f..e37be88f609 100644
--- a/packages/components/overrides/angular/src/components/input/index.ts
+++ b/packages/components/overrides/angular/src/components/input/index.ts
@@ -1 +1 @@
-export { DBInput, DBInputModule } from './input';
+export { DBInput } from './input';
diff --git a/packages/components/overrides/angular/src/components/link/index.ts b/packages/components/overrides/angular/src/components/link/index.ts
index 57240a548d3..a0a073c4521 100644
--- a/packages/components/overrides/angular/src/components/link/index.ts
+++ b/packages/components/overrides/angular/src/components/link/index.ts
@@ -1 +1 @@
-export { DBLink, DBLinkModule } from './link';
+export { DBLink } from './link';
diff --git a/packages/components/overrides/angular/src/components/main-navigation/index.ts b/packages/components/overrides/angular/src/components/main-navigation/index.ts
index 48bd43cb7e9..f279281ed62 100644
--- a/packages/components/overrides/angular/src/components/main-navigation/index.ts
+++ b/packages/components/overrides/angular/src/components/main-navigation/index.ts
@@ -1 +1 @@
-export { DBMainNavigation, DBMainNavigationModule } from './main-navigation';
+export { DBMainNavigation } from './main-navigation';
diff --git a/packages/components/overrides/angular/src/components/navigation-item/index.ts b/packages/components/overrides/angular/src/components/navigation-item/index.ts
index 1c9e8b1d337..6ca9b8bef59 100644
--- a/packages/components/overrides/angular/src/components/navigation-item/index.ts
+++ b/packages/components/overrides/angular/src/components/navigation-item/index.ts
@@ -1 +1 @@
-export { DBNavigationItem, DBNavigationItemModule } from './navigation-item';
+export { DBNavigationItem } from './navigation-item';
diff --git a/packages/components/overrides/angular/src/components/page/index.ts b/packages/components/overrides/angular/src/components/page/index.ts
index 31fa1c29ec6..33025ab4370 100644
--- a/packages/components/overrides/angular/src/components/page/index.ts
+++ b/packages/components/overrides/angular/src/components/page/index.ts
@@ -1 +1 @@
-export { DBPage, DBPageModule } from './page';
+export { DBPage } from './page';
diff --git a/packages/components/overrides/angular/src/components/popover/index.ts b/packages/components/overrides/angular/src/components/popover/index.ts
index e45eda244eb..e6977c23494 100644
--- a/packages/components/overrides/angular/src/components/popover/index.ts
+++ b/packages/components/overrides/angular/src/components/popover/index.ts
@@ -1 +1 @@
-export { DBPopover, DBPopoverModule } from './popover';
+export { DBPopover } from './popover';
diff --git a/packages/components/overrides/angular/src/components/radio/index.ts b/packages/components/overrides/angular/src/components/radio/index.ts
index 346c279d9af..f0199b14284 100644
--- a/packages/components/overrides/angular/src/components/radio/index.ts
+++ b/packages/components/overrides/angular/src/components/radio/index.ts
@@ -1 +1 @@
-export { DBRadio, DBRadioModule } from './radio';
+export { DBRadio } from './radio';
diff --git a/packages/components/overrides/angular/src/components/section/index.ts b/packages/components/overrides/angular/src/components/section/index.ts
index 49a21da8297..2b4199173c8 100644
--- a/packages/components/overrides/angular/src/components/section/index.ts
+++ b/packages/components/overrides/angular/src/components/section/index.ts
@@ -1 +1 @@
-export { DBSection, DBSectionModule } from './section';
+export { DBSection } from './section';
diff --git a/packages/components/overrides/angular/src/components/select/index.ts b/packages/components/overrides/angular/src/components/select/index.ts
index 8aae7fa037c..0889e09a6e2 100644
--- a/packages/components/overrides/angular/src/components/select/index.ts
+++ b/packages/components/overrides/angular/src/components/select/index.ts
@@ -1 +1 @@
-export { DBSelect, DBSelectModule } from './select';
+export { DBSelect } from './select';
diff --git a/packages/components/overrides/angular/src/components/sub-navigation/index.ts b/packages/components/overrides/angular/src/components/sub-navigation/index.ts
index 1368a7fcd4b..b2e1faa11a3 100644
--- a/packages/components/overrides/angular/src/components/sub-navigation/index.ts
+++ b/packages/components/overrides/angular/src/components/sub-navigation/index.ts
@@ -1 +1 @@
-export { DBSubNavigation, DBSubNavigationModule } from './sub-navigation';
+export { DBSubNavigation } from './sub-navigation';
diff --git a/packages/components/overrides/angular/src/components/tab-bar/index.ts b/packages/components/overrides/angular/src/components/tab-bar/index.ts
index 1d0609372ed..ddfa08f7c1a 100644
--- a/packages/components/overrides/angular/src/components/tab-bar/index.ts
+++ b/packages/components/overrides/angular/src/components/tab-bar/index.ts
@@ -1 +1 @@
-export { DBTabBar, DBTabBarModule } from './tab-bar';
+export { DBTabBar } from './tab-bar';
diff --git a/packages/components/overrides/angular/src/components/tab/index.ts b/packages/components/overrides/angular/src/components/tab/index.ts
index f5766b1cb40..16448f89f64 100644
--- a/packages/components/overrides/angular/src/components/tab/index.ts
+++ b/packages/components/overrides/angular/src/components/tab/index.ts
@@ -1 +1 @@
-export { DBTab, DBTabModule } from './tab';
+export { DBTab } from './tab';
diff --git a/packages/components/overrides/angular/src/components/tag/index.ts b/packages/components/overrides/angular/src/components/tag/index.ts
index 6e731b56495..02dfafb96df 100644
--- a/packages/components/overrides/angular/src/components/tag/index.ts
+++ b/packages/components/overrides/angular/src/components/tag/index.ts
@@ -1 +1 @@
-export { DBTag, DBTagModule } from './tag';
+export { DBTag } from './tag';
diff --git a/packages/components/overrides/angular/src/components/textarea/index.ts b/packages/components/overrides/angular/src/components/textarea/index.ts
index 1eee7df7ccd..9cd588b455f 100644
--- a/packages/components/overrides/angular/src/components/textarea/index.ts
+++ b/packages/components/overrides/angular/src/components/textarea/index.ts
@@ -1 +1 @@
-export { DBTextarea, DBTextareaModule } from './textarea';
+export { DBTextarea } from './textarea';
diff --git a/packages/components/overrides/angular/src/components/tooltip/index.ts b/packages/components/overrides/angular/src/components/tooltip/index.ts
index 1ebaf57c33d..17e6d4aa248 100644
--- a/packages/components/overrides/angular/src/components/tooltip/index.ts
+++ b/packages/components/overrides/angular/src/components/tooltip/index.ts
@@ -1 +1 @@
-export { DBTooltip, DBTooltipModule } from './tooltip';
+export { DBTooltip } from './tooltip';
diff --git a/packages/components/scripts/post-build/angular.js b/packages/components/scripts/post-build/angular.js
index a551e61374d..9736b024cc5 100644
--- a/packages/components/scripts/post-build/angular.js
+++ b/packages/components/scripts/post-build/angular.js
@@ -13,14 +13,6 @@ const changeFile = (component, input) => {
 				!line.includes(`[key]=`)
 		)
 		.map((line) => {
-			if (
-				line.includes(`import { DB`) &&
-				line.includes(`../`) &&
-				!line.includes(`Module`)
-			) {
-				return line.replace(` } from "../`, `Module } from "../`);
-			}
-
 			if (line.includes(': ElementRef')) {
 				return line.replace(': ElementRef', ': ElementRef | undefined');
 			}
@@ -59,7 +51,7 @@ const setControlValueAccessorReplacements = (
 	replacements.push({
 		from: '} from "@angular/core";',
 		to:
-			`, Renderer2 } from "@angular/core";\n` +
+			`Renderer2 } from "@angular/core";\n` +
 			`import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n`
 	});
 
@@ -148,10 +140,10 @@ const setDirectiveReplacements = (
 		});
 
 		replacements.push({
-			from: 'import { NgModule } from "@angular/core";',
+			from: '@Component({',
 			to:
-				'import { NgModule } from "@angular/core";\n' +
-				`import { ${directive.name}Directive } from './${directive.name}.directive';\n`
+				`import { ${directive.name}Directive } from './${directive.name}.directive';\n\n` +
+				'@Component({'
 		});
 
 		FS.writeFileSync(
@@ -160,7 +152,8 @@ const setDirectiveReplacements = (
 				"import { Directive } from '@angular/core';" +
 				`
 @Directive({
-\tselector: '[db${directive.name}]'
+\tselector: '[db${directive.name}]',
+\tstandalone: true
 })
 export class ${directive.name}Directive {}
 `
@@ -168,8 +161,8 @@ export class ${directive.name}Directive {}
 	}
 
 	replacements.push({
-		from: 'import { NgModule } from "@angular/core";',
-		to: "import { NgModule, ContentChild, TemplateRef } from '@angular/core';"
+		from: '} from "@angular/core";',
+		to: 'ContentChild, TemplateRef } from  "@angular/core";'
 	});
 };
 
diff --git a/packages/components/scripts/post-build/components.js b/packages/components/scripts/post-build/components.js
index 81090bc1006..2ab5248634d 100644
--- a/packages/components/scripts/post-build/components.js
+++ b/packages/components/scripts/post-build/components.js
@@ -157,12 +157,17 @@ const getComponents = () => [
 		config: {
 			angular: {
 				directives: [
-					{ name: 'ActionBar', ngContentName: 'action-bar' },
+					{
+						name: 'ActionBar',
+						ngContentName: 'action-bar'
+					},
 					{
 						name: 'MetaNavigation',
 						ngContentName: 'meta-navigation'
 					},
-					{ name: 'Navigation' }
+					{
+						name: 'Navigation'
+					}
 				]
 			}
 		},
diff --git a/packages/components/src/components/accordion-item/docs/Angular.md b/packages/components/src/components/accordion-item/docs/Angular.md
index 83e438a90e8..bc2c654a735 100644
--- a/packages/components/src/components/accordion-item/docs/Angular.md
+++ b/packages/components/src/components/accordion-item/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration look at the [ngx-components](https://
 
 ```ts app.component.ts
 // app.component.ts
-import { DBAccordionItemModule } from '@db-ui/ngx-components';
+import { DBAccordionItem } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBAccordionItemModule],
+  imports: [..., DBAccordionItem],
   // ...
 })
 ```
diff --git a/packages/components/src/components/accordion/docs/Angular.md b/packages/components/src/components/accordion/docs/Angular.md
index b156fb82766..80fab4c8a58 100644
--- a/packages/components/src/components/accordion/docs/Angular.md
+++ b/packages/components/src/components/accordion/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration look at the [ngx-components](https://
 
 ```ts app.component.ts
 // app.component.ts
-import { DBAccordionModule } from '@db-ui/ngx-components';
+import { DBAccordion } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBAccordionModule],
+  imports: [..., DBAccordion],
   // ...
 })
 ```
diff --git a/packages/components/src/components/alert/docs/Angular.md b/packages/components/src/components/alert/docs/Angular.md
index cfc29b0a4b3..5873d791e2d 100644
--- a/packages/components/src/components/alert/docs/Angular.md
+++ b/packages/components/src/components/alert/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBAlertModule } from '@db-ui/ngx-components';
+import { DBAlert } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBAlertModule],
+  imports: [..., DBAlert],
   // ...
 })
 ```
diff --git a/packages/components/src/components/badge/docs/Angular.md b/packages/components/src/components/badge/docs/Angular.md
index 85c643840d3..8ab5b5950ef 100644
--- a/packages/components/src/components/badge/docs/Angular.md
+++ b/packages/components/src/components/badge/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBBadgeModule } from '@db-ui/ngx-components';
+import { DBBadge } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBBadgeModule],
+  imports: [..., DBBadge],
   // ...
 })
 ```
diff --git a/packages/components/src/components/brand/docs/Angular.md b/packages/components/src/components/brand/docs/Angular.md
index 69ea696ec98..dd615476c98 100644
--- a/packages/components/src/components/brand/docs/Angular.md
+++ b/packages/components/src/components/brand/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBBrandModule } from '@db-ui/ngx-components';
+import { DBBrand } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBBrandModule],
+  imports: [..., DBBrand],
   // ...
 })
 ```
diff --git a/packages/components/src/components/button/docs/Angular.md b/packages/components/src/components/button/docs/Angular.md
index 71e49ebcc17..1f468da3e4d 100644
--- a/packages/components/src/components/button/docs/Angular.md
+++ b/packages/components/src/components/button/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBButtonModule } from '@db-ui/ngx-components';
+import { DBButton } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBButtonModule],
+  imports: [..., DBButton],
   // ...
 })
 ```
diff --git a/packages/components/src/components/card/docs/Angular.md b/packages/components/src/components/card/docs/Angular.md
index f8c7574f5d3..40d6cc51a60 100644
--- a/packages/components/src/components/card/docs/Angular.md
+++ b/packages/components/src/components/card/docs/Angular.md
@@ -4,14 +4,17 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ### Load component
 
-```ts app.module.ts
-//app.module.ts
-import { DBCardModule } from '@db-ui/ngx-components';
+```ts app.component.ts
+//app.component.ts
+import { DBCard } from '@db-ui/ngx-components';
 
-@NgModule({
-  ...
-  imports: [..., DBCardModule],
-  ...
+@Component({
+	// ...
+	imports: [
+		// ...,
+		DBCard
+    ],
+	// ...
 })
 ```
 
diff --git a/packages/components/src/components/checkbox/docs/Angular.md b/packages/components/src/components/checkbox/docs/Angular.md
index 0ac54a56ccc..6b04b10edd9 100644
--- a/packages/components/src/components/checkbox/docs/Angular.md
+++ b/packages/components/src/components/checkbox/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBCheckboxModule } from '@db-ui/ngx-components';
+import { DBCheckbox } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBCheckboxModule],
+  imports: [..., DBCheckbox],
   // ...
 })
 ```
@@ -51,11 +51,17 @@ export class AppComponent {
 Third party controls require a `ControlValueAccessor` to function with angular forms. Adding an `ngDefaultControl` attribute will allow them to use that directive.
 [Further information](https://stackoverflow.com/a/46465959)
 
-```ts app.module.ts
-// app.module.ts
-@NgModule({
-  …
-  imports: [ FormsModule, …]
+```ts app.component.ts
+//app.component.ts
+import { FormsModule } from '@angular/forms';
+
+@Component({
+	// ...
+	imports: [
+		// ...,
+		FormsModule
+    ],
+	// ...
 })
 ```
 
diff --git a/packages/components/src/components/divider/docs/Angular.md b/packages/components/src/components/divider/docs/Angular.md
index 055c67e316d..96b5b3cd35d 100644
--- a/packages/components/src/components/divider/docs/Angular.md
+++ b/packages/components/src/components/divider/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBDividerModule } from '@db-ui/ngx-components';
+import { DBDivider } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBDividerModule],
+  imports: [..., DBDivider],
   // ...
 })
 ```
diff --git a/packages/components/src/components/drawer/docs/Angular.md b/packages/components/src/components/drawer/docs/Angular.md
index 82330a3b0ef..2e315d0bc3e 100644
--- a/packages/components/src/components/drawer/docs/Angular.md
+++ b/packages/components/src/components/drawer/docs/Angular.md
@@ -10,12 +10,12 @@ If you use `width !== full` you are able to overwrite the `max-width` with `--db
 
 ```ts app.component.ts
 // app.component.ts
-import { DBDrawerModule } from '@db-ui/ngx-components';
+import { DBDrawer } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBDrawerModule],
+  imports: [..., DBDrawer],
   // ...
 })
 ```
diff --git a/packages/components/src/components/header/docs/Angular.md b/packages/components/src/components/header/docs/Angular.md
index 745abc94bd1..2369d5beafc 100644
--- a/packages/components/src/components/header/docs/Angular.md
+++ b/packages/components/src/components/header/docs/Angular.md
@@ -4,22 +4,26 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ### Load component
 
-```ts app.module.ts
-//app.module.ts
-import { DBHeaderModule } from '@db-ui/ngx-components';
+```ts app.component.ts
+//app.component.ts
+import {
+	DBHeader,
+	NavigationDirective,
+	ActionBarDirective,
+	MetaNavigationDirective
+} from '@db-ui/ngx-components';
 
-@NgModule({
-  ...
-  declarations: [
-        ...,
-	NavigationDirective, // Optional: If you want to use a Navigation
+@Component({
+  // ...
+  imports: [
+	// ...,
+	DBHeader
+    NavigationDirective, // Optional: If you want to use a Navigation
 	ActionBarDirective, // Optional: If you want to use ActionBar
 	MetaNavigationDirective, // Optional: If you want to use MetaNavigation
   ],
-  imports: [..., DBHeaderModule],
-  ...
+  // ...
 })
-
 ```
 
 ### Use component
diff --git a/packages/components/src/components/icon/docs/Angular.md b/packages/components/src/components/icon/docs/Angular.md
index 8263f6c4605..807fadfbdef 100644
--- a/packages/components/src/components/icon/docs/Angular.md
+++ b/packages/components/src/components/icon/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBIconModule } from '@db-ui/ngx-components';
+import { DBIcon } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBIconModule],
+  imports: [..., DBIcon],
   // ...
 })
 ```
diff --git a/packages/components/src/components/infotext/docs/Angular.md b/packages/components/src/components/infotext/docs/Angular.md
index 45518f746ba..6e6534a7aac 100644
--- a/packages/components/src/components/infotext/docs/Angular.md
+++ b/packages/components/src/components/infotext/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBInfotextModule } from '@db-ui/ngx-components';
+import { DBInfotext } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBInfotextModule],
+  imports: [..., DBInfotext],
   // ...
 })
 ```
diff --git a/packages/components/src/components/input/docs/Angular.md b/packages/components/src/components/input/docs/Angular.md
index b3772d366e3..ea0418fc64d 100644
--- a/packages/components/src/components/input/docs/Angular.md
+++ b/packages/components/src/components/input/docs/Angular.md
@@ -6,17 +6,20 @@ Load SCSS globally within `styles.scss` in your app:
 @forward "@db-ui/components/build/styles/db-ui-42-webpack";
 ```
 
-Load component within `app.module.ts`:
-
-```typescript
-import { DBInputModule } from '@db-ui/ngx-components';
-
-@NgModule({
-  ...
-  imports: [..., DBInputModule],
-  ...
+Load component within `app.component.ts`:
+
+```ts app.component.ts
+//app.component.ts
+import { DBInput } from '@db-ui/ngx-components';
+
+@Component({
+	// ...
+	imports: [
+		// ...,
+		DBInput
+    ],
+	// ...
 })
-
 ```
 
 Use component in template:
@@ -37,11 +40,17 @@ Our input component implements this interface so you can use it like any other n
 
 > Currently we do not support onTouch/touched and native validation via FormControl. If your interested in contributing, you're very welcome ;)
 
-```typescript
-// app.module.ts
-@NgModule({
-  …
-  imports: [ ReactiveFormsModule, …]
+```ts app.component.ts
+//app.component.ts
+import { ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+	// ...
+	imports: [
+		// ...,
+		ReactiveFormsModule
+    ],
+	// ...
 })
 ```
 
@@ -80,11 +89,17 @@ export class FormComponent {
 Third party controls require a ControlValueAccessor to function with angular forms.
 Our input component implements this interface so you can use it like any other native element with ngModel:
 
-```typescript
-// app.module.ts
-@NgModule({
-  …
-  imports: [ FormsModule, …]
+```ts app.component.ts
+//app.component.ts
+import { FormsModule } from '@angular/forms';
+
+@Component({
+	// ...
+	imports: [
+		// ...,
+		FormsModule
+    ],
+	// ...
 })
 ```
 
diff --git a/packages/components/src/components/link/docs/Angular.md b/packages/components/src/components/link/docs/Angular.md
index 03c8a914e62..f50ca1e924d 100644
--- a/packages/components/src/components/link/docs/Angular.md
+++ b/packages/components/src/components/link/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBLinkModule } from '@db-ui/ngx-components';
+import { DBLink } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBLinkModule],
+  imports: [..., DBLink],
   // ...
 })
 ```
diff --git a/packages/components/src/components/main-navigation/docs/Angular.md b/packages/components/src/components/main-navigation/docs/Angular.md
index 50153928321..0837e77cdd6 100644
--- a/packages/components/src/components/main-navigation/docs/Angular.md
+++ b/packages/components/src/components/main-navigation/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration look at the [ngx-components](https://
 
 ```ts app.component.ts
 // app.component.ts
-import { DBMainNavigationModule } from '@db-ui/ngx-components';
+import { DBMainNavigation } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBMainNavigationModule],
+  imports: [..., DBMainNavigation],
   // ...
 })
 ```
diff --git a/packages/components/src/components/navigation-item/docs/Angular.md b/packages/components/src/components/navigation-item/docs/Angular.md
index ba60f775ef0..a300b0a1b33 100644
--- a/packages/components/src/components/navigation-item/docs/Angular.md
+++ b/packages/components/src/components/navigation-item/docs/Angular.md
@@ -4,15 +4,14 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ### Load component
 
-```ts app.module.ts
-//app.module.ts
-import { DBNavigationItemModule } from '@db-ui/ngx-components';
-
-@NgModule({
-  ...
-  declarations: [...,NavigationContentDirective],
-  imports: [..., DBNavigationItemModule],
-  ...
+```ts app.component.ts
+//app.component.ts
+import { DBNavigationItem, NavigationContentDirective } from '@db-ui/ngx-components';
+
+@Component({
+  // ...
+  imports: [..., DBNavigationItem, NavigationContentDirective],
+  // ...
 })
 
 ```
diff --git a/packages/components/src/components/page/docs/Angular.md b/packages/components/src/components/page/docs/Angular.md
index 20f39367027..84a6a6f20f8 100644
--- a/packages/components/src/components/page/docs/Angular.md
+++ b/packages/components/src/components/page/docs/Angular.md
@@ -4,16 +4,18 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ### Load component
 
-```ts app.module.ts
-//app.module.ts
-import { DBPageModule, DBHeaderModule } from '@db-ui/ngx-components';
+```ts app.component.ts
+//app.component.ts
+import { DBPage, DBHeader } from '@db-ui/ngx-components';
 
-@NgModule({
-	...
-	imports: [..., DBPageModule, DBHeaderModule],
-	...
+@Component({
+	// ...
+	imports: [
+		// ...,
+		DBPage, DBHeader
+    ],
+	// ...
 })
-
 ```
 
 ### Use component
diff --git a/packages/components/src/components/popover/docs/Angular.md b/packages/components/src/components/popover/docs/Angular.md
index 016172f2e94..97df4f6dc3b 100644
--- a/packages/components/src/components/popover/docs/Angular.md
+++ b/packages/components/src/components/popover/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBPopoverModule } from '@db-ui/ngx-components';
+import { DBPopover } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBPopoverModule],
+  imports: [..., DBPopover],
   // ...
 })
 ```
diff --git a/packages/components/src/components/radio/docs/Angular.md b/packages/components/src/components/radio/docs/Angular.md
index 6e80cebab2c..8425bcdde78 100644
--- a/packages/components/src/components/radio/docs/Angular.md
+++ b/packages/components/src/components/radio/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBRadioModule } from '@db-ui/ngx-components';
+import { DBRadio } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBRadioModule],
+  imports: [..., DBRadio],
   // ...
 })
 ```
@@ -51,11 +51,17 @@ export class AppComponent {
 Third party controls require a `ControlValueAccessor` to function with angular forms. Adding an `ngDefaultControl` attribute will allow them to use that directive.
 [Further information](https://stackoverflow.com/a/46465959)
 
-```ts app.module.ts
-// app.module.ts
-@NgModule({
-  …
-  imports: [ FormsModule, …]
+```ts app.component.ts
+//app.component.ts
+import { FormsModule } from '@angular/forms';
+
+@Component({
+	// ...
+	imports: [
+		// ...,
+		FormsModule
+    ],
+	// ...
 })
 ```
 
diff --git a/packages/components/src/components/section/docs/Angular.md b/packages/components/src/components/section/docs/Angular.md
index 08b404fde2d..3ca2e38db13 100644
--- a/packages/components/src/components/section/docs/Angular.md
+++ b/packages/components/src/components/section/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBSectionModule } from '@db-ui/ngx-components';
+import { DBSection } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBSectionModule],
+  imports: [..., DBSection],
   // ...
 })
 ```
diff --git a/packages/components/src/components/select/docs/Angular.md b/packages/components/src/components/select/docs/Angular.md
index d8c5a14b4d4..2296989b160 100644
--- a/packages/components/src/components/select/docs/Angular.md
+++ b/packages/components/src/components/select/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBSelectModule } from '@db-ui/ngx-components';
+import { DBSelect } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBSelectModule],
+  imports: [..., DBSelect],
   // ...
 })
 ```
diff --git a/packages/components/src/components/tag/docs/Angular.md b/packages/components/src/components/tag/docs/Angular.md
index 44ebc1e544a..9def54be794 100644
--- a/packages/components/src/components/tag/docs/Angular.md
+++ b/packages/components/src/components/tag/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBTagModule } from '@db-ui/ngx-components';
+import { DBTag } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBTagModule],
+  imports: [..., DBTag],
   // ...
 })
 ```
diff --git a/packages/components/src/components/textarea/docs/Angular.md b/packages/components/src/components/textarea/docs/Angular.md
index a20096ee088..f71070de391 100644
--- a/packages/components/src/components/textarea/docs/Angular.md
+++ b/packages/components/src/components/textarea/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration look at the [ngx-components](https://
 
 ```ts app.component.ts
 // app.component.ts
-import { DBTextareaModule } from '@db-ui/ngx-components';
+import { DBTextarea } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBTextareaModule],
+  imports: [..., DBTextarea],
   // ...
 })
 ```
diff --git a/packages/components/src/components/tooltip/docs/Angular.md b/packages/components/src/components/tooltip/docs/Angular.md
index 9d2a94c3ef9..a2736ccce24 100644
--- a/packages/components/src/components/tooltip/docs/Angular.md
+++ b/packages/components/src/components/tooltip/docs/Angular.md
@@ -6,12 +6,12 @@ For general installation and configuration take a look at the [ngx-components](h
 
 ```ts app.component.ts
 // app.component.ts
-import { DBTooltipModule } from '@db-ui/ngx-components';
+import { DBTooltip } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBTooltipModule],
+  imports: [..., DBTooltip],
   // ...
 })
 ```
diff --git a/showcases/angular-showcase/angular.json b/showcases/angular-showcase/angular.json
index 55e32cb6550..b90637810f9 100644
--- a/showcases/angular-showcase/angular.json
+++ b/showcases/angular-showcase/angular.json
@@ -20,7 +20,7 @@
 						"outputPath": "../../build-showcases/angular-showcase",
 						"index": "src/index.html",
 						"main": "src/main.ts",
-						"polyfills": "src/polyfills.ts",
+						"polyfills": ["zone.js"],
 						"tsConfig": "tsconfig.app.json",
 						"assets": ["src/assets"],
 						"styles": ["src/styles.css"],
diff --git a/showcases/angular-showcase/src/app/app.component.html b/showcases/angular-showcase/src/app/app.component.html
index 7ea77868db8..310d106f6e5 100644
--- a/showcases/angular-showcase/src/app/app.component.html
+++ b/showcases/angular-showcase/src/app/app.component.html
@@ -1,65 +1,73 @@
-<div *ngIf="page" [class]="getChangeableClasses()">
-	<router-outlet></router-outlet>
-</div>
-<db-page *ngIf="!page" type="fixedHeaderFooter" [fadeIn]="true">
-	<db-header
-		header
-		[drawerOpen]="drawerOpen"
-		(onToggle)="toggleDrawer($event)"
-	>
-		<db-brand
-			brand
-			title="Angular Showcase"
-			src="./assets/db_logo.svg"
-			href="/angular-showcase"
-		>
-			Showcase
-		</db-brand>
-		<db-main-navigation *dbNavigation>
-			<ng-container *ngFor="let item of navigationItems">
-				<app-nav-item [navItem]="item"> </app-nav-item>
-			</ng-container>
-		</db-main-navigation>
-		<ng-container *dbMetaNavigation>
-			<db-select
-				labelVariant="floating"
-				label="Tonality"
-				[(ngModel)]="tonality"
-				(change)="onChange($event)"
-			>
-				<option *ngFor="let t of tonalities">
-					{{ t }}
-				</option>
-			</db-select>
-			<db-select
-				labelVariant="floating"
-				label="Color"
-				[(ngModel)]="color"
-				(change)="onChange($event)"
-			>
-				<option *ngFor="let c of colors">
-					{{ c }}
-				</option>
-			</db-select>
-		</ng-container>
-		<ng-container call-to-action>
-			<DBButton icon="search" variant="text" [noText]="true"
-				>Search</DBButton
-			>
-		</ng-container>
-		<ng-container *dbActionBar>
-			<DBButton icon="account" variant="text" [noText]="true">
-				Profile
-			</DBButton>
-			<DBButton icon="alert" variant="text" [noText]="true">
-				Notification
-			</DBButton>
-			<DBButton icon="help" variant="text" [noText]="true">
-				Help
-			</DBButton>
-		</ng-container>
-	</db-header>
+@if (page) {
 	<div [class]="getChangeableClasses()">
 		<router-outlet></router-outlet>
 	</div>
-</db-page>
+}
+@if (!page) {
+	<db-page type="fixedHeaderFooter" [fadeIn]="true">
+		<db-header
+			header
+			[drawerOpen]="drawerOpen"
+			(onToggle)="toggleDrawer($event)"
+		>
+			<db-brand
+				brand
+				title="Angular Showcase"
+				src="./assets/db_logo.svg"
+				href="/angular-showcase"
+			>
+				Showcase
+			</db-brand>
+			<db-main-navigation *dbNavigation>
+				@for (item of navigationItems; track item.label) {
+					<app-nav-item [navItem]="item"> </app-nav-item>
+				}
+			</db-main-navigation>
+			<ng-container *dbMetaNavigation>
+				<db-select
+					labelVariant="floating"
+					label="Tonality"
+					[(ngModel)]="tonality"
+					(change)="onChange($event)"
+				>
+					@for (t of tonalities; track t) {
+						<option>
+							{{ t }}
+						</option>
+					}
+				</db-select>
+				<db-select
+					labelVariant="floating"
+					label="Color"
+					[(ngModel)]="color"
+					(change)="onChange($event)"
+				>
+					@for (c of colors; track c) {
+						<option>
+							{{ c }}
+						</option>
+					}
+				</db-select>
+			</ng-container>
+			<ng-container call-to-action>
+				<DBButton icon="search" variant="text" [noText]="true"
+					>Search</DBButton
+				>
+			</ng-container>
+			<ng-container *dbActionBar>
+				<DBButton icon="account" variant="text" [noText]="true">
+					Profile
+				</DBButton>
+				<DBButton icon="alert" variant="text" [noText]="true">
+					Notification
+				</DBButton>
+				<DBButton icon="help" variant="text" [noText]="true">
+					Help
+				</DBButton>
+			</ng-container>
+		</db-header>
+		<div [class]="getChangeableClasses()">
+			<router-outlet></router-outlet>
+		</div>
+	</db-page>
+}
diff --git a/showcases/angular-showcase/src/app/app.component.ts b/showcases/angular-showcase/src/app/app.component.ts
index 9de35c53d06..5d2d64116db 100644
--- a/showcases/angular-showcase/src/app/app.component.ts
+++ b/showcases/angular-showcase/src/app/app.component.ts
@@ -1,5 +1,11 @@
-import { Component, type OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
+import { DBSelect } from '../../../../output/angular/src/components/select/select';
+import { DBMainNavigation } from '../../../../output/angular/src/components/main-navigation/main-navigation';
+import { DBBrand } from '../../../../output/angular/src/components/brand/brand';
+import { DBHeader } from '../../../../output/angular/src/components/header/header';
+import { DBPage } from '../../../../output/angular/src/components/page/page';
 import {
 	COLOR,
 	COLORS,
@@ -8,6 +14,12 @@ import {
 	COLOR_CONST,
 	TONALITY_CONST
 } from '../../../../packages/components/src/shared/constants';
+import { DBButton } from '../../../../output/angular/src/components/button';
+import { ActionBarDirective } from '../../../../output/angular/src/components/header/ActionBar.directive';
+import { NavigationDirective } from '../../../../output/angular/src/components/header/Navigation.directive';
+import { MetaNavigationDirective } from '../../../../output/angular/src/components/header/MetaNavigation.directive';
+import { NavigationContentDirective } from '../../../../output/angular/src/components/navigation-item/NavigationContent.directive';
+import { NavItemComponent } from './nav-item/nav-item.component';
 import {
 	getSortedNavigationItems,
 	NAVIGATION_ITEMS,
@@ -16,6 +28,22 @@ import {
 
 @Component({
 	selector: 'app-root',
+	standalone: true,
+	imports: [
+		FormsModule,
+		RouterOutlet,
+		NavItemComponent,
+		DBPage,
+		DBHeader,
+		DBBrand,
+		DBMainNavigation,
+		DBSelect,
+		DBButton,
+		ActionBarDirective,
+		NavigationDirective,
+		MetaNavigationDirective,
+		NavigationContentDirective
+	],
 	templateUrl: './app.component.html'
 })
 export class AppComponent implements OnInit {
@@ -28,8 +56,8 @@ export class AppComponent implements OnInit {
 	tonality = TONALITY.REGULAR;
 	color = COLOR.BASE;
 
-	page: string;
-	fullscreen: boolean;
+	page?: string;
+	fullscreen = false;
 
 	constructor(
 		private readonly router: Router,
diff --git a/showcases/angular-showcase/src/app/app.module.ts b/showcases/angular-showcase/src/app/app.module.ts
deleted file mode 100644
index 3da238ad72f..00000000000
--- a/showcases/angular-showcase/src/app/app.module.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
-import {
-	DBButtonModule,
-	DBCardModule,
-	DBDividerModule,
-	DBIconModule,
-	DBInputModule,
-	DBPageModule,
-	DBHeaderModule,
-	DBBrandModule,
-	DBLinkModule,
-	DBCheckboxModule,
-	DBRadioModule,
-	DBCodeDocsModule,
-	DBAlertModule,
-	DBSectionModule,
-	DBInfotextModule,
-	DBSelectModule,
-	DBDrawerModule,
-	DBTagModule,
-	DBNavigationItemModule,
-	DBAccordionModule,
-	DBAccordionItemModule,
-	DBTextareaModule,
-	DBMainNavigationModule,
-	DBBadgeModule,
-	DBPopoverModule,
-	DBTooltipModule
-} from '../../../../output/angular/src';
-import { ActionBarDirective } from '../../../../output/angular/src/components/header/ActionBar.directive';
-import { NavigationDirective } from '../../../../output/angular/src/components/header/Navigation.directive';
-import { MetaNavigationDirective } from '../../../../output/angular/src/components/header/MetaNavigation.directive';
-import { NavigationContentDirective } from '../../../../output/angular/src/components/navigation-item/NavigationContent.directive';
-import { TooltipComponent } from './components/tooltip/tooltip.component';
-import { PopoverComponent } from './components/popover/popover.component';
-import { BadgeComponent } from './components/badge/badge.component';
-import { AppComponent } from './app.component';
-import { AppRoutingModule } from './app.routing.module';
-import { AccordionComponent } from './components/accordion/accordion.component';
-import { AccordionItemComponent } from './components/accordion-item/accordion-item.component';
-import { FormComponent } from './components/form/form.component';
-import { ButtonComponent } from './components/button/button.component';
-import { LinkComponent } from './components/link/link.component';
-import { InputComponent } from './components/input/input.component';
-import { AlertComponent } from './components/alert/alert.component';
-import { RadioComponent } from './components/radio/radio.component';
-import { CheckboxComponent } from './components/checkbox/checkbox.component';
-import { InfotextComponent } from './components/infotext/infotext.component';
-import { SectionComponent } from './components/section/section.component';
-import { CardComponent } from './components/card/card.component';
-import { DividerComponent } from './components/divider/divider.component';
-import { DefaultComponent } from './components/default.component';
-import { TagComponent } from './components/tag/tag.component';
-import { DrawerComponent } from './components/drawer/drawer.component';
-import { SelectComponent } from './components/select/select.component';
-import { NavigationItemComponent } from './components/navigation-item/navigation-item.component';
-import { NavItemComponent } from './nav-item/nav-item.component';
-import { MainNavigationComponent } from './components/main-navigation/main-navigation.component';
-import { TextareaComponent } from './components/textarea/textarea.component';
-import { IconComponent } from './components/icon/icon.component';
-
-@NgModule({
-	declarations: [
-		IconComponent,
-		TooltipComponent,
-
-		PopoverComponent,
-
-		AccordionItemComponent,
-		AccordionComponent,
-		AlertComponent,
-		MainNavigationComponent,
-		BadgeComponent,
-		NavigationItemComponent,
-		SelectComponent,
-		TagComponent,
-		AppComponent,
-		ButtonComponent,
-		CardComponent,
-		CheckboxComponent,
-		DefaultComponent,
-		DividerComponent,
-		DrawerComponent,
-		FormComponent,
-		InfotextComponent,
-		InputComponent,
-		LinkComponent,
-		NavigationItemComponent,
-		RadioComponent,
-		SectionComponent,
-		CardComponent,
-		DividerComponent,
-		DrawerComponent,
-		ActionBarDirective,
-		NavigationDirective,
-		MetaNavigationDirective,
-		NavItemComponent,
-		NavigationContentDirective,
-		SelectComponent,
-		TagComponent,
-		TextareaComponent
-	],
-	imports: [
-		DBTooltipModule,
-
-		DBPopoverModule,
-
-		DBAccordionItemModule,
-		DBAccordionModule,
-		DBBadgeModule,
-		DBBadgeModule,
-		DBMainNavigationModule,
-		DBNavigationItemModule,
-		DBTagModule,
-		DBSelectModule,
-		AppRoutingModule,
-		BrowserModule,
-		DBAlertModule,
-		DBBrandModule,
-		DBButtonModule,
-		DBCardModule,
-		DBCheckboxModule,
-		DBCodeDocsModule,
-		DBDividerModule,
-		DBDrawerModule,
-		DBHeaderModule,
-		DBIconModule,
-		DBInfotextModule,
-		DBInputModule,
-		DBLinkModule,
-		DBNavigationItemModule,
-		DBPageModule,
-		DBRadioModule,
-		DBSectionModule,
-		DBSelectModule,
-		DBTagModule,
-		DBTextareaModule,
-		FormsModule,
-		ReactiveFormsModule
-	],
-	providers: [],
-	schemas: [NO_ERRORS_SCHEMA],
-	bootstrap: [AppComponent]
-})
-export class AppModule {}
diff --git a/showcases/angular-showcase/src/app/app.routing.module.ts b/showcases/angular-showcase/src/app/app.routing.module.ts
deleted file mode 100644
index 8d0539a8f47..00000000000
--- a/showcases/angular-showcase/src/app/app.routing.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { getRoutes } from './utils/navigation-item';
-
-const routes: any = getRoutes();
-
-@NgModule({
-	imports: [RouterModule.forRoot(routes, { useHash: true })],
-	exports: [RouterModule],
-	schemas: [NO_ERRORS_SCHEMA]
-})
-export class AppRoutingModule {}
diff --git a/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.ts b/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.ts
index 03f2a40e491..a107f5749ac 100644
--- a/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.ts
+++ b/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/accordion-item.json';
+import { DBAccordionItem } from '../../../../../../output/angular/src/components/accordion-item';
+import { DefaultComponent } from '../default.component';
 
 @Component({
 	selector: 'app-accordion-item',
-	templateUrl: './accordion-item.component.html'
+	templateUrl: './accordion-item.component.html',
+	imports: [DefaultComponent, DBAccordionItem],
+	standalone: true
 })
 export class AccordionItemComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/accordion/accordion.component.ts b/showcases/angular-showcase/src/app/components/accordion/accordion.component.ts
index 22477f21d93..84c829017c5 100644
--- a/showcases/angular-showcase/src/app/components/accordion/accordion.component.ts
+++ b/showcases/angular-showcase/src/app/components/accordion/accordion.component.ts
@@ -1,9 +1,15 @@
 import { Component } from '@angular/core';
+import { DBAccordion } from '../../../../../../output/angular/src/components/accordion/accordion';
 import defaultComponentVariants from '../../../../../shared/accordion.json';
+import { DefaultComponent } from '../default.component';
+import { DBInfotext } from '../../../../../../output/angular/src/components/infotext';
+import { DBAccordionItem } from '../../../../../../output/angular/src/components/accordion-item';
 
 @Component({
 	selector: 'app-accordion',
-	templateUrl: './accordion.component.html'
+	templateUrl: './accordion.component.html',
+	imports: [DefaultComponent, DBInfotext, DBAccordion, DBAccordionItem],
+	standalone: true
 })
 export class AccordionComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/alert/alert.component.ts b/showcases/angular-showcase/src/app/components/alert/alert.component.ts
index 6e6551563c3..ad2844bae7d 100644
--- a/showcases/angular-showcase/src/app/components/alert/alert.component.ts
+++ b/showcases/angular-showcase/src/app/components/alert/alert.component.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
+import { DBAlert } from '../../../../../../output/angular/src/components/alert/alert';
 import defaultComponentVariants from '../../../../../shared/alert.json';
+import { DefaultComponent } from '../default.component';
 
 @Component({
 	selector: 'app-alert',
-	templateUrl: './alert.component.html'
+	templateUrl: './alert.component.html',
+	imports: [DefaultComponent, DBAlert],
+	standalone: true
 })
 export class AlertComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/badge/badge.component.html b/showcases/angular-showcase/src/app/components/badge/badge.component.html
index 5b529d645d6..4ea0dd775da 100644
--- a/showcases/angular-showcase/src/app/components/badge/badge.component.html
+++ b/showcases/angular-showcase/src/app/components/badge/badge.component.html
@@ -10,30 +10,25 @@
 		let-exampleIndex="exampleIndex"
 		let-variantIndex="variantIndex"
 	>
-		<ng-container *ngIf="!exampleProps.placement && !exampleProps.example">
+		@if (!exampleProps.placement && !exampleProps.example) {
 			<db-badge
 				[variant]="exampleProps.variant"
 				[emphasis]="exampleProps.emphasis"
 				[size]="exampleProps.size"
 				>{{ exampleProps.noContent ? "" : exampleName }}</db-badge
 			>
-			<db-infotext
-				*ngIf="exampleProps.noContent"
-				variant="informational"
-				size="small"
-				icon="none"
-			>
-				{{ exampleName }}
-			</db-infotext>
-		</ng-container>
+			@if (exampleProps.noContent) {
+				<db-infotext variant="informational" size="small" icon="none">
+					{{ exampleName }}
+				</db-infotext>
+			}
+		}
 
-		<ng-container
-			*ngIf="
-				exampleProps.placement &&
-				exampleProps.placement !== 'inline' &&
-				!exampleProps.example
-			"
-		>
+		@if (
+			exampleProps.placement &&
+			exampleProps.placement !== "inline" &&
+			!exampleProps.example
+		) {
 			<db-button icon="account" variant="outlined" [noText]="true">
 				<db-badge
 					emphasis="strong"
@@ -46,9 +41,9 @@
 			<db-infotext variant="informational" size="small" icon="none">
 				{{ exampleName }}
 			</db-infotext>
-		</ng-container>
+		}
 
-		<ng-container *ngIf="exampleProps.placement === 'inline'">
+		@if (exampleProps.placement === "inline") {
 			<div class="badge-inline-container">
 				<db-icon icon="account"></db-icon>
 				<span>{{ exampleName }}</span>
@@ -57,9 +52,9 @@
 				</db-badge>
 				<db-icon icon="error"></db-icon>
 			</div>
-		</ng-container>
+		}
 
-		<ng-container *ngIf="exampleProps.example === 'icon'">
+		@if (exampleProps.example === "icon") {
 			<db-badge
 				variant="critical"
 				emphasis="strong"
@@ -70,9 +65,9 @@
 			<db-infotext variant="informational" size="small" icon="none">
 				{{ exampleName }}
 			</db-infotext>
-		</ng-container>
+		}
 
-		<ng-container *ngIf="exampleProps.example === 'number'">
+		@if (exampleProps.example === "number") {
 			<db-badge variant="successful">9</db-badge>
 			<db-badge variant="informational">12</db-badge>
 			<db-badge variant="warning">123</db-badge>
@@ -87,7 +82,7 @@
 			</db-badge>
 			<db-infotext variant="informational" size="small" icon="none">
 				{{ exampleName }}
-			</db-infotext></ng-container
-		>
+			</db-infotext>
+		}
 	</ng-template>
 </app-default-component>
diff --git a/showcases/angular-showcase/src/app/components/badge/badge.component.ts b/showcases/angular-showcase/src/app/components/badge/badge.component.ts
index 837da281a39..4abc2550518 100644
--- a/showcases/angular-showcase/src/app/components/badge/badge.component.ts
+++ b/showcases/angular-showcase/src/app/components/badge/badge.component.ts
@@ -1,9 +1,16 @@
 import { Component } from '@angular/core';
+import { DBIcon } from '../../../../../../output/angular/src/components/icon/icon';
+import { DBBadge } from '../../../../../../output/angular/src/components/badge/badge';
 import defaultComponentVariants from '../../../../../shared/badge.json';
+import { DefaultComponent } from '../default.component';
+import { DBInfotext } from '../../../../../../output/angular/src/components/infotext';
+import { DBButton } from '../../../../../../output/angular/src/components/button';
 
 @Component({
 	selector: 'app-badge',
-	templateUrl: './badge.component.html'
+	templateUrl: './badge.component.html',
+	imports: [DefaultComponent, DBBadge, DBInfotext, DBButton, DBIcon],
+	standalone: true
 })
 export class BadgeComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/button/button.component.ts b/showcases/angular-showcase/src/app/components/button/button.component.ts
index 5534d0aaa79..2f0bff3d72b 100644
--- a/showcases/angular-showcase/src/app/components/button/button.component.ts
+++ b/showcases/angular-showcase/src/app/components/button/button.component.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/button.json';
+import { DefaultComponent } from '../default.component';
+import { DBButton } from '../../../../../../output/angular/src/components/button';
 
 @Component({
 	selector: 'app-button',
-	templateUrl: './button.component.html'
+	templateUrl: './button.component.html',
+	imports: [DefaultComponent, DBButton],
+	standalone: true
 })
 export class ButtonComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/card/card.component.html b/showcases/angular-showcase/src/app/components/card/card.component.html
index 6926400818a..9bb76ae1411 100644
--- a/showcases/angular-showcase/src/app/components/card/card.component.html
+++ b/showcases/angular-showcase/src/app/components/card/card.component.html
@@ -16,9 +16,9 @@
 			[spacing]="exampleProps.spacing"
 		>
 			<strong>{{ exampleName }}</strong>
-			<span *ngIf="exampleProps.colorVariant">{{
-				exampleProps.colorVariant
-			}}</span>
+			@if (exampleProps.colorVariant) {
+				<span>{{ exampleProps.colorVariant }}</span>
+			}
 		</db-card>
 	</ng-template>
 </app-default-component>
diff --git a/showcases/angular-showcase/src/app/components/card/card.component.ts b/showcases/angular-showcase/src/app/components/card/card.component.ts
index e252ca33eea..998331c8741 100644
--- a/showcases/angular-showcase/src/app/components/card/card.component.ts
+++ b/showcases/angular-showcase/src/app/components/card/card.component.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/card.json';
+import { DefaultComponent } from '../default.component';
+import { DBCard } from '../../../../../../output/angular/src/components/card';
 
 @Component({
 	selector: 'app-card',
-	templateUrl: './card.component.html'
+	templateUrl: './card.component.html',
+	imports: [DefaultComponent, DBCard],
+	standalone: true
 })
 export class CardComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.ts b/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.ts
index a774b462b11..f0c906600a1 100644
--- a/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.ts
+++ b/showcases/angular-showcase/src/app/components/checkbox/checkbox.component.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
+import { DBCheckbox } from '../../../../../../output/angular/src/components/checkbox/checkbox';
 import defaultComponentVariants from '../../../../../shared/checkbox.json';
+import { DefaultComponent } from '../default.component';
 
 @Component({
 	selector: 'app-checkbox',
-	templateUrl: './checkbox.component.html'
+	templateUrl: './checkbox.component.html',
+	imports: [DefaultComponent, DBCheckbox],
+	standalone: true
 })
 export class CheckboxComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/default.component.html b/showcases/angular-showcase/src/app/components/default.component.html
index e95142d0b0a..8bae33dd158 100644
--- a/showcases/angular-showcase/src/app/components/default.component.html
+++ b/showcases/angular-showcase/src/app/components/default.component.html
@@ -1,56 +1,16 @@
 <!-- TODO: Content Projection not working for nested components? -> Had to copy paste variant-cards... -->
-<db-code-docs
-	*ngIf="variantRef"
-	class="variants-card"
-	[codeSnippets]="getCodeSnippets(variantRef.examples)"
->
-	<div class="variants-list">
-		<div
-			*ngFor="let example of variantRef.examples; index as exampleIndex"
-			[style]="example.style"
-			[class]="example.className"
-		>
-			<ng-container
-				*ngTemplateOutlet="
-					exampleTemplate;
-					context: {
-						exampleProps: example.props,
-						exampleName: example.name,
-						exampleIndex: exampleIndex,
-						variantIndex: variantRefIndex
-					}
-				"
-			>
-			</ng-container>
-		</div>
-	</div>
-</db-code-docs>
-
-<div *ngIf="!variantRef" class="default-container">
-	<h1>{{ title }}</h1>
-	<div *ngFor="let variant of variants; index as variantIndex">
-		<db-divider></db-divider>
-		<db-link
-			class="link-headline"
-			content="external"
-			target="_blank"
-			[href]="getLink(variant.name)"
-		>
-			<span>{{ variant.name }}</span>
-		</db-link>
-		<db-code-docs
-			class="variants-card"
-			[codeSnippets]="getCodeSnippets(variant.examples)"
-		>
-			<div class="variants-list">
-				<div
-					*ngFor="
-						let example of variant.examples;
-						index as exampleIndex
-					"
-					[style]="example.style"
-					[class]="example.className"
-				>
+@if (variantRef) {
+	<db-code-docs
+		class="variants-card"
+		[codeSnippets]="getCodeSnippets(variantRef.examples)"
+	>
+		<div class="variants-list">
+			@for (
+				example of variantRef.examples;
+				track example;
+				let exampleIndex = $index
+			) {
+				<div [style]="example.style" [class]="example.className">
 					<ng-container
 						*ngTemplateOutlet="
 							exampleTemplate;
@@ -58,13 +18,62 @@ <h1>{{ title }}</h1>
 								exampleProps: example.props,
 								exampleName: example.name,
 								exampleIndex: exampleIndex,
-								variantIndex: variantIndex
+								variantIndex: variantRefIndex
 							}
 						"
 					>
 					</ng-container>
 				</div>
+			}
+		</div>
+	</db-code-docs>
+}
+
+@if (!variantRef) {
+	<div class="default-container">
+		<h1>{{ title }}</h1>
+		@for (variant of variants; track variant; let variantIndex = $index) {
+			<div>
+				<db-divider></db-divider>
+				<db-link
+					class="link-headline"
+					content="external"
+					target="_blank"
+					[href]="getLink(variant.name)"
+				>
+					<span>{{ variant.name }}</span>
+				</db-link>
+				<db-code-docs
+					class="variants-card"
+					[codeSnippets]="getCodeSnippets(variant.examples)"
+				>
+					<div class="variants-list">
+						@for (
+							example of variant.examples;
+							track example;
+							let exampleIndex = $index
+						) {
+							<div
+								[style]="example.style"
+								[class]="example.className"
+							>
+								<ng-container
+									*ngTemplateOutlet="
+										exampleTemplate;
+										context: {
+											exampleProps: example.props,
+											exampleName: example.name,
+											exampleIndex: exampleIndex,
+											variantIndex: variantIndex
+										}
+									"
+								>
+								</ng-container>
+							</div>
+						}
+					</div>
+				</db-code-docs>
 			</div>
-		</db-code-docs>
+		}
 	</div>
-</div>
+}
diff --git a/showcases/angular-showcase/src/app/components/default.component.ts b/showcases/angular-showcase/src/app/components/default.component.ts
index 55fa365e040..53b4b52d286 100644
--- a/showcases/angular-showcase/src/app/components/default.component.ts
+++ b/showcases/angular-showcase/src/app/components/default.component.ts
@@ -1,5 +1,15 @@
-import { Component, type OnInit, Input, TemplateRef } from '@angular/core';
+import {
+	Component,
+	OnInit,
+	Input,
+	TemplateRef,
+	NO_ERRORS_SCHEMA
+} from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
+import { DBLink } from '../../../../../output/angular/src/components/link/link';
+import { DBDivider } from '../../../../../output/angular/src/components/divider/divider';
+import { DBCodeDocs } from '../../../../../output/angular/src/components/code-docs/code-docs';
 import type {
 	DefaultComponentProps,
 	DefaultComponentVariants,
@@ -14,19 +24,22 @@ import {
 
 @Component({
 	selector: 'app-default-component',
-	templateUrl: './default.component.html'
+	templateUrl: './default.component.html',
+	imports: [DBCodeDocs, DBDivider, DBLink, NgTemplateOutlet],
+	standalone: true,
+	schemas: [NO_ERRORS_SCHEMA]
 })
 export class DefaultComponent implements OnInit {
 	@Input() title: DefaultComponentProps['title'] = '';
 	@Input() variants: DefaultComponentProps['variants'] = [];
-	@Input() exampleTemplate: TemplateRef<any>;
+	@Input() exampleTemplate!: TemplateRef<any>;
 
 	tonality = TONALITY.REGULAR;
 	color = COLOR.NEUTRAL;
-	page: string;
+	page?: string;
 
 	variantRef: DefaultComponentVariants | undefined;
-	variantRefIndex: number;
+	variantRefIndex = 0;
 
 	constructor(private readonly route: ActivatedRoute) {}
 
diff --git a/showcases/angular-showcase/src/app/components/divider/divider.component.ts b/showcases/angular-showcase/src/app/components/divider/divider.component.ts
index c810315cb63..016141b0aa2 100644
--- a/showcases/angular-showcase/src/app/components/divider/divider.component.ts
+++ b/showcases/angular-showcase/src/app/components/divider/divider.component.ts
@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/divider.json';
+import { DefaultComponent } from '../default.component';
+import { DBDivider } from '../../../../../../output/angular/src/components/divider/divider';
+import { DBInfotext } from '../../../../../../output/angular/src/components/infotext';
 
 @Component({
 	selector: 'app-divider',
-	templateUrl: './divider.component.html'
+	templateUrl: './divider.component.html',
+	imports: [DefaultComponent, DBDivider, DBInfotext],
+	standalone: true
 })
 export class DividerComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/drawer/drawer.component.ts b/showcases/angular-showcase/src/app/components/drawer/drawer.component.ts
index e23de49d590..4e6da4d04cd 100644
--- a/showcases/angular-showcase/src/app/components/drawer/drawer.component.ts
+++ b/showcases/angular-showcase/src/app/components/drawer/drawer.component.ts
@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/drawer.json';
+import { DefaultComponent } from '../default.component';
+import { DBDrawer } from '../../../../../../output/angular/src/components/drawer';
+import { DBButton } from '../../../../../../output/angular/src/components/button';
 
 @Component({
 	selector: 'app-drawer',
-	templateUrl: './drawer.component.html'
+	templateUrl: './drawer.component.html',
+	imports: [DefaultComponent, DBDrawer, DBButton],
+	standalone: true
 })
 export class DrawerComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/form/form.component.html b/showcases/angular-showcase/src/app/components/form/form.component.html
index d4dd5e12721..39431ec7655 100644
--- a/showcases/angular-showcase/src/app/components/form/form.component.html
+++ b/showcases/angular-showcase/src/app/components/form/form.component.html
@@ -96,15 +96,17 @@ <h6>Reactive Forms Example:</h6>
 
 				<p>Radio:</p>
 				<ul>
-					<li *ngFor="let radioName of array">
-						<db-radio
-							label="Label"
-							name="RadioGroup"
-							[value]="radioName"
-							(change)="model.radio = radioName"
-							[label]="getRadioName(radioName)"
-						></db-radio>
-					</li>
+					@for (radioName of array; track radioName) {
+						<li>
+							<db-radio
+								label="Label"
+								name="RadioGroup"
+								[value]="radioName"
+								(change)="model.radio = radioName"
+								[label]="getRadioName(radioName)"
+							></db-radio>
+						</li>
+					}
 				</ul>
 
 				<p>Textarea:</p>
@@ -121,15 +123,17 @@ <h6>Reactive Forms Example:</h6>
 
 				<p>Tags:</p>
 				<ul>
-					<li *ngFor="let tag of array; let i = index">
-						<db-tag
-							[variant]="i === 0 ? undefined : 'successful'"
-							[emphasis]="i === 2 ? 'strong' : 'weak'"
-							><db-checkbox (onChange)="changeTags(tag)">{{
-								getTagName(tag)
-							}}</db-checkbox></db-tag
-						>
-					</li>
+					@for (tag of array; track tag; let i = $index) {
+						<li>
+							<db-tag
+								[variant]="i === 0 ? undefined : 'successful'"
+								[emphasis]="i === 2 ? 'strong' : 'weak'"
+								><db-checkbox (onChange)="changeTags(tag)">{{
+									getTagName(tag)
+								}}</db-checkbox></db-tag
+							>
+						</li>
+					}
 				</ul>
 				<p>Checkbox:</p>
 				<db-checkbox
@@ -180,13 +184,13 @@ <h6>Reactive Forms Example:</h6>
 					<option value="test2">Test2</option>
 				</db-select>
 				<!-- <db-select
-					[value]="select"
-					label="Label"
-					(change)="select = $event.target.value"
-				>
-					<option value="test1">Test1</option>
-					<option value="test2">Test2</option>
-				</db-select> -->
+        [value]="select"
+        label="Label"
+        (change)="select = $event.target.value"
+        >
+        <option value="test1">Test1</option>
+        <option value="test2">Test2</option>
+      </db-select> -->
 				<p>Button:</p>
 				<db-button type="button" (click)="resetValues()">
 					Reset
diff --git a/showcases/angular-showcase/src/app/components/form/form.component.ts b/showcases/angular-showcase/src/app/components/form/form.component.ts
index 7df2c0b96aa..c74d12c4515 100644
--- a/showcases/angular-showcase/src/app/components/form/form.component.ts
+++ b/showcases/angular-showcase/src/app/components/form/form.component.ts
@@ -1,9 +1,38 @@
-import { Component } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+	FormControl,
+	FormGroup,
+	FormsModule,
+	ReactiveFormsModule
+} from '@angular/forms';
+import { DBTag } from '../../../../../../output/angular/src/components/tag/tag';
+import { DBRadio } from '../../../../../../output/angular/src/components/radio/radio';
+import { DBTextarea } from '../../../../../../output/angular/src/components/textarea/textarea';
+import { DBInput } from '../../../../../../output/angular/src/components/input/input';
+import { DefaultComponent } from '../default.component';
+import { DBSelect } from '../../../../../../output/angular/src/components/select/select';
+import { DBCheckbox } from '../../../../../../output/angular/src/components/checkbox/checkbox';
+import { DBDivider } from '../../../../../../output/angular/src/components/divider/divider';
+import { DBButton } from '../../../../../../output/angular/src/components/button';
 
 @Component({
 	selector: 'app-form',
-	templateUrl: './form.component.html'
+	templateUrl: './form.component.html',
+	imports: [
+		FormsModule,
+		ReactiveFormsModule,
+		DefaultComponent,
+		DBInput,
+		DBTextarea,
+		DBSelect,
+		DBRadio,
+		DBTag,
+		DBCheckbox,
+		DBDivider,
+		DBButton
+	],
+	standalone: true,
+	schemas: [NO_ERRORS_SCHEMA]
 })
 export class FormComponent {
 	array = ['X', 'Y', 'Z'];
diff --git a/showcases/angular-showcase/src/app/components/icon/icon.component.ts b/showcases/angular-showcase/src/app/components/icon/icon.component.ts
index d57e581a656..bba4e75cbd9 100644
--- a/showcases/angular-showcase/src/app/components/icon/icon.component.ts
+++ b/showcases/angular-showcase/src/app/components/icon/icon.component.ts
@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/icon.json';
+import { DefaultComponent } from '../default.component';
+import { DBIcon } from '../../../../../../output/angular/src/components/icon/icon';
+import { DBInfotext } from '../../../../../../output/angular/src/components/infotext';
 
 @Component({
 	selector: 'app-icon',
-	templateUrl: './icon.component.html'
+	templateUrl: './icon.component.html',
+	imports: [DefaultComponent, DBIcon, DBInfotext],
+	standalone: true
 })
 export class IconComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/infotext/infotext.component.ts b/showcases/angular-showcase/src/app/components/infotext/infotext.component.ts
index 16baa5864b8..0a1d768c274 100644
--- a/showcases/angular-showcase/src/app/components/infotext/infotext.component.ts
+++ b/showcases/angular-showcase/src/app/components/infotext/infotext.component.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/infotext.json';
+import { DefaultComponent } from '../default.component';
+import { DBInfotext } from '../../../../../../output/angular/src/components/infotext';
 
 @Component({
 	selector: 'app-infotext',
-	templateUrl: './infotext.component.html'
+	templateUrl: './infotext.component.html',
+	imports: [DefaultComponent, DBInfotext],
+	standalone: true
 })
 export class InfotextComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/input/input.component.ts b/showcases/angular-showcase/src/app/components/input/input.component.ts
index d59a0003a98..89dbbf848b4 100644
--- a/showcases/angular-showcase/src/app/components/input/input.component.ts
+++ b/showcases/angular-showcase/src/app/components/input/input.component.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/input.json';
+import { DefaultComponent } from '../default.component';
+import { DBInput } from '../../../../../../output/angular/src/components/input/input';
 
 @Component({
 	selector: 'app-input',
-	templateUrl: './input.component.html'
+	templateUrl: './input.component.html',
+	imports: [DefaultComponent, DBInput],
+	standalone: true
 })
 export class InputComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/link/link.component.ts b/showcases/angular-showcase/src/app/components/link/link.component.ts
index 565821fc6e2..30feabdc817 100644
--- a/showcases/angular-showcase/src/app/components/link/link.component.ts
+++ b/showcases/angular-showcase/src/app/components/link/link.component.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/link.json';
+import { DefaultComponent } from '../default.component';
+import { DBLink } from '../../../../../../output/angular/src/components/link';
 
 @Component({
 	selector: 'app-link',
-	templateUrl: './link.component.html'
+	templateUrl: './link.component.html',
+	imports: [DefaultComponent, DBLink],
+	standalone: true
 })
 export class LinkComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/main-navigation/main-navigation.component.ts b/showcases/angular-showcase/src/app/components/main-navigation/main-navigation.component.ts
index 78378a3b711..e11abe2e5ae 100644
--- a/showcases/angular-showcase/src/app/components/main-navigation/main-navigation.component.ts
+++ b/showcases/angular-showcase/src/app/components/main-navigation/main-navigation.component.ts
@@ -1,9 +1,20 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/main-navigation.json';
+import { DefaultComponent } from '../default.component';
+import { DBMainNavigation } from '../../../../../../output/angular/src/components/main-navigation/main-navigation';
+import { DBNavigationItem } from '../../../../../../output/angular/src/components/navigation-item/navigation-item';
+import { NavigationContentDirective } from '../../../../../../output/angular/src/components/navigation-item/NavigationContent.directive';
 
 @Component({
 	selector: 'app-main-navigation',
-	templateUrl: './main-navigation.component.html'
+	templateUrl: './main-navigation.component.html',
+	imports: [
+		DefaultComponent,
+		DBMainNavigation,
+		DBNavigationItem,
+		NavigationContentDirective
+	],
+	standalone: true
 })
 export class MainNavigationComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
index 4ef1c7ae17f..259c20a394c 100644
--- a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
+++ b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.html
@@ -19,31 +19,33 @@
 			(click)="showAlert(exampleName)"
 		>
 			<ng-container *dbNavigationContent>
-				<ng-container *ngIf="exampleProps.areaPopup">{{
-					exampleName
-				}}</ng-container>
-				<a href="#" *ngIf="!exampleProps.areaPopup">{{
-					exampleName
-				}}</a>
+				@if (exampleProps.areaPopup) {
+					{{ exampleName }}
+				}
+				@if (!exampleProps.areaPopup) {
+					<a href="#">{{ exampleName }}</a>
+				}
 			</ng-container>
 
-			<ng-container *ngIf="exampleProps.areaPopup" sub-navigation>
-				<db-navigation-item [areaPopup]="false">
-					<ng-container *dbNavigationContent>
-						<a href="#">Test1</a>
-					</ng-container>
-				</db-navigation-item>
-				<db-navigation-item [areaPopup]="false">
-					<ng-container *dbNavigationContent>
-						<a href="#">Test2</a>
-					</ng-container>
-				</db-navigation-item>
-				<db-navigation-item [areaPopup]="false">
-					<ng-container *dbNavigationContent>
-						<a href="#">Test3</a>
-					</ng-container>
-				</db-navigation-item>
-			</ng-container>
+			@if (exampleProps.areaPopup) {
+				<ng-container sub-navigation>
+					<db-navigation-item [areaPopup]="false">
+						<ng-container *dbNavigationContent>
+							<a href="#">Test1</a>
+						</ng-container>
+					</db-navigation-item>
+					<db-navigation-item [areaPopup]="false">
+						<ng-container *dbNavigationContent>
+							<a href="#">Test2</a>
+						</ng-container>
+					</db-navigation-item>
+					<db-navigation-item [areaPopup]="false">
+						<ng-container *dbNavigationContent>
+							<a href="#">Test3</a>
+						</ng-container>
+					</db-navigation-item>
+				</ng-container>
+			}
 		</db-navigation-item>
 	</ng-template>
 </app-default-component>
diff --git a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.ts b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.ts
index 2a69d8c08d4..3d812d69e62 100644
--- a/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.ts
+++ b/showcases/angular-showcase/src/app/components/navigation-item/navigation-item.component.ts
@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/navigation-item.json';
+import { DefaultComponent } from '../default.component';
+import { DBNavigationItem } from '../../../../../../output/angular/src/components/navigation-item/navigation-item';
+import { NavigationContentDirective } from '../../../../../../output/angular/src/components/navigation-item/NavigationContent.directive';
 
 @Component({
 	selector: 'app-navigation-item',
-	templateUrl: './navigation-item.component.html'
+	templateUrl: './navigation-item.component.html',
+	imports: [DefaultComponent, DBNavigationItem, NavigationContentDirective],
+	standalone: true
 })
 export class NavigationItemComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/popover/popover.component.ts b/showcases/angular-showcase/src/app/components/popover/popover.component.ts
index d3e06adf5a5..c8fb319ccc8 100644
--- a/showcases/angular-showcase/src/app/components/popover/popover.component.ts
+++ b/showcases/angular-showcase/src/app/components/popover/popover.component.ts
@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/popover.json';
+import { DefaultComponent } from '../default.component';
+import { DBButton } from '../../../../../../output/angular/src/components/button';
+import { DBPopover } from '../../../../../../output/angular/src/components/popover/popover';
 
 @Component({
 	selector: 'app-popover',
-	templateUrl: './popover.component.html'
+	templateUrl: './popover.component.html',
+	imports: [DefaultComponent, DBPopover, DBButton],
+	standalone: true
 })
 export class PopoverComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/radio/radio.component.ts b/showcases/angular-showcase/src/app/components/radio/radio.component.ts
index 0adc74a18f3..183f15128fe 100644
--- a/showcases/angular-showcase/src/app/components/radio/radio.component.ts
+++ b/showcases/angular-showcase/src/app/components/radio/radio.component.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/radio.json';
+import { DefaultComponent } from '../default.component';
+import { DBRadio } from '../../../../../../output/angular/src/components/radio/radio';
 
 @Component({
 	selector: 'app-radio',
-	templateUrl: './radio.component.html'
+	templateUrl: './radio.component.html',
+	imports: [DefaultComponent, DBRadio],
+	standalone: true
 })
 export class RadioComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/section/section.component.ts b/showcases/angular-showcase/src/app/components/section/section.component.ts
index 74a5b56bab3..515c9473ea0 100644
--- a/showcases/angular-showcase/src/app/components/section/section.component.ts
+++ b/showcases/angular-showcase/src/app/components/section/section.component.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/section.json';
+import { DefaultComponent } from '../default.component';
+import { DBSection } from '../../../../../../output/angular/src/components/section/section';
 
 @Component({
 	selector: 'app-section',
-	templateUrl: './section.component.html'
+	templateUrl: './section.component.html',
+	imports: [DefaultComponent, DBSection],
+	standalone: true
 })
 export class SectionComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/select/select.component.ts b/showcases/angular-showcase/src/app/components/select/select.component.ts
index aa494507cf1..647e81218b9 100644
--- a/showcases/angular-showcase/src/app/components/select/select.component.ts
+++ b/showcases/angular-showcase/src/app/components/select/select.component.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/select.json';
+import { DefaultComponent } from '../default.component';
+import { DBSelect } from '../../../../../../output/angular/src/components/select/select';
 
 @Component({
 	selector: 'app-select',
-	templateUrl: './select.component.html'
+	templateUrl: './select.component.html',
+	imports: [DefaultComponent, DBSelect],
+	standalone: true
 })
 export class SelectComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/tag/tag.component.html b/showcases/angular-showcase/src/app/components/tag/tag.component.html
index e184252e0a2..21e2e8bb548 100644
--- a/showcases/angular-showcase/src/app/components/tag/tag.component.html
+++ b/showcases/angular-showcase/src/app/components/tag/tag.component.html
@@ -19,32 +19,30 @@
 			[removeButton]="exampleProps.removeButton"
 			(onRemove)="showAlert(exampleName)"
 		>
-			<db-button *ngIf="exampleProps.component === 'button'">{{
-				exampleName
-			}}</db-button>
-			<db-link *ngIf="exampleProps.component === 'link'" href="#">
+			@if (exampleProps.component === "button") {
+				<db-button>{{ exampleName }}</db-button>
+			}
+			@if (exampleProps.component === "link") {
+				<db-link href="#">
+					{{ exampleName }}
+				</db-link>
+			}
+			@if (exampleProps.component === "checkbox") {
+				<db-checkbox [checked]="exampleProps.checked">{{
+					exampleName
+				}}</db-checkbox>
+			}
+			@if (exampleProps.component === "radio") {
+				<db-radio name="radio" [checked]="exampleProps.checked">{{
+					exampleName
+				}}</db-radio>
+			}
+			@if (!exampleProps.component && !exampleProps.overflow) {
 				{{ exampleName }}
-			</db-link>
-			<db-checkbox
-				*ngIf="exampleProps.component === 'checkbox'"
-				[checked]="exampleProps.checked"
-				>{{ exampleName }}</db-checkbox
-			>
-			<db-radio
-				name="radio"
-				*ngIf="exampleProps.component === 'radio'"
-				[checked]="exampleProps.checked"
-				>{{ exampleName }}</db-radio
-			>
-			<ng-container
-				*ngIf="!exampleProps.component && !exampleProps.overflow"
-				>{{ exampleName }}</ng-container
-			>
-			<ng-container
-				*ngIf="!exampleProps.component && exampleProps.overflow"
-			>
+			}
+			@if (!exampleProps.component && exampleProps.overflow) {
 				<span>{{ exampleName }}</span>
-			</ng-container>
+			}
 		</db-tag>
 	</ng-template>
 </app-default-component>
diff --git a/showcases/angular-showcase/src/app/components/tag/tag.component.ts b/showcases/angular-showcase/src/app/components/tag/tag.component.ts
index f216aa8e418..f4674eaec61 100644
--- a/showcases/angular-showcase/src/app/components/tag/tag.component.ts
+++ b/showcases/angular-showcase/src/app/components/tag/tag.component.ts
@@ -1,9 +1,17 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/tag.json';
+import { DefaultComponent } from '../default.component';
+import { DBTag } from '../../../../../../output/angular/src/components/tag/tag';
+import { DBButton } from '../../../../../../output/angular/src/components/button';
+import { DBCheckbox } from '../../../../../../output/angular/src/components/checkbox/checkbox';
+import { DBRadio } from '../../../../../../output/angular/src/components/radio/radio';
+import { DBLink } from '../../../../../../output/angular/src/components/link';
 
 @Component({
 	selector: 'app-tag',
-	templateUrl: './tag.component.html'
+	templateUrl: './tag.component.html',
+	imports: [DefaultComponent, DBTag, DBButton, DBCheckbox, DBRadio, DBLink],
+	standalone: true
 })
 export class TagComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts b/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts
index 19185cabad9..7b664525110 100644
--- a/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts
+++ b/showcases/angular-showcase/src/app/components/textarea/textarea.component.ts
@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/textarea.json';
+import { DefaultComponent } from '../default.component';
+import { DBTextarea } from '../../../../../../output/angular/src/components/textarea/textarea';
 
 @Component({
 	selector: 'app-textarea',
-	templateUrl: './textarea.component.html'
+	templateUrl: './textarea.component.html',
+	imports: [DefaultComponent, DBTextarea],
+	standalone: true
 })
 export class TextareaComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.ts b/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.ts
index 320bda6c3f3..4d7ceed85de 100644
--- a/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.ts
+++ b/showcases/angular-showcase/src/app/components/tooltip/tooltip.component.ts
@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
 import defaultComponentVariants from '../../../../../shared/tooltip.json';
+import { DefaultComponent } from '../default.component';
+import { DBButton } from '../../../../../../output/angular/src/components/button';
+import { DBTooltip } from '../../../../../../output/angular/src/components/tooltip/tooltip';
 
 @Component({
 	selector: 'app-tooltip',
-	templateUrl: './tooltip.component.html'
+	templateUrl: './tooltip.component.html',
+	imports: [DefaultComponent, DBTooltip, DBButton],
+	standalone: true
 })
 export class TooltipComponent {
 	variants = defaultComponentVariants;
diff --git a/showcases/angular-showcase/src/app/nav-item/nav-item.component.html b/showcases/angular-showcase/src/app/nav-item/nav-item.component.html
index a34c263c9b6..1e379ec3aaf 100644
--- a/showcases/angular-showcase/src/app/nav-item/nav-item.component.html
+++ b/showcases/angular-showcase/src/app/nav-item/nav-item.component.html
@@ -1,23 +1,24 @@
-<db-navigation-item
-	*ngIf="navItem"
-	[backButtonText]="getBackButtonText()"
-	[active]="isActive()"
->
-	<ng-container *ngIf="navItem.subNavigation" sub-navigation>
-		<ng-container *ngFor="let item of navItem.subNavigation">
-			<app-nav-item [navItem]="item"> </app-nav-item>
+@if (navItem) {
+	<db-navigation-item
+		[backButtonText]="getBackButtonText()"
+		[active]="isActive()"
+	>
+		@if (navItem.subNavigation) {
+			<ng-container sub-navigation>
+				@for (item of navItem.subNavigation; track item.label) {
+					<app-nav-item [navItem]="item"> </app-nav-item>
+				}
+			</ng-container>
+		}
+		<ng-container *dbNavigationContent>
+			@if (navItem.component) {
+				<a [routerLink]="navItem.path" queryParamsHandling="merge">
+					{{ navItem.label }}
+				</a>
+			}
+			@if (!navItem.component) {
+				{{ navItem.label }}
+			}
 		</ng-container>
-	</ng-container>
-	<ng-container *dbNavigationContent>
-		<a
-			*ngIf="navItem.component"
-			[routerLink]="navItem.path"
-			queryParamsHandling="merge"
-		>
-			{{ navItem.label }}
-		</a>
-		<ng-container *ngIf="!navItem.component">{{
-			navItem.label
-		}}</ng-container>
-	</ng-container>
-</db-navigation-item>
+	</db-navigation-item>
+}
diff --git a/showcases/angular-showcase/src/app/nav-item/nav-item.component.ts b/showcases/angular-showcase/src/app/nav-item/nav-item.component.ts
index 160da1a45b5..028b841dd7e 100644
--- a/showcases/angular-showcase/src/app/nav-item/nav-item.component.ts
+++ b/showcases/angular-showcase/src/app/nav-item/nav-item.component.ts
@@ -1,13 +1,17 @@
-import { Router } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { Component, Input } from '@angular/core';
 import { NavItem } from '../utils/navigation-item';
+import { NavigationContentDirective } from '../../../../../output/angular/src/components/navigation-item/NavigationContent.directive';
+import { DBNavigationItem } from '../../../../../output/angular/src/components/navigation-item/navigation-item';
 
 @Component({
 	selector: 'app-nav-item',
-	templateUrl: './nav-item.component.html'
+	templateUrl: './nav-item.component.html',
+	imports: [RouterLink, DBNavigationItem, NavigationContentDirective],
+	standalone: true
 })
 export class NavItemComponent {
-	@Input('navItem') navItem: NavItem;
+	@Input({ required: true }) navItem!: NavItem;
 	constructor(private readonly router: Router) {}
 
 	isActive = () =>
diff --git a/showcases/angular-showcase/src/main.ts b/showcases/angular-showcase/src/main.ts
index cb793dadbd5..441f8c22fcb 100644
--- a/showcases/angular-showcase/src/main.ts
+++ b/showcases/angular-showcase/src/main.ts
@@ -1,15 +1,15 @@
 import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideRouter, withHashLocation } from '@angular/router';
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { getRoutes } from './app/utils/navigation-item';
 
 if (environment.production) {
 	enableProdMode();
 }
 
-platformBrowserDynamic()
-	.bootstrapModule(AppModule)
-
-	.catch((error) => {
-		console.error(error);
-	});
+// eslint-disable-next-line @typescript-eslint/no-floating-promises
+bootstrapApplication(AppComponent, {
+	providers: [provideRouter(getRoutes(), withHashLocation())]
+});
diff --git a/showcases/angular-showcase/src/polyfills.ts b/showcases/angular-showcase/src/polyfills.ts
deleted file mode 100644
index e4555ed11fa..00000000000
--- a/showcases/angular-showcase/src/polyfills.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes recent versions of Safari, Chrome (including
- * Opera), Edge on the desktop, and iOS and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- *  with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- *  (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js'; // Included with Angular CLI.
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
diff --git a/showcases/angular-showcase/tsconfig.app.json b/showcases/angular-showcase/tsconfig.app.json
index 8e60b99eae1..109326f8af8 100644
--- a/showcases/angular-showcase/tsconfig.app.json
+++ b/showcases/angular-showcase/tsconfig.app.json
@@ -1,10 +1,9 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
 	"extends": "./tsconfig.json",
 	"compilerOptions": {
 		"outDir": "./out-tsc/app",
 		"types": []
 	},
-	"files": ["src/main.ts", "src/polyfills.ts"],
+	"files": ["src/main.ts"],
 	"include": ["src/**/*.d.ts"]
 }
diff --git a/showcases/angular-showcase/tsconfig.json b/showcases/angular-showcase/tsconfig.json
index c912e93f5a5..02a41b8cb2b 100644
--- a/showcases/angular-showcase/tsconfig.json
+++ b/showcases/angular-showcase/tsconfig.json
@@ -1,31 +1,25 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
 	"compileOnSave": false,
 	"compilerOptions": {
 		"baseUrl": "./",
 		"outDir": "./dist/out-tsc",
 		"forceConsistentCasingInFileNames": true,
+		"esModuleInterop": true,
 		"strict": true,
 		"noImplicitOverride": true,
-		"strictPropertyInitialization": false,
 		"noPropertyAccessFromIndexSignature": true,
 		"noImplicitReturns": true,
 		"noFallthroughCasesInSwitch": true,
 		"sourceMap": true,
 		"declaration": false,
-		"downlevelIteration": true,
 		"experimentalDecorators": true,
 		"moduleResolution": "node",
 		"importHelpers": true,
 		"resolveJsonModule": true,
-		"esModuleInterop": true,
 		"target": "ES2022",
-		"module": "es2020",
-		"lib": ["es2020", "dom"],
-		"paths": {
-			"@angular/*": ["../../node_modules/@angular/*"]
-		},
-		"useDefineForClassFields": false
+		"module": "ES2022",
+		"useDefineForClassFields": false,
+		"lib": ["ES2022", "dom"]
 	},
 	"angularCompilerOptions": {
 		"enableI18nLegacyMessageIdFormat": false,
diff --git a/showcases/playwright.config.ts b/showcases/playwright.config.ts
index b3ba2e561ab..fc07ecd0c51 100644
--- a/showcases/playwright.config.ts
+++ b/showcases/playwright.config.ts
@@ -8,7 +8,7 @@ import { devices, type PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
 	testDir: './e2e',
-	// Example: __snapshots__/alert/showcase/chromium/functional/neutral-0/DBAlert-should-match-screenshit.png
+	// Example: __snapshots__/alert/showcase/chromium/functional/neutral-0/DBAlert-should-match-screenshot.png
 	snapshotPathTemplate:
 		'{snapshotDir}/{testFileDir}/showcase/{projectName}/{arg}/{testName}{ext}',
 	snapshotDir: './../__snapshots__',