Displaying the remaining workout duration using pipes

It will be nice if we can tell the user the time left to complete the workout and not just the duration of the exercise in progress. We can add a countdown timer somewhere in the exercise pane to show the overall time remaining.

The approach that we are going to take here is to define a component property called workoutTimeRemaining. This property will be initialized with the total time at the start of the workout and will reduce with every passing second until it reaches zero. Since workoutTimeRemaining is a numeric value, but we want to display a timer in the hh:mm:ss format, we need to make a conversion between the seconds data and the time format. Angular pipes are a great option for implementing such a feature.