From d21bbdbf74c359d30af0dcc589e66f0786416d8a Mon Sep 17 00:00:00 2001
From: Narain Sagar <narainmenghwar@gmail.com>
Date: Sat, 4 Apr 2020 15:21:16 +0200
Subject: [PATCH 1/3] fix(checkbox): add property `checked` for completed items

---
 .../src/app/todo-item/todo-item.component.ts                   | 3 ++-
 .../2_01-adding-crud/src/app/todo-item/todo-item.component.ts  | 1 +
 .../src/app/todo-item/todo-item.component.ts                   | 1 +
 .../src/app/todo-item/todo-item.component.ts                   | 1 +
 .../4_03-form-builder/src/app/todo-item/todo-item.component.ts | 1 +
 .../5_01-store-setup/src/app/todo-item/todo-item.component.ts  | 1 +
 workshop-todo-list/adding-a-checkbox.md                        | 1 +
 7 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/examples/19-adding-a-checkbox/src/app/todo-item/todo-item.component.ts b/examples/19-adding-a-checkbox/src/app/todo-item/todo-item.component.ts
index d706878..6550c7f 100644
--- a/examples/19-adding-a-checkbox/src/app/todo-item/todo-item.component.ts
+++ b/examples/19-adding-a-checkbox/src/app/todo-item/todo-item.component.ts
@@ -7,6 +7,7 @@ import { TodoItem } from './../interfaces/todo-item';
     <div class="todo-item">
       <input type="checkbox"
              class="todo-checkbox"
+             [checked]="item.completed"
              (click)="completeItem()"/>
       <span class="todo-title" [ngClass]="{'todo-complete': item.completed}">
         {{ item.title }}
