Two-way data binding with ngModel (中文：使用 ngModel 的 雙向繫結)

當開發數據輸入表單時，通常都會顯示 data property 並在用戶進行更改時更新該 property

Two-way data binding 要使用 NgModel directive 會更容易

FormsModule 是使用 NgModel 必須匯入的項目
在使用 NgModel directive 達到雙向資料綁定前，你必須要匯入 FormsModule 到 @NgModule 的 imports 清單
https://angular.io/guide/template-syntax#ngmodel---two-way-binding-to-form-elements-with-ngmodel

Step1：匯入 FormsModule

src/app/app.module.ts
-----
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 匯入點

@NgModule({
imports: [
        BrowserModule,
        FormsModule // 匯入點
    ],
})
export class AppModule { }

Step2：添加變數和 html 標籤

app\app.component.ts
-----
export class AppComponent implements OnInit {
    something = '我是something';
    showMyValue = '我是showMyValue';
}

app\app.component.html
-----
<input type="text" [(ngModel)]="something">
{{something}}
<input type="text" (input)="showMyValue = $event.target.value">
{{showMyValue}}

顯示

這邊可以看到雙向繫結和單純使用 click 事件的差異，使用 click 事件初始並無法綁定值

Step3：讓第二個 input 綁定值

app\app.component.html
-----
<input type="text" [(ngModel)]="something">
{{something}}
<input type="text" [value]="showMyValue" (input)="showMyValue = $event.target.value">
{{showMyValue}}

顯示

ngModel directive 幫你隱藏了繁重的細節，讓你只要使用 ngModel 匯入和 ngModelChange 輸出 就可以了！
https://angular.io/guide/template-syntax#ngmodel---two-way-binding-to-form-elements-with-ngmodel

Step4：將 [(ngModel)]="something" ，拆開

app\app.component.html
-----
<input type="text" (ngModel]="something" (ngModelChange)="something = $event">
{{something}}
<input type="text" [value]="showMyValue" (input)="showMyValue = $event.target.value">
{{showMyValue}}

這種寫法，就可以讓雙向繫結的 改變事件，添加自定義事件

後話

data binding 是傳遞參數最重要的橋樑，原先是打算在 3 篇內寫完，但是看完 Angular 官網再實際撰寫，發現每一個 data binding 方法介紹，都有些許是還未使用到的，故消化吸收後再吐出來，幾乎都超過原先想撰寫內容，並幾乎都超過 300 字太多了！就變成了 data binding 六連發XD~

DAY10-Angular6之data binding-Attribute
這篇是最少人看的(不算意外畢竟在JS的世界~)，但私心推薦一下，它真的不好懂，但看懂可以避免掉 Attribute 和 Property 的誤區，不至於滿頭問號！