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

If 'mat-date-range-input' is an Angular component and it has 'rangePicker' input, then verify that it is part of this module.
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?

Which version of angular material are you using? – Chellappan வ Jul 01 '20 at 09:24 — Chellappan வ, Jul 01 '20 at 09:24
Date range picker available only in material version 10. – Chellappan வ Jul 01 '20 at 10:37 — Chellappan வ, Jul 01 '20 at 10:37

score 6 · Answer 1 · answered Jul 16 '20 at 09:20

6

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

answered Jul 16 '20 at 09:20

Mykola Novytskyi

133
1
7

I'm on version 10.1.0, still got this problem. – Bruno Andrade Jul 27 '20 at 18:45
Angular 10, Angular Material 10 and adding these modules `[MatDatepickerModule, MatFormFieldModule, MatNativeDateModule]` worked for me. More info [Official Stacblitz Example](https://stackblitz.com/angular/aryxkpngkbn?file=src%2Fapp%2Fdate-range-picker-forms-example.ts) – Samiullah Khan Aug 05 '20 at 18:29

score 1 · Answer 2 · answered Aug 13 '20 at 11:15

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.

score 0 · Answer 3 · answered Dec 02 '20 at 13:45

I have the same problem and it has been fixed after updating the dependency as below.

package.json

"dependencies": {
"@angular/animations": "~10.1.3",
"@angular/cdk": "^10.2.3",
"@angular/common": "~10.1.3",
"@angular/compiler": "~10.1.3",
"@angular/core": "~10.1.3",
"@angular/forms": "~10.1.3",
"@angular/material": "^10.2.3",
"@angular/platform-browser": "~10.1.3",
"@angular/platform-browser-dynamic": "~10.1.3",
"@angular/router": "~10.1.3",
"hammerjs": "^2.0.8",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1001.3",
"@angular/cli": "~10.1.3",
"@angular/compiler-cli": "~10.1.3",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}

Be sure to remove the node module and reinstall it after the dependency update.

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

3 Answers3