Task: Components input/output communication & ExpressionChangedAfterItHasBeenCheckedError

Author: maksym.koretskyi

src/app/todo-item.ts

@@ -9,23 +9,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
             Completed
             <input id="checkBox" type="checkbox" (change)="complete($event)">
         </label>
-    `,
-    styles: [':host {display: block; width: 90%; border: 2px solid green; padding: 20px}']
+    `
 })
 export class TodoItemComponent {
-    @Input() item;
-    @Output() completed = new EventEmitter();
-
-    complete(event) {
-        this.completed.emit(event.target.checked);
-    }
-
-    ngAfterViewInit() {
-        // why does this line cause ExpressionChangedAfterItHasBeenCheckedError
-        // this.item.completed = !this.item.completed;
-
-        // why this error disappears if you remove
-        // <h4>Status: {{item.completed}}</h4>
-        // from this component's template
-    }
 }

src/app/todo-list.component.ts

@@ -5,16 +5,7 @@ import { Component } from '@angular/core';
     template: `
         <h1>To-do list</h1>
         <todo-item [item]="todoItem" (completed)="updateCompletedStatus($event)"></todo-item>
-    `,
-    styles: [':host {display: block; width: 500px; border: 2px solid blue; padding: 20px}']
+    `
 })
 export class TodoListComponent {
-    todoItem = {
-        title: 'Finish homework',
-        completed: false
-    };
-
-    updateCompletedStatus(completed) {
-        this.todoItem.completed = completed;
-    }
 }

task.jpg

@@ -0,0 +1,28 @@
+Components input/output communication & ExpressionChangedAfterItHasBeenCheckedError
+---------------------
+
+Steps
+---------------------
+
+* Implement ToDoList component that contains one child componentn ToDoItem component.
+Here is a template of the component:
+<h1>To-do list</h1>
+<todo-item [item]="todoItem" (completed)="updateCompletedStatus($event)"></todo-item>
+
+* Implement ToDoItem component that takes a to-do item as an input. It shows
+title and status of the to-do item that it takes. It also contains a checkbox
+to switch status of the to-do item.
+
+Here is a template of the component:
+<h4>Title: {{item.title}}</h4>
+<h4>Status: {{item.completed}}</h4>
+<label>
+    Completed
+    <input id="checkBox" type="checkbox" (change)="complete($event)">
+</label>
+
+* ToDoItem component also has `completed` event that is listened to by
+the ToDoList component. Once it receives the notification, it udpates the status
+of the to-do item.
+
+* Add styles with borders and padding according to the task.jpg