ongoing

jhades · Mar 1, 2016 · 849b821 · 849b821
1 parent 00a3a3c
commit 849b821
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git a/ng2-change-detection/src/app.ts b/ng2-change-detection/src/app.ts
@@ -12,14 +12,20 @@ import {Owner} from "./owner";
     selector: 'app',
     directives: [TodoList],
     template: `<div>
-                    <todo-list [todos]="todos"></todo-list>
+                    <todo-list [todos]="todos" (addTodo)="onAdd()" [callback]="callback"></todo-list>
                </div>
+               <div>{{message}}</div>
                <button (click)="toggleFirst()">Toggle First Item</button>
                <button (click)="addTodo()">Add Todo to List</button>`
 })
 export class App {
 
     todos:Array<Todo> = initialData;
+    message: string;
+    callback:Function = (message) => {
+        console.log("setting message...");
+        this.message = message;
+    };
 
     constructor() {
 
@@ -35,6 +41,11 @@ export class App {
         this.todos = newTodos;
     }
 
+    onAdd() {
+        this.message = "Adding Todo ...";
+        this.addTodo();
+    }
+
 }
 
 //enableProdMode();

diff --git a/ng2-change-detection/src/todo_list.ts b/ng2-change-detection/src/todo_list.ts
@@ -1,5 +1,5 @@
 
-import {Component,Input, ChangeDetectionStrategy} from "angular2/core";
+import {Component,Input, ChangeDetectionStrategy, Output, EventEmitter, AfterViewChecked} from "angular2/core";
 import {TodoItem} from "./todo_item";
 import {Todo} from "./todo";
 
@@ -12,17 +12,40 @@ import {Todo} from "./todo";
                     <li *ngFor="#todo of todos;">
                         <todo-item [todo]="todo" (toggle)="onToggle($event)"></todo-item>
                     </li>
-               </ul>`
+               </ul>
+               <button (click)="blowup()">Trigger Change Detection Loop</button>`
 })
-export class TodoList {
+export class TodoList implements AfterViewChecked {
 
     @Input()
     todos: Array<Todo>;
 
+    @Input()
+    callback: Function;
+
+    @Output()
+    addTodo = new EventEmitter<Object>();
+
+    clicked = false;
+
     onToggle(todo) {
         console.log("toggling todo..");
         todo.completed = !todo.completed;
 
     }
 
+    blowup() {
+        console.log("Trying to blow up change detection...");
+        this.clicked = true;
+        this.addTodo.emit(null);
+    }
+
+    ngAfterViewChecked() {
+        if (this.callback && this.clicked) {
+            console.log("changing status ...");
+            this.callback(Math.random());
+        }
+
+    }
+
 }