Angular の Binding 備忘録

～BindingはAngularの重要な概念の1つです～

AngularのBindingについて改めて調べることがあったので、備忘録として。
ざっくり大筋のイメージを書いてあるので粗さには目をつぶってほしい。

#AngularにおけるBindingとは
component(TypeScript)とtemplate(HTML)間で情報を渡すこと。
AngularのBindingは他のフレームワークと比べて簡単。
ビューモデルなど難しい定義は必要ない。

Angularには大きくわけて3つのBindingタイプがある。
1.Data Binding
2.Event Binding
3.Two-way Binding

##1.Data Binding：データバインディング
TypeScriptからHTMLにデータを単方向に送るバインディング。
Data BindingにはInterpolation(補間) Binding とProperty(プロパティ) Bindingがある。

####〇Interpolation Binding (補間バインディング)
Interpolation Bindingはstringのみを対象とし、データを含めることができない。
つまりboolean(true/false)だとかが無効になってしまう。
全てstringとしてレンダリングされる。
そしてテンプレートリテラルとして参照されるので、連結・足し算・メソッド適用などが可能。

使い方.
バインドには二重波括弧 {{}} を使用する。

例.

TypeScript

name = "Alice";
message = "Hello";

HTML

<p>{{message}}</p>             // Hello
<p>{{" Hello " + name }}</p>   // Hello Alice
<p>{{name.length}}</p>         // 5
<p>{{ 2 + 3 }}</p>             // 5

####〇Property Binding
Property Bindingはstring + dataの情報をバインドをしてくれる。
Property Bindingの場合、属性やクラス、スタイルなどにもバインディングができる。
間違えてInterpolation Binding{{}}で書くと無視されるので注意する。

使い方.
バインドには角括弧 [] を使用する。

HTMLでは、バインド対象の属性等に角括弧で囲み、
ダブルクオーテーションで囲まれたプロパティをイコールでつなぐ。
TypeScriptでは、対応するプロパティを値を定義する。

例.
disabled属性がtrueになり、テキストボックスが非活性になる。

HTML

<input type = "text" [disabled]="isDisabled">

Typescript

isDisabled = true;

これにはもう少し細かい話があるが今回は割愛。
([attr.xxx] , [class.xxx] , [style.xxx]など)

##2.Event Binding：イベントバインディング
HTMLからTypeScriptにデータを単方向に送るバインディング。
Event BindingはHTML上のeventの情報をバインドしてくれる。
つまりHTML上で起こった変化(event : input,submit,blur...)をTypeScriptに送ってくれる。

使い方.
バインドには丸括弧()を使用する。
HTML上でイベント名を書く際に丸括弧で囲み、
ダブルクオーテーションで囲んだTypeScript上の呼び出したいメソッド名をイコールでつなぐ。
TypeScriptには対応するメソッドを書いておく。

例.
1.Clickボタンだけ表示される
2.Clickボタンを押す
3.HelloがClickボタンの下に表示される

HTML

<button (click)="change()"> Click </button>
<p>{{message}}</p>

Typescript

message = "";              //初期値

change(){
    this.message="Hello";  //Clickボタン押下時にmessageプロパティの中身を"Hello"にする
}

$eventを使うことでイベントに関する情報を取得出来て～という話も今回は割愛。

##3.Two-way Binding：双方向バインディング
HTMLとTypeScriptにデータを双方向に送るバインディング。
つまりHTMLとTypeScriptでデータが同期される。
双方向バインディングを有効にするには ngModel ディレクティブが必要。
また、ngModelを有効にするにはFormModuleのインポートが必要。

使い方.
バインドには [( )] を使用する。(よくバナナ in ボックスと呼ばれる)
HTMLでは、イベントタグ内に[(ngModel)]を書き、
ダブルクオーテーションで囲んだ同期したいプロパティをイコールでつなぐ。
TypeScriptでは、FormModuleをapp.module.tsにインポートしておく。
下記例の場合、もし初期値を設定したければ設定しておく。なくてもいい。

例.
1.テキストボックス及びその下に Hey が表示されている
2.テキストボックスの文字を変化させる
3.1文字ずつテキストボックス下の文字も変化する = 同期している！

HTML

<input [(ngModel)]="message" >
<p>{{message}}</p>

Typescript

message = "Hey";              //初期値(なくてもいい)

Typescript(app.module.ts)

import { FormsModule } from '@angular/forms';  //忘れないこと
...
@NgModule({
  imports: [
    FormsModule //忘れないこと
  ]
...

注：イベントが発生 ⇒ プロパティが更新 ⇒ 補間で表示　という流れになっている。
あくまでTwo-way Binding = Property Binding + Event Binding