Exercises list views

We are going to follow the same approach for the Exercises list view as we did for the Workouts list view, except that in this case, we will actually be implementing two views: one for the Exercises component (which will display in the main content area when a user navigates to that component) and one for the LeftNavExercisesComponent exercises context menu (which will display when the user navigates to the Workouts component to create or edit a workout).

For the Exercises component, we will follow an approach that is almost identical to what we did to display a list of workouts in the Workouts component. So, we won't show that code here. Just add the files for exercises.component.ts and exercises.component.html from checkpoint 4.4.

When you are done copying the files, click on the Exercises link in the left navigation to load the 12 exercises that you have already configured in WorkoutService.

As with the Workouts list, this sets up the navigation to the exercise detail page. Clicking on an item in the exercises list takes us to the exercise detail page. The selected exercise name is passed as part of the route/URL to the exercise detail page.

In the final list view, we will add a list of exercises that will display in the left context menu for the Workout Builder screen. This view is loaded in the left navigation when we create or edit a workout. Using Angular's component-based approach, we will update the leftNavExercisesComponent and its related view to provide this functionality. Just add the files for left-nav-exercises.component.ts and left-nav-exercises.component.html from the trainer/src/app/navigation folder in checkpoint 4.4.

Once you are done copying those files, click on the New Workout button on the sub-navigation menu in the Workout Builder and you will now see a list of exercises displayed in the left navigation menu—exercises that we have already configured in WorkoutService.

Time to add the ability to load, save, and update exercise/workout data!