angular-material-clock-time-picker/src/app/time-picker/time-picker.component.html

This is time picker for angular material projects, for Angular Material 5.

<div id="time-picker">
  <div class="time-picker-header">
    <div class="time-picker-selected-time">
        <div class="time-picker-hour" (click)="clockType='hour';clockMaker()" [ngClass]="{'selected' : clockType == 'hour'}">{{hour}}</div>
        <span class="time-seprator">:</span>
        <div class="time-picker-minute" (click)="clockType='minute';clockMaker()" [ngClass]="{'selected' : clockType == 'minute'}">{{minute}}</div>
    </div>
    <div class="time-picker-selected-ampm">
      <div class="time-picker-am" (click)="ampm = 'AM';" [ngClass]="{'selected' : ampm == 'AM'}">AM</div>
      <div class="time-picker-pm" (click)="ampm = 'PM';" [ngClass]="{'selected' : ampm == 'PM'}">PM</div>
    </div>
  </div>
  <mat-dialog-content>
    <div class="time-picker-contet">
        <div class="time-picker-clock" (mousemove)="getDegree($event);" (mousedown)="isClicked = true;getDegree($event);" (mouseup)="isClicked = false;">
          <button *ngFor="let clock of clockObject" (click)="setArrow(clock);" [ngClass]="{'active' : nowTime == clock.time}" [ngStyle]="{top: clock.top,left: clock.left}">
            {{clock.time}}
          </button>
          <div class="time-picker-clock-origin"></div>
          <div id="tpc-arrow" class="time-picker-clock-arrow"></div>
        </div>
    </div>
  </mat-dialog-content>
  <div class="time-picker-footer">
    <mat-dialog-actions>
      <button mat-button [mat-dialog-close]="GetTime()">OK</button>
      <button mat-button mat-dialog-close>Cancel</button>
    </mat-dialog-actions>
  </div>
</div>