Most of the hard work has already been done while defining the model and implementing the component. Now, we just need to skin the HTML using the super-awesome data binding capabilities of Angular. It's going to be simple, sweet, and elegant!
For the 7 Minute Workout view, we need to show the exercise name, the exercise image, a progress indicator, and the time remaining. Replace the local content of the workout-runner.component.html file with the content of the file from the Git branch checkpoint2.2, (or download it from http://bit.ly/ng6be-2-2-workout-runner-component-html). The view HTML looks as follows:
<div class="row">
<div id="exercise-pane" class="col-sm">
<h1 class="text-center">{{currentExercise.exercise.title}}</h1>
<div class="image-container row">
<img class="img-fluid col-sm" [src]="'/assets/images/' +
currentExercise.exercise.image" />
</div...