TypeScript 2.x By Example

Two-way binding

Using interpolation allows us to have one-way binding between the HTML template and component properties. There is an instance where one-way binding does not satisfy our requirements. We would want to make sure whether the user modified any value on the user interface that gets reflected in the component as well. This is called two-way binding. 

In Angular, two-way binding is achieved by using the ngModel directive. The following is a sample syntax of ngModel: 

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

The ngModel directive is enclosed in square brackets, which enclose parentheses and the model name. The square bracket indicates property binding from the component to the HTML input elements, and the parentheses indicate event binding to ...