@@ -32,7 +33,7 @@ export class TodoItemComponent implements OnInit {
   completeItem() {
     this.update.emit({
       item: this.item,
-      changes: {completed: !this.item.completed}
+      changes: { completed: !this.item.completed }
     });
   }
 
diff --git a/examples/2_01-adding-crud/src/app/todo-item/todo-item.component.ts b/examples/2_01-adding-crud/src/app/todo-item/todo-item.component.ts
index 7de4f25..c0070ba 100644
--- a/examples/2_01-adding-crud/src/app/todo-item/todo-item.component.ts
+++ b/examples/2_01-adding-crud/src/app/todo-item/todo-item.component.ts
@@ -7,6 +7,7 @@ import { TodoItem } from './../interfaces/todo-item';
     <div class="todo-item">
       <input type="checkbox"
              class="todo-checkbox"
+             [checked]="item.completed"
              (click)="completeItem()"/>
       <span class="todo-title" [ngClass]="{'todo-complete': item.completed}">
         {{ item.title }}
diff --git a/examples/4_01-template-form/src/app/todo-item/todo-item.component.ts b/examples/4_01-template-form/src/app/todo-item/todo-item.component.ts
index 7de4f25..c0070ba 100644
--- a/examples/4_01-template-form/src/app/todo-item/todo-item.component.ts
+++ b/examples/4_01-template-form/src/app/todo-item/todo-item.component.ts
@@ -7,6 +7,7 @@ import { TodoItem } from './../interfaces/todo-item';
     <div class="todo-item">
       <input type="checkbox"
              class="todo-checkbox"
+             [checked]="item.completed"
              (click)="completeItem()"/>
       <span class="todo-title" [ngClass]="{'todo-complete': item.completed}">
         {{ item.title }}
diff --git a/examples/4_02-reactive-form/src/app/todo-item/todo-item.component.ts b/examples/4_02-reactive-form/src/app/todo-item/todo-item.component.ts
index 7de4f25..c0070ba 100644
--- a/examples/4_02-reactive-form/src/app/todo-item/todo-item.component.ts
+++ b/examples/4_02-reactive-form/src/app/todo-item/todo-item.component.ts
@@ -7,6 +7,7 @@ import { TodoItem } from './../interfaces/todo-item';
     <div class="todo-item">
       <input type="checkbox"
              class="todo-checkbox"
+             [checked]="item.completed"
              (click)="completeItem()"/>
       <span class="todo-title" [ngClass]="{'todo-complete': item.completed}">
         {{ item.title }}
diff --git a/examples/4_03-form-builder/src/app/todo-item/todo-item.component.ts b/examples/4_03-form-builder/src/app/todo-item/todo-item.component.ts
index 7de4f25..c0070ba 100644
--- a/examples/4_03-form-builder/src/app/todo-item/todo-item.component.ts
+++ b/examples/4_03-form-builder/src/app/todo-item/todo-item.component.ts
@@ -7,6 +7,7 @@ import { TodoItem } from './../interfaces/todo-item';
     <div class="todo-item">
       <input type="checkbox"
              class="todo-checkbox"
+             [checked]="item.completed"
              (click)="completeItem()"/>
       <span class="todo-title" [ngClass]="{'todo-complete': item.completed}">
         {{ item.title }}
diff --git a/examples/5_01-store-setup/src/app/todo-item/todo-item.component.ts b/examples/5_01-store-setup/src/app/todo-item/todo-item.component.ts
index 7de4f25..c0070ba 100644
--- a/examples/5_01-store-setup/src/app/todo-item/todo-item.component.ts
+++ b/examples/5_01-store-setup/src/app/todo-item/todo-item.component.ts
@@ -7,6 +7,7 @@ import { TodoItem } from './../interfaces/todo-item';
     <div class="todo-item">
       <input type="checkbox"
              class="todo-checkbox"
+             [checked]="item.completed"
              (click)="completeItem()"/>
       <span class="todo-title" [ngClass]="{'todo-complete': item.completed}">
         {{ item.title }}
diff --git a/workshop-todo-list/adding-a-checkbox.md b/workshop-todo-list/adding-a-checkbox.md
index 5f8ba76..88f628d 100644
--- a/workshop-todo-list/adding-a-checkbox.md
+++ b/workshop-todo-list/adding-a-checkbox.md
@@ -24,6 +24,7 @@ Now, in order for the checkbox to do anything, we need to add a `click` event ha
 <div>
   <input type="checkbox"
          class="todo-checkbox"
+         [checked]="item.completed"
          (click)="completeItem()"/>
   {{ item.title }}
 </div>

From a558e9a1ec295d431b242cb9beed3c38b74b833d Mon Sep 17 00:00:00 2001
From: Narain Sagar <narainmenghwar@gmail.com>
Date: Sat, 4 Apr 2020 15:21:33 +0200
Subject: [PATCH 2/3] fix: add types to ignore compile errors / warnings

---
 workshop-todo-list/adding-a-checkbox.md | 2 +-
 workshop-todo-list/local-storage.md     | 4 ++--
 workshop-todo-list/remove-item.md       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/workshop-todo-list/adding-a-checkbox.md b/workshop-todo-list/adding-a-checkbox.md
index 88f628d..19cddf9 100644
--- a/workshop-todo-list/adding-a-checkbox.md
+++ b/workshop-todo-list/adding-a-checkbox.md
@@ -99,7 +99,7 @@ And create additional method to handle this update item event. Very similar to `
 
 {% code title="src/app/list-manager/list-manager.component.ts" %}
 ```markup
-updateItem(item, changes) {
+updateItem(item: TodoItem, changes: object) {
   this.todoListService.updateItem(item, changes);
 }
 ```
diff --git a/workshop-todo-list/local-storage.md b/workshop-todo-list/local-storage.md
index 05f8974..8b4fe52 100644
--- a/workshop-todo-list/local-storage.md
+++ b/workshop-todo-list/local-storage.md
@@ -259,13 +259,13 @@ export class TodoListService {
     this.saveList();
   }
 
-  updateItem(item, changes) {
+  updateItem(item: TodoItem, changes: object) {
     const index = this.todoList.indexOf(item);
     this.todoList[index] = { ...item, ...changes };
     this.saveList();
   }
 
-  deleteItem(item) {
+  deleteItem(item: TodoItem) {
     const index = this.todoList.indexOf(item);
     this.todoList.splice(index, 1);
     this.saveList();
diff --git a/workshop-todo-list/remove-item.md b/workshop-todo-list/remove-item.md
index 5c12240..443a60e 100644
--- a/workshop-todo-list/remove-item.md
+++ b/workshop-todo-list/remove-item.md
@@ -63,7 +63,7 @@ Now we just need to add the method `removeItem()` to the `ListManagerComponent`
 
 {% code title="src/app/list-manager/list-manager.component.ts" %}
 ```typescript
-removeItem(item) {
+removeItem(item: TodoItem) {
   this.todoListService.deleteItem(item);
 }
 ```

From ce34a12b50e4cb22acac0d0e64c6b311210aba8e Mon Sep 17 00:00:00 2001
From: Narain Sagar <narainmenghwar@gmail.com>
Date: Sat, 4 Apr 2020 15:26:52 +0200
Subject: [PATCH 3/3] Revert "fix(checkbox): add property `checked` for
 completed items"

This reverts commit d21bbdbf74c359d30af0dcc589e66f0786416d8a.
---
 .../src/app/todo-item/todo-item.component.ts                   | 1 -
 .../2_01-adding-crud/src/app/todo-item/todo-item.component.ts  | 1 -
 .../src/app/todo-item/todo-item.component.ts                   | 1 -
 .../src/app/todo-item/todo-item.component.ts                   | 1 -
 .../4_03-form-builder/src/app/todo-item/todo-item.component.ts | 1 -
 .../5_01-store-setup/src/app/todo-item/todo-item.component.ts  | 1 -
 workshop-todo-list/adding-a-checkbox.md                        | 3 +--
 7 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/examples/19-adding-a-checkbox/src/app/todo-item/todo-item.component.ts b/examples/19-adding-a-checkbox/src/app/todo-item/todo-item.component.ts
index 6550c7f..d316a15 100644
--- a/examples/19-adding-a-checkbox/src/app/todo-item/todo-item.component.ts
+++ b/examples/19-adding-a-checkbox/src/app/todo-item/todo-item.component.ts
@@ -7,7 +7,6 @@ import { TodoItem } from './../interfaces/todo-item';
     <div class="todo-item">
       <input type="checkbox"
              class="todo-checkbox"
-             [checked]="item.completed"
              (click)="completeItem()"/>
       <span class="todo-title" [ngClass]="{'todo-complete': item.completed}">
         {{ item.title }}
diff --git a/examples/2_01-adding-crud/src/app/todo-item/todo-item.component.ts b/examples/2_01-adding-crud/src/app/todo-item/todo-item.component.ts
index c0070ba..7de4f25 100644
--- a/examples/2_01-adding-crud/src/app/todo-item/todo-item.component.ts
+++ b/examples/2_01-adding-crud/src/app/todo-item/todo-item.component.ts
@@ -7,7 +7,6 @@ import { TodoItem } from './../interfaces/todo-item';
     <div class="todo-item">
       <input type="checkbox"
              class="todo-checkbox"
-             [checked]="item.completed"
              (click)="completeItem()"/>
       <span class="todo-title" [ngClass]="{'todo-complete': item.completed}">
         {{ item.title }}
diff --git a/examples/4_01-template-form/src/app/todo-item/todo-item.component.ts b/examples/4_01-template-form/src/app/todo-item/todo-item.component.ts
index c0070ba..7de4f25 100644
--- a/examples/4_01-template-form/src/app/todo-item/todo-item.component.ts
+++ b/examples/4_01-template-form/src/app/todo-item/todo-item.component.ts
@@ -7,7 +7,6 @@ import { TodoItem } from './../interfaces/todo-item';
     <div class="todo-item">
       <input type="checkbox"
              class="todo-checkbox"
-             [checked]="item.completed"
              (click)="completeItem()"/>
       <span class="todo-title" [ngClass]="{'todo-complete': item.completed}">
         {{ item.title }}
diff --git a/examples/4_02-reactive-form/src/app/todo-item/todo-item.component.ts b/examples/4_02-reactive-form/src/app/todo-item/todo-item.component.ts
index c0070ba..7de4f25 100644
--- a/examples/4_02-reactive-form/src/app/todo-item/todo-item.component.ts
+++ b/examples/4_02-reactive-form/src/app/todo-item/todo-item.component.ts
@@ -7,7 +7,6 @@ import { TodoItem } from './../interfaces/todo-item';
     <div class="todo-item">
       <input type="checkbox"
              class="todo-checkbox"
-             [checked]="item.completed"
              (click)="completeItem()"/>
       <span class="todo-title" [ngClass]="{'todo-complete': item.completed}">
         {{ item.title }}
diff --git a/examples/4_03-form-builder/src/app/todo-item/todo-item.component.ts b/examples/4_03-form-builder/src/app/todo-item/todo-item.component.ts
index c0070ba..7de4f25 100644
--- a/examples/4_03-form-builder/src/app/todo-item/todo-item.component.ts
+++ b/examples/4_03-form-builder/src/app/todo-item/todo-item.component.ts
@@ -7,7 +7,6 @@ import { TodoItem } from './../interfaces/todo-item';
     <div class="todo-item">
       <input type="checkbox"
              class="todo-checkbox"
-             [checked]="item.completed"
              (click)="completeItem()"/>
       <span class="todo-title" [ngClass]="{'todo-complete': item.completed}">
         {{ item.title }}
diff --git a/examples/5_01-store-setup/src/app/todo-item/todo-item.component.ts b/examples/5_01-store-setup/src/app/todo-item/todo-item.component.ts
index c0070ba..7de4f25 100644
--- a/examples/5_01-store-setup/src/app/todo-item/todo-item.component.ts
+++ b/examples/5_01-store-setup/src/app/todo-item/todo-item.component.ts
@@ -7,7 +7,6 @@ import { TodoItem } from './../interfaces/todo-item';
     <div class="todo-item">
       <input type="checkbox"
              class="todo-checkbox"
-             [checked]="item.completed"
              (click)="completeItem()"/>
       <span class="todo-title" [ngClass]="{'todo-complete': item.completed}">
         {{ item.title }}
diff --git a/workshop-todo-list/adding-a-checkbox.md b/workshop-todo-list/adding-a-checkbox.md
index 19cddf9..f56606c 100644
--- a/workshop-todo-list/adding-a-checkbox.md
+++ b/workshop-todo-list/adding-a-checkbox.md
@@ -24,7 +24,6 @@ Now, in order for the checkbox to do anything, we need to add a `click` event ha
 <div>
   <input type="checkbox"
          class="todo-checkbox"
-         [checked]="item.completed"
          (click)="completeItem()"/>
   {{ item.title }}
 </div>
@@ -44,7 +43,7 @@ export class TodoItemComponent implements OnInit {
   completeItem() {
     this.update.emit({
       item: this.item,
-      changes: {completed: !this.item.completed}
+      changes: { completed: !this.item.completed }
     });
   }
 ```