anchor.diff:  .statement
     h4 Live Examples
     p.
  -    If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview> ES5 Example</a>.
  +    If you want to skip to the working examples you can check out these links on Plunker. <a href='http://plnkr.co/edit/htvpvg2RxemT2W0mYu0y?p=preview')> TypeScript Example</a> or <a href='http://plnkr.co/edit/sjRKtQd10ARLM2GTsQKi?p=preview'> ES5 Example</a>.
   
   .l-main-section
     h2#section-responding-to-user-input Responding to user input with event syntax
  -    
  +
     p.
       You can make your application respond to user input by using the event syntax. The event syntax starts with an event name surrounded by parenthesis: <code>(event)</code>. A controller function is then assigned to the event name: <code>(event)="controllerFn()"</code>.
     p.
  
positive.code:   pre.prettyprint.lang-html
      code.
        &lt;input (keyup)="myControllerMethod()"&gt;
        
    h3#local-variables Local variables
    p.
      As in previous examples, you can make element references available to other parts of the template as a local
  
negative.code: .l-main-section
    h2#section-final-code Final Code
  
    .code-box
      pre.prettyprint.lang-javascript(data-name="es5")
        code.
          //ES5
          function TodoList() {
            this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
  
            this.addTodo = function(todo) {
              this.todos.push(todo);
            };
  
            this.doneTyping = function($event) {
              if($event.which === 13) {
                this.addTodo($event.target.value);
                $event.target.value = null;
              }
            }
          }
  
          TodoList.annotations = [
            new angular.Component({
              selector: "todo-list"
            }),
            new angular.View({
              template:
                '&lt;ul&gt;' +
                '&lt;li *for="#todo of todos">' +
                '{{ todo }}' +
                '&lt;/li&gt;' +
                '&lt;/ul&gt;' +
                '&lt;input #textbox (keyup)="doneTyping($event)">' +
                '&lt;button (click)="addTodo(textbox.value)"&gt;Add Todo&lt;/button&gt;',
              directives: [angular.For, angular.If]
            })
          ];
  
          document.addEventListener("DOMContentLoaded", function() {
            angular.bootstrap(TodoList);
          });
  
      pre.prettyprint.lang-typescript(data-name="typescript")
        code.
          //TypeScript
          import {Component, View, bootstrap, For, If} from 'angular2/angular2';
  
          @Component({
            selector: 'todo-list'
          })
          @View({
            template: `
              &lt;ul&gt;
                &lt;li *for="#todo of todos"&gt;
                  {{ todo }}
                &lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;input #todotext (keyup)="doneTyping($event)"&gt;
              &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;
                    `,
            directives: [For, If]
          })
          class TodoList {
            todos: Array<string>;
  
            constructor() {
              this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
            }
  
            addTodo(todo: string) {
              this.todos.push(todo);
            }
  
            doneTyping($event) {
              if($event.which === 13) {
                this.addTodo($event.target.value);
                $event.target.value = null;
              }
            }
          }
  
          bootstrap(TodoList);
  