So far, we've built a service to log activities and a slider component to select a time range and provide an overview using activity indicators. Since we needed to perform a lot of drawing tasks within the slider component, SVG was a perfect fit for this use case. To complete our activities component tree, we still need to render the activities that were selected using the activity slider component.
Let's continue to work on our activities component tree. We will create a new component that is responsible for rendering an individual activity within an activity timeline. Let's use the Angular CLI to create our activity component:
ng generate component --spec false -ve none -cd onpush activities/activity
Now, let's start with the component template. Open the file src/app/activities/activity/activity.component.html, and add the following...