How do I get the placeholder to display when Angular Material Datepicker is filled in?

I am using the Angular Material Datepicker functionality. It is working fine other than the placeholder. In the docs, the placeholder becomes a small label when the input is filled in with a date. Mine is disappearing.

I have tried changing css to get it to work and even tried using a mat-label with no success.

<input matInput [matDatepicker]="payBeginningDate" formControlName="payBeginningDate" id="payBeginningDate" placeholder="Beginning Date">
<mat-datepicker-toggle matSuffix [for]="payBeginningDate"></mat-datepicker-toggle>
<mat-datepicker #payBeginningDate></mat-datepicker>


I simply want the placeholder of "Beginning Date" to shrink over the date field like a label as it does in the docs.

Continue reading...