※現在この方法は推奨されません

前回はngForを用いてリストの内容を表示しました。

今回はクリックイベントを追加してToDoリストのサンプルを作ります。

HTMLは見出しとこれから作成するToDoコンポーネントを配置します。

app.html

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.umd.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-all.umd.dev.js"></script>
        <script src="components/todo-component/todo-component.js"></script>
    </head>
    <body>
        <h1>Todo list</h1>
        <todo-component></todo-component>
    </body>
</html>

コンポーネントの実装は以下のように、ToDoリストの元データとクリックイベント発火時のメソッドが追加されています。

components/todo-component/todo-component.js

(function(app) {
    app.TodoComponent = ng.core
    .Component({
        selector: 'todo-component'
    })
    .View({
        templateUrl: 'components/todo-component/todo-component.template.html'
    })
    .Class({
        constructor: function() {
            this.todoList = [{'title': 'ToDo_01', 'complete': false},
                             {'title': 'ToDo_02', 'complete': false},
                             {'title': 'ToDo_03', 'complete': false},
                            ];
        },
        add: function(title) {
            var todo = {'title': title, 'complete': false};
            this.todoList.push(todo);
        }
    });
    document.addEventListener('DOMContentLoaded', function() {
        ng.platform.browser.bootstrap(app.TodoComponent);
    });
})(window.app || (window.app = {}));

テンプレートにはリスト表示と、新規追加用のフォームを配置します。

components/todo-component/todo-component.template.html

<li *ngFor="let todo of todoList">
    {{todo.title}}
</li>
<div>
    <input type="text" [(ngModel)]="todo"/>
    <button (click)="add(todo)">Add</button>
</div>

(click)="add(todo)"と書かれている部分がクリックイベントです

今回はクリックイベントを使いますが、この他にも

focus : マウスカーソルが重なった時
blur : マウスカーソルが外れた時

といったイベントにも適用できるようです。

毎度のことながら、動くサンプルはCodepenで見ることが出来ます。
https://codepen.io/puku0x/pen/BKeZeK

まとめ

Angular v2のクリックイベントを用いて、リストにデータを追加する処理を組み込みました。

以前紹介したデータバインディングの表記と合わせると

[()] : 双方向バインディング
[] : 単方向バインディング
() : イベント

...何だかややこしいですね。

今回作ったToDoサンプルは次回も使います。

ES5で書くAngular v2（４）「クリックイベント」

まとめ