Personal Trainer

The 7 Minute Workout app has been an excellent opportunity for us to learn about Angular. Working through the app, we have covered a number of Angular constructs. Still, there are areas such as Angular form support and client-server communication that remain unexplored. This is partially due to the fact that 7 Minute Workout, from a functional standpoint, has limited touch points with the end user. Interactions are limited to starting, stopping, and pausing the workout. Also, the app neither consumes nor produces any data (except workout history).

In this chapter, we plan to delve deeper into one of the two aforementioned areas, Angular form support. Keeping up with the health and fitness theme (no pun intended), we plan to build a Personal Trainer app. The new app will be an extension to 7 Minute Workout, allowing us to build our own customized workout plans that are not limited to the 7 Minute Workout plans we already have.

This chapter is dedicated to understanding Angular forms and how to put them to use as we build out our Personal Trainer app.

The topics that we will cover in this chapter are as follows:

• Defining Personal Trainer requirements: Since we are building a new app in this chapter, we start with defining the app requirements.
• Defining the Personal Trainer model: Any app design starts with defining its model. We define the model for Personal Trainer, which is similar to the 7 Minute Workout app built earlier.
• Defining the Personal Trainer layout and navigation: We define the layout, navigation patterns, and views for the new app. We also set up a navigation system that is integrated with Angular routes and the main view.
• Adding support pages: Before we focus on the form capability and build a Workout component, we build some supporting components for workout and exercise listing.
• Defining the Workout Builder component structure: We lay out the Workout Builder components that we will use to manage workouts.
• Building forms: We make extensive use of HTML forms and input elements to create custom workouts. In the process, we will learn more about Angular Forms. The concepts that we cover include:
  • Form types: The two types of form that can be built with Angular are template-driven and reactive. We're working with both template-driven and reactive forms in this chapter.
  • ngModel: This provides two-way data binding for template driven forms and allows us to track changes and validate form input.
  • Reactive Form Controls: These include the form builder, form control, form group, and form array. These are used to construct forms programmatically.
  • Data formatting: These are the CSS classes that permit us to style our feedback to the user.
  • Input validation: We will learn about the validation capabilities of Angular forms.