Reputation: 611
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
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
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