Template-driven forms

Angular has two different ways of working with forms: template-driven and reactive. First, let’s explore template-driven forms. As we can see by the name, we maximize the use of the capabilities of the HTML template to create and manage the data model linked to the form.

We will evolve our Gym Diary application to better exemplify this concept. In the following command line, we use the Angular CLI to create the new page component:

ng g c diary/new-entry-form-template

To access the new assignment form, we’ll refactor the journal page component so the Add New Entry button takes the user to the component we created.

Let’s add to the DiaryModule module the import of the framework module responsible for managing the application’s routes:

. . .
import { RouterModule } from '@angular/router';
@NgModule({
 declarations: [
   DiaryComponent,
   EntryItemComponent,
   ListEntriesComponent...