Angular2: Date Format Textbox ngModel doesn't work - html

Question

Still learning Angular2. Have a form where I have a startDate and endDate and I want to have input items for each. I am using two-way binding with my model object to a form.
<input type="date" name="EndDate" class="form-control input-sm" [(ngModel)]="selectedDeal.Enddate" required />
The date properties of my model are of type Date:
public EndDate: Date,
When I run this, and bind a model that has a valid date, it just shows mm/dd/yyyy in the text box. HTML5 type="date" support I presume. But it does not show the actual date. It has the date picker built in, which is excellent, but doesn't show the date that is already in the property.
If I change the type="date" to type="text", I see something like 2018-12-31T00:00:00, and lose my date support, plus this isn't user-friendly.
I'm trying to avoid:
1) Having to use the wrong data type (strings) and format my dates into strings for usage - this seems like a bad idea and practice
2) Using Javascript post form display to try to overwrite the value with string formatted date text
Is there an easier way to handle this?

Answer 1

You can achieve this by separating out the bindings, and doing a small amount of plumbing.
Template: (Note the date pipe is using the format 2016-12-31, and the ngmodel and modelchange have been split)
<input type="date" name="EndDate" class="form-control input-sm" [ngModel]="selectedDeal.EndDate | date: 'y-MM-dd'" (ngModelChange)="dateChanged($event)" required />
Component:
private dateChanged(newDate) {
this.selectedDeal.EndDate= new Date(newDate);
console.log(this.selectedDeal.EndDate); // <-- for testing
}