NgxMatDatetimePicker is not assignable to type MatDatepickerBase

Question

Today I created a new Angular project using Angular 11.0.0. I then installed @angular-material-components/datetime-picker and this is part of what reads in my package.json file:

...
"@angular/core": "~11.0.0",
"@angular/material": "^11.0.0",
"@angular/animations": "~11.0.0",
...
"@angular-material-components/datetime-picker": "^4.0.5",
...

All my code works well except in my HTML where I define mat-datepicker-toggle referring to ngx-mat-datetime-picker. I get the following error:

error TS2322: Type 'NgxMatDatetimePicker<any>' is not assignable to type 'MatDatepickerBase<MatDatepickerControl<any>, any, any>'.

Here is my HTML code:

<input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date"
         formControlName="scheduledStartDateTime" 
         [min]="minDate" 
         (dateChange)="dateUpdated()" >
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker [showSpinners]="true" [showSeconds]="false"
                           [stepHour]="1" [stepMinute]="1" [stepSecond]="1"
                           [touchUi]="false" [enableMeridian]="false"
                           [disableMinute]="false" [hideTime]="false">
</ngx-mat-datetime-picker>

I can disable Angular from flagging this validation error (and have my project run fine) by changing this property in the tsconfig.json file:

"angularCompilerOptions": {
    ...
    "strictTemplates": false
}

However, I would like to have the validation benefits by having "strictTemplates": true.

Am I missing something or can you guys please let me know when this bug gets fixed?

Wyeth

Have you reported this as a bug on material repo? – Marivaux

Answer 1

in this case you have to disable strict template checking explicitly, you can make use of the $any() template function:

<input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date"
       formControlName="scheduledStartDateTime" 
       [min]="minDate" 
       (dateChange)="dateUpdated()" >
<mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker [showSpinners]="true" [showSeconds]="false"
                         [stepHour]="1" [stepMinute]="1" [stepSecond]="1"
                         [touchUi]="false" [enableMeridian]="false"
                         [disableMinute]="false" [hideTime]="false">
</ngx-mat-datetime-picker>

Semicolon

Nice. I set the "$any(picker)" following you code and then set "strictTemplates": true and, Angular did not flag any issues. Nice approach. – Wyeth

@ManuelHernandez: Please accept the answer of alex, it is the only right one. :) – Raymonraymond

Answer 2

Alternatively, instead of binding to the [for] attribute, bind to the click event of the mat-datepicker-toggle to trigger your MatDatePickerPanel to open. This will allow you to keep using strictTemplates: true and works in angular v18

<input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date"
       formControlName="scheduledStartDateTime" 
       [min]="minDate" 
       (dateChange)="dateUpdated()" >
<mat-datepicker-toggle matSuffix (click)="picker.open()"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker [showSpinners]="true" [showSeconds]="false"
                         [stepHour]="1" [stepMinute]="1" [stepSecond]="1"
                         [touchUi]="false" [enableMeridian]="false"
                         [disableMinute]="false" [hideTime]="false">
</ngx-mat-datetime-picker>

Anet