[SOLVED] Cannot bind to 'matDatePicker' since isn't property of 'input', despite importing everything

Cannot bind to 'matDatePicker' since isn't property of 'input', despite importing everything

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.

Solution

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.