.l-main-section
    p.
      <strong>Mission:</strong> By the end of this chapter, you should be able to add to a list on a page when a
      button is clicked and update the text displayed when the user types into a textbox.
    .l-sub-section
      h3#section-examples Examples:
        ul
          li
            a(href='') TypeScript
          li
            a(href='') ES5
    p.
      You can make your application respond to user input by associating events with functions in your controller
      using the event syntax using <strong>()</strong> to surround the name of an event.
    p.
      For a particular control like an input you can have it call methods on your controller on keyup event like so:

    pre.prettyprint.lang-html
      code.
        &lt;input (keyup)="myControllerMethod()"&gt;
    p.
      As in previous examples, you can make element references available to other parts of the template as a local
      variable using the # syntax.  With this and events, we can do the old "update text as you type" example:

    pre.prettyprint.lang-html
      code.
        &lt;input #myname (keyup)&gt;
        &lt;p&gt;{{myname.value}}&lt;/p&gt;

    p.text-body(ng-non-bindable).
      The <code>#my-name</code> creates a local variable in the template that we'll refer to below in the
      <code>&lt;p&gt;</code> element.  The <code>(keyup)</code> tells Angular to trigger updates when it gets a keyup
      event.  And the <code>{{my-name.value}}</code> binds the text node of the  <code>&lt;p&gt;</code> element to the
      input's value property.
    p Let's do something a little more complex where users enter items and add them to a list like this:
    div(align='center')
        img(src='user-input-example1.png')


.l-main-section
    h2#section-create-an-array-property Create an array property
    p.
      With the default bootstrapping in place, create a TodoController class that will manage interactions with the
      list. Inside TodoController, add an array with an initial list of items.  Then add a method that pushes new items
      on the array when called.

    aside.is-right.
        As with the previous example, in a production application you will separate your model out into another class
        and inject it into TodoController.  We've omitted it here for brevity.

    pre.prettyprint.linenums.lang-javascript
      code.
        //ES5
        function TodoList() {
          this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
                  this.addTodo = function(todo) {
            this.todos.push(todo);
          };
        }

    pre.prettyprint.linenums.lang-typescript
      code.
        //TypeScript
        class TodoList {
          todos: Array<string>;
                  constructor() {
            this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
          }
                  addTodo(todo: string) {
            this.todos.push(todo);
          }
        }