Raising events from WorkoutRunnerComponent

Look at the EventEmitter declaration. These have been declared with the type parameter. The type parameter on EventEmitter signifies the type of data emitted.

Let's add the event implementation to workout-runner.component.ts, starting from the top of the file and moving down.

Add this statement to the end of the start function:

this.workoutStarted.emit(this.workoutPlan);

We use the emit function of  EventEmitter  to raise a workoutStarted event with the current workout plan as an argument.

To pause, add this line to raise the exercisePaused event:

this.exercisePaused.emit(this.currentExerciseIndex); 

To resume, add the following line:

this.exerciseResumed.emit(this.currentExerciseIndex); 

Each time, we pass the current exercise index as an argument to emit when raising the exercisePaused and exerciseResumed events.

Inside the startExerciseTimeTracking function, add the highlighted code after the call to startExercise:

this.startExercise(next); 
this.exerciseChanged.emit(new ExerciseChangedEvent(next, this.getNextExercise()));

The argument passed contains the exercise that is going to start (next) and the next exercise in line (this.getNextExercise()).

To the same function, add the highlighted code:

this.tracker.endTracking(true); 
this.workoutComplete.emit(this.workoutPlan); 
this.router.navigate(['finish']); 

The event is raised when the workout is completed.

In the same function, we raise an event that communicates the workout progress. Add this statement:

--this.workoutTimeRemaining; 
this.exerciseProgress.emit(new ExerciseProgressEvent( 
    this.currentExercise, 
this.exerciseRunningDuration,
this.currentExercise.duration -this.exerciseRunningDuration, this.workoutTimeRemaining));

That completes our eventing implementation.

As you may have guessed, WorkoutAudioComponent now needs to consume these events. The challenge here is how to organize these components so that they can communicate with each other with the minimum dependency on each other.