From 2b7aae7de645d43c6c11c357614adce975381418 Mon Sep 17 00:00:00 2001
From: Alexander Dorn <alexander.dorn@capgemini.com>
Date: Mon, 21 Oct 2024 19:49:10 +0200
Subject: [PATCH] Combine Component and Module to Component and importing
 components

---
 agenda/foundations-remote.html                |   2 +-
 js-to-ts/index.html                           |   5 +-
 .../default-structure/imports.html            |   0
 .../default-structure/modules.html            |   0
 ng-components/index.html                      | 820 ++++++++++++++----
 ng-components/styles/own.css                  | 142 +++
 ng-module/index.html                          | 358 +-------
 7 files changed, 778 insertions(+), 549 deletions(-)
 rename {ng-module => ng-components}/default-structure/imports.html (100%)
 rename {ng-module => ng-components}/default-structure/modules.html (100%)
 create mode 100644 ng-components/styles/own.css

diff --git a/agenda/foundations-remote.html b/agenda/foundations-remote.html
index 507aba42..78cc368c 100644
--- a/agenda/foundations-remote.html
+++ b/agenda/foundations-remote.html
@@ -61,7 +61,7 @@ <h1 class="header-align-left">devonfw Angular Foundations</h1>
 | <a href="../js-to-ts/index.html" target="_blank">JavaScript and TypeScript</a> | 09:15 - 10:00
 | <a href="../js-to-ts/ts-exercises/index.html" target="_blank">TypeScript Exercises</a> | 10:00 - 11:00
 |
-| <a href="../ng-components/index.html" target="_blank">Angular Components</a> & <a href="../ng-module/index.html" target="_blank">Modules</a> with <a href="../exercises/index.html#/1" target="_blank">exercise</a> | 11:15 - 12:15 | 
+| <a href="../ng-components/index.html" target="_blank">Angular Components</a> with <a href="../exercises/index.html#/1" target="_blank">exercise</a> | 11:15 - 12:15 | 
 | <a href="../ng-data-binding/index.html" target="_blank">Angular Data Binding</a> with exercise <a href="../exercises/index.html#/2" target="_blank">@Input</a> and <a href="../exercises/index.html#/3" target="_blank">@Output</a>| 12:15 - 13:00 | 
 |
 | Exercise Discussion & Quiz | 15:00 - 15:30
diff --git a/js-to-ts/index.html b/js-to-ts/index.html
index 8d235aa8..fe669369 100644
--- a/js-to-ts/index.html
+++ b/js-to-ts/index.html
@@ -297,9 +297,10 @@ <h2>Type Inference</h2>
 // corrects type
 let zoo: Animal[] = [new Rhino(), new Elephant(), new Snake()];
               </code></pre>
+			  <p class="align_right"><small><a href="https://www.typescriptlang.org/docs/handbook/type-inference.html">TypeScript Docs</a></small></p>
             </section>
             <section>
