angular-cn/public/docs/dart/latest/guide/user-input.jade

.l-main-section
  p.
    Use the event syntax <strong>(<em>eventName</em>)</strong> to
    make your application respond to user input.
  p.
    You can specify the event handler—a method in the component controller—like this:

  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 <b>#</b> syntax.
    Using <code>#</code> and events,
    you can write the old "update text as you type" example:
    <!-- PENDING: make sure we use recommended word separation scheme.
    my-name doesn't work, but my_name does. Would myName work? -->

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

  p.text-body(ng-non-bindable).
    In that example, <code>#myname</code> creates a local variable in the template that
    the <code>&lt;p&gt;</code> element can refer to.
    The <code>(keyup)</code> tells Angular to trigger updates when it gets a keyup
    event.  And <code>{{myname.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 the user enters items
    that the app adds to a list:
  figure.image-display
    img(src='user-input-example1.png')


.l-main-section
  h2#section-create-an-array-property Create a list property
  p.
    With the default files in place,
    create a TodoController class to manage interactions with the
    list. Inside TodoController, add a list with some initial items.
    Then add a method that adds new items
    to the list.

  pre.prettyprint.lang-dart
    code.
      class TodoList {
        List&lt;String&gt; todos =
          ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];

        addTodo(String todo) {
          todos.add(todo);
        }
      }

.callout.is-helpful
  header Production Best Practice
  p.
      As shown in the previous example, a production application you would
      separate the model out into another class
      and inject it into <code>TodoController</code>.
      We've omitted that here for brevity.

<br><br><!-- PENDING: fix formatting of main sections after callouts -->

.l-main-section
  h2#section-display-the-list-of-todos Display the list of todos
  p.
    Using the <code>*for</code> iterator, create an <code>&lt;li&gt;</code> for each item in the todos list and set
    its text to the value.

  pre.prettyprint.lang-html
    code.
      &lt;ul&gt;
         &lt;li *for=&quot;#todo of todos&quot;&gt;
           {{ todo }}
         &lt;/li&gt;
      &lt;/ul&gt;

.l-main-section
  h2#section-add-todos-to-the-list Add todos to the list via button click
  p.
    Now, add a text input and a button for users to add items to the list.  As you saw above, you can create a local
    variable reference in your template with <code>#varname</code>.  Call it <code>#todotext</code> here.

  pre.prettyprint.lang-html
    code.
      &lt;input #todotext&gt;
  p.
    Specify the target of the click event binding as your controller's
    <code>addTodo()</code> method and pass
    it the value. Since you created a reference called <code>todotext</code>,
    you can get the value with <code>todotext.value.</code>

  pre.prettyprint.lang-html
    code.
        &lt;button (click)="addTodo(todotext.value)"&gt;Add Todo&lt;/button&gt;

  p.
    To make pressing Enter do something useful,
    you can add a keyup event handler to the input field.
    This event handler uses APIs defined in
    <a href="https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart:html">dart:html</a>,
    so be sure to import that library.

  .code-box
    pre.prettyprint.lang-dart(data-name="todo_list.dart")
      code.
        // In the template:
        &lt;input #todotext (keyup)="doneTyping(\$event)"&gt;

        // In the component controller class:
        doneTyping(KeyboardEvent event) {
          if (event.keyCode == KeyCode.ENTER) {
            InputElement e = event.target;
            addTodo(e.value);
            e.value = null;
          }
        }
    pre.prettyprint.lang-dart(data-name="main.dart")
      code.
        library user_input;

        import 'dart:html';
        ...


.l-main-section
  h2#section-final-code Final code

  .code-box
    pre.prettyprint.lang-dart(data-name="todo_list.dart")
      code.
        // web/todo_list.dart
        part of user_input;

        @Component(
          selector: 'todo-list'
        )
        @View(
          // Without r before ''' (a raw string), $event breaks Angular.
          // An alternative to a raw string is to use \$event instead.
          template: r'''
            &lt;ul&gt;
              &lt;li *for=&quot;#todo of todos&quot;&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: const[For]
        )
        class TodoList {
          List&lt;String&gt; todos =
            ['Eat breakfast', 'Walk dog', 'Breathe', 'Learn Angular'];

          addTodo(String todo) {
            todos.add(todo);
          }

          doneTyping(KeyboardEvent event) {
            if (event.keyCode == KeyCode.ENTER) {
              InputElement e = event.target;
              addTodo(e.value);
              e.value = null;
            }
          }
        }
    pre.prettyprint.lang-dart(data-name="main.dart")
      code.
        // web/main.dart
        library user_input;

        import 'dart:html';

        import 'package:angular2/angular2.dart';
        import 'package:angular2/src/reflection/reflection.dart' show reflector;
        import 'package:angular2/src/reflection/reflection_capabilities.dart' show ReflectionCapabilities;

        part 'todo_list.dart';

        main() {
          reflector.reflectionCapabilities = new ReflectionCapabilities();
          bootstrap(TodoList);
        }
    pre.prettyprint.lang-html(data-name="html")
      code.
        &lt;!-- web/index.html --&gt;
        &lt;!DOCTYPE html&gt;
        &lt;html&gt;
          &lt;head&gt;
            &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
          &lt;/head&gt;
          &lt;body&gt;

            &lt;todo-list&gt;&lt;/todo-list&gt;

            &lt;script type=&quot;application/dart&quot; src=&quot;main.dart&quot;&gt;&lt;/script&gt;
            &lt;script src=&quot;packages/browser/dart.js&quot;&gt;&lt;/script&gt;
          &lt;/body&gt;
        &lt;/html&gt;
    pre.prettyprint.lang-yaml(data-name="yaml")
      code.
        # pubspec.yaml
        name: user_input
        description: Dart version of Angular 2 example, Responding to User Input
        version: 0.0.1
        dependencies:
          angular2: 2.0.0-alpha.21
          browser: any