feat(refactor-frontend-advanced): refactor 01_1_angular_javascript_fr…

…ameworks.md, 02_1_angular_einführung.md, 02_2_angular_strukturen.md, 02_3_angular_components.md, 02_4_angular_standalone_components.md, 02_5_angular_templates.md

content/en/docs/web/angular/01_1_angular_javascript_frameworks.md

@@ -9,8 +9,9 @@ description: >
 ---
 
 ### Ziele
-- Du weisst, was ein Frontend ist. 
-- Du weisst, was Angular ist, und kennst entsprechende Alternativen dazu. 
+
+- Du weisst, was ein Frontend ist.
+- Du weisst, was Angular ist, und kennst entsprechende Alternativen dazu.
 
 ## Was ist das Frontend?
 
@@ -34,9 +35,9 @@ Durch verschiedenste Web-Frameworks wird die Gestaltung von Websites sehr flexib
 ### Angular
 
 Eines der leistungsstärksten und effizientesten Open-Source-JavaScript-Frameworks ist Angular.
-Google betreibt dieses Framework, welches für die Entwicklung einer Single Page Application (SPA) verwendet wird. 
+Google betreibt dieses Framework, welches für die Entwicklung einer Single Page Application (SPA) verwendet wird.
 Eine Single-Page-Application ist eine Anwendung, welche mit dem Nutzer interagiert, indem die aktuelle Seite dynamisch mit neuen Daten gerendert wird. Das heisst, es wird für eine neue
-Ansicht nicht jedes mal eine neue Page erstellt, sondern wird die bestehende Seite an die neuen Daten angepasst. 
+Ansicht nicht jedes mal eine neue Page erstellt, sondern wird die bestehende Seite an die neuen Daten angepasst.
 
 ![Angular](../images/angular.png)
 

content/en/docs/web/angular/02_1_angular_einführung.md

@@ -10,11 +10,9 @@ description: >
 
 ### Ziele
 
-- Du kennst die Vor- und Nachteile von Angular. 
+- Du kennst die Vor- und Nachteile von Angular.
 - Du weisst, wie du ein erstes Angular-Projekt aufsetzen kannst.
 
-
-
 ## Was ist Angular
 
 Angular ist ein Framework um SPA’s (Single Page Applications) mittels HTML und JavaScript zu erstellen und besteht aus verschiedenen Core- und Optional-JavaScript-Bibliotheken.
@@ -31,7 +29,8 @@ Angular wird für Frontend-Applikationen verwendet. Oft wird ein Backend via HTT
 
 - **TypeScript-Unterstützung**: Angular ist in TypeScript geschrieben. TypeScript bietet statische Typisierung, verbesserte IDE-Unterstützung und ermöglicht eine bessere Fehlererkennung zur Entwicklungszeit.
 
-- **Grosse Community**: Angular ist ein viel genutztes Framework, wodurch bereits viele Best-Practices, standartisierte Vorgehensweisen und bewährte Praktiken und Konventionen bestehen, an denen man sich als Entwickler orientieren kann.   
+- **Grosse Community**: Angular ist ein viel genutztes Framework, wodurch bereits viele Best-Practices, standartisierte Vorgehensweisen und bewährte Praktiken und Konventionen bestehen, an denen man sich als Entwickler orientieren kann.
+
 ### Nachteile von Angular
 
 - **Lernkurve**: Angular ist ein umfangreiches Framework und erfordert eine gewisse Einarbeitungszeit. Die Konzepte wie Dependency Injection, TypeScript und das Componentmodel können für Entwickler mit wenig Erfahrung zunächst herausfordernd sein.
@@ -66,7 +65,7 @@ Als nächstes muss in das Projektverzeichnis gewechselt werden, indem man den fo
 
 ```shell
 cd new-angular-project
-``` 
+```
 
 ### Projekt starten
 
@@ -128,13 +127,13 @@ Die `angular.json`-Datei ist die Konfigurationsdatei eines Angular-Projekts. Sie
 Der Einstiegspunkt einer Angular-Anwendung ist die Datei main.ts. Diese Datei ist das Hauptmodul der Anwendung, in dem der Bootstrap-Prozess gestartet wird.
 
 ```typescript
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 
+import { AppModule } from "./app/app.module";
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-        .catch(err => console.error(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));
 ```
 
 Das AppModule selbst ist das Root-Modul der Angular-Anwendung. Es wird in der Regel in einer separaten Datei (`app.module.ts`) definiert und enthält die erforderlichen Importe und Konfigurationen für die Anwendung, einschliesslich der Components, Services, Modules und anderer Funktionen, welche d Anwendung benötigt.
@@ -143,9 +142,9 @@ Die `main.ts`-Datei wird beim Starten der Angular-Anwendung vom Build-System ode
 
 Es ist wichtig zu beachten, dass die `main.ts`-Datei normalerweise nicht manuell bearbeitet werden muss, es sei denn, man hat spezifische Anpassungen oder Erweiterungen für den Bootstrap-Prozess vorzunehmen. Die meisten Änderungen und Konfigurationen sollten im AppModule und den anderen Modulen der Anwendung vorgenommen werden.
 
-Es ist wichtig zu beachten, dass seit Angular 17 das App-Modul **nicht** mehr standardmässig beim Erstellen eines neuen Angular-Projekts generiert wird, da seit Angular 17 
+Es ist wichtig zu beachten, dass seit Angular 17 das App-Modul **nicht** mehr standardmässig beim Erstellen eines neuen Angular-Projekts generiert wird, da seit Angular 17
 alle Components standardmässig standalone sind und alle nötigen Imports selber enthalten, womit das App-Modul entfällt. Wenn du trotzdem ein App-Modul generieren möchtest, musst du beim Erstellen
-des Angular-Projekts das "-- no-standalone"-Flag zum Befehl hinzufügen: 
+des Angular-Projekts das "-- no-standalone"-Flag zum Befehl hinzufügen:
 
 ```shell
 ng new <name> --no-standalone
