feat(timepicker): user can change default time with input

src/app/material-timepicker/components/timepicker-face/ngx-material-timepicker-face.component.ts

@@ -4,8 +4,8 @@ import {
     ElementRef,
     EventEmitter,
     HostListener,
-    Input,
-    Output,
+    Input, OnChanges,
+    Output, SimpleChanges,
     ViewChild
 } from '@angular/core';
 import {ClockFaceTime} from '../../models/clock-face-time.interface';
@@ -16,7 +16,7 @@ import {TimeUnit} from '../../models/time-unit.enum';
     templateUrl: './ngx-material-timepicker-face.component.html',
     styleUrls: ['./ngx-material-timepicker-face.component.scss']
 })
-export class NgxMaterialTimepickerFaceComponent implements AfterViewInit {
+export class NgxMaterialTimepickerFaceComponent implements AfterViewInit, OnChanges {
 
     timeUnit = TimeUnit;
 
@@ -35,6 +35,12 @@ export class NgxMaterialTimepickerFaceComponent implements AfterViewInit {
         this.setClockHandPosition();
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes && changes['selectedTime'].currentValue) {
+            this.selectedTime = this.faceTime.find(time => time.time === changes['selectedTime'].currentValue.time);
+        }
+    }
+
     @HostListener('touchstart', ['$event'])
     @HostListener('mousedown', ['$event'])
     onMousedown(e: MouseEvent | TouchEvent) {

src/app/material-timepicker/directives/ngx-timepicker.directive.ts

@@ -4,6 +4,7 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {Subscription} from 'rxjs';
 import {TimeFormat} from '../models/time-format.enum';
 import * as moment_ from 'moment';
+import {NgxMaterialTimepickerService} from '../services/ngx-material-timepicker.service';
 //Workaround for error "Cannot call a namespace ('moment')
 const moment = moment_;
 
@@ -13,8 +14,6 @@ const VALUE_ACCESSOR = {
     multi: true
 };
 
-const TWENTY_FOUR_HOUR_FORMAT = 24;
-
 @Directive({
     selector: '[ngxTimepicker]',
     providers: [VALUE_ACCESSOR],
@@ -33,7 +32,15 @@ export class TimepickerDirective implements AfterViewInit, ControlValueAccessor,
     private onChange: (value: any) => void = () => {
     };
 
-    constructor(private elementRef: ElementRef) {
+    constructor(private elementRef: ElementRef,
+                private timepickerService: NgxMaterialTimepickerService) {
+    }
+
+    private _format: TimeFormat;
+
+    @Input()
+    set format(value: number) {
+        this._format = value === 24 ? TimeFormat.TWENTY_FOUR : TimeFormat.TWELVE;
     }
 
     private _value: string;
@@ -45,14 +52,8 @@ export class TimepickerDirective implements AfterViewInit, ControlValueAccessor,
 
     set value(value: string) {
         this._value = formatTime(value, this._format);
-        this.elementRef.nativeElement.value = value ? formatTime(value, this._format) : ''
-    }
-
-    private _format: TimeFormat;
-
-    @Input()
-    set format(value: number) {
-        this._format = value === TWENTY_FOUR_HOUR_FORMAT ? TimeFormat.TWENTY_FOUR : TimeFormat.TWELVE;
+        this.elementRef.nativeElement.value = value ? formatTime(value, this._format) : '';
+        this.timepickerService.defaultTime = formatTime(value);
     }
 
     onTouched = () => {
@@ -100,5 +101,5 @@ export class TimepickerDirective implements AfterViewInit, ControlValueAccessor,
 }
 
 function formatTime(time: string, format = TimeFormat.TWELVE): string {
-    return moment(time, 'hh:mm a').format(<string>format);
+    return moment(time, format).format(format);
 }

src/app/material-timepicker/services/ngx-material-timepicker.service.ts

@@ -1,57 +1,65 @@
 import {Injectable} from '@angular/core';
 import {ClockFaceTime} from '../models/clock-face-time.interface';
-import {Observable, BehaviorSubject} from 'rxjs';
+import {BehaviorSubject, Observable} from 'rxjs';
 import {TimePeriod} from '../models/time-period.enum';
+import * as moment from 'moment';
+import {TimeFormat} from '../models/time-format.enum';
 
 const DEFAULT_HOUR: ClockFaceTime = {
-	time: 12,
-	angle: 360
+    time: 12,
+    angle: 360
 };
 const DEFAULT_MINUTE: ClockFaceTime = {
-	time: '00',
-	angle: 360
+    time: '00',
+    angle: 360
 };
 
 @Injectable()
 export class NgxMaterialTimepickerService {
 
-	private hourSubject = new BehaviorSubject<ClockFaceTime>(DEFAULT_HOUR);
-	private minuteSubject = new BehaviorSubject<ClockFaceTime>(DEFAULT_MINUTE);
-	private periodSubject = new BehaviorSubject<TimePeriod>(TimePeriod.AM);
+    private hourSubject = new BehaviorSubject<ClockFaceTime>(DEFAULT_HOUR);
+    private minuteSubject = new BehaviorSubject<ClockFaceTime>(DEFAULT_MINUTE);
+    private periodSubject = new BehaviorSubject<TimePeriod>(TimePeriod.AM);
 
-	constructor() {
-	}
+    set hour(hour: ClockFaceTime) {
+        this.hourSubject.next(hour);
+    }
 
-	set hour(hour: ClockFaceTime) {
-		this.hourSubject.next(hour);
-	}
+    get selectedHour(): Observable<ClockFaceTime> {
+        return this.hourSubject.asObservable();
+    }
 
-	get selectedHour(): Observable<ClockFaceTime> {
-		return this.hourSubject.asObservable();
-	}
+    set minute(minute: ClockFaceTime) {
+        this.minuteSubject.next(minute);
+    }
 
-	set minute(minute: ClockFaceTime) {
-		this.minuteSubject.next(minute);
-	}
+    get selectedMinute(): Observable<ClockFaceTime> {
+        return this.minuteSubject.asObservable();
+    }
 
-	get selectedMinute(): Observable<ClockFaceTime> {
-		return this.minuteSubject.asObservable();
-	}
+    set period(period: TimePeriod) {
+        this.periodSubject.next(period);
+    }
 
-	set period(period: TimePeriod) {
-		this.periodSubject.next(period);
-	}
+    get selectedPeriod(): Observable<TimePeriod> {
+        return this.periodSubject.asObservable();
+    }
 
-	get selectedPeriod(): Observable<TimePeriod> {
-		return this.periodSubject.asObservable();
-	}
+    get fullTime(): string {
+        const hour = this.hourSubject.getValue().time;
+        const minute = this.minuteSubject.getValue().time;
+        const period = this.periodSubject.getValue();
 
-	get fullTime(): string {
-		const hour = this.hourSubject.getValue().time;
-		const minute = this.minuteSubject.getValue().time;
-		const period = this.periodSubject.getValue();
+        return `${hour}:${minute} ${period}`;
+    }
 
-		return `${hour}:${minute} ${period}`;
-	}
+    set defaultTime(time: string) {
+        const defaultTime = moment(time, TimeFormat.TWENTY_FOUR).toDate();
 
+        if (moment(defaultTime).isValid()) {
+            this.hour = {...DEFAULT_HOUR, time: defaultTime.getHours()};
+            this.minute = {...DEFAULT_MINUTE, time: defaultTime.getMinutes() === 0 ? '00' : defaultTime.getMinutes()};
+            this.period = <TimePeriod>time.substr(time.length - 2).toUpperCase();
+        }
+    }
 }