CODEWITHSUNDEEP
angulartypescriptangular-materialdatetimepicker
Manuel Hernandez
Manuel Hernandez

Reputation: 611

NgxMatDatetimePicker is not assignable to type MatDatepickerBase

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?

Upvotes: 19

Views: 21228

Answers (2)

Aldine Rutury
Aldine Rutury

Reputation: 61

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>

Upvotes: 0

alexnavratil
alexnavratil

Reputation: 979

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>

Upvotes: 77

Related Questions