@@ -207,8 +206,7 @@ In der Angular Dokumentation sind zudem auch [Tutorials](https://angular.dev/tut
 
 Zudem ist nun auch ein sogenannter [Playground](https://angular.dev/playground) von Angular selbst hinzugefügt worden, diesen kann man auch über die Dokumentation erreichen.
 Der Playground erfüllt den Nutzen, dass Entwickler ihren Code vorab isoliert im Browser testen können, ohne dafür ein neues Angular-Projekt aufsetzen zu müssen.
-Vor dem offiziellen Playground musste fürs Testen vorab  [Stackblitz](https://stackblitz.com/) verwenden. Die Seite ist jedoch auch heutzutage immer noch sehr hilfreich, da man dort in verschiedensten Sprachen Code im Browser testen kann.
-
+Vor dem offiziellen Playground musste fürs Testen vorab [Stackblitz](https://stackblitz.com/) verwenden. Die Seite ist jedoch auch heutzutage immer noch sehr hilfreich, da man dort in verschiedensten Sprachen Code im Browser testen kann.
 
 ## Debugging
 

content/en/docs/web/angular/02_2_angular_strukturen.md

@@ -33,7 +33,7 @@ Die grundlegende Struktur einer Angular-Anwendung besteht aus folgenden Files:
 ## Ordnerstruktur
 
 Die Ordnerstruktur in Angular kann nach persönlichen Präferenzen gewählt werden. Jedoch ist die unten folgenden Struktur die gängigste Best-Practice-Variante und sollte daher auch immer so angewendet werden.
-Die Struktur bietet eine klare Trennung der verschiedenen Artefakte einer Angular-Anwendung und fördert die Modularität, Wiederverwendbarkeit und Testbarkeit des Codes. 
+Die Struktur bietet eine klare Trennung der verschiedenen Artefakte einer Angular-Anwendung und fördert die Modularität, Wiederverwendbarkeit und Testbarkeit des Codes.
 
 ```text
 ├── e2e

content/en/docs/web/angular/02_3_angular_components.md

@@ -29,7 +29,7 @@ Components sind wie Grundbausteine in einer Angular-Applikation. Components werd
 
 Components sind TypeScript Klassen, die die Daten und Kontrollstrukturen zum Verhalten der Templates beinhalten.
 Metadaten teilen Angular mit, wie die Components verarbeitet werden sollen (selector, template, style), das kann im Kapitel [Component Decorator](../03_3_angular_decorator#component) genauer nachgelesen werden.
-Ein Component hat einen von Angular verwalteten Lifecycle. Angular erstellt und rendert Components zusammen mit ihren Children. 
+Ein Component hat einen von Angular verwalteten Lifecycle. Angular erstellt und rendert Components zusammen mit ihren Children.
 Überprüft, wann sich ihre Properties ändern, und zerstört sie, bevor sie aus dem DOM entfernt werden.
 Angular bietet sogenannte [Lifecycle-Hooks](./02_18_angular_life_cycle_hook) an, mit denen wir handeln können, sobald ein bestimmter Teils des Lifecycles auftrtitt.
 

content/en/docs/web/angular/02_4_angular_standalone_components.md

@@ -11,7 +11,7 @@ description: >
 ### Ziele
 
 - Du weisst, was Standalone Components sind.
-- Du kennst die Unterschiede zwischen standalone Components und regulären Components.  
+- Du kennst die Unterschiede zwischen standalone Components und regulären Components.
 
 ## Standalone Components
 
@@ -37,7 +37,6 @@ Im Gegensatz zu Standalone-Komponenten sind reguläre Komponenten modulabhängig
 - **Imports**: Reguläre Komponenten können Imports aus ihrem Modul erhalten, während Standalone-Komponenten dies nicht tun. Dies kann die Wiederverwendbarkeit von Standalone-Komponenten erhöhen.
   **Verwendung**: Seit Angular 17 sind Standalone-Komponenten per Default aktiviert und eingesetzt, was ihre Verwendung fördert. Reguläre Komponenten hingegen erfordern eine spezifische Deklaration in ihrem Modul, um verwendet werden zu können.
 
-
 Insgesamt bieten Standalone-Komponenten also eine größere Flexibilität und Wiederverwendbarkeit im Vergleich zu regulären Komponenten, was sie zu einer attraktiven Option für die Strukturierung von Angular-Anwendungen macht.
 
 ### appConfig