[(ngModel)] directive

Two-way data binding with the NgModel directive makes easy to display a data property and update that property when the user makes changes.

Source

<input [(ngModel)]="name">
{{ name }}

Result

Before using the ngModel directive in a two-way data binding, you must import the FormsModule and add it to the NgModule imports list.

The [(ngModel)] syntax can only set a data-bound property. If you need to do something more or something different, you can write the expanded form.

The following contrived demo forces the input value to uppercase.

Source

<input [ngModel]="name"
       (ngModelChange)="setUppercaseName($event)">
{{ name }}

export class AppComponent {
  name: string;

  setUppercaseName(name: string) {
    this.name = name.toUpperCase();
  }
}

Result