Implementing the Workout template

Now, copy the workout.component.html files from the workout-builder/workout folder under trainer/src/app in checkpoint 4.5. Run the app, navigate to /builder/workouts, and double-click on the 7 Minute Workout tile. This should load the 7 Minute Workout details with a view similar to the one shown at the start of the Building a workout section.

We will be dedicating a lot of time to this view, so let's understand some specifics here.

The exercise list div (id="exercise-list") lists the exercises that are part of the workout in order. We display them as top-to-bottom tiles in the left part of the content area. Functionally, this template has:

• The Delete button to delete the exercise
• Reorder buttons to move the exercise up and down the list, as well as to the top and bottom

We use ngFor to iterate over the list of exercises and display them:

<div *ngFor="let exercisePlan of workout.exercises; let i=index" class="exercise-item"> 

You will notice that we are using the * asterisk in front of ngFor,  which is shorthand for the <template> tag. We are also using let to set two local variables: exerisePlan to identify an item in the list of exercises and i to set up an index value that we will use to show a number for the exercises as they are displayed on the screen. We will also use the index value to manage reordering and deleting exercises from the list.

The second div element for workout data (id="workout-data") contains the HTML input element for details such as name, title, and rest duration, and a button to save workout changes.

The complete list has been wrapped inside the HTML form element so that we can make use of the form-related capabilities that Angular provides. So, what are these capabilities?