Angular forms

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, as 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, as follows:

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

Here, we have an input control within our HTML template, which is using the [(ngModel)] attribute with...