Understanding forms with an example

Let us explore the world of angular forms by creating one. We will create a page that lists the tasks in a table and allows for adding new ones. While we can do all of this in a single component, it's best to strive for the separation of concern. Thus, we split the logic between two components, one for listing the tasks and another for adding tasks by means of a form:

The task page for the form

We use a template-driven approach here, so we rely on FormsModule, which needs to be imported. Here's how we can build our project:

ng new forms-demo
cd forms-demo
npm install bootstrap@3 --save
ng serve

We added a bootstrap dependency to our project. Bootstrap, though not really required, does help with building good form layouts.

Update the AppModule import array with a reference to the FormsModule added:

imports: [ BrowserModule,  FormsModule ]

Let's add the two components to our project, one for listing tasks and the other for adding them. We require TaskListComponent...