Exposing WorkoutRunnerComponent events

Till now we have only explored how to consume events. Angular allows us to raise events too. Angular components and directives can expose custom events using the EventEmitter class and the @Output decorator.

Add these event declarations to WorkoutRunnerComponent at the end of the variable declaration section:

workoutPaused: boolean; 
@Output() exercisePaused: EventEmitter<number> = 
    new EventEmitter<number>();
@Output() exerciseResumed: EventEmitter<number> = 
    new EventEmitter<number>()
@Output() exerciseProgress:EventEmitter<ExerciseProgressEvent> = 
    new EventEmitter<ExerciseProgressEvent>();
@Output() exerciseChanged: EventEmitter<ExerciseChangedEvent> = 
    new EventEmitter<ExerciseChangedEvent>();
@Output() workoutStarted: EventEmitter<WorkoutPlan> = 
    new EventEmitter<WorkoutPlan>();
@Output() workoutComplete: EventEmitter<WorkoutPlan> = 
    new EventEmitter<WorkoutPlan>();

The names of the events are self-explanatory, and within our WorkoutRunnerComponent implementation, we need to raise them at the appropriate times.

Remember to add the ExerciseProgressEvent and ExerciseChangeEvent imports to the model already declared on top. And add the Output and EventEmitter imports to @angular/core.

Let's try to understand the role of the @Output decorator and the EventEmitter class.