Set the date value to the mat Input date picker in Angular TS

Question

I have a requirement to read the query parameter for date and set the value of the Mat Input value to the value read by the query parameter. I am using Mat datepicker

HTML

<mat-form-field class="width-100 inline-block">
    <input readonly class="date-picker" #fromInput matInput [matDatepicker]="picker" placeholder="mm/dd/yyyy" (dateInput)="onChangeStartDate('input', $event)" (dateChange)="onChangeStartDate('change', $event)">
    <mat-datepicker-toggle matSuffix [for]="picker">
    <mat-icon matDatepickerToggleIcon class="mb-6"><i class="fa fa-calendar pl-0" aria-hidden="true"></i></mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<mat-form-field class="width-100 inline-block">
    <input readonly class="date-picker" #toInput matInput [matDatepicker]="picker2" placeholder="mm/dd/yyyy" (dateInput)="onChangeEndDate('input', $event)" (dateChange)="onChangeEndDate('change', $event)">
    <mat-datepicker-toggle matSuffix [for]="picker2">
    <mat-icon matDatepickerToggleIcon class="mb-6"><i class="fa fa-calendar pl-0" aria-hidden="true"></i></mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
</mat-form-field>

TS code

@ViewChild('fromInput', {
    read: MatInput
  }) fromInput: MatInput;
  @ViewChild('toInput', {
    read: MatInput
  }) toInput: MatInput;

let dateRangeStartValue = (this.getParamValueQueryString("date-range-start"))? this.getParamValueQueryString("date-range-start") : "";
if(dateRangeStartValue){
  this.offeringStartDate = dateRangeStartValue
  this.dateStartdate = dateRangeStartValue.split("-");
  dateRangeStartValue = this.dateStartdate[0] + "/" + this.dateStartdate[1] + "/" + this.dateStartdate[2];
  this.fromInput.value = dateRangeStartValue  
}


let dateRangeEndValue = (this.getParamValueQueryString("date-range-end"))? this.getParamValueQueryString("date-range-end") : "";
if(dateRangeEndValue){
   this.offeringEndDate = dateRangeEndValue
   this.dateEnddate = dateRangeEndValue.split("-");
   dateRangeEndValue = this.dateEnddate[0] + "/" + this.dateEnddate[1] + "/" + this.dateEnddate[2];
   this.toInput.value = dateRangeEndValue
}

After doing this, the value shows null