.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:
pre.prettyprint.lang-html
code.
<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:
pre.prettyprint.lang-html
code.
<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='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<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 *for iterator, create an <li> for each item in the todos list and set
its text to the value.
pre.prettyprint.lang-html
code.
<ul>
<li *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.
pre.prettyprint.lang-html
code.
<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.
pre.prettyprint.lang-html
code.
<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-box
pre.prettyprint.lang-dart(data-name="todo_list.dart")
code.
// 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;
}
}
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'''
<ul>
<li *for="#todo of todos">
{{ todo }}
</li>
</ul>
<input #todotext (keyup)="doneTyping($event)">
<button (click)="addTodo(todotext.value)">Add Todo</button>
''',
directives: const[For]
)
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;
}
}
}
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.
<!-- web/index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<todo-list></todo-list>
<script type="application/dart" src="main.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
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.20
browser: any