Migration from Essential JS 1 in Angular TimePicker component

<input type="text" ej-timepicker id="timePicker" value='5/5/2019 3:00 AM'/>

<ejs-timepicker id="timepicker" value='5/5/2019 3:00 AM'></ejs-timepicker>

<input type="text" ej-timepicker id="timePicker" timeFormat='hh:mm:ss tt'/>

<ejs-timepicker id="timepicker"  format='hh:mm:ss'></ejs-timepicker>

<input type="text" ej-timepicker id="timePicker" minTime='10:00 AM'/>

<ejs-timepicker id='timepicker' min='5/5/2019 3:00 AM'></ejs-timepicker>

<input type="text" ej-timepicker id="timePicker" maxTime='10:00 AM'/>

<ejs-timepicker id='timepicker' max='5/5/2019 3:00 AM'></ejs-timepicker>

<input type="text" ej-timepicker id="timePicker" (create)="onCreate($event)"/>

public onCreate(e:any) {
var timeObj = $("#timePicker").data("ejTimePicker");
timeObj.setCurrentTime();
}

public value: Date = new Date();

<ejs-timepicker id='timepicker' [value]='value'></ejs-timepicker>

<input type="text" ej-timepicker id="timePicker" [disableTimeRanges]="disableTime"/>

disableTime: Object = [{ startTime: '3:00 AM', endTime: '6:00 AM' }, { startTime: '1:00 PM', endTime: '3:00 PM' }, { startTime: '8:00 PM', endTime: '10:00 PM' }];

<ejs-timepicker id='timepicker' (itemRender)='itemRenderHandler($event)'></ejs-timepicker>

public itemRenderHandler(args: ItemEventArgs): void {
if (args.value.getHours() === 4) {
    args.isDisabled = true;
}
}

<input type="text" ej-timepicker id="timePicker" cssClass="gradient-lime"/>

<ejs-timepicker id='timepicker' cssClass='e-custom-style'></ejs-timepicker>

<ejs-timepicker id='timepicker' (itemRender)='itemRanderHandler($event)'></ejs-timepicker>

public itemRenderHandler(args: ItemEventArgs): void {/** code block */ }

<input type="text" ej-timepicker id="timePicker" [showPopupButton]="false"/>

<ejs-timepicker id='timepicker' #timeObj (focus)='onFocus($event)'></ejs-timepicker>

@ViewChild("timeObj") timeObj: TimePickerComponent;

public onFocus(args:any):void {
this.timeObj.show();
}

.e-control-wrapper .e-input-group-icon.e-time-icon {
display: none;
}

<input type="text" ej-timepicker id="timePicker" [showRoundedCorner]="true"/>

<ejs-timepicker id='timepicker' cssClass='e-custom-style'></ejs-timepicker>

.e-control-wrapper.e-custom-style.e-time-wrapper.e-input-group {
border-radius: 4px;
}

<input type="text" ej-timepicker id="timePicker" [enableAnimation]="true"/>

<input type="text" ej-timepicker id="timePicker" [interval]=120/>

<ejs-timepicker id='timepicker' step='120'></ejs-timepicker>

<input type="text" ej-timepicker id="timePicker" (focusIn)="onFocus($event)"/>

public onFocus(e:any) { /** code block */}

<ejs-timepicker id='timepicker' #timeObj (focus)='onFocus($event)'></ejs-timepicker>

@ViewChild("timeObj") timeObj: TimePickerComponent;

public onFocus(args:any):void {
/** code block */
}

<input type="text" ej-timepicker id="timePicker" (focusOut)="onFocus($event)"/>

public onFocus(e:any) { /** code block */}

<ejs-timepicker id='timepicker' #timeObj  (blur)='onBlur($event)'></ejs-timepicker>

@ViewChild("timeObj") timeObj: TimePickerComponent;

public onBlur(args:any):void {
/** code block */
}

<ejs-timepicker id='timepicker' #timeObj (created)='create($event)'></ejs-timepicker>

@ViewChild("timeObj") timeObj: TimePickerComponent;

public create(args:any):void {
this.timeObj.focusIn();
}

<ejs-timepicker id='timepicker' #timeObj (created)='create($event)'></ejs-timepicker>

@ViewChild("timeObj") timeObj: TimePickerComponent;

public create(args:any):void {
this.timeObj.focusOut();
}

<ejs-timepicker id='timepicker' #timeObj (close)='onClose($event)'></ejs-timepicker>

@ViewChild("timeObj") timeObj: TimePickerComponent;

public onClose(args:any): void {
 args.cancel = true;
}

<ejs-timepicker id='timepicker' #timeObj (open)='onOpen($event)'></ejs-timepicker>

@ViewChild("timeObj") timeObj: TimePickerComponent;

public onOpen(args:any): void {
 args.cancel = true;
}

<input type="text" ej-timepicker id="timePicker" [enableRTL]="true"/>

<ejs-timepicker id='timepicker' #timeObj enableRtl='true'></ejs-timepicker>

