The goal of this chapter is to provide a way to keep track of all user activities within a task management application. For that purpose, we'll need a system that will allow us to log activities within components and access previously logged activities.

Within this chapter, we'll only track activities on projects. However, the activity tracker can be used in any feature within our application. We're going to use TypeScript discriminated unions to describe our activities. Let's jump right into it and start by creating the model used within our new activities feature.

Let's open our model file, located in src/app/model.ts, and add the following changes:

…
export type ActivityAlignment = 'left' | 'right';

export interface ActivitySliderSelection {
  start: number;
  end: number;
}

export interface...