NgxMatDatetimePicker<any> is missing the following properties from type MatDatepickerBase<MatDatepickerControl<any>, any, any>

[jakehockey10]

My Angular version:

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 10.0.1
Node: 12.6.0
OS: linux x64

Angular: 10.0.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.1
@angular-devkit/build-angular     0.1000.1
@angular-devkit/build-optimizer   0.1000.1
@angular-devkit/build-webpack     0.1000.1
@angular-devkit/core              10.0.1
@angular-devkit/schematics        10.0.1
@angular/cdk                      10.0.1
@angular/cli                      10.0.1
@angular/fire                     6.0.2
@angular/flex-layout              2.0.0-rc.1
@angular/material                 10.0.1
@ngtools/webpack                  10.0.1
@schematics/angular               10.0.1
@schematics/update                0.1000.1
rxjs                              6.5.5
typescript                        3.9.6
webpack                           4.43.0

The error I'm getting:

error TS2740: Type 'NgxMatDatetimePicker<any>' is missing the following properties from type 'MatDatepickerBase<MatDatepickerControl<any>, any, any>': _model, xPosition, yPosition, ngOnChanges, and 3 more.

31                                  [for]="picker"></mat-datepicker-toggle>

I'd like to keep my strict settings intact in tsconfig.base.json. Does this library just need an update? Or did I do something wrong?

[schlusslicht]

Hey @jakehockey10, I was facing the same issue, which can be solved by short-circuiting the (strict) type checker:

@Component({
  template: `
    <input matInput [ngxMatDatetimePicker]="ngxMatDatetimePicker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <ngx-mat-datetime-picker #ngxMatDatetimePicker></ngx-mat-datetime-picker>
  `
})

export class ExampleComponent {

  @ViewChild(NgxMatDatetimePicker)
  public picker?: MatDatepicker<Date>;

}

This will let Your project compile, but at runtime You will be confronted by https://github.com/h2qutc/angular-material-components/issues/65#issuecomment-667768132 or https://github.com/h2qutc/angular-material-components/issues/89.

I guess the cause of #65 and #89 are the @angular/material^10.0.0 changes around the new DateRangePicker. The MatDatepicker now extends MatDatepickerBase, which (I guess) NgxMatDatetimePicker should do to. But I'm not sure, just skimmed the code a bit .. :)

[imvikaskohli]

HI @schlusslicht , yes you're right The MatDatepicker they now extend MatDatepickerBase but the problem still not solve by using ViewChild and picket in component ts file, so any other work around for this

[asdxi]

@imvikaskohli Hey, if you've updated to version 4.0.3 of the package then all you have to do apart from @schlusslicht 's change is adding {static: true} in the ViewChild decorator. @ViewChild(NgxMatDatetimePicker, { static: true }) public picker?: MatDatepicker<Date>;

Also, try using a different identifier for [ngxMatDatetimepicker] and [for] (ngxMatDatetimePicker and picker) like @schlusslicht did, that did made it work eventually but I would like to know the reason behind that :)

[schlusslicht]

@highyerbuoy as the #ngxMatDatetimePicker statement already creates a (template reference) variable, You have to use another name for the variable from within the component. If You use the same variable names for both, the public component variable and the template reference variable, the template reference variable overrides the one from the component (at least within the template).

As for the { static: true } part of Your comment, I think it should work without specifying this param to the @ViewChild decorator, but this might depend on the context - at least for me it's working without the static param.