.l-main-section
.callout.is-helpful
header Live Examples
p.
If you want to skip to the working examples you can check out these links on Plunker. TypeScript Example or <p> element. The (keyup) tells Angular to trigger updates when it gets a keyup
event. And the {{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 users enter items and add them to a list like this:
div(align='center')
img(src='user-input-example1.png')
.l-ain-section
h2#section-create-an-array-property Create an array property
p.
With the default bootstrapping in place, create a controller class that will manage interactions with the
list. Inside the controller, 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-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);
}
}
.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 TodoList. 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 *for iterator, create an <li> for each item in the todos array and set
its text to the value.
pre.prettyprint.linenums.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.
Lastly, 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.domElement.value.
pre.prettyprint.lang-html
code.
<button (click)="addTodo(todotext.domElement.value)">Add Todo</button>
p And then create the doneTyping() method on TodoList and handle adding the todo text.
pre.prettyprint.lang-javascript
code.
doneTyping($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
.l-main-section
h2#section-final-code Final Code
pre.prettyprint.lang-javascript
code.
//ES5
function TodoList() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
this.doneTyping = function($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
TodoList.annotations = [
new angular.Component({
selector: "todo-list"
}),
new angular.View({
template:
'<ul>' +
'<li *for="#todo of todos">' +
'{{ todo }}' +
'</li>' +
'</ul>' +
'<input #textbox (keyup)="doneTyping($event)">' +
'<button (click)="addTodo(textbox.domElement.value)">Add Todo</button>',
directives: [angular.For, angular.If]
})
];
document.addEventListener("DOMContentLoaded", function() {
angular.bootstrap(TodoList);
});
pre.prettyprint.lang-typescript
code.
//TypeScript
import {Component, View, bootstrap, For, If} from 'angular2/angular2';
@Component({
selector: 'todo-list'
})
@View({
template: `
<ul>
<li *for="#todo of todos">
{{ todo }}
</li>
</ul>
<input #todotext (keyup)="doneTyping($event)">
<button (click)="addTodo(todotext.domElement.value)">Add Todo</button>
`,
directives: [For, If]
})
class TodoList {
todos: Array;
constructor() {
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
}
addTodo(todo: string) {
this.todos.push(todo);
}
doneTyping($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
bootstrap(TodoList);