angular material doesn't set correct data value when the user click the first time

Question

My purpose is when the user click on this input GG/MM/YYYY, the program shows the popup where the are all date and, at beginnin when the user doesn't have just clicked, the popup is setted in particular date 10/10/2000.

this is my html code:

<mat-form-field>
            <input id="date" formControlName="date(dateChange)="emitValue($event)" matInput [matDatepicker]="picker" placeholder="GG/MM/YYYY" />
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker startView="multi-year" [startAt]="startDate" ></mat-datepicker>
        </mat-form-field>

In my ts:

startDate = new Date(2000, 09, 10);

When the user clicks for the first time it is not setted nothing value. For th firt time I want to show in the popup the date (2000, 09, 10);

Anyone can help me?

Answer 1

Here is sample from Material docs.

https://run.stackblitz.com/api/angular/v1?file=src%2Fapp%2Fdatepicker-value-example.ts

Template

<mat-form-field appearance="fill">
  <mat-label>Angular forms</mat-label>
  <input matInput [matDatepicker]="picker1" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

Form control

date = new FormControl(new Date());