Understanding Two-Way Data Binding and Reactive Forms in Angular
Learn about the two-way data binding process in Angular using template forms and Reactive forms.
We'll cover the following
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"
.
Get hands-on with 1200+ tech skills courses.