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 matInput [matDatepicker]="strtpicker" [value]="date.value" placeholder="Start Date" >

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

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


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

 * @title Basic Inputs
  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>) {`${type}: ${event.value}`);

  date = new FormControl(new Date());

  show: boolean;

   dateRange() { = true;


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