I am trying to display a `Date` object in an `input` field and only display the minutes

```xml
<mat-form-field>
  <input matInput type="time" placeholder="Choose a time" 
       [(ngModel)]="appointmentTime"
       [ngModel]="appointmentTime  | date:'HH:mm'"/>
</mat-form-field>

```

However, the time is not getting displayed correctly - not at all in fact:

[![enter image description here](https://i.stack.imgur.com/Z8qdL.png)](https://i.stack.imgur.com/Z8qdL.png)

In the class, `appointmentTime` and `appointmentDate` are initialized as 

```js
public appointmentDate = new Date();
public appointmentTime = new Date();

```