We've already implemented the basics of the component and laid the groundwork for drawing time information into the coordinate system of our component. It's time to use our projection functions and draw our activities as indicators on the slider using SVG.
Let's open the template of our activity slider in src/app/activities/activity-slider/activity-slider.component.html, and add the following code:
<svg width="100%" height="70px"> <rect x="0" y="30" width="100%" height="40" class="slide"></rect> <rect *ngFor="let activity of activities" [attr.x]="projectTime(activity.time) + '%'" height="40" width="2px" y="30" class="activity"></rect></svg>
Since we need to create an indicator for every activity within our activities ...
