Can't bind to 'rangePicker' since it isn't a known property of 'mat-date-range-input'

Question

I'm using angular date range picker and getting a issue:

Can't bind to 'rangePicker' since it isn't a known property of 'mat-date-range-input'.

1. If 'mat-date-range-input' is an Angular component and it has 'rangePicker' input, then verify that it is part of this module.
2. If 'mat-date-range-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

I have added imports, exports, providers in app.module.ts too:

imports: [
    MatNativeDateModule,
    MatDatepickerModule,
    FormsModule,
    ReactiveFormsModule
],
exports:[
  MatDatepickerModule,
  MatNativeDateModule
],
providers: [
  MatDatepickerModule,
  MatNativeDateModule,
]

date range picker in html:

<mat-form-field appearance="fill">
        <mat-label>Enter a date range</mat-label>
        <mat-date-range-input [rangePicker]="picker">
            <input matStartDate placeholder="Start date">
            <input matEndDate placeholder="End date">
        </mat-date-range-input>
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

Should I add any thing else in module.ts?

Answer 1

As I understand you have to have @angular/material": "^10.0.2 - not older

Answer 2

Indeed, I would suggest you check both @angular/material and other @angular packages like: cdk, common, compiler, core... Check if the versions match to the 10.y.z.

I had the same problem and all I needed to do was to update to the version 10.y.z of each package.