diff --git a/public/docs/dart/latest/guide/user-input-example1.png b/public/docs/dart/latest/guide/user-input-example1.png
new file mode 100644
index 0000000000..91e2dcfed1
Binary files /dev/null and b/public/docs/dart/latest/guide/user-input-example1.png differ
diff --git a/public/docs/dart/latest/guide/user-input.jade b/public/docs/dart/latest/guide/user-input.jade
new file mode 100644
index 0000000000..db83a31230
--- /dev/null
+++ b/public/docs/dart/latest/guide/user-input.jade
@@ -0,0 +1,137 @@
+.l-main-section
+  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 #my-name (keyup)&gt;
+      &lt;p&gt;{{my-name.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.
+
+  pre.prettyprint.linenums.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 with the previous example, in a production application you will separate your model out into another class
+      and inject it into <code>TodoController</code>.  We've omitted it here for brevity.
+
+.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 array and set
+    its text to the value.
+
+  pre.prettyprint.linenums.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.
+    Lastly, 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 And then create the doneTyping() method on TodoList and handle adding the todo text.
+
+  pre.prettyprint.lang-dart
+    code.
+      doneTyping(KeyboardEvent event) {
+         if (event.which == 13) {
+           InputElement e = event.target;
+           addTodo(e.value);
+           e.value = null;
+         }
+       }
+
+.l-main-section
+  h2#section-final-code Final Code
+  p Here's the final <code>todo_list.dart</code>
+  pre.prettyprint.lang-dart
+    code.
+      part of user_input;
+
+      @Component(
+        selector: 'todo-list'
+      )
+      @View(
+        // Without r before ''' (a raw string), $event breaks Angular!
+        // An alternative is to use \$event instead.
+        template: '''
+          &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.which == 13) {
+               InputElement e = event.target;
+               addTodo(e.value);
+               e.value = null;
+             }
+           }
+         }
\ No newline at end of file