-1

I'm attempting to integrate a very basic date picker into my Angular project. The Angular CLI version is 6.2.9.

My HTML was taken straight from the Angular docs.

<mat-form-field appearance="fill">
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

This returned an error saying

Can't bind to 'matDatepicker' since it isn't a known property of 'input'

After a quick search I found this question that told me to include some imports, which I did adding the following to the very top of my TS code.

import { MatNativeDateModule, MatDatepickerModule,  } from '@angular/material';

@NgModule({
  declarations: [
    HomeComponent
  ],
  imports: [
    MatDatepickerModule,
    MatNativeDateModule,
    FormsModule,
    ReactiveFormsModule
  ]
})

Despite this, I'm continuing to receive the exact same error message. Have I forgotten something else in the TS file? Do I have to include something after my 'export class'? Or is this type of action just not compatible with my Angular version? Any help is appreciated.

Benjamin Salerno
  • 107
  • 1
  • 13

1 Answers1

1

Have you tried changing material modules imports to this?

import {MaterialModule} from '@angular/material';
@NgModule({

imports: [
    MdDatepickerModule,        
    MdNativeDateModule,
    FormsModule,
    ReactiveFormsModule
  ]
})

Refer this article for more details this

Because it says MaterialModule Removed. please use separate module instead. Hope this'll help.

Melani Silva
  • 91
  • 6