+ add hint template to timepicker-dial component (#111)

Agranom · Feb 16, 2019 · 479f311 · 479f311
1 parent 5bafde4
commit 479f311
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 2 deletions.
diff --git a/...aterial-timepicker/components/timepicker-dial/ngx-material-timepicker-dial.component.html b/...aterial-timepicker/components/timepicker-dial/ngx-material-timepicker-dial.component.html
@@ -25,5 +25,8 @@
                                         [hours]="hours" [minutes]="minutes" [selectedHour]="hour"
                                         (periodChanged)="changePeriod($event)"></ngx-material-timepicker-period>
     </div>
-    <small class="timepicker-dial__hint" *ngIf="isEditable">* use arrows (<span>&#8645;</span>) to change the time</small>
+    <div *ngIf="isEditable">
+        <ng-container *ngTemplateOutlet="editableHintTmpl ? editableHintTmpl : editableHintDefault"></ng-container>
+        <ng-template #editableHintDefault><small class="timepicker-dial__hint"> * use arrows (<span>&#8645;</span>) to change the time</small></ng-template>
+    </div>
 </div>
diff --git a/.../material-timepicker/components/timepicker-dial/ngx-material-timepicker-dial.component.ts b/.../material-timepicker/components/timepicker-dial/ngx-material-timepicker-dial.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, TemplateRef} from '@angular/core';
 import {TimePeriod} from '../../models/time-period.enum';
 import {TimeUnit} from '../../models/time-unit.enum';
 import {TimepickerTime} from '../../timepicker-time.namespace';
@@ -18,6 +18,7 @@ export class NgxMaterialTimepickerDialComponent implements OnChanges {
     hours: ClockFaceTime[];
     minutes: ClockFaceTime[];
 
+    @Input() editableHintTmpl: TemplateRef<Node>;
     @Input() hour: number | string;
     @Input() minute: number | string;
     @Input() format: number;

diff --git a/src/app/material-timepicker/ngx-material-timepicker.component.html b/src/app/material-timepicker/ngx-material-timepicker.component.html
@@ -7,6 +7,7 @@
                                           [period]="selectedPeriod" [activeTimeUnit]="activeTimeUnit"
                                           [minTime]="minTime" [maxTime]="maxTime"
                                           [isEditable]="enableKeyboardInput"
+                                          [editableHintTmpl]="editableHintTmpl"
                                           [minutesGap]="minutesGap"
                                           (periodChanged)="changePeriod($event)"
                                           (timeUnitChanged)="changeTimeUnit($event)"

diff --git a/src/app/material-timepicker/ngx-material-timepicker.component.ts b/src/app/material-timepicker/ngx-material-timepicker.component.ts
@@ -49,6 +49,7 @@ export class NgxMaterialTimepickerComponent implements OnInit, OnDestroy {
     animationState: AnimationState;
 
     @Input() cancelBtnTmpl: TemplateRef<Node>;
+    @Input() editableHintTmpl: TemplateRef<Node>;
     @Input() confirmBtnTmpl: TemplateRef<Node>;
     @Input('ESC') isEsc = true;
     @Input() enableKeyboardInput: boolean;