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

Bringing it to life

So far, we've covered the rendering of the slider background, as well as the rendering of the activity indicators. We've also generated ticks and displayed them with a grid line and a label, to display the calendar time of each tick.

Well, that does not really make a slider, does it? Of course, we also need to handle user input, and make the slider interactive, so that users can select a time range that they want to display the activities for.

To do this, add the following changes to the component class:

import {  ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener,  Input, OnChanges, Output, SimpleChanges, ViewEncapsulation} from '@angular/core';import {Activity, ActivitySliderSelection} from '../../model'; ...

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