Material UI Datepicker not working on angular

March 17, 2022

I have integrated the material UI in my angular project using this command ng add @angular/material and I have imported the all necessary components on app.module.ts file but I am facing the below error

Here is my HTML code

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

Please help me to fix this issue

>Solution :

Your html code is fine. Make sure right imports have been made.

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatInputModule,
    MatFormFieldModule,
    ReactiveFormsModule,
  ],
  declarations: [
    AppComponent,
    HelloComponent,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}