.l-main-section
p.
Use the event syntax (eventName) to
make your application respond to user input.
p.
You can specify the event handler—a method in the component controller—like this:
code-example(language="html").
<input (keyup)="myControllerMethod()">
p.
As in previous examples, you can make element references available to
other parts of the template as a local
variable using the # syntax.
Using # and events,
you can write the old "update text as you type" example:
code-example(language="html").
<input #myname (keyup)>
<p>{{myname.value}}</p>
p.text-body(ng-non-bindable).
In that example, #myname creates a local variable in the template that
the <p> element can refer to.
The (keyup) tells Angular to trigger updates when it gets a keyup
event. And {{myname.value}} binds the text node of the
<p> 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='/resources/images/examples/user-input-example1.png' alt="Example of Todo App")
.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.
code-example(language="dart").
class TodoList {
List<String> 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 TodoController.
We've omitted that here for brevity.
.l-main-section
h2#section-display-the-list-of-todos Display the list of todos
p.
Using the *ng-for iterator, create an <li> for each item in the todos list and set
its text to the value.
code-example(language="html").
<ul>
<li *ng-for="#todo of todos">
{{ todo }}
</li>
</ul>
.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 #varname. Call it #todotext here.
code-example(language="html").
<input #todotext>
p.
Specify the target of the click event binding as your controller's
addTodo() method and pass
it the value. Since you created a reference called todotext,
you can get the value with todotext.value.
code-example(language="html").
<button (click)="addTodo(todotext.value)">Add Todo</button>
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
dart:html,
so be sure to import that library.
code-example(language="dart").
import 'dart:html';
...
// In the template:
<input #todotext (keyup)="doneTyping(\$event)">
...
// In the component controller class:
doneTyping(KeyboardEvent event) {
if (event.keyCode == KeyCode.ENTER) {
InputElement e = event.target;
addTodo(e.value);
e.value = null;
}
}
.l-main-section
h2#section-final-code Final code
code-tabs
code-pane(language="dart" name="lib/todo_list.dart" format="linenums").
library user_input.todo_list;
import 'dart:html';
import 'package:angular2/angular2.dart';
@Component(selector: 'todo-list')
@View(
// An alternative to using \$event is to use a raw string instead.
// For example, change "template: '''" to "template: r'''".
template: '''
<ul>
<li *ng-for="#todo of todos">
{{ todo }}
</li>
</ul>
<input #todotext (keyup)="doneTyping(\$event)">
<button (click)="addTodo(todotext.value)">Add Todo</button>
''', directives: const [NgFor])
class TodoList {
List<String> 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;
}
}
}
code-pane(language="dart" name="web/main.dart" format="linenums").
import 'package:angular2/bootstrap.dart';
import 'package:user_input/todo_list.dart';
main() {
bootstrap(TodoList);
}
code-pane(language="html" name="web/index.html" format="linenums").
<!DOCTYPE html>
<html>
<head>
<title>User Input</title>
<link rel="stylesheet" href="style.css">
<script async src="main.dart" type="application/dart"></script>
<script async src="packages/browser/dart.js"></script>
</head>
<body>
<todo-list></todo-list>
</body>
</html>
code-pane(language="yaml" name="pubspec.yaml" format="linenums").
name: user_input
description: User Input example
version: 0.0.1
dependencies:
angular2: 2.0.0-alpha.38
browser: ^0.10.0
transformers:
- angular2:
entry_points: web/main.dart