O'Reilly logo

Mastering Angular Components by Gion Kunz

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required