<input type="text" ej-timepicker id="timePicker" [enablePersistence]="true"/>

<ejs-timepicker id='timepicker' #timeObj enablePersistence='true'></ejs-timepicker>

<input type="text" ej-timepicker id="timePicker"  [validationRules]="validationRules"/>

validationRules:Object;
constructor(){
this.validationRules = {required:true};
}

<ejs-timepicker #timepicker id="timepicker" floatLabelType='Always'></ejs-timepicker>

let options: FormValidatorModel = {
rules: {
    'timepicker': { required: [true, "Value is required"] } }};
    this.formObject = new FormValidator('#form-element', options);

<input type="text" ej-timepicker id="timePicker"  [validationRules]="validationRules" [validationMessages]="validationMessages"/>

validationRules:Object;
validationMessages:Object;
constructor(){
this.validationMessages = {required: "Required Time value"};
this.validationRules = {required:true};
}

<ejs-timepicker #timepicker id="timepicker" floatLabelType='Always'></ejs-timepicker>

let options: FormValidatorModel = {
rules: {
    'timepicker': {
                required: [true, "Value is required"]
            }
        },
        customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
            inputElement.parentElement.parentElement.appendChild(errorElement);
        }
    };
this.formObject = new FormValidator('#form-element', options);

<input type="text" ej-timepicker id="timePicker" width="300px"/>

<ejs-timepicker id='timepicker' width='200px'></ejs-timepicker>

<input type="text" ej-timepicker id="timePicker"  [readOnly]="true"/>

<ejs-timepicker id='timepicker' readonly='true' value='5/5/2019 12:00 AM'></ejs-timepicker>

<ejs-timepicker id='timepicker' showClearButton='true'></ejs-timepicker>

<input type="text" ej-timepicker id="timePicker" height="50px"/>

<ejs-timepicker id='timepicker' cssClass='e-custom-style'></ejs-timepicker>

.e-control-wrapper.e-custom-style.e-time-wrapper.e-input-group {
height: 35px;
}

<input type="text" ej-timepicker id="timePicker" [htmlAttributes]="htmlAttributes"/>

htmlAttributes: Object = {required:"required"}

<input type="text" ej-timepicker id="timePicker" watermarkText="Enter Time"/>

<ejs-timepicker id='timepicker' placeholder='Select a Time'></ejs-timepicker>

<input type="text" ej-timepicker id="timePicker" [enabled]="true"/>

<ejs-timepicker id='timepicker' enabled='true'></ejs-timepicker>

<input type="text" ej-timepicker id="timePicker" (create)="onCreate($event)"/>

public onCreate(e:any) {
var timeObject = $("#timePicker").data("ejTimePicker");
timeObject.disable();
}

<ejs-timepicker id='timepicker' enabled='false'></ejs-timepicker>

<ejs-timepicker id='timepicker' allowEdit='false'></ejs-timepicker>

<ejs-timepicker id='timepicker' zIndex='2000'></ejs-timepicker>

<ejs-timepicker id='timepicker' floatLabelType='Always'></ejs-timepicker>

<input type="text" ej-timepicker id="timePicker" locale="en-US"/>

<ejs-timepicker id='timepicker' locale='en'></ejs-timepicker>

<input type="text" ej-timepicker id="timePicker" [enableStrictMode]="true"/>

<ejs-timepicker id='timepicker' strictMode='true'></ejs-timepicker>

<input type="text" ej-timepicker id="timePicker" (close)="onClose($event)"/>

public onClose(e:any) {/** code block */ }

<ejs-timepicker id='timepicker' #timeObj (close)='onClose($event)'></ejs-timepicker>

@ViewChild("timeObj") timeObj: TimePickerComponent;

public onClose(args:any): void {/** code block */ }

<input type="text" ej-timepicker id="timePicker" (open)="onOpen($event)"/>

public onOpen(e:any) {/** code block */ }

<ejs-timepicker id='timepicker' #timeObj (open)='onOpen($event)'></ejs-timepicker>

@ViewChild("timeObj") timeObj: TimePickerComponent;

public onOpen(args:any): void {/** code block */ }

<input type="text" ej-timepicker id="timePicker" (create)="onCreate($event)"/>

public onCreate(e:any) {
var timeObject = $("#timePicker").data("ejTimePicker");
timeObject.show();
timeObject.hide();
}

<ejs-timepicker id='timepicker' #timeObj (created)='create($event)'></ejs-timepicker>

@ViewChild("timeObj") timeObj: TimePickerComponent;

public create(args:any): void {
this.timeObj.show();
this.timeObj.hide();
 }

<input type="text" ej-timepicker id="timePicker" (create)="onCreate($event)"/>

public onCreate(e:any) {
var timeObject = $("#timePicker").data("ejTimePicker");
timeObject.show();

}

<ejs-timepicker id='timepicker' #timeObj (created)='create($event)'></ejs-timepicker>

@ViewChild("timeObj") timeObj: TimePickerComponent;

public create(args:any): void {
this.timeObj.show();
}