Adding a checkbox md

adding-a-checkbox.md

@@ -1,28 +1,31 @@
-# \#19: 🔘 Adding a checkbox
+# \#19: ☑️ Adding a checkbox
 
 We are now able to interact with our todo list by removing items. But what if we want to complete items and still be able to see them in our list, with a line through the item's title? Enter the checkbox!
 
 We will look at:
 
-* Adding a checkbox
-* Adding functionality when you click the checkbox so that a CSS class, which adds a ~~strikethrough~~ style, is added to our todo items
-* Editing the todo title so that it responds to the checkbox
-* Adding a new CSS Class
+- Adding a checkbox
+- Adding functionality when you click the checkbox so that a CSS class, which adds a ~~strikethrough~~ style, is added to our todo items
+- Editing the todo title so that it responds to the checkbox
+- Adding a new CSS Class
 
 Let's go ahead and add a checkbox into our `todo-item.component.ts` file. Place the following code right before `{{ item.title }}`:
 
 {% code-tabs %}
 {% code-tabs-item title="src/app/todo-item/todo-item.component.ts" %}
+
 ```markup
 <input type="checkbox"/>
 ```
+
 {% endcode-tabs-item %}
 {% endcode-tabs %}
 
 Now, in order for the checkbox to do anything, we need to add a `click` event handler which we will call `completeItem`. We'll also add a css-class and wrap the element and the interpolation together for styling. Let's do that now:
 
 {% code-tabs %}
 {% code-tabs-item title="src/app/todo-item/todo-item.component.ts" %}
+
 ```markup
 <div>
   <input type="checkbox"
@@ -31,27 +34,30 @@ Now, in order for the checkbox to do anything, we need to add a `click` event ha
   {{ item.title }}
 </div>
 ```
+
 {% endcode-tabs-item %}
 {% endcode-tabs %}
 
 When we click on the checkbox, it will run the `completeItem` method. Let's talk about what this method needs to accomplish. We want to be able to toggle some CSS styling on the item's title so that when the checkbox is checked it will have a strikethrough. We also want to save the status of the item in the local storage. In order to achieve this, we will emit an update event with the new status of the item and catch it in the parent component.
 
 {% code-tabs %}
 {% code-tabs-item title="src/app/todo-item/todo-item.component.ts" %}
+
 ```javascript
 export class TodoItemComponent implements OnInit {
   @Input() item: TodoItem;
   @Output() remove: EventEmitter<TodoItem> = new EventEmitter();
   @Output() update: EventEmitter<any> = new EventEmitter();
 
   // put this method below ngOnInit
-  completeItem() {
+  completeItem(): void {
     this.update.emit({
       item: this.item,
       changes: {completed: !this.item.completed}
     });
   }
 ```
+
 {% endcode-tabs-item %}
 {% endcode-tabs %}
 
@@ -74,51 +80,56 @@ Let's wrap the item title in a `<span>`, then use NgClass to apply the styling.
 And finally, add the CSS to our `todo-item.component.css` file:
 
 ```css
-  .todo-complete {
-    text-decoration: line-through;
-  }
+.todo-complete {
+  text-decoration: line-through;
+}
 ```
 
 Next step is to tell the parent element list-manager what to do, when update event is emitted. In order to do so we have to bind update action and update method that will trigger a proper function in TodoListService. So we apply here:
 
 {% code-tabs %}
 {% code-tabs-item title="src/app/list-manager/list-manager.component.ts" %}
+
 ```markup
 <app-todo-item [item]="todoItem"
                (remove)="removeItem($event)"></app-todo-item>
 </li>
 ```
+
 {% endcode-tabs-item %}
 {% endcode-tabs %}
 
 Next modifications:
 
 {% code-tabs %}
 {% code-tabs-item title="src/app/list-manager/list-manager.component.ts" %}
+
 ```markup
 <app-todo-item [item]="todoItem"
              (remove)="removeItem($event)"
              (update)="updateItem($event.item, $event.changes)"></app-todo-item>
 </li>
 ```
+
 {% endcode-tabs-item %}
 {% endcode-tabs %}
 
 And create additional method to handle this update item event. Very similar to `removeItem` function:
 
 {% code-tabs %}
 {% code-tabs-item title="src/app/list-manager/list-manager.component.ts" %}
+
 ```markup
 updateItem(item, changes) {
   this.todoListService.updateItem(item, changes);
 }
 ```
+
 {% endcode-tabs-item %}
 {% endcode-tabs %}
 
 Voila! Checking the checkbox should apply a line through the todo title, and unchecking the checkbox should remove the line.
 
-
 {% hint style="success" %}
 [See the results on StackBlitz](https://stackblitz.com/github/ng-girls/todo-list-tutorial/tree/master/examples/19-adding-a-checkbox)
-{% endhint %}
+{% endhint %}