unicorn-components/src/components/ui/clock/clock.component.html

<a target="_blank" href="https://getunicorn.io"><img src="https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2017/Jul/07/2615006260-5-nitsnetsstudios-ondemand-UNI_avatar.png" align="left"></a>

<div class="uni-clock__container">

    <div class="uni-clock__mode uni-clock__mode--am" [ngClass]="{
        'uni-clock__mode--selected': mode === 'AM',
        'uni-clock__mode--unavailable': !modeAvailability['AM']
    }" (click)="selectMode('AM')"> AM </div>
    <div class="uni-clock__mode uni-clock__mode--pm" [ngClass]="{
        'uni-clock__mode--selected': mode === 'PM',
        'uni-clock__mode--unavailable': !modeAvailability['PM']
    }" (click)="selectMode('PM')"> PM </div>

    <div class="uni-clock__circle">
        <div class="uni-clock__hour-tick" [style.transform]="'rotate('+hourDegrees+'deg)'"> </div>

        <div class="uni-clock__minute-tick" [style.transform]="'rotate('+minuteDegrees+'deg)'"> </div>
        <div class="uni-clock__center"> </div>

        <div class="uni-clock__hours">
            <span *ngFor="let hour of hours; let i = index" [class]="'uni-clock__number uni-clock__hour uni-clock__hour--' + i" [ngClass]="{
                'selected': hourIndex === i,
                'unavailable': !hoursAvailable[i]
            }" (click)="selectHour(i)">
                {{hour}}
            </span>
        </div>

        <div class="uni-clock__minutes">
            <span *ngFor="let minute of minutes; let i = index" [class]=" 'uni-clock__number uni-clock__minute uni-clock__minute--' + i" [ngClass]="{
                'selected': minuteIndex === i,
                'unavailable': !minutesAvailable[i]
            }" (click)="selectMinute(i)">
                {{minute}}
            </span>
        </div>
    </div>
</div>