Using two-way binding

This removes the need to reference a DOM element from the component

examples/angular2/app/app.html

 <section class="todoapp">
 	<header class="header">
 		<h1>todos</h1>
-		<input class="new-todo" placeholder="What needs to be done?" autofocus="" #newtodo (keyup)="addTodo($event, newtodo)">
+		<input class="new-todo" placeholder="What needs to be done?" autofocus="" [(ngModel)]="newTodoText" (keyup.enter)="addTodo()">
 	</header>
 	<section class="main" *ngIf="todoStore.todos.length > 0">
 		<input class="toggle-all" type="checkbox" *ngIf="todoStore.todos.length" #toggleall [checked]="todoStore.allCompleted()" (click)="todoStore.setAllTo(toggleall.checked)">

examples/angular2/app/app.js

@@ -9,9 +9,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 var core_1 = require('angular2/core');
 var store_1 = require('./services/store');
-var ENTER_KEY = 13;
 var TodoApp = (function () {
     function TodoApp() {
+        this.newTodoText = '';
         this.todoStore = new store_1.TodoStore();
     }
     TodoApp.prototype.stopEditing = function (todo, editedTitle) {
@@ -41,10 +41,10 @@ var TodoApp = (function () {
     TodoApp.prototype.remove = function (todo) {
         this.todoStore.remove(todo);
     };
-    TodoApp.prototype.addTodo = function ($event, newtodo) {
-        if ($event.which === ENTER_KEY && newtodo.value.trim().length) {
-            this.todoStore.add(newtodo.value);
-            newtodo.value = '';
+    TodoApp.prototype.addTodo = function () {
+        if (this.newTodoText.trim().length) {
+            this.todoStore.add(this.newTodoText);
+            this.newTodoText = '';
         }
     };
     TodoApp = __decorate([

examples/angular2/app/app.ts

 import {Component} from 'angular2/core';
 import {TodoStore, Todo} from './services/store';
 
-const ENTER_KEY = 13;
-
 @Component({
 	selector: 'todo-app',
 	templateUrl: 'app/app.html'
 })
 export default class TodoApp {
 	todoStore: TodoStore;
+	newTodoText = '';
 
 	constructor() {
 		this.todoStore = new TodoStore();
@@ -50,10 +49,10 @@ export default class TodoApp {
 		this.todoStore.remove(todo);
 	}
 
-	addTodo($event: KeyboardEvent, newtodo: HTMLInputElement) {
-		if ($event.which === ENTER_KEY && newtodo.value.trim().length) {
-			this.todoStore.add(newtodo.value);
-			newtodo.value = '';
+	addTodo() {
+		if (this.newTodoText.trim().length) {
+			this.todoStore.add(this.newTodoText);
+			this.newTodoText = '';
 		}
 	}
 }

examples/angular2/app/services/store.js

@@ -42,6 +42,7 @@ var TodoStore = (function () {
     };
     TodoStore.prototype.removeCompleted = function () {
         this.todos = this.getWithCompleted(false);
+        this.updateStore();
     };
     TodoStore.prototype.getRemaining = function () {
         return this.getWithCompleted(false);

examples/angular2/app/services/store.ts

@@ -49,6 +49,7 @@ export class TodoStore {
 
 	removeCompleted() {
 		this.todos = this.getWithCompleted(false);
+		this.updateStore();
 	}
 
 	getRemaining() {