Angular – Can’t bind to ‘rangePicker’ since it isn’t a known property of ‘mat-date-range-input’

angularangular-materialdaterangepicker

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?

Best Answer

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

Related Solutions

Angular – Exception: Can’t bind to ‘ngFor’ since it isn’t a known native property

I missed let in front of talk:

<div *ngFor="let talk of talks">

Note that as of beta.17 usage of #... to declare local variables inside of structural directives like NgFor is deprecated. Use let instead.

<div *ngFor="#talk of talks"> now becomes <div *ngFor="let talk of talks">

Original answer:

I missed # in front of talk:

<div *ngFor="#talk of talks">

It is so easy to forget that #. I wish the Angular exception error message would instead say:
you forgot that # again.

Angular exception: Can’t bind to ‘ngForIn’ since it isn’t a known native property

Since this is at least the third time I've wasted more than 5 min on this problem I figured I'd post the Q & A. I hope it helps someone else down the road... probably me!

I typed in instead of of in the ngFor expression.

Befor 2-beta.17, it should be:

<div *ngFor="#talk of talks">

As of beta.17, use the let syntax instead of #. See the UPDATE further down for more info.

Note that the ngFor syntax "desugars" into the following:

<template ngFor #talk [ngForOf]="talks">
  <div>...</div>
</template>

If we use in instead, it turns into

<template ngFor #talk [ngForIn]="talks">
  <div>...</div>
</template>

Since ngForIn isn't an attribute directive with an input property of the same name (like ngIf), Angular then tries to see if it is a (known native) property of the template element, and it isn't, hence the error.

UPDATE - as of 2-beta.17, use the let syntax instead of #. This updates to the following:

<div *ngFor="let talk of talks">