Angular 9 ng-pick-datetime datetime picker not opening and giving error

Question

I recently migrated my application code from Angular 8 to Angular 9. I used ng-pick-datetime with Angular 8. But it is not working with Angular 9. Given is my module code:-

import { AppCodeComponent } from "./app-code.component";
import { OwlDateTimeModule, OwlNativeDateTimeModule, OWL_DATE_TIME_FORMATS, DateTimeAdapter, OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime-ex';
import { MomentDateTimeAdapter } from 'ng-pick-datetime-moment';

export const MY_CUSTOM_FORMATS = {
   fullPickerInput: 'DD MMM YYYY',
   datePickerInput: 'DD MMM YYYY',
   timePickerInput: 'LT',
   monthYearLabel: 'MMM YYYY',
   dateA11yLabel: 'LL',
   monthYearA11yLabel: 'MMMM YYYY'
};


@NgModule( {
imports: [
    CommonModule,
    HttpClientModule,
    FormsModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule,
    DynamicComponentLoaderModule.forChild( AppCodeComponent )
],
declarations: [AppCodeComponent],
providers: [{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }, DatePipe,
{ provide: DateTimeAdapter, useClass: MomentDateTimeAdapter, deps: [OWL_DATE_TIME_LOCALE] },
{ provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS }]
} )

export class AppCodeModule { }

When I tried to launch my application, the date time picker was not opening and when I check the console I saw the following error:-

ERROR TypeError: this.dtPicker.registerInput is not a function
at OwlDateTimeInputDirective.push../node_modules/ng-pick-datetime-ex/__ivy_ngcc__/fesm5/ng-pick-datetime-ex.js.OwlDateTimeInputDirective.registerDateTimePicker (ng-pick-datetime-ex.js:4176)
at OwlDateTimeInputDirective.set [as owlDateTime] (ng-pick-datetime-ex.js:3842)
at setInputsForProperty (core.js:9026)
at elementPropertyInternal (core.js:8091)
at ɵɵproperty (core.js:14452)
at ViewExpensesComponent_div_40_Template (view-expenses.component.html:222)
at executeTemplate (core.js:7706)
at refreshView (core.js:7583)
at refreshDynamicEmbeddedViews (core.js:8675)
at refreshView (core.js:7603)

ERROR TypeError: Cannot read property 'subscribe' of undefined
at OwlDateTimeInputDirective.push../node_modules/ng-pick-datetime-ex/__ivy_ngcc__/fesm5/ng-pick-datetime-ex.js.OwlDateTimeInputDirective.ngAfterContentInit (ng-pick-datetime-ex.js:4038)
at callHook (core.js:2951)
at callHooks (core.js:2921)
at executeInitAndCheckHooks (core.js:2873)
at refreshView (core.js:7620)
at refreshDynamicEmbeddedViews (core.js:8675)
at refreshView (core.js:7603)
at refreshComponent (core.js:8739)
at refreshChildComponents (core.js:7376)
at refreshView (core.js:7629)

I changed ng-pick-datetime to ng-pick-datetime-ex because ng-pick-datetime wasn't working and giving the same error. Any help would be appreciated.

Answer 1

I have identified my problem. I had not properly used the angular elements. What I did was following:-

<div id="ems_view_endDate_div" class="secondary-border">
     <input #endDate type="text" [readonly]="true"
          style="cursor: pointer; border: none; height: 25px; text-align: center; font-size: small; box-shadow: 0 0 0 0 white !important;" 
          placeholder="DD MMM YYYY" class="datepicker" 
          [(ngModel)]="endDateVal" 
          id="ems_view_endDate" 
          [owlDateTimeTrigger]="endDate" [owlDateTime]="endDate">

     <owl-date-time (afterPickerOpen)="endDateOpened()" 
        (afterPickerClosed)="endDateClosed();updateFilterDate(constants.ENDDATE)" 
        [pickerType]="'calendar'" #endDate></owl-date-time>

</div>

The problem was I used #endDate two times. Later I just did the following:-

<div id="ems_view_endDate_div" class="secondary-border">
     <input #endDate type="text" [readonly]="true"
          style="cursor: pointer; border: none; height: 25px; text-align: center; font-size: small; box-shadow: 0 0 0 0 white !important;" 
          placeholder="DD MMM YYYY" class="datepicker" 
          [(ngModel)]="endDateVal" 
          id="ems_view_endDate" 
          [owlDateTimeTrigger]="endDateTrigger" [owlDateTime]="endDateTrigger">

     <owl-date-time (afterPickerOpen)="endDateOpened()" 
        (afterPickerClosed)="endDateClosed();updateFilterDate(constants.ENDDATE)" 
        [pickerType]="'calendar'" #endDateTrigger></owl-date-time>

</div>

I changed the owl-date-time angular element from #endDate to #endDateTrigger and used the same in [owlDateTimeTrigger] and [owlDateTime]. This solved my problem. But I still don't understand that why my earlier code worked in Angular 8. I guess Google has made Angular 9 more robust.