現在位置: ホーム / みらくるブログ / Angularでマウスイベントをハンドル

Angularでマウスイベントをハンドル

Angluarを使ってボタン要素を追加し、マウスのクリックイベントをハンドルする方法をコードを交えて紹介します。
Angularでマウスイベントをハンドル

準備

プロジェクトを新規作成します。ここでは、app1という名前をつけます。ディレクトリapp1が作成され、その下にアプリケーションの雛形を構成ファイル群が生成されます。

$ ng new app1
$ cd app1; npm start

2行目のnpm startコマンドでWebサーバが立ち上がり、ソースコードがビルドされ、Webアプリとして閲覧できるようになります。閲覧時のURLはhttp://localhost:4200です。

なお、筆者の環境では、開発マシン(上記コマンドラインを実行しているマシン)とデスクトップマシン（ブラウザを実行するマシン）が別です。sshで開発用マシン(dev-machineとします)にログインして作業しています。上記startコマンドで起動すると開発用のマシン上のブラウザからしかアクセス出来ません。そのため、デスクトップマシンで以下のようにsshを利用してポートフォワーディングしています。これでデスクトップマシンのブラウザでlocalhostの4200ポートにアクセスすると開発用マシンの4200ポートにsshを経由して通信できるようになります。

$ ssh -L 4200:localhost:4200 -N dev-machine
LinuxへのAngularのインストール方法についてはこちらの記事を参照ください。

この記事に作成で使用したソフトウェアのバージョンは次のとおりです。

  • Ubuntu 16.04 LTS
  • Nodejs 6.10.2
  • Angluar CLI 1.0.1

ボタン要素を追加

それではボタンを追加してみます。要素を追加するには、src/app/app.component.htmlを編集します。このファイルは表示用HTMLのテンプレートで、デフォルトでは次のようになっています。

<h1>
  {{title}}
</h1>

以下の記述を末尾に追加します。静的な要素については通常のHTMLと同じです。

<button> BUTTON </button>

ブラウザでは以下のように表示されています。ボタンの部分に関しては期待どおりです。

ang-bt1.png

 {{title}}の部分がapp works!になっています。このtitleは、src/app/app.component.tsのAppComponentクラスで定義されている変数です。{{ }}は、変数を展開するAngularの記法です。代入されている文字列を変更するとブラウザ上の文字列も変化します。

export class AppComponent {                              
  title = 'app works!';                                            
}                                        

 ボタン要素のハンドラ追加

ではボタンがクリックされたときのハンドラを追加します。app.component.htmlのbuttonタグに以下のように(click)=を追加します。

<button (click)="click()"> BUTTON </button>

このボタン要素がクリックされた場合、click()という関数が実行されます。関数本体は、app.component.tsのAppComponentクラスの中に以下のように記載します。

export class AppComponent {
  title = 'app works!';

  click() {
    this.title = "Clicked";
  } 
}

ブラウザで実際にボタンをクリックすると次のようにタイトルがClickedになり、クリックイベントがハンドルされたことが分かります。クラス内の変数titleは、Angularのデータバインディング機能によりDOM要素と結びついているので、変数の値を変更するだけでブラウザにも即反映されました。

ang-bt2.png