-                <h2>Advanced Types / Type Narrowing</h2>
+                <h2>Type Narrowing</h2>
                 <pre><code class="typescript" data-trim>
 function padLeft(value: string, padding: any) {
   if (typeof padding === 'number') {
@@ -313,6 +314,7 @@ <h2>Advanced Types / Type Narrowing</h2>
   throw new Error(`Expected string or number, got '${padding}'.`);
 }
               </code></pre>
+			  <p><small><a href="https://www.typescriptlang.org/docs/handbook/2/narrowing.html">TypeScript Docs</a></small></p>
             </section>
             <section>
                 <h2>Strict Null Checks</h2>
@@ -328,6 +330,7 @@ <h2>Strict Null Checks</h2>
 myFunc(null); // compiler error
 myFunc(undefined); // compiler error
               </code></pre>
+			  <p><small><a href="https://www.typescriptlang.org/docs/handbook/2/basic-types.html#strictness">TypeScript Docs</a></small></p>
               <aside class="notes">
                 <ul>
                     <li>Sometimes confusing for beginners and therefore turned of for the exercises</li>
diff --git a/ng-module/default-structure/imports.html b/ng-components/default-structure/imports.html
similarity index 100%
rename from ng-module/default-structure/imports.html
rename to ng-components/default-structure/imports.html
diff --git a/ng-module/default-structure/modules.html b/ng-components/default-structure/modules.html
similarity index 100%
rename from ng-module/default-structure/modules.html
rename to ng-components/default-structure/modules.html
diff --git a/ng-components/index.html b/ng-components/index.html
index 6e1a7975..5727d4a6 100644
--- a/ng-components/index.html
+++ b/ng-components/index.html
@@ -15,6 +15,7 @@
     
     <!-- Theme used for syntax highlighting of code -->
     <link rel="stylesheet" href="../common/css/github-gist.css">
+	<link rel="stylesheet" href="./styles/own.css" />
 
     <!-- Printing and PDF exports -->
     <script>
@@ -37,7 +38,7 @@
       <section>
         <h1>Components</h1>
         <img class="reset" src="img/template-metadata-component.png">
-        <p class="align_right"><small><a href="https://angular.io/guide/architecture-components">Angular Docs</a></small></p>
+        <p><small><a href="https://angular.dev/guide/components">Angular Docs</a></small></p>
       </section>
       <section>
           <p>A <span class="highlight">component</span> controls a patch of screen called a view.</p>
@@ -51,203 +52,642 @@ <h3>Component Tree</h3>
           There can be multiple instances of the same component.
         </aside>
       </section>
-      <section>
-        <p>Angular <span class="highlight">creates, updates, and destroys components</span> as the user moves through the application. Your app can <span class="highlight">take action</span> at each moment in this lifecycle through optional <span class="highlight">lifecycle hooks</span></p>
-      </section>
-      <section>
-        <h3>Lifecycle Hooks</h3>
-        <img class="reset" height="550px" src="img/lifecycle-hooks.png">
-        <a href="https://angular.io/guide/lifecycle-hooks" class="references" target="_blank">Angular Docs</a>
-        <aside class="notes">
-          Color explanation: <br>
-          High saturation events are called once per component instance. Low saturation events are called multiple times.<br>
-          Green lifecycle hooks occur when the component itself enters the corresponding state. Blue lifecycle hooks occur when the child elements enter the corresponding state.<br><br>
-        </aside>
-      </section>
-      <section>
-        <h2 class="no-text-transform">Component is just a class...</h2>
-        <pre><code class="hljs typescript"  data-trim data-noescape>
-export class BookDetailsComponent implements OnInit {
-  currentBook = new Book();
+	  <section>
+		  <section>
+			<h2 class="no-text-transform">Component is just a class...</h2>
+			<pre><code class="hljs typescript"  data-trim data-noescape>
+	export class BookDetailsComponent implements OnInit {
+	  currentBook = new Book();
 
-  ngOnInit(): void {
-    this.currentBook.author = 'John Example';
-    this.currentBook.title = 'Angular in a nutshell';
-  }
-}
-            </code></pre>
-        </section>
-        <section>
-            <h2 class="no-text-transform">...which has an API for the view</h2>
-            <pre><code class="hljs typescript"  data-trim data-noescape>
-export class BookDetailsComponent implements OnInit {
-  <mark>currentBook = new Book();</mark>
+	  ngOnInit(): void {
+		this.currentBook.author = 'John Example';
+		this.currentBook.title = 'Angular in a nutshell';
+	  }
+	}
+				</code></pre>
+			</section>
+			<section>
+				<h2 class="no-text-transform">...which has an API for the view</h2>
+				<pre><code class="hljs typescript"  data-trim data-noescape>
+	export class BookDetailsComponent implements OnInit {
+	  <mark>currentBook = new Book();</mark>
 
-  ngOnInit(): void {
-    this.currentBook.author = 'John Example';
-    this.currentBook.title = 'Angular in a nutshell';
-  }
-}
-            </code></pre>
-            <aside class="notes">
-              'currentBook' is publicly accessible.<br>
-              Class variables are public by default.<br>
-              Why? Because it is valid EcmaScript and the original version did not have visibility modifiers. All object properties were public.
-            </aside>
-        </section>
-        <section>
-            <h2 class="no-text-transform">...and can take action in the lifecycle</h2>
-            <pre><code class="hljs typescript"  data-trim data-noescape>
-export class BookDetailsComponent implements <mark>OnInit</mark> {
-  currentBook = new Book();
+	  ngOnInit(): void {
+		this.currentBook.author = 'John Example';
+		this.currentBook.title = 'Angular in a nutshell';
+	  }
+	}
+				</code></pre>
+				<aside class="notes">
+				  'currentBook' is publicly accessible.<br>
+				  Class variables are public by default.<br>
+				  Why? Because it is valid EcmaScript and the original version did not have visibility modifiers. All object properties were public.
+				</aside>
+			</section>
+			<section>
+				<h2 class="no-text-transform">...and can implement hooks</h2>
+				<pre><code class="hljs typescript"  data-trim data-noescape>
+	export class BookDetailsComponent implements <mark>OnInit</mark> {
+	  currentBook = new Book();
 
-  <mark>ngOnInit(): void {
-    this.currentBook.author = 'John Example';
-    this.currentBook.title = 'Angular in a nutshell';
-  }</mark>
-}
-            </code></pre>
-            <aside class="notes">
-              What happens if 'implements OnInit' is missing? Still works as long as 'ngOnInit()' is present. At runtime interfaces are gone anyway.
-            </aside>
-        </section>
-        <section>
-            <img class="reset" src="img/template.png">
-            <p>A template is <span class="highlight">a form of HTML</span> that tells Angular how to <span class="highlight">render the component</span>.</p>
-            <p>A template looks like <span class="highlight">regular HTML</span> with <span class="highlight"><i>Angularized</i> markup</span> which uses Angular's <span class="highlight">template syntax.</span></p>
-        </section>
-        <section>
-            <h2 class="no-text-transform">Regular HTML...</h2>
-            <pre><code class="hljs html" data-trim data-noescape>
-&lt;div&gt;
-  &lt;label&gt;Author:&lt;/label&gt;&nbsp;&lt;span&gt;{{currentBook.author}}&lt;/span&gt;
-&lt;/div&gt;
-&lt;div&gt;
-  &lt;label&gt;Title:&lt;/label&gt;&nbsp;&lt;span&gt;{{currentBook.title}}&lt;/span&gt;
-&lt;/div&gt;
-            </code></pre>
-        </section>
-        <section>
-            <h2 class="no-text-transform">...with Angular's template syntax</h2>
-            <pre><code class="hljs html" data-trim data-noescape>
-&lt;div&gt;
-  &lt;label&gt;Author:&lt;/label&gt;&nbsp;&lt;span&gt;<mark>{{currentBook.author}}</mark>&lt;/span&gt;
-&lt;/div&gt;
-&lt;div&gt;
-  &lt;label&gt;Title:&lt;/label&gt;&nbsp;&lt;span&gt;<mark>{{currentBook.title}}</mark>&lt;/span&gt;
-&lt;/div&gt;
-            </code></pre>
-        </section>
-        <section>
-            <img class="reset" src="img/metadata.png">
-            <p>Metadata tells Angular <span class="highlight">where to get the major building blocks</span> you specify for the component.</p>
-            <p>In TypeScript metadata can be <span class="highlight">attached to the component class</span> by using a <span class="highlight">decorator</span>.</p>
-        </section>
-        <section>
-            <h2 class="no-text-transform">...which has an API for the view</h2>
-            <pre><code class="hljs typescript" data-trim  data-noescape>
-@Component({
-  selector: 'app-book-details',
-  template:
-    `&lt;div&gt;
-       &lt;label&gt;Author:&lt;/label&gt;&nbsp;&lt;span&gt{{currentBook.author}}&lt;/span&gt;
-     &lt;/div&gt;
-     &lt;div&gt;
-       &lt;label&gt;Title:&lt;/label&gt;&nbsp;&lt;span&gt;{{currentBook.title}}&lt;/span&gt;
-     &lt;/div&gt;`
-})
-export class BookDetailsComponent implements OnInit {
-...
-}
-            </code></pre>
-        </section>
-        <section>
-            <p class="no-text-transform"><span class="highlight">selector</span> tells Angular to <span class="highlight">create and insert an instance of this component</span> where it finds a <span class="highlight">&lt;app-book-details&gt; tag</span> in parent HTML</p>
-            <pre><code class="hljs typescript" data-trim  data-noescape>
-@Component({
-  <mark>selector: 'app-book-details'</mark>,
-  template:
-    `&lt;div&gt;
-       &lt;label&gt;Author:&lt;/label&gt;&nbsp;&lt;span&gt{{currentBook.author}}&lt;/span&gt;
-     &lt;/div&gt;
-     &lt;div&gt;
-       &lt;label&gt;Title:&lt;/label&gt;&nbsp;&lt;span&gt;{{currentBook.title}}&lt;/span&gt;
-     &lt;/div&gt;`
-})
-export class BookDetailsComponent implements OnInit {
-...
-}
-            </code></pre>
-        </section>
-        <section>
-            <p class="no-text-transform"><span class="highlight">Templates can be inlined</span>, e.g. using ES2015 template literals (multi line strings marked with backticks) or ...</p>
-            <pre><code class="hljs typescript" data-trim  data-noescape>
-@Component({
-  selector: 'app-book-details',
-  <mark>template:
-    `&lt;div&gt;
-       &lt;label&gt;Author:&lt;/label&gt;&nbsp;&lt;span&gt;{{currentBook.author}}&lt;/span&gt;
-     &lt;/div&gt;
-     &lt;div&gt;
-       &lt;label&gt;Title:&lt;/label&gt;&nbsp;&lt;span&gt;{{currentBook.title}}&lt;/span&gt;
-     &lt;/div&gt;`</mark>
-})
-export class BookDetailsComponent implements OnInit {
-...
-}
-            </code></pre>
-        </section>
-        <section>
-            <p class="no-text-transform">...extracted to a <span class="highlight">separate file</span> and imported using file path</p>
-            <pre><code class="hljs typescript" data-trim  data-noescape>
-@Component({
-  selector: 'app-book-details',
-  <mark>templateUrl: './book-details.component.html'</mark>
-})
-export class BookDetailsComponent implements OnInit {
-...
-}
-            </code></pre>
-        </section>
-        <section>
-            <h2 class="no-text-transform">Component CSS Styles</h2>
-            <p>Their selectors only <span class="highlight">apply within the template of that component</span></p>
-            <p>Their class names and selectors <span class="highlight">do not collide</span> with ones used elsewhere in the application</p>
-            <p>Component's styles <span class="highlight">cannot be changed</span> by changes to styles elsewhere in the application</p>
+	  <mark>ngOnInit(): void {
+		this.currentBook.author = 'John Example';
+		this.currentBook.title = 'Angular in a nutshell';
+	  }</mark>
+	}
+				</code></pre>
+				<aside class="notes">
+				  What happens if 'implements OnInit' is missing? Still works as long as 'ngOnInit()' is present. At runtime interfaces are gone anyway.
+				</aside>
+			</section>
+			<section>
+				<p>Angular <span class="highlight">creates, updates, and destroys components</span> as the user moves through the application. Your app can <span class="highlight">take action</span> at each moment in this lifecycle through optional <span class="highlight">lifecycle hooks</span></p>
+				<div class="fragment">
+					<p>Examples for lifecycle hooks:<br>Constructor, NgOnInit & NgOnDestroy</p>
+				</div>
+				<p><small><a href="https://angular.dev/guide/components/lifecycle">Angular Docs</a></small></p>
+			</section>
+		</section>
+		<section>
+			<section>
+				<h2 class="no-text-transform">Component template is regular HTML...</h2>
+				<pre><code class="hljs html" data-trim data-noescape>
+	&lt;div&gt;
+	  &lt;label&gt;Author:&lt;/label&gt;&nbsp;&lt;span&gt;{{currentBook.author}}&lt;/span&gt;
+	&lt;/div&gt;
+	&lt;div&gt;
+	  &lt;label&gt;Title:&lt;/label&gt;&nbsp;&lt;span&gt;{{currentBook.title}}&lt;/span&gt;
+	&lt;/div&gt;
+				</code></pre>
+			</section>
+			<section>
+				<h2 class="no-text-transform">...with Angular's template syntax</h2>
+				<pre><code class="hljs html" data-trim data-noescape>
+	&lt;div&gt;
+	  &lt;label&gt;Author:&lt;/label&gt;&nbsp;&lt;span&gt;<mark>{{currentBook.author}}</mark>&lt;/span&gt;
+	&lt;/div&gt;
+	&lt;div&gt;
+	  &lt;label&gt;Title:&lt;/label&gt;&nbsp;&lt;span&gt;<mark>{{currentBook.title}}</mark>&lt;/span&gt;
+	&lt;/div&gt;
+				</code></pre>
+			</section>
+			<section>
+				<img class="reset" src="img/template.png">
+				<p>A template is <span class="highlight">a form of HTML</span> that tells Angular how to <span class="highlight">render the component</span>.</p>
+				<p>A template looks like <span class="highlight">regular HTML</span> with <span class="highlight"><i>Angularized</i> markup</span> which uses Angular's <span class="highlight">template syntax.</span></p>
+			</section>
+		</section>
+		<section>
+			<section>
+				<p>Component Metadata tells Angular <span class="highlight">where to get the major building blocks</span> you specify for the component.</p>
+				<pre><code class="hljs typescript" data-trim  data-noescape>
+	@Component({
+	  selector: 'app-book-details',
+	  template:
+		`&lt;div&gt;
+		   &lt;label&gt;Author:&lt;/label&gt;&nbsp;&lt;span&gt{{currentBook.author}}&lt;/span&gt;
+		 &lt;/div&gt;
+		 &lt;div&gt;
+		   &lt;label&gt;Title:&lt;/label&gt;&nbsp;&lt;span&gt;{{currentBook.title}}&lt;/span&gt;
+		 &lt;/div&gt;`
+	})
+	export class BookDetailsComponent implements OnInit {
+	...
+	}
+				</code></pre>
+			</section>
+			<section>
+				<p class="no-text-transform"><span class="highlight">selector</span> tells Angular to <span class="highlight">create and insert an instance of this component</span> where it finds a <span class="highlight">&lt;app-book-details&gt; tag</span> in parent HTML</p>
+				<pre><code class="hljs typescript" data-trim  data-noescape>
+	@Component({
+	  <mark>selector: 'app-book-details'</mark>,
+	  template:
+		`&lt;div&gt;
+		   &lt;label&gt;Author:&lt;/label&gt;&nbsp;&lt;span&gt{{currentBook.author}}&lt;/span&gt;
+		 &lt;/div&gt;
+		 &lt;div&gt;
+		   &lt;label&gt;Title:&lt;/label&gt;&nbsp;&lt;span&gt;{{currentBook.title}}&lt;/span&gt;
+		 &lt;/div&gt;`
+	})
+	export class BookDetailsComponent implements OnInit {
+	...
+	}
+				</code></pre>
+			</section>
+			<section>
+				<p class="no-text-transform"><span class="highlight">Templates can be inlined</span>, e.g. using ES2015 template literals (multi line strings marked with backticks) or ...</p>
+				<pre><code class="hljs typescript" data-trim  data-noescape>
+	@Component({
+	  selector: 'app-book-details',
+	  <mark>template:
+		`&lt;div&gt;
+		   &lt;label&gt;Author:&lt;/label&gt;&nbsp;&lt;span&gt;{{currentBook.author}}&lt;/span&gt;
+		 &lt;/div&gt;
+		 &lt;div&gt;
+		   &lt;label&gt;Title:&lt;/label&gt;&nbsp;&lt;span&gt;{{currentBook.title}}&lt;/span&gt;
+		 &lt;/div&gt;`</mark>
+	})
+	export class BookDetailsComponent implements OnInit {
+	...
+	}
+				</code></pre>
+			</section>
+			<section>
+				<p class="no-text-transform">...extracted to a <span class="highlight">separate file</span> and imported using file path</p>
+				<pre><code class="hljs typescript" data-trim  data-noescape>
+	@Component({
+	  selector: 'app-book-details',
+	  <mark>templateUrl: './book-details.component.html'</mark>
+	})
+	export class BookDetailsComponent implements OnInit {
+	...
+	}
+				</code></pre>
+			</section>
+			<section>
+				<p class="no-text-transform">Components are styled <span class="highlight">using a separate css file</span> that is only applied to the component and not to subordinate components.</p>
+				<pre><code class="hljs typescript" data-trim  data-noescape>
+	@Component({
+	  selector: 'app-book-details',
+	  template: ...,
+	  <mark>styleUrls: ['./book-details.component.css']</mark>
+	})
+	export class BookDetailsComponent implements OnInit {
+	...
+	}
+				</code></pre>
+				<aside class="notes">
+				  Note that styleUrls expects an array of URLs. Therefore you can have multiple style documents for one component (but it is uncommon)
+				</aside>
+			</section>
+			<section>
+				<img class="reset" src="img/metadata.png">
+				<p>In TypeScript metadata can be <span class="highlight">attached to the component class</span> by using a <span class="highlight">decorator</span>.</p>
+			</section>
+		</section>
+		<section>
+			<h2>Importing and using components</h2>
+			<p>Angular supports two ways of making a component available to other components:<br>as a <strong>standalone</strong> component or in an <strong>NgModule</strong>.</p>
+			<br>
+			<p>The Angular team recommends using standalone components for all new development.</p>
+			<br>
+			<p class="align_right"><small><a href="https://angular.dev/guide/components/importing">Angular Docs</a></small></p>
+		</section>
+				<section>
+			<h3>Import TypeScript sources</h3>
+			<pre><code class="hljs typescript" data-trim data-noescape> 
+			import { Component } from '@angular/core'; 
+			<mark>import { ProfilePhoto } from './profile-photo.component';</mark>
 
-        </section>
-        <section>
-            <p><span class="highlight">Pseudo selectors</span>, e.g. <span class="monospace highlight">:host</span>, from <span class="highlight">shadow DOM</span> style scoping are available</p>
-            <pre><code class="hljs css" data-trim data-noescape>
-:host {
-  display: block;
-  font-size: x-large;
-}
-:host label {
-  font-weight: bold;
-}
-            </code></pre>
-            <a href="https://angular.io/guide/component-styles" class="references" target="_blank">Angular Docs</a>
-            <aside class="notes">
-              ":host" is used to style the angular component itself. Other styles apply to the elements inside of the component, but not the component itself.
-            </aside>
-        </section>
-        <section>
-            <p class="no-text-transform"></p>
-            <pre><code class="hljs typescript" data-trim  data-noescape>
-@Component({
-  selector: 'app-book-details',
-  template: ...,
-  <mark>styleUrls: ['./book-details.component.css']</mark>
+			@Component({
+			  standalone: true,
+			  imports: [ProfilePhoto],
+			  template: `<profile-photo />`
+			})
+			export class UserProfile { }
+				</code></pre>
+			<p class="align_right">
+			  <small><a href="https://www.typescriptlang.org/docs/handbook/2/modules.html">TypeScript Docs</a>
+			  </small>
+			</p>
+			<aside class="notes">
+				This import of typescripts just provides the source code for the application, but we need to tell Angular that we want to use its building blocks. All the building blocks are classes with Angular decorators.
+			</aside>
+		</section>
+		<section>
+			<h3>Define a Standalone Component</h3>
+			<pre><code class="hljs typescript" data-trim data-noescape> 
+			import { Component } from '@angular/core'; 
+			import { ProfilePhoto } from './profile-photo.component';
+
+			@Component({
+			  <mark>standalone: true,</mark>
+			  imports: [ProfilePhoto],
+			  template: `<profile-photo />`
+			})
+			export class UserProfile { }
+				</code></pre>
+			<p class="align_right">
+			  <small
+				><a href="https://angular.dev/guide/components/importing"
+				  >Angular Docs</a
+				></small
+			  >
+			</p>
+			<aside class="notes">
+			Add <strong>standalone: true</strong> to the Metadata of the component to define it as a standalone component.
+			</aside>
+		</section>
+		<section>
+			<h3>Import Standalone Components</h3>
+			<pre><code class="hljs typescript" data-trim data-noescape> 
+			import { Component } from '@angular/core'; 
+			import { ProfilePhoto } from './profile-photo.component';
+
+			@Component({
+			  standalone: true,
+			  <mark>imports: [ProfilePhoto],</mark>
+			  template: `<profile-photo />`
+			})
+			export class UserProfile { }
+				</code></pre>
+			<p class="align_right">
+			  <small
+				><a href="https://angular.dev/guide/components/importing"
+				  >Angular Docs</a
+				></small
+			  >
+			</p>
+			<aside class="notes">
+			  In this example, the standalone component
+			  <code>ProfilePhoto</code> is directly imported into the
+			  <code>UserProfile</code> component.
+			</aside>
+		</section>
+		<section>
+			<h3>Import Modules</h3>
+			<pre><code class="hljs typescript" data-trim data-noescape> 
+				import { Component } from '@angular/core';
+				import { ReactiveFormsModule } from '@angular/forms';
+				
+				@Component({
+				  standalone: true,
+				  selector: 'user-profile',
+				  template: `<profile-photo />`,
+				  <mark>imports: [ReactiveFormsModule]</mark>
+				})
+				export class UserProfile {
+				  profileForm = new FormGroup({
+					name: new FormControl('')
+				  });
+				}
+				  </code></pre>
+			<aside class="notes">
+			  In this example, the standalone component
+			  <code>ProfilePhoto</code> is directly imported into the
+			  <code>UserProfile</code> component.
+			</aside>
+		</section>
+		<section>
+          <section>
+            <h3>Simple module</h3>
+            <p>
+              An Angular module is a
+              <strong>class decorated with @NgModule</strong> metadata.
+            </p>
+            <pre><code data-trim class="typescript code-without-max-height">
+
+@NgModule({
+// applications modules, angular modules, libraries, etc.
+imports: [],
+
+// components, directives and pipes which should be made public
+// 're-export' imported modules
+exports: [],
+
+// components, directives and pipes which belong to the module
+// -> they can only be used in components templates inside this modules
+declarations: [],
+
+// services which should be useable by child modules and components
+// details on providers and injection are in the services presentation
+providers: []
 })
-export class BookDetailsComponent implements OnInit {
-...
-}
-            </code></pre>
+export class TestModule { }</code></pre>
+				<p class="align_right">
+				  <small
+					><a
+					  href="https://angular.dev/guide/ngmodules"
+					  >Angular Docs</a
+					></small
+				  >
+				</p>
             <aside class="notes">
-              Note that styleUrls expects an array of URLs. Therefore you can have multiple style documents for one component (but it is uncommon)
+              Most imported slide of this deck, needed for the exercise. <br />
+              The class itself is mostly empty. The important information is in
+              the decorator.<br />
+              The different arrays describe the content of the module, separated
+              in dependencies, components (and other code) available for other
+              modules, internal code and services to be provided for dependency
+              injection. <br>
+			  Please mention that imports (standalone component only) and providers are same as in components.
+			  Standalone components declare and export themselves implicitly.
             </aside>
+          </section>
+          <section>
+            <h3>... example</h3>
+            <pre><code class="typescript">@NgModule({
+  imports: [CommonModule],
+  exports: [CommonModule, BookListComponent],
+  declarations: [BookListComponent, BookDetailComponent],
+  providers: [BookService],
+})
+export class BookModule { }</code></pre>
+            <ul class="ul-small">
+              <li>
+                Angular <strong>Common module is imported</strong> - e.g. *ngIf
+                can be used in templates
+              </li>
+              <li>
+                Common module is exported - so a module importing BookModule can
+                <strong>use Common without importing it</strong>
+              </li>
+              <li>
+                BookListComponent can be
+                <strong
+                  >used inside templates in modules importing BookModule</strong
+                >
+                - 'it's public'
+              </li>
+              <li>
+                BookListComponent and BookDetailComponent are declared and can
+                therefore be <strong>used inside modules templates</strong> -
+                good practice if for instance BookDetailComponent is part of
+                BookListComponent and should
+                <strong>never be used alone</strong>
+              </li>
+              <li>
+                BookService is provided for all components within BookModule and
+                child modules
+              </li>
+            </ul>
+          </section>
         </section>
+		<section>
+			<section>
+				<h2>Application Structure</h2>
+			</section>
+			<section>
+			  <h3>Core and Shared Module</h3>
+			  <ul>
+				<li>
+				  This modules were Angular best practices
+				</li>
+				<li>
+				  <strong>CoreModule</strong> is only imported in AppModule and it has single use components - e.g.
+				  NavigationComponent, FooterComponent, etc. to be
+				  used inside AppComponents template
+				</li>
+				<li>
+				  <strong>SharedModule</strong> has common components, directives and pipes.
+				  Imported by multiple modules - e.g.
+				  SpinnerComponent, ModalComponent
+				</li>
+				<li>
+					The use of <strong>standalone components</strong> does not mean you cannot structure your components!
+				</li>
+			  </ul>
+			  <div class="margin_top_30">
+				<p class="align_right">
+				  <small><a href="https://angular.io/styleguide">Angular Docs</a></small>
+				</p>
+			  </div>
+			</section>
+			<section>
+			  <p>
+				Application Structure Example with Modules
+			  </p>
+			  <iframe
+				id="default-structure-iframe"
+				src="./default-structure/modules.html"
+				frameborder="0"
+			  ></iframe>
+			  <p class="align_right">
+				  <small><a href="https://angular.io/styleguide">Old Angular.io Docs</a></small>
+				</p>
+			  <aside class="notes">
+				"heroes" and "villains" are examples for modules for specific
+				business areas also called feature modules. "core" and "shared" are
+				the mentioned modules with conventions.<br />
+				feature modules can contain "core" and "shared" sub modules and
+				feature modules.
+			  </aside>
+			</section>
+			<section>
+			  <p>
+				Structure with Standalone Components
+			  </p>
+			  <iframe
+				id="default-structure-iframe"
+				src="./default-structure/imports.html"
+				frameborder="0"
+			  ></iframe>
+			  <p class="align_right">
+				  <small><a href="https://angular.dev/style-guide#overall-structural-guidelines">New Angular.dev Docs</a></small>
+			  </p>
+			  <aside class="notes">
+				"heroes", "core" and "shared" are now standalone components without
+				the respective modules. "villains" is a feature module which expose
+				or hide its implementation from the other part of the application.
+			  </aside>
+			</section>
+		</section>
+		<section>
+			<section>
+				<h2>Summary</h2>
+				<ul>
+					<li>Angular Components<br>
+						<ul class="ul-small">
+							<li>represent patches of the screen</li>
+							<li>are just classes with @Component decorator</li>
+							<li>has building blocks for logic, template and style</li>
+						</ul>
+					</li>
+					<li>Importing and using components<br>
+						<ul class="ul-small">
+							<li>by importing it in TypeScript</li>
+							<li>by importing it in a Standalone Component or Module</li>
+							<li>within a module by declaring it</li>
+						</ul>
+					</li>
+					<li>Structuring Application</li>
+				</ul>
+				<p class="hint center">Live Code Examples & Backup slides below</p>
+			</section>
+			<section>
+				<h2>Live Code Examples</h2>
+				<ul>
+					<li><a href="https://stackblitz.com/edit/angular-ivy-jmjw6u" target="_blank">Component Example in Stackblitz</a></li>
+				</ul>
+			</section>
+			<section>
+				<h2>Backup slides</h2>
+				<p>Following slides are not subject of the lecture.<br>Ask trainers in case of questions.</p>
+			</section>
+			<section>
+				<h2 class="no-text-transform">Component CSS Styles</h2>
+				<p>Their selectors only <span class="highlight">apply within the template of that component</span></p>
+				<p>Their class names and selectors <span class="highlight">do not collide</span> with ones used elsewhere in the application</p>
+				<p>Component's styles <span class="highlight">cannot be changed</span> by changes to styles elsewhere in the application</p>
+			</section>
+			<section>
+				<p><span class="highlight">Pseudo selectors</span>, e.g. <span class="monospace highlight">:host</span>, from <span class="highlight">shadow DOM</span> style scoping are available</p>
+				<pre><code class="hljs css" data-trim data-noescape>
+	:host {
+	  display: block;
+	  font-size: x-large;
+	}
+	:host label {
+	  font-weight: bold;
+	}
+				</code></pre>
+				<a href="https://angular.io/guide/component-styles" class="references" target="_blank">Angular Docs</a>
+				<aside class="notes">
+				  ":host" is used to style the angular component itself. Other styles apply to the elements inside of the component, but not the component itself.
+				</aside>
+			</section>
+			<section>
+			  <h3>Standalone components Definition</h3>
+			  <ul>
+				<li>Introduced with <strong>Angular 14</strong>.</li>
+				<li>
+				  Standalone components reduce the complexity of NgModules,
+				  providing a more lightweight and modular approach to building
+				  Angular applications.
+				</li>
+				<li>
+				  Standalone components can directly import other components, directives, and pipes used in their templates without the need for NgModules.
+				</li>
+			  </ul>
+			  <div class="margin_top_30">
+				<p class="align_right">
+				  <small
+					><a href="https://angular.dev/guide/components/importing"
+					  >Angular Docs</a
+					></small
+				  >
+				</p>
+			  </div>
+			</section>
+			<section>
+			  <h3>Benefits of Direct Importing</h3>
+			  <ul>
+				<li>
+				  Eliminates the need for NgModules to declare and import
+				  components.
+				</li>
+				<li>Improves code clarity and maintainability.</li>
+				<li>Provides finer control over each component's dependencies.</li>
+			  </ul>
+			  <aside class="notes">
+				Direct importing makes dependencies explicit, which simplifies
+				maintenance and enhances understanding of the codebase.
+			  </aside>
+			</section>
+			<section>
+				<h3>Future of Angular development</h3>
+				<ul>
+				  <li>
+					The Angular team recommends using standalone components for all
+					new development.
+				  </li>
+				  <li>
+					Starting with <strong>Angular 17</strong>, creating an Angular
+					application with <strong>ng new</strong> will generate a standalone application by default.
+				  </li>
+				</ul>
+			  </section>
+			<section>
+			  <p class="no-text-transform">
+				Starting with <strong>Angular 19</strong>
+				<strong>standalone: true</strong> will be default.
+			  </p>
+			  <pre><code class="hljs typescript" data-trim data-noescape>
+					@Component({
+					  <mark>imports: [ProfilePhoto],</mark>
+					  <mark>template: `<profile-photo />`</mark>
+					})
+					export class UserProfile { }
+					</code></pre>
+			  <br />
+			  <p class="no-text-transform">
+				Add <strong>standalone: false</strong> to existing ngModule
+				components so they continue to work.
+			  </p>
+			  <pre><code class="hljs typescript" data-trim data-noescape>
+					  @Component({
+						<mark>standalone: false,</mark>
+						template: `<profile-photo />`
+					  })
+					  export class UserProfile { }
+					  </code></pre>
+			</section>
+			<section>
+			  <h3>Modules Definition</h3>
+			  <p>
+				Angular modules consolidate
+				<strong>components, directives and pipes</strong> into cohesive
+				blocks of functionality, each focused on a
+				<strong>feature area</strong>, application
+				<strong>business domain</strong>, workflow, or common collection of
+				utilities.
+			  </p>
+			  <div class="margin_top_30">
+				<p class="align_right">
+				  <small
+					><a
+					  href="https://angular.io/docs/ts/latest/guide/ngmodule.html#!#angular-modularity"
+					  >Angular Docs</a
+					></small
+				  >
+				</p>
+			  </div>
+			  <aside class="notes">
+				A module contains different technical building blocks belonging to a
+				common specific business area.
+			  </aside>
+			</section>
+			<section>
+			  <h3>Application Start with Modules (1/2)</h3>
+			  <p>AppModule is the top level Module which gets bootstrapped</p>
+			  <pre><code class="typescript">import { NgModule }      from '@angular/core';
+	import { BrowserModule } from '@angular/platform-browser';
+	import { AppComponent }  from './app.component';
+
+	@NgModule({
+	  imports:      [ BrowserModule ],
+	  declarations: [ AppComponent ],
+	  // top level component to insert into index.html
+	  bootstrap:    [ AppComponent ]
+	})
+	export class AppModule { }</code></pre>
+			  <small>app.module.ts</small>
+			  <p class="align_right"><small><a href="https://angular.dev/reference/migrations/standalone#switch-to-standalone-bootstrapping-api">Switch to standalone bootstrapping API</a></small></p>
+			  <aside class="notes">
+				The root module is called AppModule by convention. It contains the
+				root component that contains all other components displayed by the
+				application.<br />
+				The root module usually contains no business logic or components,
+				but it provides services that are supposed to be available for the
+				entire application like logging or a config service.
+			  </aside>
+			</section>
+			<section>
+			  <h3>Application Start with Modules (2/2)</h3>
+			  <pre><code style="overflow:hidden" data-trim class="typescript">
+	import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+	import { AppModule }              from './app.module';
+
+	platformBrowserDynamic().bootstrapModule(AppModule);</code></pre>
+			  <small>main.ts</small>
+			  <pre><code class="html">&lt;my-app&gt;Loading ...&lt;/my-app&gt;</code></pre>
+			  <small>index.html</small>
+			  <pre><code class="typescript">import { Component } from '@angular/core';
+
+	@Component({
+	  selector: 'my-app',
+	})
+	export class AppComponent { }</code></pre>
+			  <small>app.component.ts</small>
+			  <aside class="notes">
+				After defining the root module we need to start the actual
+				bootstrapping of the application. By convention we do that in the
+				main.ts file. We need to include the root component in our
+				index.html to indicate where in the Html our application is supposed
+				to be rendered.
+			  </aside>
+			</section>
+		</section>
     </div>
 </div>
 
diff --git a/ng-components/styles/own.css b/ng-components/styles/own.css
new file mode 100644
index 00000000..29502504
--- /dev/null
+++ b/ng-components/styles/own.css
@@ -0,0 +1,142 @@
+html .reveal section .module-header-image {
+    background: white;
+    border: 20px solid white; 
+    width: 500px;
+    height: auto;
+}
+
+.devon.reveal  .title-with-image img {
+    margin-right: 0.5em;
+}
+
+.reveal h1.no_upper,
+.reveal h2.no_upper,
+.reveal h3.no_upper,
+.reveal h4.no_upper,
+.reveal h5.no_upper,
+.reveal h6.no_upper {
+	text-transform: none;
+}
+
+.reveal section img {
+    border: none;
+    box-shadow: none;
+}
+
+.reveal section img.middle {
+	vertical-align : middle;
+}
+
+div.margin_top_30 {
+	margin-top: 30px;
+}
+
+h1.highlight, h2.highlight, h3.highlight, p.highlight, span.highlight {
+    color: #71e9f4;
+}
+
+div.column {
+    display: inline-block;
+    margin-right: 40px;
+}
+
+p.title_image img.white_solid_border {
+    border: 4px solid #ffffff;
+}
+
+p.justify_text {
+    text-align: justify;
+}
+
+p.align_right {
+    text-align: right;
+}
+
+.reveal pre {
+    border: 3px white solid;
+}
+
+.reveal p {
+    margin: 0;
+}
+
+.reveal #js-engine pre code {
+    display: block;
+    padding: 5px;
+    overflow: auto;
+    max-height: 400px;
+    word-wrap: normal;
+    background: #3F3F3F;
+    color: #DCDCDC;
+    font-size: 90%;
+}
+
+.reveal #js-engine {
+    height: 560px;
+}
+
+.reveal .title_image img {
+    background: transparent;
+    margin: 0 40px;
+}
+
+.reveal section pre {
+    width: 100%;
+}
+
+.reveal section .list-style-none {
+    list-style: none
+}
+
+.reveal section .margin-top-40 {
+    margin-top: 40px;
+}
+
+html.img-center-fill div.slide-background.present {
+    background-position: center;
+    background-size: contain;
+}
+
+.reveal section .text-align-left {
+    text-align: left;
+}
+
+.reveal section .font-style-italic {
+    font-style: italic;
+}
+
+.reveal section div.side-by-side {
+    width: 960px;
+}
+
+.reveal section div.side-by-side div {
+    width: 45%;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.reveal section pre code.code-without-max-height {
+    max-height: unset;
+}
+
+.reveal section .inline-block {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.reveal section .width-70-percent {
+    width: 70%;
+}
+
+.reveal section .margin-top-70 {
+    margin-top: 70px;
+}
+
+html .reveal section ul.ul-small li {
+    font-size: 70%;
+}
+
+#default-structure-iframe {
+    height: 600px;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/ng-module/index.html b/ng-module/index.html
index 6b2c0362..5e30649a 100644
--- a/ng-module/index.html
+++ b/ng-module/index.html
@@ -61,6 +61,7 @@ <h2>Modules</h2>
             src="./img/project-sample-module-separation.png"
             alt="module separation example"
           />
+		  <p><small>Content moved to <a href="file:///C:/training/devon4ng-training/ng-components/index.html#/17">Importing and using components</a></small></p>
           <aside class="notes">
             Modules are building blocks group business areas or feature
             areas.<br />
@@ -68,363 +69,6 @@ <h2>Modules</h2>
             modules.
           </aside>
         </section>
-        <section>
-          <h3>Definition</h3>
-          <p>
-            Angular modules consolidate
-            <strong>components, directives and pipes</strong> into cohesive
-            blocks of functionality, each focused on a
-            <strong>feature area</strong>, application
-            <strong>business domain</strong>, workflow, or common collection of
-            utilities.
-          </p>
-          <div class="margin_top_30">
-            <p class="align_right">
-              <small
-                ><a
-                  href="https://angular.io/docs/ts/latest/guide/ngmodule.html#!#angular-modularity"
-                  >Angular Docs</a
-                ></small
-              >
-            </p>
-          </div>
-          <aside class="notes">
-            A module contains different technical building blocks belonging to a
-            common specific business area.
-          </aside>
-        </section>
-        <section>
-          <section>
-            <h3>Simple module</h3>
-            <p>
-              An Angular module is a
-              <strong>class decorated with @NgModule</strong> metadata.
-            </p>
-            <pre><code data-trim class="typescript code-without-max-height">
-
-@NgModule({
-// applications modules, angular modules, libraries, etc.
-imports: [],
-
-// components, directives and pipes which should be made public
-// 're-export' imported modules
-exports: [],
-
-// components, directives and pipes which belong to the module
-// -> they can only be used in components templates inside this modules
-declarations: [],
-
-// services which should be useable by child modules and components
-// details on providers and injection are in the services presentation
-providers: []
-})
-export class TestModule { }</code></pre>
-            <aside class="notes">
-              Most imported slide of this deck, needed for the exercise. <br />
-              The class itself is mostly empty. The important information is in
-              the decorator.<br />
-              The different arrays describe the content of the module, separated
-              in dependencies, components (and other code) available for other
-              modules, internal code and services to be provided for dependency
-              injection
-            </aside>
-          </section>
-          <section>
-            <h3>... example</h3>
-            <pre><code class="typescript">@NgModule({
-  imports: [CommonModule],
-  exports: [CommonModule, BookListComponent],
-  declarations: [BookListComponent, BookDetailComponent],
-  providers: [BookService],
-})
-export class BookModule { }</code></pre>
-            <ul class="ul-small">
-              <li>
-                Angular <strong>Common module is imported</strong> - e.g. *ngIf
-                can be used in templates
-              </li>
-              <li>
-                Common module is exported - so a module importing BookModule can
-                <strong>use Common without importing it</strong>
-              </li>
-              <li>
-                BookListComponent can be
-                <strong
-                  >used inside templates in modules importing BookModule</strong
-                >
-                - 'it's public'
-              </li>
-              <li>
-                BookListComponent and BookDetailComponent are declared and can
-                therefore be <strong>used inside modules templates</strong> -
-                good practice if for instance BookDetailComponent is part of
-                BookListComponent and should
-                <strong>never be used alone</strong>
-              </li>
-              <li>
-                BookService is provided for all components within BookModule and
-                child modules
-              </li>
-            </ul>
-          </section>
-        </section>
-        <section>
-          <h3>Application Start (1/2)</h3>
-          <p>AppModule is the top level Module which gets bootstrapped</p>
-          <pre><code class="typescript">import { NgModule }      from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent }  from './app.component';
-
-@NgModule({
-  imports:      [ BrowserModule ],
-  declarations: [ AppComponent ],
-  // top level component to insert into index.html
-  bootstrap:    [ AppComponent ]
-})
-export class AppModule { }</code></pre>
-          <small>app.module.ts</small>
-          <aside class="notes">
-            The root module is called AppModule by convention. It contains the
-            root component that contains all other components displayed by the
-            application.<br />
-            The root module usually contains no business logic or components,
-            but it provides services that are supposed to be available for the
-            entire application like logging or a config service.
-          </aside>
-        </section>
-        <section>
-          <h3>Application Start (2/2)</h3>
-          <pre><code style="overflow:hidden" data-trim class="typescript">
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule }              from './app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule);</code></pre>
-          <small>main.ts</small>
-          <pre><code class="html">&lt;my-app&gt;Loading ...&lt;/my-app&gt;</code></pre>
-          <small>index.html</small>
-          <pre><code class="typescript">import { Component } from '@angular/core';
-
-@Component({
-  selector: 'my-app',
-})
-export class AppComponent { }</code></pre>
-          <small>app.component.ts</small>
-          <aside class="notes">
-            After defining the root module we need to start the actual
-            bootstrapping of the application. By convention we do that in the
-            main.ts file. We need to include the root component in our
-            index.html to indicate where in the Html our application is supposed
-            to be rendered.
-          </aside>
-        </section>
-        <section>
-          <h3>Core and Shared Module</h3>
-          <ul>
-            <li>
-              Core- and SharedModule are
-              <strong>modules with conventions</strong>
-            </li>
-            <li>
-              CoreModule has <strong>single use components</strong> - e.g.
-              NavigationComponent, FooterComponent, etc. to be
-              <strong>used inside AppComponents template</strong>
-            </li>
-            <li>CoreModule is <strong>only imported in AppModule</strong></li>
-            <li>
-              SharedModule has common components, directives and pipes.
-              <strong>Imported by multiple modules</strong> - e.g.
-              SpinnerComponent, ModalComponent
-            </li>
-          </ul>
-          <div class="margin_top_30">
-            <p class="align_right">
-              <small
-                ><a href="https://angular.io/styleguide">Angular Docs</a></small
-              >
-            </p>
-          </div>
-        </section>
-        <section>
-          <p>
-            Default Application Structure from
-            <a href="https://angular.io/styleguide#!#04-06">Angular Docs</a>
-          </p>
-          <iframe
-            id="default-structure-iframe"
-            src="./default-structure/modules.html"
-            frameborder="0"
-          ></iframe>
-          <aside class="notes">
-            "heroes" and "villains" are examples for modules for specific
-            business areas also called feature modules. "core" and "shared" are
-            the mentioned modules with conventions.<br />
-            feature modules can contain "core" and "shared" sub modules and
-            feature modules.
-          </aside>
-        </section>
-        <section>
-          <h2>Imports</h2>
-          <aside class="notes">
-            Angular started with Angular 14 to move away from Modules to
-            importing standalone components into other standalone components.
-          </aside>
-        </section>
-        <section>
-          <p>
-            Default Application Structure from
-            <a
-              href="https://angular.dev/style-guide#overall-structural-guidelines"
-              >Angular Docs</a
-            >
-          </p>
-          <iframe
-            id="default-structure-iframe"
-            src="./default-structure/imports.html"
-            frameborder="0"
-          ></iframe>
-          <aside class="notes">
-            "heroes", "core" and "shared" are now standalone components without
-            the respective modules. "villains" is a feature module which expose
-            or hide its implementation from the other part of the application.
-          </aside>
-        </section>
-        <section>
-          <h3>Standalone components</h3>
-          <ul>
-            <li>Introduced with <strong>Angular 14</strong>.</li>
-            <li>
-              Standalone components reduce the complexity of NgModules,
-              providing a more lightweight and modular approach to building
-              Angular applications.
-            </li>
-            <li>
-              Standalone components can directly import other components, directives, and pipes used in their templates without the need for NgModules.
-            </li>
-          </ul>
-          <div class="margin_top_30">
-            <p class="align_right">
-              <small
-                ><a href="https://angular.dev/guide/components/importing"
-                  >Angular Docs</a
-                ></small
-              >
-            </p>
-          </div>
-        </section>
-        <section>
-          <h3>Define a Standalone Component</h3>
-          <pre><code class="hljs typescript" data-trim data-noescape> 
-            import { Component } from '@angular/core'; 
-            import { ProfilePhoto } from './profile-photo.component';
-
-            @Component({
-              <mark>standalone: true,</mark>
-              imports: [ProfilePhoto],
-              template: `<profile-photo />`
-                })
-            export class UserProfile { }
-                </code></pre>
-          <aside class="notes">
-            Add <strong>standalone: true</strong> to the Metadata of the component to define it as a standalone component.
-          </aside>
-        </section>
-        <section>
-            <h3>Import Standalone Components</h3>
-            <pre><code class="hljs typescript" data-trim data-noescape> 
-              import { Component } from '@angular/core'; 
-              import { ProfilePhoto } from './profile-photo.component';
-  
-              @Component({
-                standalone: true,
-                <mark>imports: [ProfilePhoto],</mark>
-                template: `<profile-photo />`
-                  })
-              export class UserProfile { }
-                  </code></pre>
-            <aside class="notes">
-              In this example, the standalone component
-              <code>ProfilePhoto</code> is directly imported into the
-              <code>UserProfile</code> component.
-            </aside>
-          </section>
-          <section>
-            <h3>Import Modules</h3>
-            <pre><code class="hljs typescript" data-trim data-noescape> 
-                import { Component } from '@angular/core';
-                import { ReactiveFormsModule } from '@angular/forms';
-                
-                @Component({
-                  standalone: true,
-                  selector: 'user-profile',
-                  template: `<profile-photo />`,
-                  <mark>imports: [ReactiveFormsModule]</mark>
-                })
-                export class UserProfile {
-                  profileForm = new FormGroup({
-                    name: new FormControl('')
-                  });
-                }
-                  </code></pre>
-            <aside class="notes">
-              In this example, the standalone component
-              <code>ProfilePhoto</code> is directly imported into the
-              <code>UserProfile</code> component.
-            </aside>
-          </section>
-        <section>
-          <h3>Benefits of Direct Importing</h3>
-          <ul>
-            <li>
-              Eliminates the need for NgModules to declare and import
-              components.
-            </li>
-            <li>Improves code clarity and maintainability.</li>
-            <li>Provides finer control over each component's dependencies.</li>
-          </ul>
-          <aside class="notes">
-            Direct importing makes dependencies explicit, which simplifies
-            maintenance and enhances understanding of the codebase.
-          </aside>
-        </section>
-        <section>
-            <h3>Future of Angular development</h3>
-            <ul>
-              <li>
-                The Angular team recommends using standalone components for all
-                new development.
-              </li>
-              <li>
-                Starting with <strong>Angular 17</strong>, creating an Angular
-                application with <strong>ng new</strong> will generate a standalone application by default.
-              </li>
-            </ul>
-          </section>
-        <section>
-          <p class="no-text-transform">
-            Starting with <strong>Angular 19</strong>
-            <strong>standalone: true</strong> will be default.
-          </p>
-          <pre><code class="hljs typescript" data-trim data-noescape>
-                @Component({
-                  <mark>imports: [ProfilePhoto],</mark>
-                  <mark>template: `<profile-photo />`</mark>
-                })
-                export class UserProfile { }
-                </code></pre>
-          <br />
-          <p class="no-text-transform">
-            Add <strong>standalone: false</strong> to existing ngModule
-            components so they continue to work.
-          </p>
-          <pre><code class="hljs typescript" data-trim data-noescape>
-                  @Component({
-                    <mark>standalone: false,</mark>
-                    imports: [ProfilePhoto],
-                    template: `<profile-photo />`
-                  })
-                  export class UserProfile { }
-                  </code></pre>
-        </section>
       </div>
     </div>