The type NgxMatDatetimePicker cannot be assigned to type MatDatepickerBase

Today marks the launch of my latest Angular project built with Angular 11.0.0. I decided to incorporate the 

@angular-material-components/datetime-picker
package, which is now reflected 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",
...

Everything within my codebase runs smoothly except for a snag in my HTML involving the mat-datepicker-toggle linked to ngx-mat-datetime-picker. This error message pops up:

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

Here's a snippet of my HTML code showcasing the issue:

<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>

To bypass this validation error and maintain a functional project, altering the tsconfig.json file like so can be done:

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

However, my preference leans towards enforcing strict template rules with 

"strictTemplates": true
.

If there's something I'm overlooking or if you folks could provide feedback on when this bug will be rectified, it would be greatly appreciated.

angulartypescriptangular-materialdatetimepicker

Answer №1

To ensure template checking is not strict in this scenario, one must explicitly disable it by utilizing the $any() template function:

<input matInput [ngxMatDatetimePicker]="picker" placeholder="Select 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>

Answer №2

To achieve the same result without binding to the [for] attribute, you can instead bind to the click event of the mat-datepicker-toggle in order to trigger the opening of your MatDatePickerPanel. This approach is compatible with strictTemplates: true and is effective in angular v18.

<input matInput [ngxMatDatetimePicker]="picker" placeholder="Select 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The API response is indicating that it is empty, however, upon further examination, it is not

I created an API that shows a user's followers and following users. Everything is displaying correctly on the screen. However, when I try to use console.log() to display the array it is stored in after calling the method, it shows as an empty array. I ...

javascriptangulartypescript

Find keys in an array based on a specified value

I need to retrieve an array of keys from an object that match a specified value ...

javascriptarraystypescriptobjectecmascript-6

Create an observable that returns numbers based on a computation performed on an observable of arrays

I am looking to transform a Promise into an Observable that returns a single number derived from computations on an array. My current implementation utilizes a Promise, but I would like to enhance my understanding by converting it into an Observable. Here ...

angularobservableangular-promise

Mixing TypeScript generic types loosely

Let's explore a simple example of typescript mixins: import { Observable, of } from 'rxjs'; class Service<TDataType> { public foo(f: TDataType): Observable<TDataType> { return of(f); } } type GConstructor<T = {}> = new ...

typescriptmixins

The layout of the RadDataForm with nested groups in a GridLayout using NativeScript Angular does not properly display all fields on iOS

In the Angular NativeScript (6.3.0) component, I am facing an issue with XML where the form group expands and shrinks correctly on Android when the group title is tapped. However, on iOS, the group does not expand when using GridLayout rows="auto" and doe ...

iosangularlayoutnativescript

When you initiate an Angular 8 project on a Windows 10 system, it generates extra files

Just a few days ago, I made the decision to transition from using an Ubuntu virtual machine for my Angular and development projects to working on Windows. The reason behind this shift was that I already had Node installed along with Git and other necessary ...

node.jsangularnpmangular8

Evaluating observables in .pipe angular 8 jasmine

In my component, I have a subscription to triggerRuleExecutionService which is triggered by another component using next(). Within the pipe, I am using switchMap to make an HTTP service call and retrieve data from the database. this.ruleExecutionService ...

angulartypescriptjasminekarma-runner

Eliminate repeat entries in MongoDB database

Within our MongoDB collection, we have identified duplicate revisions pertaining to the same transaction. Our goal is to clean up this collection by retaining only the most recent revision for each transaction. I have devised a script that successfully re ...

javascripttypescriptmongodb

A Guide to Iterating Through Arrays of Objects Using TypeScript

Currently, I am engrossed in an Angular project where I am fetching an object containing an array of objects from an API. The object being passed to the API as a parameter through my service is called "reportData". Here is an example of the data retrieve ...

arraysangulartypescriptjavascript-objects

How does putting a '$' symbol before an event impact functionality in Angular?

How does prefacing an event with a '$' dollar sign impact Angular? onModelUpdated($event: any) { console.log($event); } vs onModelUpdated(event: any) { console.log(event); } ...

angulartypescript

Understanding the integration of sass with webpack in an Angular 4 project

Is it possible to reference a sass file instead of a css file directly in the index.html? If so, how does webpack compile the sass into a css file? Additionally, what is the most effective way to bundle the sass file when building the application? The ve ...

cssangularwebpacksass

Is there a way to verify if multiple variables in Typescript are null or undefined?

Background To address the issue of checking whether a specific variable is null or undefined, I created the isNullish function. The implementation of this function is shown below. type Nullish = null | undefined; const isNullish = (target: unknown): targe ...

typescriptnullable

Implementing an automatic logout feature based on the expiration timestamp of a JWT token

My goal is to have the application automatically log out based on an expiry token. Angular Client Code: login(credentials) { return this.http.post('http://something/api/login/', credentials) .map(response => { let res ...

angulartypescriptjwtangular2-routingangular5

What is the process for including external parameters in the webpack setup?

I'm attempting to create my project with webpack and here is my webpack configuration file. import * as path from 'path'; import * as webpack from 'webpack'; import { fileURLToPath } from 'url ...

node.jstypescriptexpresswebpack

Is there a way to retrieve the Angular-Redux store in a child module?

Within my Angular application, I utilize angular-redux for managing the application state. In my main module, I have defined the redux store in the following manner: export class MainModule { constructor(private ngRedux: NgRedux<MainAppState>, ...

javascriptangularangular-moduleangular-redux

Having issues with ngbDropdown in Angular 4 from ng-bootstrap?

My dropdown menus are malfunctioning. I attempted to follow advice from this source, where I upgraded to bootstrap 4-alpha, but unfortunately, the issue persists. Here is an excerpt from my package.json file: "@angular/animations": "^4.3.0", ... // ...

angularbootstrap-4ng-bootstrap

The error message "Error: Unable to access property '_router' when null in NativeScript"

Currently, I am developing an android application using a combination of NativeScript, AngularJS2, and TypeScript. To guide my development process, I have been following the documentation provided by NativeScript, which can be found at this link. However, ...

typescriptangular2-routingnativescript

customizable ng-select templates

I've been utilizing the ng-select library for managing multiselect drop down lists and it has been a great tool. However, I have now reached a point where I need to reuse my ng-templates and I'm feeling a bit lost. I recently started working with ...

angularangular-ngselect

Challenge with detecting changes in ngx-bootstrap typeahead functionality

Recently, we encountered a strange issue with the ngx-bootstrap typeahead. Despite having it working for a long time, we are now facing a behavior where the dropdown options do not appear until the mouse is clicked somewhere on the page. The typeahead is ...

angularngx-bootstrap

Using npm and systemjs as a build tool in an Angular 2 app (RC 5): A step-by-step guide

While I am well-versed in using gulp and systemjs for bundling applications (such as utilizing compression, bundling, exporting to build folder, etc), my boss now requires just npm and systemjs to complete the task. I am unsure of how to create a custom sc ...

angularnpmsystemjs