Rendering activity indicators

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 ...

Get Mastering Angular Components now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.