From 22f4f1ec798d070d7858d7458f7b1391b142bc8f Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Wed, 25 Oct 2023 22:44:48 +0200
Subject: [PATCH 01/66] Template Essentials

---
 src/app/admin/admin.module.ts                 | 17 +++++++++
 .../donut-list/donut-list.component.ts        | 15 ++++++++
 src/app/app.component.ts                      | 35 +++++++++++++++++--
 src/app/app.module.ts                         |  3 +-
 4 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 src/app/admin/admin.module.ts
 create mode 100644 src/app/admin/containers/donut-list/donut-list.component.ts

diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
new file mode 100644
index 0000000..dcadee7
--- /dev/null
+++ b/src/app/admin/admin.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DonutListComponent } from './containers/donut-list/donut-list.component';
+
+
+
+@NgModule({
+  declarations: [
+    DonutListComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class AdminModule { }
+
+
diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
new file mode 100644
index 0000000..a0e520e
--- /dev/null
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-donut-list',
+  template: `
+    <p>
+      donut-list works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class DonutListComponent {
+
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c11bb60..2750b78 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,8 +1,26 @@
 import { Component, OnInit } from '@angular/core';
+import * as events from "events";
 
 @Component({
   selector: 'app-root',
-  template: ` <div class="app">Hello Angular!</div> `,
+  template: `
+    <div class="app">
+<!--      One Way Data Binding-->
+<!--      Interpolation of sugar-syntax. dit doet achter de schermen hetzelfde als property binding -->
+      <h4>{{ message }}</h4>
+<!--      Interpolation met logica indien message leeg print 'Nothing here...' anders message -->
+      <h4>{{ message.length ? message : 'Nothing here...' }}</h4>
+<!--      property binding via setting the property [innerText], [value]-->
+      <h4><input [value]="message"></h4>
+      <h4 [innerText]="message"></h4>
+      <h4 [innerText]="message.length ? message : 'Nothing here...'"></h4>
+<!--      event binding via property binding and updates via (input) event -->
+      <h4><input [value]="message" (input)="handleInput($event)"></h4>
+      <h4 (click)="handleClick($event)"> {{ newMessage.length < 12 ? newMessage : 'to big' }}</h4>
+<!--      Simplified event binding via Template Ref Variable. -->
+      <h4><input [value]="message" (input)="newMessage= myTemplateRefVariable.value "  #myTemplateRefVariable></h4>
+      <h4> {{ myTemplateRefVariable.value }}</h4>
+    </div> `,
   styles: [
     `
       .app {
@@ -15,7 +33,20 @@ import { Component, OnInit } from '@angular/core';
   ],
 })
 export class AppComponent implements OnInit {
+  message!: string;
+  newMessage!: string;
+
   ngOnInit() {
-    console.log('Hello World!');
+   this.message = 'Value on init';
+  }
+
+  handleClick(event: MouseEvent) {
+    console.log(event);
   }
+
+  handleInput(event: Event) {
+    const { value } = event.target as HTMLInputElement;
+    console.log(value);
+    this.newMessage = value;
+   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index bde0672..527f123 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,10 +2,11 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
+import { AdminModule } from './admin/admin.module';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule],
+  imports: [BrowserModule, AdminModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

From 87b2ec7c726214f67281d667bf6d1ff1630c5391 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Wed, 25 Oct 2023 22:57:18 +0200
Subject: [PATCH 02/66] Create a Smart Container Component

---
 src/app/admin/admin.module.ts |  3 +++
 src/app/app.component.ts      | 16 +---------------
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index dcadee7..1d720bf 100644
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -8,6 +8,9 @@ import { DonutListComponent } from './containers/donut-list/donut-list.component
   declarations: [
     DonutListComponent
   ],
+  exports: [
+    DonutListComponent
+  ],
   imports: [
     CommonModule
   ]
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2750b78..8de62d4 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -5,21 +5,7 @@ import * as events from "events";
   selector: 'app-root',
   template: `
     <div class="app">
-<!--      One Way Data Binding-->
-<!--      Interpolation of sugar-syntax. dit doet achter de schermen hetzelfde als property binding -->
-      <h4>{{ message }}</h4>
-<!--      Interpolation met logica indien message leeg print 'Nothing here...' anders message -->
-      <h4>{{ message.length ? message : 'Nothing here...' }}</h4>
-<!--      property binding via setting the property [innerText], [value]-->
-      <h4><input [value]="message"></h4>
-      <h4 [innerText]="message"></h4>
-      <h4 [innerText]="message.length ? message : 'Nothing here...'"></h4>
-<!--      event binding via property binding and updates via (input) event -->
-      <h4><input [value]="message" (input)="handleInput($event)"></h4>
-      <h4 (click)="handleClick($event)"> {{ newMessage.length < 12 ? newMessage : 'to big' }}</h4>
-<!--      Simplified event binding via Template Ref Variable. -->
-      <h4><input [value]="message" (input)="newMessage= myTemplateRefVariable.value "  #myTemplateRefVariable></h4>
-      <h4> {{ myTemplateRefVariable.value }}</h4>
+      <app-donut-list></app-donut-list>
     </div> `,
   styles: [
     `

From 437dc7d703358e35d83359e95f98decadaa49e88 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 26 Oct 2023 19:17:50 +0200
Subject: [PATCH 03/66] Use the NgOnInit Lifecycle Hook

---
 .../donut-list/donut-list.component.ts        | 46 +++++++++++++++++--
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index a0e520e..3c36a53 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -1,15 +1,51 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-donut-list',
   template: `
-    <p>
-      donut-list works!
-    </p>
+      <div>
+        // pipe to json
+        {{ donut | json }}
+          <div>
+              {{ donut.name }}
+              {{ donut.price }}
+          </div>
+      </div>
   `,
   styles: [
   ]
 })
-export class DonutListComponent {
+export class DonutListComponent implements OnInit {
+  // Declaratie hier maar vullen in ngOnInit()
+  donut!: any;
+  donuts!: any[];
 
+  constructor() {}
+
+  ngOnInit(): void {
+    this.donuts = [
+      {
+        id: 'xy12yr',
+        name: 'Just Chocolate',
+        icon: 'jus-chocolate',
+        price: 119,
+        description: 'For the pure chocoholic.',
+      },
+      {
+        id: 'zy19yr',
+        name: 'Glazed Fudge',
+        icon: 'glazed-fudge',
+        price: 129,
+        description: 'Sticky perfection.',
+      },
+      {
+        id: 'qy19ya',
+        name: 'Caramel Swirl',
+        icon: 'caramel-swirl',
+        price: 129,
+        description: 'Chocolate drizzled with caramel',
+      }
+    ]
+    this.donut = this.donuts[0];
+  }
 }

From 8badf788d87dd17316f429e30558ca8df0f82f6b Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 26 Oct 2023 19:28:30 +0200
Subject: [PATCH 04/66] Type Definitions with Interfaces

---
 .../admin/containers/donut-list/donut-list.component.ts    | 6 ++++--
 src/app/admin/models/donut.model.ts                        | 7 +++++++
 2 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 src/app/admin/models/donut.model.ts

diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index 3c36a53..463a81b 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -1,5 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 
+import { Donut } from "../../models/donut.model";
+
 @Component({
   selector: 'app-donut-list',
   template: `
@@ -17,8 +19,8 @@ import {Component, OnInit} from '@angular/core';
 })
 export class DonutListComponent implements OnInit {
   // Declaratie hier maar vullen in ngOnInit()
-  donut!: any;
-  donuts!: any[];
+  donut!: Donut;
+  donuts!: Donut[];
 
   constructor() {}
 
diff --git a/src/app/admin/models/donut.model.ts b/src/app/admin/models/donut.model.ts
new file mode 100644
index 0000000..6100bae
--- /dev/null
+++ b/src/app/admin/models/donut.model.ts
@@ -0,0 +1,7 @@
+export interface Donut {
+  id: string;
+  name: string;
+  icon: string;
+  price: number;
+  description: string;
+}

From 03c64e9144893ba6c51cca5a235d6526dd6bf201 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 26 Oct 2023 19:53:45 +0200
Subject: [PATCH 05/66] Create and Render a Dumb Component

---
 src/app/admin/admin.module.ts                    |  4 +++-
 .../donut-card/donut-card.component.ts           | 16 ++++++++++++++++
 .../donut-list/donut-list.component.ts           | 16 +++++++++++++---
 3 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 src/app/admin/components/donut-card/donut-card.component.ts

diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index 1d720bf..4250f7b 100644
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -1,12 +1,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DonutListComponent } from './containers/donut-list/donut-list.component';
+import { DonutCardComponent } from './components/donut-card/donut-card.component';
 
 
 
 @NgModule({
   declarations: [
-    DonutListComponent
+    DonutListComponent,
+    DonutCardComponent
   ],
   exports: [
     DonutListComponent
diff --git a/src/app/admin/components/donut-card/donut-card.component.ts b/src/app/admin/components/donut-card/donut-card.component.ts
new file mode 100644
index 0000000..a4f61ed
--- /dev/null
+++ b/src/app/admin/components/donut-card/donut-card.component.ts
@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'donut-card',
+  template: `
+    <p>
+      donut-card works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class DonutCardComponent implements OnInit {
+  ngOnInit(): void {
+  }
+}
diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index 463a81b..cd0e6d7 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -6,11 +6,21 @@ import { Donut } from "../../models/donut.model";
   selector: 'app-donut-list',
   template: `
       <div>
-        // pipe to json
-        {{ donut | json }}
+        <div> <donut-card></donut-card> </div>
+          <div class="donut-card">
+              <img
+                      src="/assets/img/{{ donut.icon }}.svg"
+                      [alt]="donut.name"
+                      class="donut-card-icon"
+              />
+          </div>
           <div>
+            <p class="dunut-card-name">
               {{ donut.name }}
+            </p>
+            <p class="dunut-card-price">
               {{ donut.price }}
+            </p>
           </div>
       </div>
   `,
@@ -29,7 +39,7 @@ export class DonutListComponent implements OnInit {
       {
         id: 'xy12yr',
         name: 'Just Chocolate',
-        icon: 'jus-chocolate',
+        icon: 'just-chocolate',
         price: 119,
         description: 'For the pure chocoholic.',
       },

From 9845b7c254a8a16fcd0d4a2d95dbbbd8da66cdfc Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 26 Oct 2023 20:07:39 +0200
Subject: [PATCH 06/66] Pass State to Dumb Components via @Input

---
 .../donut-card/donut-card.component.ts        | 26 ++++++++++++++-----
 .../donut-list/donut-list.component.ts        | 25 +++---------------
 src/app/app.component.ts                      |  2 +-
 3 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/src/app/admin/components/donut-card/donut-card.component.ts b/src/app/admin/components/donut-card/donut-card.component.ts
index a4f61ed..287cdbc 100644
--- a/src/app/admin/components/donut-card/donut-card.component.ts
+++ b/src/app/admin/components/donut-card/donut-card.component.ts
@@ -1,16 +1,28 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Input} from '@angular/core';
+import {Donut} from "../../models/donut.model";
 
 @Component({
   selector: 'donut-card',
   template: `
-    <p>
-      donut-card works!
-    </p>
+    <div class="donut-card">
+      <img
+        src="/assets/img/{{ donut.icon }}.svg"
+        [alt]="donut.name"
+        class="donut-card-icon"
+      />
+    </div>
+    <div>
+      <p class="dunut-card-name">
+        {{ donut.name }}
+      </p>
+      <p class="dunut-card-price">
+        {{ donut.price }}
+      </p>
+    </div>
   `,
   styles: [
   ]
 })
-export class DonutCardComponent implements OnInit {
-  ngOnInit(): void {
-  }
+export class DonutCardComponent {
+  @Input() donut!: Donut;
 }
diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index cd0e6d7..c431191 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -3,25 +3,12 @@ import {Component, OnInit} from '@angular/core';
 import { Donut } from "../../models/donut.model";
 
 @Component({
-  selector: 'app-donut-list',
+  selector: 'donut-list',
   template: `
       <div>
-        <div> <donut-card></donut-card> </div>
-          <div class="donut-card">
-              <img
-                      src="/assets/img/{{ donut.icon }}.svg"
-                      [alt]="donut.name"
-                      class="donut-card-icon"
-              />
-          </div>
-          <div>
-            <p class="dunut-card-name">
-              {{ donut.name }}
-            </p>
-            <p class="dunut-card-price">
-              {{ donut.price }}
-            </p>
-          </div>
+        <div> <donut-card [donut]="donuts[0]"></donut-card> </div>
+        <div> <donut-card [donut]="donuts[1]"></donut-card> </div>
+        <div> <donut-card [donut]="donuts[2]"></donut-card> </div>
       </div>
   `,
   styles: [
@@ -29,11 +16,8 @@ import { Donut } from "../../models/donut.model";
 })
 export class DonutListComponent implements OnInit {
   // Declaratie hier maar vullen in ngOnInit()
-  donut!: Donut;
   donuts!: Donut[];
 
-  constructor() {}
-
   ngOnInit(): void {
     this.donuts = [
       {
@@ -58,6 +42,5 @@ export class DonutListComponent implements OnInit {
         description: 'Chocolate drizzled with caramel',
       }
     ]
-    this.donut = this.donuts[0];
   }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 8de62d4..ba4bd61 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -5,7 +5,7 @@ import * as events from "events";
   selector: 'app-root',
   template: `
     <div class="app">
-      <app-donut-list></app-donut-list>
+      <donut-list></donut-list>
     </div> `,
   styles: [
     `

From a798766aae3f7c51efa83f1d264e1de65ea03b15 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 26 Oct 2023 21:07:40 +0200
Subject: [PATCH 07/66] Scoped Styles in Components

---
 .../donut-card/donut-card.component.ts        | 43 +++++++++++++++----
 src/app/app.component.ts                      | 23 ++++++++--
 2 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/app/admin/components/donut-card/donut-card.component.ts b/src/app/admin/components/donut-card/donut-card.component.ts
index 287cdbc..31e1b62 100644
--- a/src/app/admin/components/donut-card/donut-card.component.ts
+++ b/src/app/admin/components/donut-card/donut-card.component.ts
@@ -10,17 +10,44 @@ import {Donut} from "../../models/donut.model";
         [alt]="donut.name"
         class="donut-card-icon"
       />
+      <div>
+        <p class="donut-card-name">
+          {{ donut.name }}
+        </p>
+        <p class="donut-card-price">
+          {{ donut.price }}
+        </p>
+      </div>
     </div>
-    <div>
-      <p class="dunut-card-name">
-        {{ donut.name }}
-      </p>
-      <p class="dunut-card-price">
-        {{ donut.price }}
-      </p>
-    </div>
+
   `,
   styles: [
+    `
+      .donut-card { // verwijst naar <div class="donut-card">
+        display: flex;
+        align-items: center;
+        background: #f7f7f7;
+        border-radius: 5px;
+        margin-bottom: 5px;
+        padding: 5px 15px;
+        transition: transform 0.2s ease-in-out;
+        &:hover {
+          transform: translateY(-3px);
+        }
+        &-name {  // nieuw in "style": "scss" Hierdoor hoef je niet de volledige class op te geven en verwijst naar <p class="donut-card-name">
+                  // "scss" wordt uitgesproken als sass
+          font-size: 16px;
+        }
+        &-price { // verwijst naar <p class="donut-card-price">
+          font-size: 14px;
+          color: #c14583;
+        }
+        &-icon { // verwijst naar <p class="donut-card-icon">
+          width: 50px;
+          margin-right: 10px;
+        }
+      }
+    `,
   ]
 })
 export class DonutCardComponent {
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ba4bd61..692f735 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -5,15 +5,30 @@ import * as events from "events";
   selector: 'app-root',
   template: `
     <div class="app">
+      <header class="header">
+        <img src="/assets/img/logo.svg" alt="Ultimate Donuts" class="logo">
+      </header>
       <donut-list></donut-list>
     </div> `,
   styles: [
     `
       .app {
-        margin-top: 50px;
-        font-size: 22px;
-        color: #fff;
-        text-align: center;
+        background: #fff;
+        border-radius: 8px;
+        max-width: 400px;
+        width: 94%;
+        margin: 25px auto;
+        padding: 25px;
+        border: 4px solid #ef9fc7;
+      }
+      .header {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 25px;
+      }
+      .logo {
+        width: 100px;
+        height: 88px;
       }
     `,
   ],

From 2719925e9a0641ac338a111eca0642e72d14f1b8 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 26 Oct 2023 21:21:05 +0200
Subject: [PATCH 08/66] Style a Host Element

---
 src/app/admin/components/donut-card/donut-card.component.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/admin/components/donut-card/donut-card.component.ts b/src/app/admin/components/donut-card/donut-card.component.ts
index 31e1b62..0f936c2 100644
--- a/src/app/admin/components/donut-card/donut-card.component.ts
+++ b/src/app/admin/components/donut-card/donut-card.component.ts
@@ -4,7 +4,6 @@ import {Donut} from "../../models/donut.model";
 @Component({
   selector: 'donut-card',
   template: `
-    <div class="donut-card">
       <img
         src="/assets/img/{{ donut.icon }}.svg"
         [alt]="donut.name"
@@ -18,12 +17,11 @@ import {Donut} from "../../models/donut.model";
           {{ donut.price }}
         </p>
       </div>
-    </div>
 
   `,
   styles: [
     `
-      .donut-card { // verwijst naar <div class="donut-card">
+      :host {
         display: flex;
         align-items: center;
         background: #f7f7f7;
@@ -34,6 +32,8 @@ import {Donut} from "../../models/donut.model";
         &:hover {
           transform: translateY(-3px);
         }
+      }
+      .donut-card { // verwijst naar <div class="donut-card">
         &-name {  // nieuw in "style": "scss" Hierdoor hoef je niet de volledige class op te geven en verwijst naar <p class="donut-card-name">
                   // "scss" wordt uitgesproken als sass
           font-size: 16px;

From 7c38f4f15d043ff6a26a2f5702925af558f283c1 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 26 Oct 2023 21:38:41 +0200
Subject: [PATCH 09/66] View Encapsulation: Shadow DOM and Emulated

---
 .../components/donut-card/donut-card.component.ts | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/app/admin/components/donut-card/donut-card.component.ts b/src/app/admin/components/donut-card/donut-card.component.ts
index 0f936c2..a1d61c0 100644
--- a/src/app/admin/components/donut-card/donut-card.component.ts
+++ b/src/app/admin/components/donut-card/donut-card.component.ts
@@ -1,8 +1,21 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, ViewEncapsulation} from '@angular/core';
 import {Donut} from "../../models/donut.model";
 
 @Component({
   selector: 'donut-card',
+  // encapsulation: ViewEncapsulation.Emulated, // Is de default dat wil zeggen dat nu de css van styles.scss genomen wordt
+  encapsulation: ViewEncapsulation.ShadowDom, // Niet van styles.scss maar van styles: [ .app  { margin: 25px auto;
+    // styles: [
+    //   `
+    //   .app {
+    //     background: #fff;
+    //     border-radius: 8px;
+    //     max-width: 400px;
+    //     width: 94%;
+    //     margin: 25px auto;
+    //     padding: 25px;
+    //     border: 4px solid #ef9fc7;
+    //   }
   template: `
       <img
         src="/assets/img/{{ donut.icon }}.svg"

From fccc4e07ebf548f580bd8c6d611b1ddba7ab373a Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Fri, 27 Oct 2023 06:00:50 +0200
Subject: [PATCH 10/66] Set Inline Styles with Style Bindings

---
 .../donut-card/donut-card.component.ts        | 21 +++++--------------
 .../donut-list/donut-list.component.ts        |  1 +
 src/app/admin/models/donut.model.ts           |  1 +
 3 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/app/admin/components/donut-card/donut-card.component.ts b/src/app/admin/components/donut-card/donut-card.component.ts
index a1d61c0..ffd57bf 100644
--- a/src/app/admin/components/donut-card/donut-card.component.ts
+++ b/src/app/admin/components/donut-card/donut-card.component.ts
@@ -3,20 +3,10 @@ import {Donut} from "../../models/donut.model";
 
 @Component({
   selector: 'donut-card',
-  // encapsulation: ViewEncapsulation.Emulated, // Is de default dat wil zeggen dat nu de css van styles.scss genomen wordt
-  encapsulation: ViewEncapsulation.ShadowDom, // Niet van styles.scss maar van styles: [ .app  { margin: 25px auto;
-    // styles: [
-    //   `
-    //   .app {
-    //     background: #fff;
-    //     border-radius: 8px;
-    //     max-width: 400px;
-    //     width: 94%;
-    //     margin: 25px auto;
-    //     padding: 25px;
-    //     border: 4px solid #ef9fc7;
-    //   }
+  encapsulation: ViewEncapsulation.Emulated, // Is de default dat wil zeggen dat nu de css van styles.scss genomen wordt
   template: `
+    <div class="donut-card"
+          [style.border]="donut.promo ? '2px solid #eee': 'none' ">
       <img
         src="/assets/img/{{ donut.icon }}.svg"
         [alt]="donut.name"
@@ -30,11 +20,12 @@ import {Donut} from "../../models/donut.model";
           {{ donut.price }}
         </p>
       </div>
+    </div>
 
   `,
   styles: [
     `
-      :host {
+      .donut-card {
         display: flex;
         align-items: center;
         background: #f7f7f7;
@@ -45,8 +36,6 @@ import {Donut} from "../../models/donut.model";
         &:hover {
           transform: translateY(-3px);
         }
-      }
-      .donut-card { // verwijst naar <div class="donut-card">
         &-name {  // nieuw in "style": "scss" Hierdoor hoef je niet de volledige class op te geven en verwijst naar <p class="donut-card-name">
                   // "scss" wordt uitgesproken als sass
           font-size: 16px;
diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index c431191..3502783 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -25,6 +25,7 @@ export class DonutListComponent implements OnInit {
         name: 'Just Chocolate',
         icon: 'just-chocolate',
         price: 119,
+        promo: true,
         description: 'For the pure chocoholic.',
       },
       {
diff --git a/src/app/admin/models/donut.model.ts b/src/app/admin/models/donut.model.ts
index 6100bae..1544e55 100644
--- a/src/app/admin/models/donut.model.ts
+++ b/src/app/admin/models/donut.model.ts
@@ -3,5 +3,6 @@ export interface Donut {
   name: string;
   icon: string;
   price: number;
+  promo?: boolean;
   description: string;
 }

From 3f0b10a22b1f3ead06c350a004b39ae403881437 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Fri, 27 Oct 2023 06:14:31 +0200
Subject: [PATCH 11/66] Complex Inline Styles with NgStyle

---
 .../donut-card/donut-card.component.ts        | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/app/admin/components/donut-card/donut-card.component.ts b/src/app/admin/components/donut-card/donut-card.component.ts
index ffd57bf..21bf1d5 100644
--- a/src/app/admin/components/donut-card/donut-card.component.ts
+++ b/src/app/admin/components/donut-card/donut-card.component.ts
@@ -5,8 +5,14 @@ import {Donut} from "../../models/donut.model";
   selector: 'donut-card',
   encapsulation: ViewEncapsulation.Emulated, // Is de default dat wil zeggen dat nu de css van styles.scss genomen wordt
   template: `
-    <div class="donut-card"
-          [style.border]="donut.promo ? '2px solid #eee': 'none' ">
+      <div class="donut-card"
+           [ngStyle]=" {
+                border: donut.promo ? '2px solid #eee': 'none',
+                'background-color': donut.promo ? 'red': 'green',
+                'font-size.px': 26
+          }"
+           >
+        <!-- commented out in styles: [...-->
       <img
         src="/assets/img/{{ donut.icon }}.svg"
         [alt]="donut.name"
@@ -36,15 +42,14 @@ import {Donut} from "../../models/donut.model";
         &:hover {
           transform: translateY(-3px);
         }
-        &-name {  // nieuw in "style": "scss" Hierdoor hoef je niet de volledige class op te geven en verwijst naar <p class="donut-card-name">
-                  // "scss" wordt uitgesproken als sass
-          font-size: 16px;
+        &-name {
+          //font-size: 16px;
         }
-        &-price { // verwijst naar <p class="donut-card-price">
-          font-size: 14px;
+        &-price {
+          //font-size: 14px;
           color: #c14583;
         }
-        &-icon { // verwijst naar <p class="donut-card-icon">
+        &-icon {
           width: 50px;
           margin-right: 10px;
         }

From c482fd94cb190c01abf024d81928d217f6c2a0e5 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Fri, 27 Oct 2023 06:24:28 +0200
Subject: [PATCH 12/66] Set Classes with Class Bindings

---
 .../components/donut-card/donut-card.component.ts | 15 ++++++---------
 .../containers/donut-list/donut-list.component.ts |  2 +-
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/app/admin/components/donut-card/donut-card.component.ts b/src/app/admin/components/donut-card/donut-card.component.ts
index 21bf1d5..97f2219 100644
--- a/src/app/admin/components/donut-card/donut-card.component.ts
+++ b/src/app/admin/components/donut-card/donut-card.component.ts
@@ -5,14 +5,8 @@ import {Donut} from "../../models/donut.model";
   selector: 'donut-card',
   encapsulation: ViewEncapsulation.Emulated, // Is de default dat wil zeggen dat nu de css van styles.scss genomen wordt
   template: `
-      <div class="donut-card"
-           [ngStyle]=" {
-                border: donut.promo ? '2px solid #eee': 'none',
-                'background-color': donut.promo ? 'red': 'green',
-                'font-size.px': 26
-          }"
+      <div class="donut-card" [class.donut-card-promo]="donut.promo"
            >
-        <!-- commented out in styles: [...-->
       <img
         src="/assets/img/{{ donut.icon }}.svg"
         [alt]="donut.name"
@@ -43,12 +37,15 @@ import {Donut} from "../../models/donut.model";
           transform: translateY(-3px);
         }
         &-name {
-          //font-size: 16px;
+          font-size: 16px;
         }
         &-price {
-          //font-size: 14px;
+          font-size: 14px;
           color: #c14583;
         }
+        &-promo {
+          border: 2px solid #eee;
+        }
         &-icon {
           width: 50px;
           margin-right: 10px;
diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index 3502783..dd62bc2 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -25,7 +25,6 @@ export class DonutListComponent implements OnInit {
         name: 'Just Chocolate',
         icon: 'just-chocolate',
         price: 119,
-        promo: true,
         description: 'For the pure chocoholic.',
       },
       {
@@ -33,6 +32,7 @@ export class DonutListComponent implements OnInit {
         name: 'Glazed Fudge',
         icon: 'glazed-fudge',
         price: 129,
+        promo: true,
         description: 'Sticky perfection.',
       },
       {

From 5fd890fb3d355b4602937dbe8d013e6b09a39243 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Fri, 27 Oct 2023 06:37:41 +0200
Subject: [PATCH 13/66] Complex Classes with NgClass

---
 .../components/donut-card/donut-card.component.ts   | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app/admin/components/donut-card/donut-card.component.ts b/src/app/admin/components/donut-card/donut-card.component.ts
index 97f2219..ee1844b 100644
--- a/src/app/admin/components/donut-card/donut-card.component.ts
+++ b/src/app/admin/components/donut-card/donut-card.component.ts
@@ -5,8 +5,17 @@ import {Donut} from "../../models/donut.model";
   selector: 'donut-card',
   encapsulation: ViewEncapsulation.Emulated, // Is de default dat wil zeggen dat nu de css van styles.scss genomen wordt
   template: `
-      <div class="donut-card" [class.donut-card-promo]="donut.promo"
-           >
+      <div
+              class="donut-card"
+              [ngClass]="{
+                'donut-card-promo': donut.promo,
+                'donut-card-not-promo': !donut.promo
+            }"
+      >
+<!--     enkel de TRUE conditions worden toegevoegd in de html >>
+            inspect vb: <div _ngcontent-qke-c12="" class="donut-card donut-card-not-promo"
+            enkel -not-promo wordt toegevoegd indien promo = false
+ -->
       <img
         src="/assets/img/{{ donut.icon }}.svg"
         [alt]="donut.name"

From 855a7e1b3a0b9579320f5470a04d29a711279e1d Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Fri, 27 Oct 2023 06:52:47 +0200
Subject: [PATCH 14/66] Use a Pipe to Format Currency

---
 .../components/donut-card/donut-card.component.ts  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/admin/components/donut-card/donut-card.component.ts b/src/app/admin/components/donut-card/donut-card.component.ts
index ee1844b..c331fa8 100644
--- a/src/app/admin/components/donut-card/donut-card.component.ts
+++ b/src/app/admin/components/donut-card/donut-card.component.ts
@@ -8,14 +8,9 @@ import {Donut} from "../../models/donut.model";
       <div
               class="donut-card"
               [ngClass]="{
-                'donut-card-promo': donut.promo,
-                'donut-card-not-promo': !donut.promo
+                'donut-card-promo': donut.promo
             }"
       >
-<!--     enkel de TRUE conditions worden toegevoegd in de html >>
-            inspect vb: <div _ngcontent-qke-c12="" class="donut-card donut-card-not-promo"
-            enkel -not-promo wordt toegevoegd indien promo = false
- -->
       <img
         src="/assets/img/{{ donut.icon }}.svg"
         [alt]="donut.name"
@@ -26,10 +21,15 @@ import {Donut} from "../../models/donut.model";
           {{ donut.name }}
         </p>
         <p class="donut-card-price">
-          {{ donut.price }}
+          {{ donut.price / 100 | currency }}
+          {{ donut.price / 100 | currency: 'USD': 'code' }}
+          {{ donut.price / 100 | currency: 'EUR': 'symbol' }}
         </p>
       </div>
     </div>
+<!--    dit is de CurrencyPipe, een pipe '|' + 'currency:'  // | currency: 'USD': 'symbol' is de default
+output: $1.29 USD1.29 €1.29
+-->
 
   `,
   styles: [

From 246bb733102ebe5f755288196adbc8afbe7108cb Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Sun, 29 Oct 2023 16:22:14 +0100
Subject: [PATCH 15/66] Use NgIf for Conditional Rendering

---
 .../donut-card/donut-card.component.ts        |  6 ---
 .../donut-list/donut-list.component.ts        | 52 ++++++++++---------
 2 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/app/admin/components/donut-card/donut-card.component.ts b/src/app/admin/components/donut-card/donut-card.component.ts
index c331fa8..9bf8aa8 100644
--- a/src/app/admin/components/donut-card/donut-card.component.ts
+++ b/src/app/admin/components/donut-card/donut-card.component.ts
@@ -22,15 +22,9 @@ import {Donut} from "../../models/donut.model";
         </p>
         <p class="donut-card-price">
           {{ donut.price / 100 | currency }}
-          {{ donut.price / 100 | currency: 'USD': 'code' }}
-          {{ donut.price / 100 | currency: 'EUR': 'symbol' }}
         </p>
       </div>
     </div>
-<!--    dit is de CurrencyPipe, een pipe '|' + 'currency:'  // | currency: 'USD': 'symbol' is de default
-output: $1.29 USD1.29 €1.29
--->
-
   `,
   styles: [
     `
diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index dd62bc2..1207e6e 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -6,9 +6,11 @@ import { Donut } from "../../models/donut.model";
   selector: 'donut-list',
   template: `
       <div>
-        <div> <donut-card [donut]="donuts[0]"></donut-card> </div>
-        <div> <donut-card [donut]="donuts[1]"></donut-card> </div>
-        <div> <donut-card [donut]="donuts[2]"></donut-card> </div>
+        <div *ngIf="donuts.length">
+        <donut-card [donut]="donuts[0]"></donut-card>
+        <donut-card [donut]="donuts[1]"></donut-card>
+        <donut-card [donut]="donuts[2]"></donut-card>
+        </div>
       </div>
   `,
   styles: [
@@ -20,28 +22,28 @@ export class DonutListComponent implements OnInit {
 
   ngOnInit(): void {
     this.donuts = [
-      {
-        id: 'xy12yr',
-        name: 'Just Chocolate',
-        icon: 'just-chocolate',
-        price: 119,
-        description: 'For the pure chocoholic.',
-      },
-      {
-        id: 'zy19yr',
-        name: 'Glazed Fudge',
-        icon: 'glazed-fudge',
-        price: 129,
-        promo: true,
-        description: 'Sticky perfection.',
-      },
-      {
-        id: 'qy19ya',
-        name: 'Caramel Swirl',
-        icon: 'caramel-swirl',
-        price: 129,
-        description: 'Chocolate drizzled with caramel',
-      }
+      // {
+      //   id: 'xy12yr',
+      //   name: 'Just Chocolate',
+      //   icon: 'just-chocolate',
+      //   price: 119,
+      //   description: 'For the pure chocoholic.',
+      // },
+      // {
+      //   id: 'zy19yr',
+      //   name: 'Glazed Fudge',
+      //   icon: 'glazed-fudge',
+      //   price: 129,
+      //   promo: true,
+      //   description: 'Sticky perfection.',
+      // },
+      // {
+      //   id: 'qy19ya',
+      //   name: 'Caramel Swirl',
+      //   icon: 'caramel-swirl',
+      //   price: 129,
+      //   description: 'Chocolate drizzled with caramel',
+      // }
     ]
   }
 }

From e78b14f3d8959648959d24fb4c13a20993fdbfdd Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Sun, 29 Oct 2023 18:42:02 +0100
Subject: [PATCH 16/66] <ng-container> Use the NgIf, Else and Then Syntax

---
 .../donut-list/donut-list.component.ts         | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index 1207e6e..62845fa 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -5,13 +5,19 @@ import { Donut } from "../../models/donut.model";
 @Component({
   selector: 'donut-list',
   template: `
-      <div>
-        <div *ngIf="donuts.length">
-        <donut-card [donut]="donuts[0]"></donut-card>
-        <donut-card [donut]="donuts[1]"></donut-card>
-        <donut-card [donut]="donuts[2]"></donut-card>
-        </div>
+      <div id="krko">
+          <ng-container *ngIf="donuts.length; then cards; else nothing">
+          </ng-container>
       </div>
+
+      <ng-template #cards>
+          <donut-card [donut]="donuts[0]"></donut-card>
+          <donut-card [donut]="donuts[1]"></donut-card>
+          <donut-card [donut]="donuts[2]"></donut-card>
+      </ng-template>
+      <ng-template #nothing>
+          <p>No Donust here..</p>
+      </ng-template>
   `,
   styles: [
   ]

From 9562c7b5dc4bb18a64d93c4fc040c680d11c4809 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Mon, 30 Oct 2023 22:21:16 +0100
Subject: [PATCH 17/66] NgIf Syntax with <ng-template> vs <ng-container>

---
 .../donut-list/donut-list.component.ts        | 83 +++++++++++--------
 1 file changed, 49 insertions(+), 34 deletions(-)

diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index 62845fa..ac1be1a 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -5,19 +5,34 @@ import { Donut } from "../../models/donut.model";
 @Component({
   selector: 'donut-list',
   template: `
-      <div id="krko">
-          <ng-container *ngIf="donuts.length; then cards; else nothing">
-          </ng-container>
-      </div>
+        // ng-container vs ng-template:
+        // Een ng-container wordt altijd gerendered
+        // terwijl een ng-template pas gerenderd wordt op basis van een voorwaarde
+        // Volgende zijn gelijk
+        <div>
+            <ng-container *ngIf="donuts.length; else nothing">
+                <donut-card [donut]="donuts[0]"></donut-card>
+                <donut-card [donut]="donuts[1]"></donut-card>
+                <donut-card [donut]="donuts[2]"></donut-card>
+            </ng-container>
 
-      <ng-template #cards>
-          <donut-card [donut]="donuts[0]"></donut-card>
-          <donut-card [donut]="donuts[1]"></donut-card>
-          <donut-card [donut]="donuts[2]"></donut-card>
-      </ng-template>
-      <ng-template #nothing>
-          <p>No Donust here..</p>
-      </ng-template>
+            <ng-template [ngIf]="donuts.length" [ngIfElse]="nothing">
+                <donut-card [donut]="donuts[0]"></donut-card>
+                <donut-card [donut]="donuts[1]"></donut-card>
+                <donut-card [donut]="donuts[2]"></donut-card>
+            </ng-template>
+
+          // Volgende wordt niet gerenderd
+            <ng-template>
+                <donut-card [donut]="donuts[0]"></donut-card>
+                <donut-card [donut]="donuts[1]"></donut-card>
+                <donut-card [donut]="donuts[2]"></donut-card>
+            </ng-template>
+
+            <ng-template #nothing>
+                <p>No Donust here..</p>
+            </ng-template>
+        </div>
   `,
   styles: [
   ]
@@ -28,28 +43,28 @@ export class DonutListComponent implements OnInit {
 
   ngOnInit(): void {
     this.donuts = [
-      // {
-      //   id: 'xy12yr',
-      //   name: 'Just Chocolate',
-      //   icon: 'just-chocolate',
-      //   price: 119,
-      //   description: 'For the pure chocoholic.',
-      // },
-      // {
-      //   id: 'zy19yr',
-      //   name: 'Glazed Fudge',
-      //   icon: 'glazed-fudge',
-      //   price: 129,
-      //   promo: true,
-      //   description: 'Sticky perfection.',
-      // },
-      // {
-      //   id: 'qy19ya',
-      //   name: 'Caramel Swirl',
-      //   icon: 'caramel-swirl',
-      //   price: 129,
-      //   description: 'Chocolate drizzled with caramel',
-      // }
+      {
+        id: 'xy12yr',
+        name: 'Just Chocolate',
+        icon: 'just-chocolate',
+        price: 119,
+        description: 'For the pure chocoholic.',
+      },
+      {
+        id: 'zy19yr',
+        name: 'Glazed Fudge',
+        icon: 'glazed-fudge',
+        price: 129,
+        promo: true,
+        description: 'Sticky perfection.',
+      },
+      {
+        id: 'qy19ya',
+        name: 'Caramel Swirl',
+        icon: 'caramel-swirl',
+        price: 129,
+        description: 'Chocolate drizzled with caramel',
+      }
     ]
   }
 }

From 739e4d33ae9fd244a3f21d68c17efbe16273556a Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Mon, 30 Oct 2023 22:29:17 +0100
Subject: [PATCH 18/66] NgFor and Iterating Collections

---
 .../donut-list/donut-list.component.ts        | 38 ++++++-------------
 1 file changed, 11 insertions(+), 27 deletions(-)

diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index ac1be1a..08f23c3 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -5,34 +5,18 @@ import { Donut } from "../../models/donut.model";
 @Component({
   selector: 'donut-list',
   template: `
-        // ng-container vs ng-template:
-        // Een ng-container wordt altijd gerendered
-        // terwijl een ng-template pas gerenderd wordt op basis van een voorwaarde
-        // Volgende zijn gelijk
-        <div>
-            <ng-container *ngIf="donuts.length; else nothing">
-                <donut-card [donut]="donuts[0]"></donut-card>
-                <donut-card [donut]="donuts[1]"></donut-card>
-                <donut-card [donut]="donuts[2]"></donut-card>
-            </ng-container>
+      <div>
+          <ng-container *ngIf="donuts.length; else nothing">
+              <donut-card
+                      *ngFor="let donut of donuts"
+                      [donut]="donut">
+              </donut-card>
+          </ng-container>
 
-            <ng-template [ngIf]="donuts.length" [ngIfElse]="nothing">
-                <donut-card [donut]="donuts[0]"></donut-card>
-                <donut-card [donut]="donuts[1]"></donut-card>
-                <donut-card [donut]="donuts[2]"></donut-card>
-            </ng-template>
-
-          // Volgende wordt niet gerenderd
-            <ng-template>
-                <donut-card [donut]="donuts[0]"></donut-card>
-                <donut-card [donut]="donuts[1]"></donut-card>
-                <donut-card [donut]="donuts[2]"></donut-card>
-            </ng-template>
-
-            <ng-template #nothing>
-                <p>No Donust here..</p>
-            </ng-template>
-        </div>
+          <ng-template #nothing>
+              <p>No Donust here..</p>
+          </ng-template>
+      </div>
   `,
   styles: [
   ]

From 1ef48c581112e138f58aa8985bc5073ac33436a3 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Mon, 30 Oct 2023 22:41:47 +0100
Subject: [PATCH 19/66] Improve NgFor Performance with TrackBy

---
 .../admin/containers/donut-list/donut-list.component.ts    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index 08f23c3..5c9d255 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -8,7 +8,7 @@ import { Donut } from "../../models/donut.model";
       <div>
           <ng-container *ngIf="donuts.length; else nothing">
               <donut-card
-                      *ngFor="let donut of donuts"
+                      *ngFor="let donut of donuts; trackBy: trackById"
                       [donut]="donut">
               </donut-card>
           </ng-container>
@@ -51,4 +51,9 @@ export class DonutListComponent implements OnInit {
       }
     ]
   }
+
+  trackById(index: number, value: Donut) {
+    return value.id;
+
+  }
 }

From b249923aecc87427c37cb9b702e11e3758c9d178 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Sun, 5 Nov 2023 17:49:20 +0100
Subject: [PATCH 20/66] Access NgFor Index, Odd and Even Variables

---
 .../donut-list/donut-list.component.ts         | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index 5c9d255..1d54a2c 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -8,9 +8,25 @@ import { Donut } from "../../models/donut.model";
       <div>
           <ng-container *ngIf="donuts.length; else nothing">
               <donut-card
-                      *ngFor="let donut of donuts; trackBy: trackById"
+                      *ngFor="let donut of donuts; trackBy: trackById;"
                       [donut]="donut">
               </donut-card>
+
+              <div *ngFor="
+                let donut of donuts;
+                trackBy: trackById;
+                index as i;
+                odd as o;
+                even as e;
+              "
+                   [style.color]="e ? 'red' : 'blue'"
+              >
+                  {{ i + 1 }}
+                  {{ o }}
+                  {{ e }}
+              </div>
+
+
           </ng-container>
 
           <ng-template #nothing>

From da4b909ce92c9a690208aa6c81656f4668d1a29a Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Sun, 5 Nov 2023 17:51:26 +0100
Subject: [PATCH 21/66] undo Access NgFor Index, Odd and Even Variables

---
 .../containers/donut-list/donut-list.component.ts | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index 1d54a2c..399096f 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -12,21 +12,6 @@ import { Donut } from "../../models/donut.model";
                       [donut]="donut">
               </donut-card>
 
-              <div *ngFor="
-                let donut of donuts;
-                trackBy: trackById;
-                index as i;
-                odd as o;
-                even as e;
-              "
-                   [style.color]="e ? 'red' : 'blue'"
-              >
-                  {{ i + 1 }}
-                  {{ o }}
-                  {{ e }}
-              </div>
-
-
           </ng-container>
 
           <ng-template #nothing>

From c6d7a5830ffae8e9f37d87988428ac3e4df05dc6 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Sun, 5 Nov 2023 18:02:51 +0100
Subject: [PATCH 22/66] Advanced NgFor Syntax with <ng-template>

---
 src/app/admin/containers/donut-list/donut-list.component.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index 399096f..efc10c7 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -11,7 +11,11 @@ import { Donut } from "../../models/donut.model";
                       *ngFor="let donut of donuts; trackBy: trackById;"
                       [donut]="donut">
               </donut-card>
-
+            // Bovenste *ngIf (astrix staat voor template, angular zet dit achterliggend om naar:
+              <ng-template ngFor [ngForOf]="donuts" let-donut let-i="index">
+                  <donut-card [donut]="donut"></donut-card>
+                {{ i }}
+              </ng-template>
           </ng-container>
 
           <ng-template #nothing>

From 45a197793f588157c97966f04df129fe0fb64a44 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Sun, 5 Nov 2023 18:34:50 +0100
Subject: [PATCH 23/66] Use NgSwitch for Case Rendering

---
 .../donut-card/donut-card.component.ts        | 16 ++++++++++++++
 .../donut-list/donut-list.component.ts        | 22 ++++++++++++++-----
 src/app/admin/models/donut.model.ts           |  2 +-
 3 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/app/admin/components/donut-card/donut-card.component.ts b/src/app/admin/components/donut-card/donut-card.component.ts
index 9bf8aa8..5df6cd0 100644
--- a/src/app/admin/components/donut-card/donut-card.component.ts
+++ b/src/app/admin/components/donut-card/donut-card.component.ts
@@ -19,6 +19,14 @@ import {Donut} from "../../models/donut.model";
       <div>
         <p class="donut-card-name">
           {{ donut.name }}
+            <ng-container [ngSwitch]="donut.promo">
+                <span *ngSwitchCase=" 'new' " class="donut-card-label"
+                style="color: red; border-color: red">NEW</span>
+                <span *ngSwitchCase=" 'limited' " class="donut-card-label">LIMITED</span>
+                <span *ngSwitchDefault class="donut-card-label">
+                  Nothing special...
+                </span>
+            </ng-container>
         </p>
         <p class="donut-card-price">
           {{ donut.price / 100 | currency }}
@@ -42,6 +50,14 @@ import {Donut} from "../../models/donut.model";
         &-name {
           font-size: 16px;
         }
+        &-label {
+          border: 1px solid #c14583;
+          border-radius: 4px;
+          padding: 0 4px;
+          margin-left: 5px;
+          font-size: 12px;
+          color: #c14583;
+        }
         &-price {
           font-size: 14px;
           color: #c14583;
diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index efc10c7..40f71d2 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -11,11 +11,6 @@ import { Donut } from "../../models/donut.model";
                       *ngFor="let donut of donuts; trackBy: trackById;"
                       [donut]="donut">
               </donut-card>
-            // Bovenste *ngIf (astrix staat voor template, angular zet dit achterliggend om naar:
-              <ng-template ngFor [ngForOf]="donuts" let-donut let-i="index">
-                  <donut-card [donut]="donut"></donut-card>
-                {{ i }}
-              </ng-template>
           </ng-container>
 
           <ng-template #nothing>
@@ -37,6 +32,7 @@ export class DonutListComponent implements OnInit {
         name: 'Just Chocolate',
         icon: 'just-chocolate',
         price: 119,
+        promo: 'limited',
         description: 'For the pure chocoholic.',
       },
       {
@@ -44,7 +40,7 @@ export class DonutListComponent implements OnInit {
         name: 'Glazed Fudge',
         icon: 'glazed-fudge',
         price: 129,
-        promo: true,
+        promo: 'new',
         description: 'Sticky perfection.',
       },
       {
@@ -53,6 +49,20 @@ export class DonutListComponent implements OnInit {
         icon: 'caramel-swirl',
         price: 129,
         description: 'Chocolate drizzled with caramel',
+      },
+      {
+        id: '2dfe5',
+        name: 'Sour Supreme',
+        icon: 'sour-supreme',
+        price: 139,
+        description: 'For the sour advocate.',
+      },
+      {
+        id: 'a6rfg',
+        name: 'Zesty Lemon',
+        icon: 'zesty-lemon',
+        price: 129,
+        description: 'Delicious luscious lemon.',
       }
     ]
   }
diff --git a/src/app/admin/models/donut.model.ts b/src/app/admin/models/donut.model.ts
index 1544e55..4f2d975 100644
--- a/src/app/admin/models/donut.model.ts
+++ b/src/app/admin/models/donut.model.ts
@@ -3,6 +3,6 @@ export interface Donut {
   name: string;
   icon: string;
   price: number;
-  promo?: boolean;
+  promo?: 'new' | 'limited';
   description: string;
 }

From c8733e2bc4edb0e5a523ce5f894694cfbd71b1ae Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Sun, 5 Nov 2023 18:46:15 +0100
Subject: [PATCH 24/66] Advanced NgSwitch Syntax with <ng-template>

---
 .../admin/components/donut-card/donut-card.component.ts  | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/app/admin/components/donut-card/donut-card.component.ts b/src/app/admin/components/donut-card/donut-card.component.ts
index 5df6cd0..97e7c7f 100644
--- a/src/app/admin/components/donut-card/donut-card.component.ts
+++ b/src/app/admin/components/donut-card/donut-card.component.ts
@@ -20,11 +20,10 @@ import {Donut} from "../../models/donut.model";
         <p class="donut-card-name">
           {{ donut.name }}
             <ng-container [ngSwitch]="donut.promo">
-                <span *ngSwitchCase=" 'new' " class="donut-card-label"
-                style="color: red; border-color: red">NEW</span>
-                <span *ngSwitchCase=" 'limited' " class="donut-card-label">LIMITED</span>
-                <span *ngSwitchDefault class="donut-card-label">
-                  Nothing special...
+                <span class="donut-card-label">
+                    <ng-template [ngSwitchCase]="'new'"> NEW </ng-template>
+                    <ng-template [ngSwitchCase]="'limited'"> LIMITED </ng-template>
+                    <ng-template ngSwitchDefault> Nothing special... </ng-template>
                 </span>
             </ng-container>
         </p>

From d91e66571d79172dcdc4bc72cb0be71f5753e442 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Mon, 18 Dec 2023 11:52:55 +0100
Subject: [PATCH 25/66] Create a Form Container and Dumb Component

---
 src/app/admin/admin.module.ts                     | 14 ++++++++++----
 .../components/donut-form/donut-form.component.ts | 15 +++++++++++++++
 .../donut-single/donut-single.component.ts        | 15 +++++++++++++++
 src/app/app.component.ts                          |  2 +-
 4 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 src/app/admin/components/donut-form/donut-form.component.ts
 create mode 100644 src/app/admin/containers/donut-single/donut-single.component.ts

diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index 4250f7b..db046c3 100644
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -1,17 +1,23 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { DonutListComponent } from './containers/donut-list/donut-list.component';
-import { DonutCardComponent } from './components/donut-card/donut-card.component';
 
+// containers
+import { DonutListComponent } from './containers/donut-list/donut-list.component';
+import { DonutSingleComponent } from './containers/donut-single/donut-single.component';
 
+// components
+import { DonutCardComponent } from './components/donut-card/donut-card.component';
+import { DonutFormComponent } from './components/donut-form/donut-form.component';
 
 @NgModule({
   declarations: [
     DonutListComponent,
-    DonutCardComponent
+    DonutSingleComponent,
+    DonutCardComponent,
+    DonutFormComponent,
   ],
   exports: [
-    DonutListComponent
+    DonutListComponent, DonutSingleComponent
   ],
   imports: [
     CommonModule
diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
new file mode 100644
index 0000000..3185409
--- /dev/null
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-donut-form',
+  template: `
+    <p>
+      donut-form works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class DonutFormComponent {
+
+}
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
new file mode 100644
index 0000000..11b6bad
--- /dev/null
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'donut-single',
+  template: `
+    <p>
+      donut-single works!
+    </p>
+  `,
+  styles: [
+  ]
+})
+export class DonutSingleComponent {
+
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 692f735..4d557b1 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -8,7 +8,7 @@ import * as events from "events";
       <header class="header">
         <img src="/assets/img/logo.svg" alt="Ultimate Donuts" class="logo">
       </header>
-      <donut-list></donut-list>
+      <donut-single></donut-single>
     </div> `,
   styles: [
     `

From 8f07f3b00897becaab7dc9eab2f689079a095b78 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Mon, 18 Dec 2023 15:22:45 +0100
Subject: [PATCH 26/66] <input> Binding with ngModel

---
 src/app/admin/admin.module.ts                 |  5 ++--
 .../donut-form/donut-form.component.ts        | 23 +++++++++++++------
 src/app/app.component.ts                      |  2 +-
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index db046c3..b9148ec 100644
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import {FormsModule} from "@angular/forms";
 
 // containers
 import { DonutListComponent } from './containers/donut-list/donut-list.component';
@@ -17,10 +18,10 @@ import { DonutFormComponent } from './components/donut-form/donut-form.component
     DonutFormComponent,
   ],
   exports: [
-    DonutListComponent, DonutSingleComponent
+    DonutListComponent, DonutSingleComponent, DonutFormComponent
   ],
   imports: [
-    CommonModule
+    CommonModule, FormsModule
   ]
 })
 export class AdminModule { }
diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index 3185409..a956af1 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -1,15 +1,24 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
-  selector: 'app-donut-form',
+  selector: 'donut-form',
   template: `
-    <p>
-      donut-form works!
-    </p>
+    <form class="donut-form" #form="ngForm">
+      <label>
+        <span>Name</span>
+        <input type="text" name="name" class="input" ngModel/>
+        <span>Price</span>
+        <input type="number" name="price" class="input" ngModel/>
+      </label>
+     <pre> {{ form.value | json}} </pre>
+    </form>
   `,
   styles: [
   ]
 })
-export class DonutFormComponent {
-
+export class DonutFormComponent implements OnInit {
+  constructor() {
+  }
+  ngOnInit(): void {
+  }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4d557b1..e9153dd 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -8,7 +8,7 @@ import * as events from "events";
       <header class="header">
         <img src="/assets/img/logo.svg" alt="Ultimate Donuts" class="logo">
       </header>
-      <donut-single></donut-single>
+      <donut-form></donut-form>
     </div> `,
   styles: [
     `

From 7418226a41f904a68a873094d2dbc0e39e96483c Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Mon, 18 Dec 2023 15:49:36 +0100
Subject: [PATCH 27/66] Radio Button Binding with NgModel

---
 .../donut-form/donut-form.component.ts        | 42 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index a956af1..49f0bae 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -7,13 +7,53 @@ import {Component, OnInit} from '@angular/core';
       <label>
         <span>Name</span>
         <input type="text" name="name" class="input" ngModel/>
+      </label>
+
+      <label>
         <span>Price</span>
         <input type="number" name="price" class="input" ngModel/>
       </label>
-     <pre> {{ form.value | json}} </pre>
+
+      <div class="donut-form-radios">
+        <p class="donut-form-radios-label">Promo:</p>
+        <label>
+<!--          [value] >> property binding. Met undefined kan je de promo weg laten in de json  -->
+          <input type="radio" name="promo" [value]="undefined" ngModel/>
+          <span>None</span>
+        </label>
+        <label>
+          <input type="radio" name="promo" value="new" ngModel/>
+          <span>New</span>
+        </label>
+        <label>
+          <input type="radio" name="promo" value="limited" ngModel/>
+          <span>Limited</span>
+        </label>
+      </div>
+
+     <pre> {{ form.value | json }} </pre>
     </form>
   `,
   styles: [
+    `
+      .donut-form {
+      &-radios {
+        display: flex;
+        align-content: center;
+        &-label {
+          margin-right: 10px;
+        }
+        label {
+          display: flex;
+          align-items: center;
+          span {
+            color: #444;
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  `
   ]
 })
 export class DonutFormComponent implements OnInit {

From 63d2709a90bd2749bd961eacd0355220eed9cad1 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Mon, 18 Dec 2023 16:08:23 +0100
Subject: [PATCH 28/66] <select> and <option> Rendering and Binding

---
 .../donut-form/donut-form.component.ts        | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index 49f0bae..4b1a063 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -9,6 +9,19 @@ import {Component, OnInit} from '@angular/core';
         <input type="text" name="name" class="input" ngModel/>
       </label>
 
+      <label>
+        <span>Icon</span>
+        <select
+          name="icon"
+          class="input input--select"
+          ngModel
+        >
+          <option *ngFor=" let icon of icons" [ngValue]="icon">
+            {{icon}}
+          </option>
+        </select>
+      </label>
+
       <label>
         <span>Price</span>
         <input type="number" name="price" class="input" ngModel/>
@@ -57,6 +70,17 @@ import {Component, OnInit} from '@angular/core';
   ]
 })
 export class DonutFormComponent implements OnInit {
+
+  icons: string[] = [
+    'caramel-swirl',
+    'glazed-fudge',
+    'just-chocolate',
+    'sour-supreme',
+    'strawberry-glaze',
+    'vanilla-sundae',
+    'zesty-lemon',
+  ]
+
   constructor() {
   }
   ngOnInit(): void {

From 4185810038703170ec61ac5efe50d9c85709f662 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Mon, 18 Dec 2023 16:13:52 +0100
Subject: [PATCH 29/66] Textarea Binding with NgModel

---
 .../admin/components/donut-form/donut-form.component.ts  | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index 4b1a063..dc6e8cc 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -44,6 +44,15 @@ import {Component, OnInit} from '@angular/core';
         </label>
       </div>
 
+      <label>
+        <span>Description</span>
+        <textarea
+          name="description"
+          class="input input--textarea"
+          ngModel
+        ></textarea>
+      </label>
+
      <pre> {{ form.value | json }} </pre>
     </form>
   `,

From 45ebc0f7ba191688726363110a37a166d0762a79 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Mon, 18 Dec 2023 16:27:31 +0100
Subject: [PATCH 30/66] Add Validation Constraints and Form Status

---
 .../donut-form/donut-form.component.ts        | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index dc6e8cc..bd04228 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -6,16 +6,12 @@ import {Component, OnInit} from '@angular/core';
     <form class="donut-form" #form="ngForm">
       <label>
         <span>Name</span>
-        <input type="text" name="name" class="input" ngModel/>
+        <input type="text" name="name" class="input" required ngModel/>
       </label>
 
       <label>
         <span>Icon</span>
-        <select
-          name="icon"
-          class="input input--select"
-          ngModel
-        >
+        <select name="icon" class="input input--select" required ngModel>
           <option *ngFor=" let icon of icons" [ngValue]="icon">
             {{icon}}
           </option>
@@ -24,22 +20,22 @@ import {Component, OnInit} from '@angular/core';
 
       <label>
         <span>Price</span>
-        <input type="number" name="price" class="input" ngModel/>
+        <input type="number" name="price" class="input" required ngModel/>
       </label>
 
       <div class="donut-form-radios">
         <p class="donut-form-radios-label">Promo:</p>
         <label>
 <!--          [value] >> property binding. Met undefined kan je de promo weg laten in de json  -->
-          <input type="radio" name="promo" [value]="undefined" ngModel/>
+          <input type="radio" name="promo" [value]="undefined" required ngModel/>
           <span>None</span>
         </label>
         <label>
-          <input type="radio" name="promo" value="new" ngModel/>
+          <input type="radio" name="promo" value="new" required ngModel/>
           <span>New</span>
         </label>
         <label>
-          <input type="radio" name="promo" value="limited" ngModel/>
+          <input type="radio" name="promo" value="limited" required ngModel/>
           <span>Limited</span>
         </label>
       </div>
@@ -49,11 +45,12 @@ import {Component, OnInit} from '@angular/core';
         <textarea
           name="description"
           class="input input--textarea"
+          required
           ngModel
         ></textarea>
       </label>
 
-     <pre> {{ form.value | json }} </pre>
+     <pre> {{ form.form.status | json }} </pre>
     </form>
   `,
   styles: [

From d8edf3d7510d91ac0d646c22f5ac7ce480161cf8 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Mon, 18 Dec 2023 16:43:11 +0100
Subject: [PATCH 31/66] NgModel Template Refs and Validation States

---
 .../admin/components/donut-form/donut-form.component.ts   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index bd04228..2c7aa2b 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -6,7 +6,13 @@ import {Component, OnInit} from '@angular/core';
     <form class="donut-form" #form="ngForm">
       <label>
         <span>Name</span>
-        <input type="text" name="name" class="input" required ngModel/>
+        <input type="text" name="name" class="input" required ngModel #name="ngModel"/>
+        <p>{{ name.valid }}</p>
+        <p>{{ name.invalid }}</p>
+        <p>{{ name.touched }}</p>
+        <p>{{ name.untouched }}</p>
+        <p>{{ name.pristine }}</p>
+        <p>{{ name.dirty }}</p>
       </label>
 
       <label>

From 4fe06dbd766cbd99f0388955fca885a7461ac45d Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Mon, 18 Dec 2023 17:10:27 +0100
Subject: [PATCH 32/66] Show Error Messages on Validation Change

---
 .../donut-form/donut-form.component.ts        | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index 2c7aa2b..46853c8 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -6,13 +6,19 @@ import {Component, OnInit} from '@angular/core';
     <form class="donut-form" #form="ngForm">
       <label>
         <span>Name</span>
-        <input type="text" name="name" class="input" required ngModel #name="ngModel"/>
-        <p>{{ name.valid }}</p>
-        <p>{{ name.invalid }}</p>
-        <p>{{ name.touched }}</p>
-        <p>{{ name.untouched }}</p>
-        <p>{{ name.pristine }}</p>
-        <p>{{ name.dirty }}</p>
+        <input
+          type="text"
+          name="name"
+          class="input"
+          required
+          minlength="5"
+          ngModel
+          #name="ngModel"
+        />
+        <ng-container *ngIf="name.invalid && name.touched">
+         <div class="donut-form-error" *ngIf="name.errors?.minlength">Minimum length of a name is 5!.</div>
+         <div class="donut-form-error" *ngIf="name.errors?.required">Name is required.</div>
+       </ng-container>
       </label>
 
       <label>
@@ -77,6 +83,10 @@ import {Component, OnInit} from '@angular/core';
           }
         }
       }
+        &-error {
+          font-size: 12px;
+          color: #e66262;
+        }
     }
   `
   ]

From a4e503fc9262b633210f3d8f6d9310def35fffa3 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Tue, 19 Dec 2023 12:09:14 +0100
Subject: [PATCH 33/66] Form Submit with NgSubmit

---
 .../components/donut-form/donut-form.component.ts    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index 46853c8..d4d9751 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -1,9 +1,10 @@
 import {Component, OnInit} from '@angular/core';
+import {NgForm} from "@angular/forms";
 
 @Component({
   selector: 'donut-form',
   template: `
-    <form class="donut-form" #form="ngForm">
+    <form class="donut-form" (ngSubmit)="handleSubmit(form)" #form="ngForm">
       <label>
         <span>Name</span>
         <input
@@ -62,7 +63,8 @@ import {Component, OnInit} from '@angular/core';
         ></textarea>
       </label>
 
-     <pre> {{ form.form.status | json }} </pre>
+      <button type="submit" class="btn btn--green">Create</button>
+     <pre> {{ form.value | json }} </pre>
     </form>
   `,
   styles: [
@@ -91,7 +93,7 @@ import {Component, OnInit} from '@angular/core';
   `
   ]
 })
-export class DonutFormComponent implements OnInit {
+export class DonutFormComponent {
 
   icons: string[] = [
     'caramel-swirl',
@@ -105,6 +107,8 @@ export class DonutFormComponent implements OnInit {
 
   constructor() {
   }
-  ngOnInit(): void {
+
+  handleSubmit(form: NgForm) {
+          console.log(form.value)
   }
 }

From 58c82a1b49d4568fd529c962afd1e20b00f6e0d5 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Tue, 19 Dec 2023 12:17:45 +0100
Subject: [PATCH 34/66] Disable Submit and Safety Check Submissions

---
 src/app/admin/components/donut-form/donut-form.component.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index d4d9751..4566ee7 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -63,7 +63,7 @@ import {NgForm} from "@angular/forms";
         ></textarea>
       </label>
 
-      <button type="submit" class="btn btn--green">Create</button>
+      <button type="submit" class="btn btn--green" [disabled]="form.invalid">Create</button>
      <pre> {{ form.value | json }} </pre>
     </form>
   `,
@@ -109,6 +109,8 @@ export class DonutFormComponent {
   }
 
   handleSubmit(form: NgForm) {
-          console.log(form.value)
+    if (form.valid) {
+      console.log(form.value)
+    }
   }
 }

From 5f850f41b3d0c95986ff6b61cc8c8813509e4c8a Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Tue, 19 Dec 2023 13:03:14 +0100
Subject: [PATCH 35/66] Trigger Validation Messages On Submit

---
 .../donut-form/donut-form.component.ts        | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index 4566ee7..24f9721 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -24,31 +24,37 @@ import {NgForm} from "@angular/forms";
 
       <label>
         <span>Icon</span>
-        <select name="icon" class="input input--select" required ngModel>
+        <select name="icon" class="input input--select" required ngModel #icon="ngModel">
           <option *ngFor=" let icon of icons" [ngValue]="icon">
             {{icon}}
           </option>
         </select>
+        <ng-container *ngIf="icon.invalid && icon.touched">
+          <div class="donut-form-error" *ngIf="icon.errors?.required">Icon is required.</div>
+        </ng-container>
       </label>
 
       <label>
         <span>Price</span>
-        <input type="number" name="price" class="input" required ngModel/>
+        <input type="number" name="price" class="input" required ngModel #price="ngModel"/>
+        <ng-container *ngIf="price.invalid && price.touched">
+          <div class="donut-form-error" *ngIf="price.errors?.required">Price is required.</div>
+        </ng-container>
       </label>
 
       <div class="donut-form-radios">
         <p class="donut-form-radios-label">Promo:</p>
         <label>
 <!--          [value] >> property binding. Met undefined kan je de promo weg laten in de json  -->
-          <input type="radio" name="promo" [value]="undefined" required ngModel/>
+          <input type="radio" name="promo" [value]="undefined" ngModel/>
           <span>None</span>
         </label>
         <label>
-          <input type="radio" name="promo" value="new" required ngModel/>
+          <input type="radio" name="promo" value="new" ngModel/>
           <span>New</span>
         </label>
         <label>
-          <input type="radio" name="promo" value="limited" required ngModel/>
+          <input type="radio" name="promo" value="limited" ngModel/>
           <span>Limited</span>
         </label>
       </div>
@@ -60,10 +66,14 @@ import {NgForm} from "@angular/forms";
           class="input input--textarea"
           required
           ngModel
+          #description="ngModel"
         ></textarea>
+        <ng-container *ngIf="description.invalid && description.touched">
+          <div class="donut-form-error" *ngIf="description.errors?.required">Description is required.</div>
+        </ng-container>
       </label>
 
-      <button type="submit" class="btn btn--green" [disabled]="form.invalid">Create</button>
+      <button type="submit" class="btn btn--green" >Create</button>
      <pre> {{ form.value | json }} </pre>
     </form>
   `,
@@ -111,6 +121,8 @@ export class DonutFormComponent {
   handleSubmit(form: NgForm) {
     if (form.valid) {
       console.log(form.value)
+    }else {
+      form.form.markAllAsTouched()
     }
   }
 }

From b63fe0e2db8092252e6269c2cf6917932f3994ce Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Tue, 19 Dec 2023 13:09:46 +0100
Subject: [PATCH 36/66] Control NgModel Writes with ngModelOptions

---
 src/app/admin/components/donut-form/donut-form.component.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index 24f9721..1a9a541 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -14,6 +14,7 @@ import {NgForm} from "@angular/forms";
           required
           minlength="5"
           ngModel
+          [ngModelOptions]="{ updateOn: 'blur' }"
           #name="ngModel"
         />
         <ng-container *ngIf="name.invalid && name.touched">

From 3ac177e009efdebd7e60bbda3fd7ccfebf569c3c Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Tue, 19 Dec 2023 13:17:16 +0100
Subject: [PATCH 37/66] Trigger a Form State and Validation Reset

---
 src/app/admin/components/donut-form/donut-form.component.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index 1a9a541..a0dbd43 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -74,8 +74,10 @@ import {NgForm} from "@angular/forms";
         </ng-container>
       </label>
 
-      <button type="submit" class="btn btn--green" >Create</button>
-     <pre> {{ form.value | json }} </pre>
+      <button type="submit" class="btn btn--green">Create</button>
+      <button type="button" class="btn btn--grey" (click)="form.resetForm()">Reset Form</button>
+
+      <pre> {{ form.value | json }} </pre>
     </form>
   `,
   styles: [

From 0a041f080d9640619f084253cf82e49b12c00766 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Tue, 19 Dec 2023 13:23:47 +0100
Subject: [PATCH 38/66] Show Visual Feedback on Form Submission

---
 .../admin/components/donut-form/donut-form.component.ts  | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index a0dbd43..e89fd65 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -77,6 +77,10 @@ import {NgForm} from "@angular/forms";
       <button type="submit" class="btn btn--green">Create</button>
       <button type="button" class="btn btn--grey" (click)="form.resetForm()">Reset Form</button>
 
+      <div class="donut-form-working" *ngIf="form.valid && form.submitted">
+        Working...
+      </div>
+
       <pre> {{ form.value | json }} </pre>
     </form>
   `,
@@ -98,6 +102,11 @@ import {NgForm} from "@angular/forms";
           }
         }
       }
+        &-working {
+          font-size: 12px;
+          font-style: italic;
+          margin: 10px 0;
+        }
         &-error {
           font-size: 12px;
           color: #e66262;

From 09a039e730617c0855054da0dbcbf82f3e662789 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Tue, 19 Dec 2023 13:46:07 +0100
Subject: [PATCH 39/66] Emit Form Payload to Smart Container via @Ou

---
 .../donut-form/donut-form.component.ts           | 10 ++++++----
 .../donut-single/donut-single.component.ts       | 16 +++++++++++-----
 src/app/app.component.ts                         |  2 +-
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index e89fd65..8e08ddb 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -1,5 +1,6 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, EventEmitter, Output} from '@angular/core';
 import {NgForm} from "@angular/forms";
+import {Donut} from "../../models/donut.model";
 
 @Component({
   selector: 'donut-form',
@@ -117,6 +118,8 @@ import {NgForm} from "@angular/forms";
 })
 export class DonutFormComponent {
 
+  @Output() create = new EventEmitter<Donut>()
+
   icons: string[] = [
     'caramel-swirl',
     'glazed-fudge',
@@ -127,12 +130,11 @@ export class DonutFormComponent {
     'zesty-lemon',
   ]
 
-  constructor() {
-  }
+  constructor() {}
 
   handleSubmit(form: NgForm) {
     if (form.valid) {
-      console.log(form.value)
+      this.create.emit(form.value)
     }else {
       form.form.markAllAsTouched()
     }
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index 11b6bad..7f09d70 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -1,15 +1,21 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {Donut} from "../../models/donut.model";
 
 @Component({
   selector: 'donut-single',
   template: `
-    <p>
-      donut-single works!
-    </p>
+   <div>
+     <donut-form (create)="onCreate($event)" ></donut-form>
+   </div>
   `,
   styles: [
   ]
 })
-export class DonutSingleComponent {
+export class DonutSingleComponent implements  OnInit {
+  constructor() {}
+  ngOnInit(): void {}
 
+  onCreate(donut: Donut) {
+    console.log('onCreate', donut)
+  }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e9153dd..4d557b1 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -8,7 +8,7 @@ import * as events from "events";
       <header class="header">
         <img src="/assets/img/logo.svg" alt="Ultimate Donuts" class="logo">
       </header>
-      <donut-form></donut-form>
+      <donut-single></donut-single>
     </div> `,
   styles: [
     `

From 6cd5fe4cf3cf3c406f9562638a09c7fef8879e69 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Tue, 19 Dec 2023 14:01:34 +0100
Subject: [PATCH 40/66] One-Way Data Binding to NgModel

---
 .../donut-form/donut-form.component.ts         | 18 ++++++++++--------
 .../donut-single/donut-single.component.ts     | 16 ++++++++++++++--
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index 8e08ddb..d0a1971 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Output} from '@angular/core';
+import {Component, Input, Output, EventEmitter} from '@angular/core';
 import {NgForm} from "@angular/forms";
 import {Donut} from "../../models/donut.model";
 
@@ -14,7 +14,7 @@ import {Donut} from "../../models/donut.model";
           class="input"
           required
           minlength="5"
-          ngModel
+          [ngModel]="donut.name"
           [ngModelOptions]="{ updateOn: 'blur' }"
           #name="ngModel"
         />
@@ -26,7 +26,7 @@ import {Donut} from "../../models/donut.model";
 
       <label>
         <span>Icon</span>
-        <select name="icon" class="input input--select" required ngModel #icon="ngModel">
+        <select name="icon" class="input input--select" required  [ngModel]="donut.icon" #icon="ngModel">
           <option *ngFor=" let icon of icons" [ngValue]="icon">
             {{icon}}
           </option>
@@ -38,7 +38,7 @@ import {Donut} from "../../models/donut.model";
 
       <label>
         <span>Price</span>
-        <input type="number" name="price" class="input" required ngModel #price="ngModel"/>
+        <input type="number" name="price" class="input" required [ngModel]="donut.price" #price="ngModel"/>
         <ng-container *ngIf="price.invalid && price.touched">
           <div class="donut-form-error" *ngIf="price.errors?.required">Price is required.</div>
         </ng-container>
@@ -48,15 +48,15 @@ import {Donut} from "../../models/donut.model";
         <p class="donut-form-radios-label">Promo:</p>
         <label>
 <!--          [value] >> property binding. Met undefined kan je de promo weg laten in de json  -->
-          <input type="radio" name="promo" [value]="undefined" ngModel/>
+          <input type="radio" name="promo" [value]="undefined" [ngModel]="donut.promo"/>
           <span>None</span>
         </label>
         <label>
-          <input type="radio" name="promo" value="new" ngModel/>
+          <input type="radio" name="promo" value="new" [ngModel]="donut.promo"/>
           <span>New</span>
         </label>
         <label>
-          <input type="radio" name="promo" value="limited" ngModel/>
+          <input type="radio" name="promo" value="limited" [ngModel]="donut.promo"/>
           <span>Limited</span>
         </label>
       </div>
@@ -67,7 +67,7 @@ import {Donut} from "../../models/donut.model";
           name="description"
           class="input input--textarea"
           required
-          ngModel
+          [ngModel]="donut.description"
           #description="ngModel"
         ></textarea>
         <ng-container *ngIf="description.invalid && description.touched">
@@ -82,6 +82,7 @@ import {Donut} from "../../models/donut.model";
         Working...
       </div>
 
+      <pre> {{ donut | json }} </pre>
       <pre> {{ form.value | json }} </pre>
     </form>
   `,
@@ -118,6 +119,7 @@ import {Donut} from "../../models/donut.model";
 })
 export class DonutFormComponent {
 
+  @Input() donut!: Donut;
   @Output() create = new EventEmitter<Donut>()
 
   icons: string[] = [
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index 7f09d70..cb3a501 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -5,15 +5,27 @@ import {Donut} from "../../models/donut.model";
   selector: 'donut-single',
   template: `
    <div>
-     <donut-form (create)="onCreate($event)" ></donut-form>
+     <donut-form [donut]="donut" (create)="onCreate($event)" ></donut-form>
    </div>
   `,
   styles: [
   ]
 })
 export class DonutSingleComponent implements  OnInit {
+
+  donut!: Donut;
+
   constructor() {}
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    this.donut = {
+      id: 'xy12yr',
+      name: 'Just Chocolate',
+      icon: 'just-chocolate',
+      price: 119,
+      promo: 'limited',
+      description: 'For the pure chocoholic.',
+    };
+  }
 
   onCreate(donut: Donut) {
     console.log('onCreate', donut)

From 63a31c4aaf9d7fdafe0452805ce2026583679fed Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Wed, 20 Dec 2023 15:28:39 +0100
Subject: [PATCH 41/66] Create an @Injectable Service

---
 src/app/admin/services/donut.service.spec.ts | 16 ++++++++++++++++
 src/app/admin/services/donut.service.ts      |  9 +++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 src/app/admin/services/donut.service.spec.ts
 create mode 100644 src/app/admin/services/donut.service.ts

diff --git a/src/app/admin/services/donut.service.spec.ts b/src/app/admin/services/donut.service.spec.ts
new file mode 100644
index 0000000..3e1e36f
--- /dev/null
+++ b/src/app/admin/services/donut.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DonutService } from './donut.service';
+
+describe('DonutService', () => {
+  let service: DonutService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DonutService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
new file mode 100644
index 0000000..c76599f
--- /dev/null
+++ b/src/app/admin/services/donut.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DonutService {
+
+  constructor() { }
+}

From 5555e3d4f9d4f4a6245b7ab8220b6a60e8f9056d Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Wed, 20 Dec 2023 15:45:38 +0100
Subject: [PATCH 42/66] Share State in Components via Services

---
 .../donut-list/donut-list.component.ts        | 42 ++-----------------
 .../donut-single/donut-single.component.ts    | 14 +++----
 src/app/admin/models/donut.model.ts           |  2 +-
 src/app/admin/services/donut.service.ts       | 41 +++++++++++++++++-
 4 files changed, 49 insertions(+), 50 deletions(-)

diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index 40f71d2..e2a7079 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 
 import { Donut } from "../../models/donut.model";
+import {DonutService} from "../../services/donut.service";
 
 @Component({
   selector: 'donut-list',
@@ -25,46 +26,9 @@ export class DonutListComponent implements OnInit {
   // Declaratie hier maar vullen in ngOnInit()
   donuts!: Donut[];
 
+  constructor(private donutService: DonutService) {}
   ngOnInit(): void {
-    this.donuts = [
-      {
-        id: 'xy12yr',
-        name: 'Just Chocolate',
-        icon: 'just-chocolate',
-        price: 119,
-        promo: 'limited',
-        description: 'For the pure chocoholic.',
-      },
-      {
-        id: 'zy19yr',
-        name: 'Glazed Fudge',
-        icon: 'glazed-fudge',
-        price: 129,
-        promo: 'new',
-        description: 'Sticky perfection.',
-      },
-      {
-        id: 'qy19ya',
-        name: 'Caramel Swirl',
-        icon: 'caramel-swirl',
-        price: 129,
-        description: 'Chocolate drizzled with caramel',
-      },
-      {
-        id: '2dfe5',
-        name: 'Sour Supreme',
-        icon: 'sour-supreme',
-        price: 139,
-        description: 'For the sour advocate.',
-      },
-      {
-        id: 'a6rfg',
-        name: 'Zesty Lemon',
-        icon: 'zesty-lemon',
-        price: 129,
-        description: 'Delicious luscious lemon.',
-      }
-    ]
+    this.donuts = this.donutService.donuts;
   }
 
   trackById(index: number, value: Donut) {
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index cb3a501..54bef78 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -1,5 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {Donut} from "../../models/donut.model";
+import {DonutService} from "../../services/donut.service";
 
 @Component({
   selector: 'donut-single',
@@ -15,16 +16,11 @@ export class DonutSingleComponent implements  OnInit {
 
   donut!: Donut;
 
-  constructor() {}
+  constructor(private donutService: DonutService) {}
   ngOnInit(): void {
-    this.donut = {
-      id: 'xy12yr',
-      name: 'Just Chocolate',
-      icon: 'just-chocolate',
-      price: 119,
-      promo: 'limited',
-      description: 'For the pure chocoholic.',
-    };
+    let id = 'xy12yr';
+    this.donut = this.donutService.donuts.find((donut:Donut) => donut.id === id)
+    || {name: '', icon: '', price: 0, description: ''};
   }
 
   onCreate(donut: Donut) {
diff --git a/src/app/admin/models/donut.model.ts b/src/app/admin/models/donut.model.ts
index 4f2d975..bce3e22 100644
--- a/src/app/admin/models/donut.model.ts
+++ b/src/app/admin/models/donut.model.ts
@@ -1,5 +1,5 @@
 export interface Donut {
-  id: string;
+  id?: string;
   name: string;
   icon: string;
   price: number;
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index c76599f..3dcaead 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -1,9 +1,48 @@
 import { Injectable } from '@angular/core';
+import {Donut} from "../models/donut.model";
 
 @Injectable({
   providedIn: 'root'
 })
 export class DonutService {
-
+  donuts: Donut[] =  [
+    {
+      id: 'xy12yr',
+      name: 'Just Chocolate',
+      icon: 'just-chocolate',
+      price: 119,
+      promo: 'limited',
+      description: 'For the pure chocoholic.',
+    },
+    {
+      id: 'zy19yr',
+      name: 'Glazed Fudge',
+      icon: 'glazed-fudge',
+      price: 129,
+      promo: 'new',
+      description: 'Sticky perfection.',
+    },
+    {
+      id: 'qy19ya',
+      name: 'Caramel Swirl',
+      icon: 'caramel-swirl',
+      price: 129,
+      description: 'Chocolate drizzled with caramel',
+    },
+    {
+      id: '2dfe5',
+      name: 'Sour Supreme',
+      icon: 'sour-supreme',
+      price: 139,
+      description: 'For the sour advocate.',
+    },
+    {
+      id: 'a6rfg',
+      name: 'Zesty Lemon',
+      icon: 'zesty-lemon',
+      price: 129,
+      description: 'Delicious luscious lemon.',
+    }
+  ];
   constructor() { }
 }

From f1b5b473159dfc8d5d09435cdf033ad9998bfeaf Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Wed, 20 Dec 2023 16:02:12 +0100
Subject: [PATCH 43/66] Class Methods as State Selectors

---
 .../containers/donut-list/donut-list.component.ts  |  2 +-
 .../donut-single/donut-single.component.ts         |  4 +---
 src/app/admin/services/donut.service.ts            | 14 +++++++++++++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index e2a7079..c6a8308 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -28,7 +28,7 @@ export class DonutListComponent implements OnInit {
 
   constructor(private donutService: DonutService) {}
   ngOnInit(): void {
-    this.donuts = this.donutService.donuts;
+    this.donuts = this.donutService.read();
   }
 
   trackById(index: number, value: Donut) {
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index 54bef78..afb2e6e 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -18,9 +18,7 @@ export class DonutSingleComponent implements  OnInit {
 
   constructor(private donutService: DonutService) {}
   ngOnInit(): void {
-    let id = 'xy12yr';
-    this.donut = this.donutService.donuts.find((donut:Donut) => donut.id === id)
-    || {name: '', icon: '', price: 0, description: ''};
+    this.donut = this.donutService.readOne('qy19ya');
   }
 
   onCreate(donut: Donut) {
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index 3dcaead..1ad1bc9 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -5,7 +5,7 @@ import {Donut} from "../models/donut.model";
   providedIn: 'root'
 })
 export class DonutService {
-  donuts: Donut[] =  [
+  private donuts: Donut[] =  [
     {
       id: 'xy12yr',
       name: 'Just Chocolate',
@@ -45,4 +45,16 @@ export class DonutService {
     }
   ];
   constructor() { }
+
+  read() {
+    return this.donuts;
+  }
+
+  readOne(id: string) {
+    const donut = this.read().find((donut: Donut) => donut.id === id);
+    if (donut) {
+      return donut;
+    }
+    return {name: '', icon: '', price: 0, description: ''};
+  }
 }

From 8d5a3ebfbd552f779f79b878d27bc63682590868 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Wed, 20 Dec 2023 16:14:31 +0100
Subject: [PATCH 44/66] Immutable State Creation

---
 src/app/admin/components/donut-form/donut-form.component.ts  | 3 ---
 .../admin/containers/donut-single/donut-single.component.ts  | 4 ++--
 src/app/admin/services/donut.service.ts                      | 5 +++++
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index d0a1971..4c5d247 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -81,9 +81,6 @@ import {Donut} from "../../models/donut.model";
       <div class="donut-form-working" *ngIf="form.valid && form.submitted">
         Working...
       </div>
-
-      <pre> {{ donut | json }} </pre>
-      <pre> {{ form.value | json }} </pre>
     </form>
   `,
   styles: [
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index afb2e6e..9c17563 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -18,10 +18,10 @@ export class DonutSingleComponent implements  OnInit {
 
   constructor(private donutService: DonutService) {}
   ngOnInit(): void {
-    this.donut = this.donutService.readOne('qy19ya');
+    this.donut = this.donutService.readOne('xxx');
   }
 
   onCreate(donut: Donut) {
-    console.log('onCreate', donut)
+   this.donutService.create(donut);
   }
 }
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index 1ad1bc9..941538a 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -57,4 +57,9 @@ export class DonutService {
     }
     return {name: '', icon: '', price: 0, description: ''};
   }
+
+  create(payload: Donut) {
+    this.donuts = [...this.donuts, payload]
+    console.log(this.donuts);
+  }
 }

From c2c9b3e34747872b348f9904b8ace3c30a9492a0 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Wed, 20 Dec 2023 19:08:55 +0100
Subject: [PATCH 45/66] Immutable State Updates

---
 .../donut-form/donut-form.component.ts        | 67 ++++++++++++-------
 .../donut-single/donut-single.component.ts    | 23 ++++---
 src/app/admin/services/donut.service.ts       | 18 ++++-
 3 files changed, 71 insertions(+), 37 deletions(-)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index 4c5d247..ed8a62e 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -1,11 +1,11 @@
-import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {NgForm} from "@angular/forms";
 import {Donut} from "../../models/donut.model";
 
 @Component({
   selector: 'donut-form',
   template: `
-    <form class="donut-form" (ngSubmit)="handleSubmit(form)" #form="ngForm">
+    <form class="donut-form" #form="ngForm">
       <label>
         <span>Name</span>
         <input
@@ -19,14 +19,14 @@ import {Donut} from "../../models/donut.model";
           #name="ngModel"
         />
         <ng-container *ngIf="name.invalid && name.touched">
-         <div class="donut-form-error" *ngIf="name.errors?.minlength">Minimum length of a name is 5!.</div>
-         <div class="donut-form-error" *ngIf="name.errors?.required">Name is required.</div>
-       </ng-container>
+          <div class="donut-form-error" *ngIf="name.errors?.minlength">Minimum length of a name is 5!.</div>
+          <div class="donut-form-error" *ngIf="name.errors?.required">Name is required.</div>
+        </ng-container>
       </label>
 
       <label>
         <span>Icon</span>
-        <select name="icon" class="input input--select" required  [ngModel]="donut.icon" #icon="ngModel">
+        <select name="icon" class="input input--select" required [ngModel]="donut.icon" #icon="ngModel">
           <option *ngFor=" let icon of icons" [ngValue]="icon">
             {{icon}}
           </option>
@@ -47,7 +47,7 @@ import {Donut} from "../../models/donut.model";
       <div class="donut-form-radios">
         <p class="donut-form-radios-label">Promo:</p>
         <label>
-<!--          [value] >> property binding. Met undefined kan je de promo weg laten in de json  -->
+          <!--          [value] >> property binding. Met undefined kan je de promo weg laten in de json  -->
           <input type="radio" name="promo" [value]="undefined" [ngModel]="donut.promo"/>
           <span>None</span>
         </label>
@@ -75,7 +75,9 @@ import {Donut} from "../../models/donut.model";
         </ng-container>
       </label>
 
-      <button type="submit" class="btn btn--green">Create</button>
+      <button type="button" class="btn btn--green" (click)="handleCreate(form)">Create</button>
+      <button type="button" class="btn btn--green" [disabled]="form.untouched" (click)="handleUpdate(form)">Update
+      </button>
       <button type="button" class="btn btn--grey" (click)="form.resetForm()">Reset Form</button>
 
       <div class="donut-form-working" *ngIf="form.valid && form.submitted">
@@ -86,38 +88,44 @@ import {Donut} from "../../models/donut.model";
   styles: [
     `
       .donut-form {
-      &-radios {
-        display: flex;
-        align-content: center;
-        &-label {
-          margin-right: 10px;
-        }
-        label {
+        &-radios {
           display: flex;
-          align-items: center;
-          span {
-            color: #444;
-            margin-bottom: 0;
+          align-content: center;
+
+          &-label {
+            margin-right: 10px;
+          }
+
+          label {
+            display: flex;
+            align-items: center;
+
+            span {
+              color: #444;
+              margin-bottom: 0;
+            }
           }
         }
-      }
+
         &-working {
           font-size: 12px;
           font-style: italic;
           margin: 10px 0;
         }
+
         &-error {
           font-size: 12px;
           color: #e66262;
         }
-    }
-  `
+      }
+    `
   ]
 })
 export class DonutFormComponent {
 
   @Input() donut!: Donut;
   @Output() create = new EventEmitter<Donut>()
+  @Output() update = new EventEmitter<Donut>()
 
   icons: string[] = [
     'caramel-swirl',
@@ -129,12 +137,21 @@ export class DonutFormComponent {
     'zesty-lemon',
   ]
 
-  constructor() {}
+  constructor() {
+  }
 
-  handleSubmit(form: NgForm) {
+  handleCreate(form: NgForm) {
     if (form.valid) {
       this.create.emit(form.value)
-    }else {
+    } else {
+      form.form.markAllAsTouched()
+    }
+  }
+
+  handleUpdate(form: NgForm) {
+    if (form.valid) {
+      this.update.emit({id: this.donut.id, ...form.value})
+    } else {
       form.form.markAllAsTouched()
     }
   }
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index 9c17563..596b65a 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -5,23 +5,28 @@ import {DonutService} from "../../services/donut.service";
 @Component({
   selector: 'donut-single',
   template: `
-   <div>
-     <donut-form [donut]="donut" (create)="onCreate($event)" ></donut-form>
-   </div>
+    <div>
+      <donut-form [donut]="donut" (create)="onCreate($event)" (update)="onUpdate($event)"></donut-form>
+    </div>
   `,
-  styles: [
-  ]
+  styles: []
 })
-export class DonutSingleComponent implements  OnInit {
+export class DonutSingleComponent implements OnInit {
 
   donut!: Donut;
 
-  constructor(private donutService: DonutService) {}
+  constructor(private donutService: DonutService) {
+  }
+
   ngOnInit(): void {
-    this.donut = this.donutService.readOne('xxx');
+    this.donut = this.donutService.readOne('2dfe5');
   }
 
   onCreate(donut: Donut) {
-   this.donutService.create(donut);
+    this.donutService.create(donut);
+  }
+
+  onUpdate(donut: Donut) {
+    this.donutService.update(donut);
   }
 }
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index 941538a..6a05b77 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -1,11 +1,11 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
 import {Donut} from "../models/donut.model";
 
 @Injectable({
   providedIn: 'root'
 })
 export class DonutService {
-  private donuts: Donut[] =  [
+  private donuts: Donut[] = [
     {
       id: 'xy12yr',
       name: 'Just Chocolate',
@@ -44,7 +44,9 @@ export class DonutService {
       description: 'Delicious luscious lemon.',
     }
   ];
-  constructor() { }
+
+  constructor() {
+  }
 
   read() {
     return this.donuts;
@@ -62,4 +64,14 @@ export class DonutService {
     this.donuts = [...this.donuts, payload]
     console.log(this.donuts);
   }
+
+  update(payload: Donut) {
+    this.donuts = this.donuts.map((donut: Donut) => {
+      if (donut.id === payload.id) {
+        return payload;
+      }
+      return donut;
+    })
+    console.log(this.donuts);
+  }
 }

From aed3951573146688c7f9ed462de77d59fb6a6705 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Wed, 20 Dec 2023 21:15:07 +0100
Subject: [PATCH 46/66] Immutable State Deletions

---
 .../components/donut-form/donut-form.component.ts     |  8 ++++++++
 .../containers/donut-single/donut-single.component.ts | 11 ++++++++++-
 src/app/admin/services/donut.service.ts               |  5 +++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index ed8a62e..b94bb1d 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -78,6 +78,8 @@ import {Donut} from "../../models/donut.model";
       <button type="button" class="btn btn--green" (click)="handleCreate(form)">Create</button>
       <button type="button" class="btn btn--green" [disabled]="form.untouched" (click)="handleUpdate(form)">Update
       </button>
+      <button type="button" class="btn btn--green" (click)="handleDelete()">Delete
+      </button>
       <button type="button" class="btn btn--grey" (click)="form.resetForm()">Reset Form</button>
 
       <div class="donut-form-working" *ngIf="form.valid && form.submitted">
@@ -126,6 +128,7 @@ export class DonutFormComponent {
   @Input() donut!: Donut;
   @Output() create = new EventEmitter<Donut>()
   @Output() update = new EventEmitter<Donut>()
+  @Output() delete = new EventEmitter<Donut>()
 
   icons: string[] = [
     'caramel-swirl',
@@ -155,4 +158,9 @@ export class DonutFormComponent {
       form.form.markAllAsTouched()
     }
   }
+
+  handleDelete() {
+    if (confirm(`Really delete ${this.donut.name}?`))
+      this.delete.emit({...this.donut})
+  }
 }
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index 596b65a..5e0d4d6 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -6,7 +6,12 @@ import {DonutService} from "../../services/donut.service";
   selector: 'donut-single',
   template: `
     <div>
-      <donut-form [donut]="donut" (create)="onCreate($event)" (update)="onUpdate($event)"></donut-form>
+      <donut-form
+        [donut]="donut"
+        (create)="onCreate($event)"
+        (update)="onUpdate($event)"
+        (delete)="onDelete($event)"
+      ></donut-form>
     </div>
   `,
   styles: []
@@ -29,4 +34,8 @@ export class DonutSingleComponent implements OnInit {
   onUpdate(donut: Donut) {
     this.donutService.update(donut);
   }
+
+  onDelete(donut: Donut) {
+    this.donutService.delete(donut);
+  }
 }
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index 6a05b77..35e2d46 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -74,4 +74,9 @@ export class DonutService {
     })
     console.log(this.donuts);
   }
+
+  delete(payload: Donut) {
+    this.donuts = this.donuts.filter((donut: Donut) => donut.id !== payload.id);
+    console.log(this.donuts);
+  }
 }

From e96c1b6d4a0f1bbb83773124674ef603a50d6e34 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 21 Dec 2023 09:32:31 +0100
Subject: [PATCH 47/66] Configure and Proxy a Local HTTP Server

---
 db.json                                 | 42 ++++++++++++++++++++++++-
 src/app/admin/services/donut.service.ts | 40 +----------------------
 src/app/app.component.ts                | 13 ++++----
 3 files changed, 49 insertions(+), 46 deletions(-)

diff --git a/db.json b/db.json
index 0967ef4..8b1b628 100644
--- a/db.json
+++ b/db.json
@@ -1 +1,41 @@
-{}
+{
+  "donuts": [
+    {
+      "id": "xy12yr",
+      "name": "Just Chocolate",
+      "icon": "just-chocolate",
+      "price": 119,
+      "promo": "limited",
+      "description": "For the pure chocoholic."
+    },
+    {
+      "id": "zy19yr",
+      "name": "Glazed Fudge",
+      "icon": "glazed-fudge",
+      "price": 129,
+      "promo": "new",
+      "description": "Sticky perfection."
+    },
+    {
+      "id": "qy19ya",
+      "name": "Caramel Swirl",
+      "icon": "caramel-swirl",
+      "price": 129,
+      "description": "Chocolate drizzled with caramel"
+    },
+    {
+      "id": "2dfe5",
+      "name": "Sour Supreme",
+      "icon": "sour-supreme",
+      "price": 139,
+      "description": "For the sour advocate."
+    },
+    {
+      "id": "a6rfg",
+      "name": "Zesty Lemon",
+      "icon": "zesty-lemon",
+      "price": 129,
+      "description": "Delicious luscious lemon."
+    }
+  ]
+}
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index 35e2d46..1f06857 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -5,45 +5,7 @@ import {Donut} from "../models/donut.model";
   providedIn: 'root'
 })
 export class DonutService {
-  private donuts: Donut[] = [
-    {
-      id: 'xy12yr',
-      name: 'Just Chocolate',
-      icon: 'just-chocolate',
-      price: 119,
-      promo: 'limited',
-      description: 'For the pure chocoholic.',
-    },
-    {
-      id: 'zy19yr',
-      name: 'Glazed Fudge',
-      icon: 'glazed-fudge',
-      price: 129,
-      promo: 'new',
-      description: 'Sticky perfection.',
-    },
-    {
-      id: 'qy19ya',
-      name: 'Caramel Swirl',
-      icon: 'caramel-swirl',
-      price: 129,
-      description: 'Chocolate drizzled with caramel',
-    },
-    {
-      id: '2dfe5',
-      name: 'Sour Supreme',
-      icon: 'sour-supreme',
-      price: 139,
-      description: 'For the sour advocate.',
-    },
-    {
-      id: 'a6rfg',
-      name: 'Zesty Lemon',
-      icon: 'zesty-lemon',
-      price: 129,
-      description: 'Delicious luscious lemon.',
-    }
-  ];
+  private donuts: Donut[] = []
 
   constructor() {
   }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4d557b1..45f14fc 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,4 @@
-import { Component, OnInit } from '@angular/core';
-import * as events from "events";
+import {Component, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -8,7 +7,7 @@ import * as events from "events";
       <header class="header">
         <img src="/assets/img/logo.svg" alt="Ultimate Donuts" class="logo">
       </header>
-      <donut-single></donut-single>
+      <donut-list></donut-list>
     </div> `,
   styles: [
     `
@@ -21,11 +20,13 @@ import * as events from "events";
         padding: 25px;
         border: 4px solid #ef9fc7;
       }
+
       .header {
         display: flex;
         justify-content: center;
         margin-bottom: 25px;
       }
+
       .logo {
         width: 100px;
         height: 88px;
@@ -38,7 +39,7 @@ export class AppComponent implements OnInit {
   newMessage!: string;
 
   ngOnInit() {
-   this.message = 'Value on init';
+    this.message = 'Value on init';
   }
 
   handleClick(event: MouseEvent) {
@@ -46,8 +47,8 @@ export class AppComponent implements OnInit {
   }
 
   handleInput(event: Event) {
-    const { value } = event.target as HTMLInputElement;
+    const {value} = event.target as HTMLInputElement;
     console.log(value);
     this.newMessage = value;
-   }
+  }
 }

From c5badc4ecf1172942f445785fd2f503b742ae788 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 21 Dec 2023 09:50:03 +0100
Subject: [PATCH 48/66] Read Data with HttpClient GET

---
 src/app/admin/admin.module.ts                 | 18 +++++++++--------
 .../donut-list/donut-list.component.ts        |  4 +++-
 .../donut-single/donut-single.component.ts    |  2 +-
 src/app/admin/services/donut.service.ts       | 20 ++++++++++---------
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index b9148ec..b641445 100644
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -1,14 +1,15 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
 import {FormsModule} from "@angular/forms";
+import {HttpClientModule} from "@angular/common/http";
 
 // containers
-import { DonutListComponent } from './containers/donut-list/donut-list.component';
-import { DonutSingleComponent } from './containers/donut-single/donut-single.component';
+import {DonutListComponent} from './containers/donut-list/donut-list.component';
+import {DonutSingleComponent} from './containers/donut-single/donut-single.component';
 
 // components
-import { DonutCardComponent } from './components/donut-card/donut-card.component';
-import { DonutFormComponent } from './components/donut-form/donut-form.component';
+import {DonutCardComponent} from './components/donut-card/donut-card.component';
+import {DonutFormComponent} from './components/donut-form/donut-form.component';
 
 @NgModule({
   declarations: [
@@ -21,9 +22,10 @@ import { DonutFormComponent } from './components/donut-form/donut-form.component
     DonutListComponent, DonutSingleComponent, DonutFormComponent
   ],
   imports: [
-    CommonModule, FormsModule
+    CommonModule, FormsModule, HttpClientModule
   ]
 })
-export class AdminModule { }
+export class AdminModule {
+}
 
 
diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index c6a8308..313a463 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -28,7 +28,9 @@ export class DonutListComponent implements OnInit {
 
   constructor(private donutService: DonutService) {}
   ngOnInit(): void {
-    this.donuts = this.donutService.read();
+    this.donutService
+      .read()
+      .subscribe((donuts: Donut[]) => (this.donuts = donuts));
   }
 
   trackById(index: number, value: Donut) {
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index 5e0d4d6..7c8ce17 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -24,7 +24,7 @@ export class DonutSingleComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.donut = this.donutService.readOne('2dfe5');
+    // this.donut = this.donutService.readOne('2dfe5');
   }
 
   onCreate(donut: Donut) {
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index 1f06857..732d31f 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -1,5 +1,6 @@
 import {Injectable} from '@angular/core';
 import {Donut} from "../models/donut.model";
+import {HttpClient} from "@angular/common/http";
 
 @Injectable({
   providedIn: 'root'
@@ -7,20 +8,21 @@ import {Donut} from "../models/donut.model";
 export class DonutService {
   private donuts: Donut[] = []
 
-  constructor() {
+  constructor(private http: HttpClient) {
   }
 
   read() {
-    return this.donuts;
+    return this.http.get<Donut[]>(`/api/donuts`)
+    // return this.donuts;
   }
 
-  readOne(id: string) {
-    const donut = this.read().find((donut: Donut) => donut.id === id);
-    if (donut) {
-      return donut;
-    }
-    return {name: '', icon: '', price: 0, description: ''};
-  }
+  // readOne(id: string) {
+  //   const donut = this.read().find((donut: Donut) => donut.id === id);
+  //   if (donut) {
+  //     return donut;
+  //   }
+  //   return {name: '', icon: '', price: 0, description: ''};
+  // }
 
   create(payload: Donut) {
     this.donuts = [...this.donuts, payload]

From 7b53d3c4b51bfe0d0839cce2047517700a818c83 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 21 Dec 2023 10:22:05 +0100
Subject: [PATCH 49/66] Store State with Observable Pipes

---
 .../containers/donut-list/donut-list.component.ts |  2 +-
 src/app/admin/services/donut.service.ts           | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index 313a463..c9ed225 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -7,7 +7,7 @@ import {DonutService} from "../../services/donut.service";
   selector: 'donut-list',
   template: `
       <div>
-          <ng-container *ngIf="donuts.length; else nothing">
+          <ng-container *ngIf="donuts?.length; else nothing">
               <donut-card
                       *ngFor="let donut of donuts; trackBy: trackById;"
                       [donut]="donut">
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index 732d31f..f0c24af 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -1,7 +1,10 @@
 import {Injectable} from '@angular/core';
-import {Donut} from "../models/donut.model";
 import {HttpClient} from "@angular/common/http";
 
+import {tap, of} from "rxjs";
+
+import {Donut} from "../models/donut.model";
+
 @Injectable({
   providedIn: 'root'
 })
@@ -12,8 +15,14 @@ export class DonutService {
   }
 
   read() {
-    return this.http.get<Donut[]>(`/api/donuts`)
-    // return this.donuts;
+    if(this.donuts.length) {
+      return of(this.donuts);
+    }
+    return this.http.get<Donut[]>(`/api/donuts`).pipe(
+        tap((donuts) =>  {
+          this.donuts = donuts;
+        })
+      );
   }
 
   // readOne(id: string) {

From ae6dfd1ca2478ed68f00231a4fd424021c7d1575 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 21 Dec 2023 17:16:19 +0100
Subject: [PATCH 50/66] Branch off an Observable to Access State

---
 .../donut-form/donut-form.component.ts        |  4 +++-
 .../donut-single/donut-single.component.ts    |  4 +++-
 src/app/admin/services/donut.service.ts       | 20 +++++++++++--------
 src/app/app.component.ts                      |  2 +-
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index b94bb1d..1309fcb 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -5,7 +5,7 @@ import {Donut} from "../../models/donut.model";
 @Component({
   selector: 'donut-form',
   template: `
-    <form class="donut-form" #form="ngForm">
+    <form class="donut-form" #form="ngForm" *ngIf="donut else loading;">
       <label>
         <span>Name</span>
         <input
@@ -86,6 +86,8 @@ import {Donut} from "../../models/donut.model";
         Working...
       </div>
     </form>
+
+    <ng-template #loading>Loading...</ng-template>
   `,
   styles: [
     `
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index 7c8ce17..4994366 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -24,7 +24,9 @@ export class DonutSingleComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    // this.donut = this.donutService.readOne('2dfe5');
+    this.donutService
+      .readOne('2dfe5')
+      .subscribe((donut: Donut) => (this.donut = donut));
   }
 
   onCreate(donut: Donut) {
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index f0c24af..7b0d437 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
 
-import {tap, of} from "rxjs";
+import {tap, of, map} from "rxjs";
 
 import {Donut} from "../models/donut.model";
 
@@ -25,13 +25,17 @@ export class DonutService {
       );
   }
 
-  // readOne(id: string) {
-  //   const donut = this.read().find((donut: Donut) => donut.id === id);
-  //   if (donut) {
-  //     return donut;
-  //   }
-  //   return {name: '', icon: '', price: 0, description: ''};
-  // }
+  readOne(id: string) {
+    return this.read().pipe(
+      map((donuts) => {
+        const donut = donuts.find((donut: Donut) => donut.id === id);
+        if (donut) {
+          return donut;
+        }
+        return {name: '', icon: '', price: 0, description: ''};
+      })
+    );
+  }
 
   create(payload: Donut) {
     this.donuts = [...this.donuts, payload]
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 45f14fc..871d94e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -7,7 +7,7 @@ import {Component, OnInit} from '@angular/core';
       <header class="header">
         <img src="/assets/img/logo.svg" alt="Ultimate Donuts" class="logo">
       </header>
-      <donut-list></donut-list>
+      <donut-single></donut-single>
     </div> `,
   styles: [
     `

From f5db8cec09105031c2c02e8462ef21a0531788fa Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 21 Dec 2023 19:07:35 +0100
Subject: [PATCH 51/66] Create Data with HttpClient POST

---
 db.json                                                | 10 +++++++++-
 .../containers/donut-single/donut-single.component.ts  |  6 ++++--
 src/app/admin/services/donut.service.ts                |  7 +++++--
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/db.json b/db.json
index 8b1b628..b5c3e21 100644
--- a/db.json
+++ b/db.json
@@ -36,6 +36,14 @@
       "icon": "zesty-lemon",
       "price": 129,
       "description": "Delicious luscious lemon."
+    },
+    {
+      "name": "New Donut",
+      "icon": "strawberry-glaze",
+      "price": 229,
+      "promo": "limited",
+      "description": "Very expensive!",
+      "id": "7K__9fg"
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index 4994366..2e6a092 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -25,12 +25,14 @@ export class DonutSingleComponent implements OnInit {
 
   ngOnInit(): void {
     this.donutService
-      .readOne('2dfe5')
+      .readOne('xxx')
       .subscribe((donut: Donut) => (this.donut = donut));
   }
 
   onCreate(donut: Donut) {
-    this.donutService.create(donut);
+    this.donutService
+      .create(donut)
+      .subscribe(() => console.log('Created successfully!'));
   }
 
   onUpdate(donut: Donut) {
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index 7b0d437..ca99f19 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -38,8 +38,11 @@ export class DonutService {
   }
 
   create(payload: Donut) {
-    this.donuts = [...this.donuts, payload]
-    console.log(this.donuts);
+    return this.http.post<Donut>(`/api/donuts`, payload).pipe(
+      tap((donut) => {
+        this.donuts = [...this.donuts, donut]
+      })
+    )
   }
 
   update(payload: Donut) {

From 2787ccf2dbff5cf8b743a6db1b3632526fec323f Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Wed, 27 Dec 2023 16:59:26 +0100
Subject: [PATCH 52/66] Update Data with HttpClient PUT

---
 db.json                                          |  1 +
 .../donut-single/donut-single.component.ts       |  6 ++++--
 src/app/admin/services/donut.service.ts          | 16 +++++++++-------
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/db.json b/db.json
index b5c3e21..8ae1585 100644
--- a/db.json
+++ b/db.json
@@ -21,6 +21,7 @@
       "name": "Caramel Swirl",
       "icon": "caramel-swirl",
       "price": 129,
+      "promo": "new",
       "description": "Chocolate drizzled with caramel"
     },
     {
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index 2e6a092..28ea4ba 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -25,7 +25,7 @@ export class DonutSingleComponent implements OnInit {
 
   ngOnInit(): void {
     this.donutService
-      .readOne('xxx')
+      .readOne('qy19ya')
       .subscribe((donut: Donut) => (this.donut = donut));
   }
 
@@ -36,7 +36,9 @@ export class DonutSingleComponent implements OnInit {
   }
 
   onUpdate(donut: Donut) {
-    this.donutService.update(donut);
+    this.donutService
+      .update(donut)
+      .subscribe(() => console.log('Updated successfully!'));
   }
 
   onDelete(donut: Donut) {
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index ca99f19..b58d43a 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -46,13 +46,15 @@ export class DonutService {
   }
 
   update(payload: Donut) {
-    this.donuts = this.donuts.map((donut: Donut) => {
-      if (donut.id === payload.id) {
-        return payload;
-      }
-      return donut;
-    })
-    console.log(this.donuts);
+    return this.http.put<Donut>(`/api/donuts/${payload.id}`, payload)
+      .pipe(tap((donut) => {
+        this.donuts = this.donuts.map((item: Donut) => {
+          if (item.id === donut.id) {
+            return donut;
+          }
+          return item;
+        })
+      }));
   }
 
   delete(payload: Donut) {

From 289934f5b2ac2e6390057ca2703207746e486a56 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Wed, 27 Dec 2023 17:09:44 +0100
Subject: [PATCH 53/66] Delete Data with HttpClient DELETE

---
 db.json                                                   | 8 --------
 .../containers/donut-single/donut-single.component.ts     | 6 ++++--
 src/app/admin/services/donut.service.ts                   | 8 ++++++--
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/db.json b/db.json
index 8ae1585..9044770 100644
--- a/db.json
+++ b/db.json
@@ -37,14 +37,6 @@
       "icon": "zesty-lemon",
       "price": 129,
       "description": "Delicious luscious lemon."
-    },
-    {
-      "name": "New Donut",
-      "icon": "strawberry-glaze",
-      "price": 229,
-      "promo": "limited",
-      "description": "Very expensive!",
-      "id": "7K__9fg"
     }
   ]
 }
\ No newline at end of file
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index 28ea4ba..0d235de 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -25,7 +25,7 @@ export class DonutSingleComponent implements OnInit {
 
   ngOnInit(): void {
     this.donutService
-      .readOne('qy19ya')
+      .readOne('7K__9fg')
       .subscribe((donut: Donut) => (this.donut = donut));
   }
 
@@ -42,6 +42,8 @@ export class DonutSingleComponent implements OnInit {
   }
 
   onDelete(donut: Donut) {
-    this.donutService.delete(donut);
+    this.donutService
+      .delete(donut)
+      .subscribe(()=> console.log('Deleted successfully!'));
   }
 }
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index b58d43a..4fbfdba 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -58,7 +58,11 @@ export class DonutService {
   }
 
   delete(payload: Donut) {
-    this.donuts = this.donuts.filter((donut: Donut) => donut.id !== payload.id);
-    console.log(this.donuts);
+    return this.http.delete(`/api/donuts/${payload.id}`)
+      .pipe(
+        tap(() => {
+          this.donuts = this.donuts.filter((donut: Donut) => donut.id !== payload.id);
+        })
+      )
   }
 }

From 5de3beaad891a67d8627a7b789bf9e972b42b93f Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Wed, 27 Dec 2023 17:36:32 +0100
Subject: [PATCH 54/66] Error Handling with catchError() and throwError

---
 .../donut-single/donut-single.component.ts    |  7 +--
 src/app/admin/services/donut.service.ts       | 52 +++++++++++++------
 2 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index 0d235de..30fe19f 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -36,9 +36,10 @@ export class DonutSingleComponent implements OnInit {
   }
 
   onUpdate(donut: Donut) {
-    this.donutService
-      .update(donut)
-      .subscribe(() => console.log('Updated successfully!'));
+    this.donutService.update(donut).subscribe({
+      next: () => console.log('Updated successfully!'),
+      error: (err) => console.log('onUpdate error:', err),
+    });
   }
 
   onDelete(donut: Donut) {
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index 4fbfdba..aca9bc0 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
-import {HttpClient} from "@angular/common/http";
+import {HttpClient, HttpErrorResponse} from "@angular/common/http";
 
-import {tap, of, map} from "rxjs";
+import {tap, of, map, catchError, throwError} from "rxjs";
 
 import {Donut} from "../models/donut.model";
 
@@ -33,28 +33,34 @@ export class DonutService {
           return donut;
         }
         return {name: '', icon: '', price: 0, description: ''};
-      })
+      }),
+      catchError(this.handleError)
     );
   }
 
   create(payload: Donut) {
-    return this.http.post<Donut>(`/api/donuts`, payload).pipe(
-      tap((donut) => {
-        this.donuts = [...this.donuts, donut]
-      })
-    )
+    return this.http.post<Donut>(`/api/donuts`, payload)
+      .pipe(
+        tap((donut) => {
+          this.donuts = [...this.donuts, donut]
+        }),
+        catchError(this.handleError)
+      )
   }
 
   update(payload: Donut) {
     return this.http.put<Donut>(`/api/donuts/${payload.id}`, payload)
-      .pipe(tap((donut) => {
-        this.donuts = this.donuts.map((item: Donut) => {
-          if (item.id === donut.id) {
-            return donut;
-          }
-          return item;
-        })
-      }));
+      .pipe(
+        tap((donut) => {
+          this.donuts = this.donuts.map((item: Donut) => {
+            if (item.id === donut.id) {
+              return donut;
+            }
+            return item;
+          });
+        }),
+        catchError(this.handleError)
+      );
   }
 
   delete(payload: Donut) {
@@ -62,7 +68,19 @@ export class DonutService {
       .pipe(
         tap(() => {
           this.donuts = this.donuts.filter((donut: Donut) => donut.id !== payload.id);
-        })
+        }),
+        catchError(this.handleError)
       )
   }
+
+  private handleError(err: HttpErrorResponse) {
+    if (err.error instanceof ErrorEvent) {
+      // client-side
+      console.warn('Client', err.message);
+    } else {
+      // server-side
+      console.warn('Server', err.status);
+    }
+    return throwError(() => new Error(err.message));
+  }
 }

From db9165eefbc9f9d0dfa245dcd76d30fb03ed19e2 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Wed, 27 Dec 2023 17:54:01 +0100
Subject: [PATCH 55/66] Retry Failed Requests with retry()

---
 .../donut-single/donut-single.component.ts         |  2 +-
 src/app/admin/services/donut.service.ts            | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index 30fe19f..852be67 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -25,7 +25,7 @@ export class DonutSingleComponent implements OnInit {
 
   ngOnInit(): void {
     this.donutService
-      .readOne('7K__9fg')
+      .readOne('xxxx')
       .subscribe((donut: Donut) => (this.donut = donut));
   }
 
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index aca9bc0..a2aec8e 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {HttpClient, HttpErrorResponse} from "@angular/common/http";
 
-import {tap, of, map, catchError, throwError} from "rxjs";
+import {tap, of, map, catchError, throwError, retry} from "rxjs";
 
 import {Donut} from "../models/donut.model";
 
@@ -15,14 +15,16 @@ export class DonutService {
   }
 
   read() {
-    if(this.donuts.length) {
+    if (this.donuts.length) {
       return of(this.donuts);
     }
     return this.http.get<Donut[]>(`/api/donuts`).pipe(
-        tap((donuts) =>  {
-          this.donuts = donuts;
-        })
-      );
+      tap((donuts) => {
+        this.donuts = donuts;
+      }),
+      retry(2),
+      catchError(this.handleError)
+    );
   }
 
   readOne(id: string) {

From fecd885570eadca49495c02e1cdfd2f6494d7544 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Wed, 27 Dec 2023 18:05:44 +0100
Subject: [PATCH 56/66] Use retryWhen() to Delay Retries

---
 src/app/admin/services/donut.service.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index a2aec8e..e063b7d 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {HttpClient, HttpErrorResponse} from "@angular/common/http";
 
-import {tap, of, map, catchError, throwError, retry} from "rxjs";
+import {tap, of, map, catchError, throwError, retryWhen, delay, take} from "rxjs";
 
 import {Donut} from "../models/donut.model";
 
@@ -22,7 +22,7 @@ export class DonutService {
       tap((donuts) => {
         this.donuts = donuts;
       }),
-      retry(2),
+      retryWhen((errors) => errors.pipe(delay(5000), take(4))),
       catchError(this.handleError)
     );
   }

From eb8ae606e6b4b9f80ab44ec39e46a426be3d8a63 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Wed, 27 Dec 2023 18:23:02 +0100
Subject: [PATCH 57/66] Set HttpHeaders and RequestOptions

---
 src/app/admin/services/donut.service.ts | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index e063b7d..738d136 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {HttpClient, HttpErrorResponse} from "@angular/common/http";
+import {HttpClient, HttpErrorResponse, HttpHeaders} from "@angular/common/http";
 
 import {tap, of, map, catchError, throwError, retryWhen, delay, take} from "rxjs";
 
@@ -18,7 +18,18 @@ export class DonutService {
     if (this.donuts.length) {
       return of(this.donuts);
     }
-    return this.http.get<Donut[]>(`/api/donuts`).pipe(
+
+    let headers = new HttpHeaders({
+        'Content-Type': 'application/json',
+      });
+
+    headers = headers.append('Api-Token', '123abc');
+
+    const options = {
+      headers,
+    }
+
+    return this.http.get<Donut[]>(`/api/donuts`, options).pipe(
       tap((donuts) => {
         this.donuts = donuts;
       }),

From e2e56790dd6da7bcaee7c8b3fb5f1c4df14631b4 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 28 Dec 2023 12:05:23 +0100
Subject: [PATCH 58/66] Root Module Routes with forRoot()

---
 src/app/app.component.ts |  2 +-
 src/app/app.module.ts    | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 871d94e..91af124 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -7,7 +7,7 @@ import {Component, OnInit} from '@angular/core';
       <header class="header">
         <img src="/assets/img/logo.svg" alt="Ultimate Donuts" class="logo">
       </header>
-      <donut-single></donut-single>
+      <router-outlet></router-outlet>
     </div> `,
   styles: [
     `
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 527f123..c252112 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,12 +1,20 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import {RouterModule, Routes} from "@angular/router";
 
 import { AppComponent } from './app.component';
 import { AdminModule } from './admin/admin.module';
+import {DonutListComponent} from "./admin/containers/donut-list/donut-list.component";
+import {DonutSingleComponent} from "./admin/containers/donut-single/donut-single.component";
 
+// path: '' is http://localhost:4200/
+export const routes: Routes = [
+  { path: '', component: DonutListComponent },
+  { path: 'donut', component: DonutSingleComponent },
+];
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, AdminModule],
+  imports: [BrowserModule, RouterModule.forRoot(routes), AdminModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

From 1304551c8d52ad0fea8e3b2e7e623a3ec0495c27 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 28 Dec 2023 12:12:55 +0100
Subject: [PATCH 59/66] Create Nested Child Routes

---
 src/app/app.module.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c252112..013df4b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,8 +9,13 @@ import {DonutSingleComponent} from "./admin/containers/donut-single/donut-single
 
 // path: '' is http://localhost:4200/
 export const routes: Routes = [
-  { path: '', component: DonutListComponent },
-  { path: 'donut', component: DonutSingleComponent },
+  {
+    path: 'admin',
+    children: [
+      { path: 'donuts', component: DonutListComponent },
+      { path: 'donut', component: DonutSingleComponent },
+    ],
+  },
 ];
 @NgModule({
   declarations: [AppComponent],

From 1b986e7adfd412ad7b685af24f53b14bc58a9765 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 28 Dec 2023 12:21:48 +0100
Subject: [PATCH 60/66] Redirect Routes to New Paths

---
 src/app/app.module.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 013df4b..3d2d0fc 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -14,8 +14,18 @@ export const routes: Routes = [
     children: [
       { path: 'donuts', component: DonutListComponent },
       { path: 'donut', component: DonutSingleComponent },
+      // redirects http://localhost:4200/admin to http://localhost:4200/admin/donuts
+      // put always at the end
+      { path: '', pathMatch: 'full', redirectTo: 'donuts' },
     ],
   },
+  {
+    // redirects http://localhost:4200/ to http://localhost:4200/admin
+    // put always at the end
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'admin',
+  },
 ];
 @NgModule({
   declarations: [AppComponent],

From a7f92f797a3c2f9ae47ae305326dfcebd9737929 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 28 Dec 2023 12:28:50 +0100
Subject: [PATCH 61/66] Handle 404 Not Found Routes with Wildcards

---
 src/app/app.module.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3d2d0fc..c050bc8 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -26,6 +26,12 @@ export const routes: Routes = [
     pathMatch: 'full',
     redirectTo: 'admin',
   },
+  {
+    // Wild card selector redirects misspelled paths
+    // eg. http://localhost:4200/addddminnnn to http://localhost:4200/admin
+    path: '**',
+    redirectTo: 'admin',
+  },
 ];
 @NgModule({
   declarations: [AppComponent],

From a52e70c6395bec5cf34a33948f1fe49f2c32a9d9 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 28 Dec 2023 12:53:01 +0100
Subject: [PATCH 62/66] Lazy-Loading Feature Modules

---
 src/app/admin/admin.module.ts | 15 ++++++++++-----
 src/app/app.module.ts         | 11 +++--------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index b641445..3e36555 100644
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from "@angular/forms";
-import {HttpClientModule} from "@angular/common/http";
+import {RouterModule, Routes} from "@angular/router";
 
 // containers
 import {DonutListComponent} from './containers/donut-list/donut-list.component';
@@ -11,6 +11,14 @@ import {DonutSingleComponent} from './containers/donut-single/donut-single.compo
 import {DonutCardComponent} from './components/donut-card/donut-card.component';
 import {DonutFormComponent} from './components/donut-form/donut-form.component';
 
+export const routes: Routes =  [
+    { path: 'donuts', component: DonutListComponent },
+    { path: 'donut', component: DonutSingleComponent },
+    // redirects http://localhost:4200/admin to http://localhost:4200/admin/donuts
+    // put always at the end
+    { path: '', pathMatch: 'full', redirectTo: 'donuts' },
+  ];
+
 @NgModule({
   declarations: [
     DonutListComponent,
@@ -18,11 +26,8 @@ import {DonutFormComponent} from './components/donut-form/donut-form.component';
     DonutCardComponent,
     DonutFormComponent,
   ],
-  exports: [
-    DonutListComponent, DonutSingleComponent, DonutFormComponent
-  ],
   imports: [
-    CommonModule, FormsModule, HttpClientModule
+    CommonModule, FormsModule, RouterModule.forChild(routes)
   ]
 })
 export class AdminModule {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c050bc8..fb2d41c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import {RouterModule, Routes} from "@angular/router";
+import {HttpClientModule} from "@angular/common/http";
 
 import { AppComponent } from './app.component';
 import { AdminModule } from './admin/admin.module';
@@ -11,13 +12,7 @@ import {DonutSingleComponent} from "./admin/containers/donut-single/donut-single
 export const routes: Routes = [
   {
     path: 'admin',
-    children: [
-      { path: 'donuts', component: DonutListComponent },
-      { path: 'donut', component: DonutSingleComponent },
-      // redirects http://localhost:4200/admin to http://localhost:4200/admin/donuts
-      // put always at the end
-      { path: '', pathMatch: 'full', redirectTo: 'donuts' },
-    ],
+    loadChildren: () => import('./admin/admin.module').then(x => x.AdminModule),
   },
   {
     // redirects http://localhost:4200/ to http://localhost:4200/admin
@@ -35,7 +30,7 @@ export const routes: Routes = [
 ];
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, RouterModule.forRoot(routes), AdminModule],
+  imports: [BrowserModule, HttpClientModule, RouterModule.forRoot(routes)],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

From e5c1c4535a7a1f88555662aa34b80c593ea2796b Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 28 Dec 2023 13:12:39 +0100
Subject: [PATCH 63/66] Declarative Navigation with routerLink Directiv

---
 src/app/admin/admin.module.ts                    |  2 +-
 .../donut-card/donut-card.component.ts           |  5 +++--
 .../donut-list/donut-list.component.ts           | 16 ++++++++++++++--
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index 3e36555..11e454b 100644
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -13,7 +13,7 @@ import {DonutFormComponent} from './components/donut-form/donut-form.component';
 
 export const routes: Routes =  [
     { path: 'donuts', component: DonutListComponent },
-    { path: 'donut', component: DonutSingleComponent },
+    { path: 'donuts/new', component: DonutSingleComponent },
     // redirects http://localhost:4200/admin to http://localhost:4200/admin/donuts
     // put always at the end
     { path: '', pathMatch: 'full', redirectTo: 'donuts' },
diff --git a/src/app/admin/components/donut-card/donut-card.component.ts b/src/app/admin/components/donut-card/donut-card.component.ts
index 97e7c7f..79dd393 100644
--- a/src/app/admin/components/donut-card/donut-card.component.ts
+++ b/src/app/admin/components/donut-card/donut-card.component.ts
@@ -5,8 +5,9 @@ import {Donut} from "../../models/donut.model";
   selector: 'donut-card',
   encapsulation: ViewEncapsulation.Emulated, // Is de default dat wil zeggen dat nu de css van styles.scss genomen wordt
   template: `
-      <div
+      <a
               class="donut-card"
+              [routerLink]="donut.id"
               [ngClass]="{
                 'donut-card-promo': donut.promo
             }"
@@ -31,7 +32,7 @@ import {Donut} from "../../models/donut.model";
           {{ donut.price / 100 | currency }}
         </p>
       </div>
-    </div>
+    </a>
   `,
   styles: [
     `
diff --git a/src/app/admin/containers/donut-list/donut-list.component.ts b/src/app/admin/containers/donut-list/donut-list.component.ts
index c9ed225..6c02a44 100644
--- a/src/app/admin/containers/donut-list/donut-list.component.ts
+++ b/src/app/admin/containers/donut-list/donut-list.component.ts
@@ -7,6 +7,12 @@ import {DonutService} from "../../services/donut.service";
   selector: 'donut-list',
   template: `
       <div>
+          <div class="donut-list-actions">
+              <a routerLink="new" class="btn btn--green">
+                  New Donut
+                  <img src="/assets/img/icon/plus.svg">
+              </a>
+          </div>
           <ng-container *ngIf="donuts?.length; else nothing">
               <donut-card
                       *ngFor="let donut of donuts; trackBy: trackById;"
@@ -19,8 +25,14 @@ import {DonutService} from "../../services/donut.service";
           </ng-template>
       </div>
   `,
-  styles: [
-  ]
+  styles: [`
+    .donut-list {
+      &-actions {
+        margin-bottom: 10px;
+      }
+    }
+  `,
+  ],
 })
 export class DonutListComponent implements OnInit {
   // Declaratie hier maar vullen in ngOnInit()

From 098ffcd55c450a8895c55adadd4c4078dc3e9e4b Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 28 Dec 2023 13:25:02 +0100
Subject: [PATCH 64/66] Dynamic Route Params and ActivatedRoute

---
 src/app/admin/admin.module.ts                         |  1 +
 .../containers/donut-single/donut-single.component.ts | 11 ++++++++---
 src/app/admin/services/donut.service.ts               |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index 11e454b..92a06ff 100644
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -14,6 +14,7 @@ import {DonutFormComponent} from './components/donut-form/donut-form.component';
 export const routes: Routes =  [
     { path: 'donuts', component: DonutListComponent },
     { path: 'donuts/new', component: DonutSingleComponent },
+    { path: 'donuts/:id', component: DonutSingleComponent },
     // redirects http://localhost:4200/admin to http://localhost:4200/admin/donuts
     // put always at the end
     { path: '', pathMatch: 'full', redirectTo: 'donuts' },
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index 852be67..e685db7 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {Donut} from "../../models/donut.model";
 import {DonutService} from "../../services/donut.service";
+import {ActivatedRoute} from "@angular/router";
 
 @Component({
   selector: 'donut-single',
@@ -20,12 +21,16 @@ export class DonutSingleComponent implements OnInit {
 
   donut!: Donut;
 
-  constructor(private donutService: DonutService) {
-  }
+  constructor(
+    private route: ActivatedRoute,
+    private donutService: DonutService,
+    ) {}
 
   ngOnInit(): void {
+    const id = this.route.snapshot.paramMap.get('id'); // id refers t: { path: 'donuts/:id', component: DonutSingleComponent }, in AdminModule
+    console.log(id);
     this.donutService
-      .readOne('xxxx')
+      .readOne(id)
       .subscribe((donut: Donut) => (this.donut = donut));
   }
 
diff --git a/src/app/admin/services/donut.service.ts b/src/app/admin/services/donut.service.ts
index 738d136..6b6cd4f 100644
--- a/src/app/admin/services/donut.service.ts
+++ b/src/app/admin/services/donut.service.ts
@@ -38,7 +38,7 @@ export class DonutService {
     );
   }
 
-  readOne(id: string) {
+  readOne(id: string | null) {
     return this.read().pipe(
       map((donuts) => {
         const donut = donuts.find((donut: Donut) => donut.id === id);

From 70ff13a3bf829adf002050f727c77f6efea66a9c Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 28 Dec 2023 16:29:19 +0100
Subject: [PATCH 65/66] Pass Custom Data to Routed Components

---
 src/app/admin/admin.module.ts                 | 16 +++---
 .../donut-form/donut-form.component.ts        | 49 +++++++++++++++----
 .../donut-single/donut-single.component.ts    |  3 ++
 3 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index 92a06ff..d9867a0 100644
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -11,14 +11,14 @@ import {DonutSingleComponent} from './containers/donut-single/donut-single.compo
 import {DonutCardComponent} from './components/donut-card/donut-card.component';
 import {DonutFormComponent} from './components/donut-form/donut-form.component';
 
-export const routes: Routes =  [
-    { path: 'donuts', component: DonutListComponent },
-    { path: 'donuts/new', component: DonutSingleComponent },
-    { path: 'donuts/:id', component: DonutSingleComponent },
-    // redirects http://localhost:4200/admin to http://localhost:4200/admin/donuts
-    // put always at the end
-    { path: '', pathMatch: 'full', redirectTo: 'donuts' },
-  ];
+export const routes: Routes = [
+  {path: 'donuts', component: DonutListComponent},
+  {path: 'donuts/new', component: DonutSingleComponent, data: {isEdit: false}},
+  {path: 'donuts/:id', component: DonutSingleComponent, data: {isEdit: true}},
+  // redirects http://localhost:4200/admin to http://localhost:4200/admin/donuts
+  // put always at the end
+  {path: '', pathMatch: 'full', redirectTo: 'donuts'},
+];
 
 @NgModule({
   declarations: [
diff --git a/src/app/admin/components/donut-form/donut-form.component.ts b/src/app/admin/components/donut-form/donut-form.component.ts
index 1309fcb..392f3a4 100644
--- a/src/app/admin/components/donut-form/donut-form.component.ts
+++ b/src/app/admin/components/donut-form/donut-form.component.ts
@@ -75,16 +75,43 @@ import {Donut} from "../../models/donut.model";
         </ng-container>
       </label>
 
-      <button type="button" class="btn btn--green" (click)="handleCreate(form)">Create</button>
-      <button type="button" class="btn btn--green" [disabled]="form.untouched" (click)="handleUpdate(form)">Update
-      </button>
-      <button type="button" class="btn btn--green" (click)="handleDelete()">Delete
-      </button>
-      <button type="button" class="btn btn--grey" (click)="form.resetForm()">Reset Form</button>
-
-      <div class="donut-form-working" *ngIf="form.valid && form.submitted">
-        Working...
-      </div>
+        <button
+                type="button"
+                class="btn btn--green"
+                *ngIf="!isEdit"
+                (click)="handleCreate(form)"
+        >
+            Create
+        </button>
+        <button
+                type="button"
+                class="btn btn--green"
+                *ngIf="isEdit"
+                [disabled]="form.untouched"
+                (click)="handleUpdate(form)"
+        >
+            Update
+        </button>
+        <button
+                type="button"
+                class="btn btn--green"
+                *ngIf="isEdit"
+                (click)="handleDelete()"
+        >
+            Delete
+        </button>
+        <button
+                type="button"
+                class="btn btn--grey"
+                *ngIf="form.touched || isEdit"
+                (click)="form.resetForm()"
+        >
+            Reset Form
+        </button>
+
+        <div class="donut-form-working" *ngIf="form.valid && form.submitted">
+            Working...
+        </div>
     </form>
 
     <ng-template #loading>Loading...</ng-template>
@@ -128,6 +155,8 @@ import {Donut} from "../../models/donut.model";
 export class DonutFormComponent {
 
   @Input() donut!: Donut;
+  @Input() isEdit!: boolean;
+
   @Output() create = new EventEmitter<Donut>()
   @Output() update = new EventEmitter<Donut>()
   @Output() delete = new EventEmitter<Donut>()
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index e685db7..e690532 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -9,6 +9,7 @@ import {ActivatedRoute} from "@angular/router";
     <div>
       <donut-form
         [donut]="donut"
+        [isEdit]="isEdit"
         (create)="onCreate($event)"
         (update)="onUpdate($event)"
         (delete)="onDelete($event)"
@@ -20,6 +21,7 @@ import {ActivatedRoute} from "@angular/router";
 export class DonutSingleComponent implements OnInit {
 
   donut!: Donut;
+  isEdit!: boolean;
 
   constructor(
     private route: ActivatedRoute,
@@ -32,6 +34,7 @@ export class DonutSingleComponent implements OnInit {
     this.donutService
       .readOne(id)
       .subscribe((donut: Donut) => (this.donut = donut));
+    this.isEdit = this.route.snapshot.data['isEdit'];
   }
 
   onCreate(donut: Donut) {

From 6d0cd08a09a3737eb144e3521120ca8cc4aae040 Mon Sep 17 00:00:00 2001
From: Kristof Kox <kristof.kox@ravago.com>
Date: Thu, 28 Dec 2023 16:38:26 +0100
Subject: [PATCH 66/66] Programmatic Navigation with Router.navigate(

---
 db.json                                              | 12 ++++++++++--
 .../donut-single/donut-single.component.ts           |  9 +++++----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/db.json b/db.json
index 9044770..e36e314 100644
--- a/db.json
+++ b/db.json
@@ -4,8 +4,8 @@
       "id": "xy12yr",
       "name": "Just Chocolate",
       "icon": "just-chocolate",
-      "price": 119,
-      "promo": "limited",
+      "price": 120,
+      "promo": "new",
       "description": "For the pure chocoholic."
     },
     {
@@ -37,6 +37,14 @@
       "icon": "zesty-lemon",
       "price": 129,
       "description": "Delicious luscious lemon."
+    },
+    {
+      "name": "teestfff",
+      "icon": "glazed-fudge",
+      "price": 3,
+      "promo": "limited",
+      "description": "qdsqsdf",
+      "id": "RF-n7_z"
     }
   ]
 }
\ No newline at end of file
diff --git a/src/app/admin/containers/donut-single/donut-single.component.ts b/src/app/admin/containers/donut-single/donut-single.component.ts
index e690532..7135265 100644
--- a/src/app/admin/containers/donut-single/donut-single.component.ts
+++ b/src/app/admin/containers/donut-single/donut-single.component.ts
@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {Donut} from "../../models/donut.model";
 import {DonutService} from "../../services/donut.service";
-import {ActivatedRoute} from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
 
 @Component({
   selector: 'donut-single',
@@ -25,6 +25,7 @@ export class DonutSingleComponent implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
+    private router: Router,
     private donutService: DonutService,
     ) {}
 
@@ -40,12 +41,12 @@ export class DonutSingleComponent implements OnInit {
   onCreate(donut: Donut) {
     this.donutService
       .create(donut)
-      .subscribe(() => console.log('Created successfully!'));
+      .subscribe((donut) => this.router.navigate(['admin', 'donuts', donut.id]));
   }
 
   onUpdate(donut: Donut) {
     this.donutService.update(donut).subscribe({
-      next: () => console.log('Updated successfully!'),
+      next: () => this.router.navigate(['admin']),
       error: (err) => console.log('onUpdate error:', err),
     });
   }
@@ -53,6 +54,6 @@ export class DonutSingleComponent implements OnInit {
   onDelete(donut: Donut) {
     this.donutService
       .delete(donut)
-      .subscribe(()=> console.log('Deleted successfully!'));
+      .subscribe(()=> this.router.navigate(['admin']));
   }
 }