I'm having trouble including angular material's datepicker in my app.
In my app.module.ts I import it like this:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule, MatCheckboxModule, MatDatepickerModule } from '@angular/material';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgbModule.forRoot(),
FormsModule,
AppRoutingModule,
RoutingAppointment,
MatFormFieldModule,
MatCheckboxModule,
MatDatepickerModule
],
exports:[
MatDatepickerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
And later in my component in the html I call it as follows (pasted copy of the angular material doc):
<mat-form-field>
<input matInput [matDatePicker]="picker" placeholder="DD/MM/YYYY">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
However it is giving me the error:
Can't bind to 'matDatePicker' since it isn't a known property of 'input'
Does anyone know what I'm doing wrong?
Fixed. In the html the name of the attribute was misspelled.
Instead of
[matDatepicker]
it being the correct form, it had[matDatePicker]
a capital P, which is incorrect.Silly as a grand piano.
It sounds like you haven't imported the corresponding module:
You have to choose between
MatMomentDateModule
(which will depend onmoment.js
) andMatNativeDateModule
(which will use theDate
native Javascript class).On the other hand, make sure you also have imported
FormsModule
and (depending on what kind of forms you create)ReactiveFormsModule
.Well, find more information (in English) here