Angular Date Range Picker not able to implement

I’m trying to create a date range picker in Angular 7 with the help of angular material. But whenever I click on the calendar, the value is not updated on the input field. I’m sharing my code below.

As, you can see from the code below, I have written a click function on the second input field. On clicking it opens up two calendars, one for start date, other for end date. But, whenever, I try to click on any date, it saves only today’s date. Can anyone help me to resolve this issue.

input-overview-example.html

<mat-form-field>
    <input matInput [matDatepicker]="strtpicker" [value]="date.value" placeholder="Start Date" >
</mat-form-field>

<mat-form-field class="ml-20">
  <input matInput [matDatepicker]="endpicker" [value]="date.value"  placeholder="Choose a date" (click)="dateRange()">
</mat-form-field>

<div class="d-flex" *ngIf="show">
    <mat-card >
      <p>Start Date</p>
      <mat-calendar ></mat-calendar>
    </mat-card>
   <mat-card>
     <p>End Date</p>
      <mat-calendar></mat-calendar>
    </mat-card>
</div>

input-overview-example.ts

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';



/**
 * @title Basic Inputs
 */
@Component({
  selector: 'input-overview-example',
  styleUrls: ['input-overview-example.css'],
  templateUrl: 'input-overview-example.html',
})
export class InputOverviewExample {
   events: string[] = [];
     addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
    this.events.push(`${type}: ${event.value}`);
  }

  date = new FormControl(new Date());


  show: boolean;

   dateRange() {
    this.show = true;
  }

}

Source: New feed
Source Url Angular Date Range Picker not able to implement