使用過 AngularJS 1.x 的同學，應該很熟悉 ng-model 指令，通過該指令我們可能方便地實現資料的雙向繫結。而在 Angular 中，我們是通過 ngModel 指令，來實現雙向繫結。

使用雙向繫結

引入 FormsModule

import {FormsModule} from "@angular/forms"; 

@NgModule({ // ... 

imports: [
    BrowserModule,
    FormsModule
  ], // ... }) 

export class AppModule { }

使用 ngModel 指令

@Component
 
({
  selector: 'app-simple-form',
  template: `
    <div>
     {{message}}
     <input #myInput type="text" [(ngModel)]="message">
     <button (click)="onClick($event, myInput.value)">點選</button>
    </div>
  `,
  styles: []
})

export class SimpleFormComponent implements
 
 OnInit { // ...}

上面示例中，我們使用 [(ngModel)]="message" 語法實現資料的雙向繫結。該語法也稱作 Banana in the Box 語法，即香蕉在盒子裡 (比較形象生動，記憶該語法)。