Question: I have current template:

```
<input type="text" class="form-control" name="my_date" 
        [matDatepicker]="myDatepicker" #myDate="ngModel"        
        [(ngModel)]="myDateValue" id="my_date" required>                                        
    <mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>                                                                                
    <mat-datepicker #myDatepicker></mat-datepicker>  

```

The init happen when loading the component:

```
public myDateValue: string;
    this.myDateValue= myMonth.toString() + "\/" + myDay.toString() + "\/" + myYear.toString(); 

```

When printing the date to the console I get to see it in the FormControl
value.
But when the page load the date is not populate into the textbox?

Any idea what I'm doing wrong ?
Thanks.

Answer: 
In order to solve this issue I had to change the myDateValue to type Date.
That's solved the problem.
mat datepicker require the field to be type Date.
in my case it was that the binding to the value was like that:

```
<input type="text" class="form-control" name="my_date" 
    [matDatepicker]="myDatepicker" #myDate="ngModel"        
    [value]="myDateValue|date" id="my_date" required>                                        
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>                                                                                
<mat-datepicker #myDatepicker></mat-datepicker>    

```

i removed the- | date

and then it worked

```
 <input type="text" class="form-control" name="my_date" 
    [matDatepicker]="myDatepicker" #myDate="ngModel"        
    [value]="myDateValue" id="my_date" required>                                        
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>                                                                                
<mat-datepicker #myDatepicker></mat-datepicker> 

```