nts-ng2-components/src/components/ui/clock/clock.component.html

Paquete de componentes para Angular2 desarrollado por NITSNETS.

<div class="clock-container">

  <div class="clock-mode clock-am" [ngClass]="{'selected': mode === 'AM'}" (click)="selectMode('AM')"> AM </div>
  <div class="clock-mode clock-pm" [ngClass]="{'selected': mode === 'PM'}" (click)="selectMode('PM')"> PM </div>

  <div class="clock-circle">
    <div class="clock-hour-tick" [style.transform]="'rotate('+hourDegrees+'deg)'"> </div>

    <div class="clock-minute-tick" [style.transform]="'rotate('+minuteDegrees+'deg)'"> </div>
    <div class="clock-center"> </div>

    <div class="clock-hours">
      <span *ngFor="let hour of hours; let i = index"
        [class]="'clock-number clock-hour clock-hour-' + i"
        [ngClass]="{'selected': hourIndex === i}"
        (click)="selectHour(i)"
      >
        {{hour}}
      </span>
    </div>
    <div class="clock-minutes">
      <span *ngFor="let minute of minutes; let i = index"
        [class]=" 'clock-number clock-minute clock-minute-' + i"
        [ngClass]="{'selected': minuteIndex === i}"
        (click)="selectMinute(i)"
      >
        {{minute}}
      </span>
    </div>
  </div>
</div>