Can't bind to 'matDatepicker' since it isn't a known property of 'div' - Angular

Question

I am trying to show datepicker, instead of input element I used div tag because just I need to show selected date as a label. Below is my code.

         <mat-form-field>
         <!-- <input matInput [matDatepicker]="picker" placeholder="choose a Date" (click)="picker.open()"> -->
        <div matInput [matDatepicker]="picker"  (click)="picker.open()"></div>
        <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>

app.module.ts

        import { MatDatepickerModule } from '@angular/material/datepicker';
        import { MatNativeDateModule } from '@angular/material/core';
       @NgModule({
         imports: [
          ...
          MatDatepickerModule,
          MatNativeDateModule
         ]

But I am getting below error, when I run my application,

Error: Template parse errors: Can't bind to 'matDatepicker' since it isn't a known property of 'div'.

Answer 1

You can use the input and make it readonly: [readonly]="true" .