How to display a date in <input type = "date"> field when using Angular

I want to get some inputs values from the user by using a form and save it in the database. Then I want to display the saved data using this same form. But even though I get the values from these input fields I can not display the retrieved values here;

<input type="date" name="ArrivalDate" #ArrivalDate="ngModel" [(ngModel)]="service.formData.ArrivalDate" class="form-control">


And

<input type="date" name="DepartureDate" #DepartureDate="ngModel" [(ngModel)]="service.formData.DepartureDate" class="form-control">


Screenshot: Display retrieved data from the database but date fields are not filled with the necessary data

/----- code segment -----/

<div class="form-row">
<div class="form-group col-md-4">
<div class="form-group">
<label>Arrival Date</label>
<!--I want to get the date input from the user-->
<!--I want to display the date input which given by the user-->
<input type="date" name="ArrivalDate" #ArrivalDate="ngModel" [(ngModel)]="service.formData.ArrivalDate" class="form-control">
<div class="validation-error" *ngIf="ArrivalDate.invalid && ArrivalDate.touched">This field is required.</div>
</div>
</div>
<div class="form-group col-md-4">
<div class="form-group">
<label>Departure Date</label>
<!--I want to get the date input from the user-->
<!--I want to display the date input which given by the user-->
<input type="date" name="DepartureDate" #DepartureDate="ngModel" [(ngModel)]="service.formData.DepartureDate" class="form-control">
<div class="validation-error" *ngIf="DepartureDate.invalid && DepartureDate.touched">This field is required.</div>
</div>
</div>
<div class="form-group col-md-4">
<div class="form-group">
<label>Star Category</label>
<input name="StarCategory" #StarCategory="ngModel" [(ngModel)]="service.formData.StarCategory" class="form-control">
<div class="validation-error" *ngIf="StarCategory.invalid && StarCategory.touched">This field is required.</div>
</div>
</div>
</div>

Continue reading...