To clear the value of a mat-datepicker component in Angular Material, you can use the matDatepickerInput directive and its associated MatDatepickerInput class or FromControl. Here’s how you can clear the selected date:

Solution 1: Using Form Control

<mat-form-field>
    <input matInput [matDatepicker]="picker2" placeholder="Choose a date" [(ngModel)]="mydate">
    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
<button class="btn-primary btn" (click)="reset()">Reset</button>

reset() {
    this.mydate = '';
  }

2. Using template variable of MatInput

<mat-form-field>
    <input #input2 matInput [matDatepicker]="picker2" placeholder="Choose a date" [(ngModel)]="mydate">
    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
<button class="btn-primary btn" (click)="reset()">Reset</button>

@ViewChild('input2')  datepickerInput!: ElementRef;
reset() {
    this.datepickerInput.nativeElement.value = '';
  }

3. Using template variable for matDatePicker

<mat-form-field>
    <input #input2 matInput [matDatepicker]="picker2" placeholder="Choose a date" [(ngModel)]="mydate">
    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
<button class="btn-primary btn" (click)="reset()">Reset</button>

@ViewChild('picker2') datepicker: MatDatepicker<Date | null> | undefined;
if (this.datepicker) {
      this.datepicker.select(null);
    }