Date field not populating from database value Angular 12

Question

I am doing a Web Application which is used to manage a Company's Employees and Departments written in Angular 12.I have a date field(Date Of Joining) which needs to get pre-populated(from API) when we try to edit the Employee details. It is not working as it needs to be. Below is the program.

add-edit-emp.component.html

<div class="d-flex flex-row bd-highlight mb-3">

<div class="form-froup row" style="width: 60%">
<label class="col-sm-2 col-form-label">Employee Name</label>
<div class="col-sm-10">
    <input type="text" class="from-control" [(ngModel)]="EmployeeName"
    placeholder="Enter Employee Name">
</div>

<label class="col-sm-2 col-form-label">Department</label>
<div class="col-sm-10">
    <select class="form-control" [(ngModel)]="Department">
        <option>--Select--</option>
        <option *ngFor="let depName of DepartmentsList" >
            {{depName}}
        </option>
    </select>
</div>

<label class="col-sm-2 col-form-label">Date Of Joining</label>
<div class="col-sm-10">
    <input type="date" [(ngModel)]="DateOfJoining" value="{{DateOfJoining}}" 
     id="DateOfJoining" name="DateOfJoining">{{DateOfJoining}}
</div>
</div>
</div>
 <button (click)="addEmployee()" *ngIf="emp.EmployeeId==0" class="btn btn-primary">
  Add
 </button>
 <button (click)="updateEmployee()" *ngIf="emp.EmployeeId!=0" class="btn btn-primary">
  Update
 </button>

add-edit-emp.component.ts

import { Component, OnInit,Input } from '@angular/core';
import  { SharedService } from 'src/app/shared.service';

@Component({
 selector: 'app-add-edit-emp',
templateUrl: './add-edit-emp.component.html',
styleUrls: ['./add-edit-emp.component.css']
})
export class AddEditEmpComponent implements OnInit {


constructor(private service:SharedService) { }

@Input() emp:any;
EmployeeId:string | undefined;
EmployeeName:string | undefined;
Department:string | undefined;
DateOfJoining:string | undefined;

DepartmentsList:any=[];


ngOnInit(): void {
this.loadDepartmentList();
}


loadDepartmentList(){
this.service.getAllDepartmentNames().subscribe((data:any) =>{
  
this.DepartmentsList= data;

this.EmployeeId = this.emp.EmployeeId;
this.EmployeeName = this.emp.EmployeeName;
this.Department = this.emp.Department;
this.DateOfJoining = this.emp.DateOfJoining;

 })
}


addEmployee(){
var val = {EmployeeId:this.EmployeeId,
             EmployeeName:this.EmployeeName,
              Department:this.Department,
               DateOfJoining:this.DateOfJoining,
             
 this.service.addEmployee(val).subscribe((res: { toString: () => any; }) =>{
   alert(res.toString());
 })              

 }

 updateEmployee(){
 var val = {EmployeeId:this.EmployeeId,
  EmployeeName:this.EmployeeName,
   Department:this.Department,
    DateOfJoining:this.DateOfJoining,
    this.service.updateEmployee(val).subscribe((res: { toString: () => any; })=>{
  alert(res.toString());
  })              

  }
  }

All the other values such as Employee Name ,Department are populated correctly. Only date field in not populating though I can just display the date next to date field.

can you help me where I am making a mistake. Thanks in Advance.