add appendToInput for ngx-template-field

src/app/app.component.html

@@ -274,6 +274,20 @@ <h3 class="ngx-material-timepicker-examples__title">Examples</h3>
                     </div>
                 </div>
             </section>
+            <section class="ngx-material-timepicker-examples__container ngx-material-timepicker-example">
+                <app-example-source-code [sourceCode]="appendToInputWithTimepickerField">Append to input</app-example-source-code>
+                <div class="ngx-material-timepicker-example__body">
+                    <p class="ngx-material-timepicker-example__description">
+                        Timepicker appends to ngx-timepicker-field.
+                    </p>
+                    <div class="ngx-material-timepicker-example__form-group">
+                        <ngx-timepicker-field [appendToInput]="true"></ngx-timepicker-field>
+                    </div>
+                    <div class="ngx-material-timepicker-example__form-group">
+                        <ngx-timepicker-field [appendToInput]="true" [format]="24"></ngx-timepicker-field>
+                    </div>
+                </div>
+            </section>
         </div>
     </main>
     <footer class="footer">

src/app/app.component.ts

@@ -215,4 +215,13 @@ export class AppComponent {
             <ngx-timepicker-field min="12:10 am" max="08:11 pm"></ngx-timepicker-field>
         </div>
     `;
+
+    appendToInputWithTimepickerField = `
+        <div class="ngx-timepicker-field-example">
+            <ngx-timepicker-field [appendToInput]="true"></ngx-timepicker-field>
+        </div>
+        <div class="ngx-timepicker-field-example">
+            <ngx-timepicker-field [appendToInput]="true" [format]="24"></ngx-timepicker-field>
+        </div>
+    `;
 }

src/app/material-timepicker/components/timepicker-field/ngx-timepicker-field.component.html

@@ -1,3 +1,13 @@
+<div class="ngx-timepicker-input-to-append" *ngIf="appendToInput">
+    <input [ngxTimepicker]="timepicker"
+           [format]="format"
+           [min]="min"
+           [max]="max"
+           [value]="timepickerTime"
+           [disabled]="false"
+           [disableClick]="false"
+    >
+</div>
 <div class="ngx-timepicker" [ngClass]="{'ngx-timepicker--disabled': disabled}">
     <ngx-timepicker-time-control
         class="ngx-timepicker__control--first"
@@ -30,7 +40,7 @@
         *ngIf="format !== 24"></ngx-timepicker-period-selector>
     <ngx-material-timepicker-toggle
         class="ngx-timepicker__toggle"
-        *ngIf="!controlOnly"
+        *ngIf="!controlOnly && !appendToInput"
         [ngClass]="{'ngx-timepicker__toggle--left': buttonAlign === 'left'}"
         [for]="timepicker"
         [disabled]="disabled">
@@ -39,6 +49,18 @@
             <ng-container *ngTemplateOutlet="toggleIcon || defaultIcon"></ng-container>
         </span>
     </ngx-material-timepicker-toggle>
+
+    <ngx-material-timepicker-toggle
+        class="ngx-timepicker__toggle"
+        *ngIf="!controlOnly && appendToInput"
+        [ngClass]="{'ngx-timepicker__toggle--left': buttonAlign === 'left'}"
+        (click)="onTimepickerToggle($event)"
+        [disabled]="disabled">
+        <span ngxMaterialTimepickerToggleIcon>
+            <!--suppress HtmlUnknownAttribute -->
+            <ng-container *ngTemplateOutlet="toggleIcon || defaultIcon"></ng-container>
+        </span>
+    </ngx-material-timepicker-toggle>
 </div>
 <ngx-material-timepicker
     [min]="min"
@@ -48,6 +70,7 @@
     [format]="format"
     [cancelBtnTmpl]="cancelBtnTmpl"
     [confirmBtnTmpl]="confirmBtnTmpl"
+    [appendToInput]="appendToInput"
     (timeSet)="onTimeSet($event)" #timepicker></ngx-material-timepicker>
 
 <ng-template #defaultIcon>

src/app/material-timepicker/components/timepicker-field/ngx-timepicker-field.component.scss

@@ -1,3 +1,15 @@
+.ngx-timepicker-input-to-append {
+    height: 0;
+
+    &>input {
+        height: 0;
+        width: 100%;
+        padding: 0;
+        border: 0;
+        outline: 0;
+    }
+}
+
 .ngx-timepicker {
     display: flex;
     align-items: center;

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

@@ -1,4 +1,15 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Output, TemplateRef } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    Inject,
+    Input,
+    OnDestroy,
+    OnInit,
+    Output,
+    TemplateRef,
+    ViewChild
+} from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgxMaterialTimepickerService } from '../../services/ngx-material-timepicker.service';
 import { Observable, Subject } from 'rxjs';
@@ -11,6 +22,7 @@ import { TIME_LOCALE } from '../../tokens/time-locale.token';
 import { TimepickerTimeUtils } from '../../utils/timepicker-time.utils';
 import { DateTime } from 'luxon';
 import { distinctUntilChanged, map, takeUntil, tap } from 'rxjs/operators';
+import { NgxMaterialTimepickerComponent } from '../../ngx-material-timepicker.component';
 
 @Component({
     selector: 'ngx-timepicker-field',
@@ -51,6 +63,7 @@ export class NgxTimepickerFieldComponent implements OnInit, OnDestroy, ControlVa
     @Input() controlOnly: boolean;
     @Input() cancelBtnTmpl: TemplateRef<Node>;
     @Input() confirmBtnTmpl: TemplateRef<Node>;
+    @Input() appendToInput = false;
 
     @Input()
     set format(value: number) {
@@ -106,6 +119,8 @@ export class NgxTimepickerFieldComponent implements OnInit, OnDestroy, ControlVa
         return this._defaultTime;
     }
 
+    @ViewChild('timepicker', { static: false }) timepicker: NgxMaterialTimepickerComponent;
+
     @Output() timeChanged = new EventEmitter<string>();
 
     private _defaultTime: string;
@@ -199,6 +214,13 @@ export class NgxTimepickerFieldComponent implements OnInit, OnDestroy, ControlVa
         this.unsubscribe$.complete();
     }
 
+    onTimepickerToggle($event: MouseEvent) {
+        if (this.timepicker) {
+            $event.stopPropagation();
+            this.timepicker.open();
+        }
+    }
+
     private changeTime(): void {
         const time = this.timepickerService.getFullTime(this.format);
         this.timepickerTime = time;

src/app/material-timepicker/components/timepicker-toggle-button/ngx-material-timepicker-toggle.component.spec.ts

@@ -27,6 +27,10 @@ describe('NgxMaterialTimepickerToggleComponent', () => {
         expect(component.disabled).toBeTruthy();
     });
 
+    it('should get disabled as falsy as default', () => {
+        expect(component.disabled).toBeFalsy();
+    });
+
     it('should override timepicker\'s disabled state', () => {
         component.timepicker = timepicker;
         component.disabled = false;

src/app/material-timepicker/components/timepicker-toggle-button/ngx-material-timepicker-toggle.component.ts

@@ -10,11 +10,11 @@ import {NgxMaterialTimepickerComponent} from '../../ngx-material-timepicker.comp
 
 export class NgxMaterialTimepickerToggleComponent {
 
-    @Input('for') timepicker: NgxMaterialTimepickerComponent;
+    @Input('for') timepicker?: NgxMaterialTimepickerComponent;
 
     @Input()
     get disabled(): boolean {
-        return this._disabled === undefined ? this.timepicker.disabled : this._disabled;
+        return this._disabled === undefined ? (this.timepicker || { disabled: false }).disabled : this._disabled;
     }
 
     set disabled(value: boolean) {