feat(playground): update todo app to match latest release

Author: Hotell

playground/app/components/add-todo.html

@@ -1,9 +1,9 @@
-<form name="ctrl.addTodoForm" novalidate ng-submit="ctrl.addTodo($event, ctrl.label);" element-ready>
+<form name="$ctrl.addTodoForm" novalidate ng-submit="$ctrl.addTodo($event, $ctrl.label);" element-ready>
 
   <div>
 
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-      <input class="mdl-textfield__input" type="text" id="sample3" ng-model="ctrl.label">
+      <input class="mdl-textfield__input" type="text" id="sample3" ng-model="$ctrl.label">
       <label class="mdl-textfield__label" for="sample3">What needs to be done?</label>
     </div>
     <!-- Accent-colored raised button with ripple -->

playground/app/components/todo-app.html

@@ -1,18 +1,18 @@
 <h1>Todos yo!</h1>
 
-<h3>Todo List remaining: {{ ctrl.todos | remainingTodos }}</h3>
+<h3>Todo List remaining: {{ $ctrl.todos | remainingTodos }}</h3>
 
-<add-todo on-add="ctrl.createTodo(todo)"></add-todo>
+<add-todo on-add="$ctrl.createTodo(todo)"></add-todo>
 
 <ul class="demo-list">
-  <li ng-repeat="item in ctrl.todos">
+  <li ng-repeat="item in $ctrl.todos">
 
     <todo-item
       todo="item"
-      on-done="ctrl.markAsDone(todo)"
+      on-done="$ctrl.markAsDone(todo)"
       idx="$index">
       <button
-        ng-click="ctrl.removeTodo(item)"
+        ng-click="$ctrl.removeTodo(item)"
         class="mdl-button mdl-js-button mdl-button--accent">
         Remove
       </button>

playground/app/components/todo-item.component.ts

@@ -3,7 +3,10 @@ import { TodoModel } from '../stores/todoStore.service';
 
 @Component({
   selector: 'todo-item',
-  templateUrl: './app/components/todo-item.html'
+  templateUrl: './app/components/todo-item.html',
+  legacy: {
+    transclude: true
+  }
 })
 export class TodoItemCmp{
 

playground/app/components/todo-item.html

@@ -1,15 +1,15 @@
-<label for="{{ctrl.idx}}"
+<label for="{{$ctrl.idx}}"
        class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
-       ng-class="{'todo__list--complete': ctrl.todo.complete }"
+       ng-class="{'todo__list--complete': $ctrl.todo.complete }"
        element-ready>
 
   <input
     type="checkbox"
-    id="{{ctrl.idx}}"
+    id="{{$ctrl.idx}}"
     class="mdl-checkbox__input"
-    ng-model="ctrl.todo.complete"
-    ng-change="ctrl.done(ctrl.todo)">
-  <span class="mdl-checkbox__label">{{ ctrl.todo.label }}</span>
+    ng-model="$ctrl.todo.complete"
+    ng-change="$ctrl.done($ctrl.todo)">
+  <span class="mdl-checkbox__label">{{ $ctrl.todo.label }}</span>
 
 </label>
 <ng-transclude></ng-transclude>

playground/app/directives/element-ready.directive.ts

@@ -31,6 +31,5 @@ export class ElementReadyDirective implements OnInit {
     //this.$scope.$watch( componentHandler.upgradeAllRegistered )
 
   }
-  }
 
 }

playground/app/pipes/remainingTodos.pipe.ts

@@ -6,7 +6,7 @@ import { TodoModel } from '../stores/todoStore.service';
 } )
 export class RemainingTodosPipe {
 
-  transform( todos: TodoModel[] ): string {
+  transform( todos: TodoModel[] = [] ): string {
 
 
     // method to iterate the todo items and return