Understanding Two-Way Data Binding and Reactive Forms in Angular

When building single-page applications, we will often need a user to input data of some sort using a form. Angular uses a two-way data binding process to bind values that are entered on a form to variables within a component itself. This process is two-way because Angular will take care of synchronizing what is shown in the DOM with the member variables of a component. So, if we change a value programmatically within our code, this value will be updated in the HTML. Similarly, when a user modifies the HTML values, these values will automatically update our class member variables.

Angular actually has two different methods of creating two-way data binding forms:

The first method is named template forms, which allows us to bind an input control directly to a property on our class.

<input type="text" [(ngModel)]="name" /> 

Here, we have an input control within our HTML template, which uses the [(ngModel)] attribute with a value of "name".