In this section comes the real action of forms in Angular applications. Forms are at the heart of any application and are the main building blocks to gather, view, capture, and process data provided by the users. We will continue to use the Bootstrap library to enhance the design of our forms in this section.

Angular provides two different approaches to building forms inside our apps.

The two approaches provided by Angular for building forms are as follows:

• Template-driven forms: HTML and data binding defined in template files
• Reactive or model-driven forms, using model and validation in the Component class files

The main difference between reactive forms and template-driven forms, when it comes to the template, is in the data binding. In template-driven forms, we use two-way data binding to bind our data model directly to the form elements. On the other hand, with reactive forms, we bind our data model to the form itself (as opposed to its individual form elements).

We will explore each of these approaches in detail, learn about the pros and cons of the approaches, and finally, we will build some forms using both approaches. Let's roll.