How to do two way binding mat date picker inside mat table

Question

I am trying to show a few details of an employee on the mat table. The same table I made as editable. Except for datepicker every field is working .for date picker values are coming the same(last element in the array) since it is looping .please help on doing two-way binding in datepicker.

<ng-container matColumnDef="Exp">
    <mat-header-cell *matHeaderCellDef> Total Exp.(Yrs.) </mat-header-cell>
        <mat-cell contenteditable=true [textContent]="row.totalexp_yrs" (input)="row.totalexp_yrs=$event.target.textContent" *matCellDef="let row">
           {{row.totalexp_yrs}} 
        </mat-cell>
</ng-container>

<ng-container matColumnDef="startdate">
    <mat-header-cell *matHeaderCellDef> Start Date </mat-header-cell>
    <mat-cell contenteditable=true *matCellDef="let row;let i=index">
        <input matInput [matDatepicker]="empfrom_i" name="empfrom_i" placeholder="Choose a date">{{row.emp_from}} </input>
        <mat-datepicker-toggle matSuffix [for]="empfrom_i"></mat-datepicker-toggle>
        <mat-datepicker #empfrom_i></mat-datepicker>
    </mat-cell>
</ng-container>

<ng-container matColumnDef="enddate">
    <mat-header-cell *matHeaderCellDef> End Date </mat-header-cell>
    <mat-cell contenteditable=true *matCellDef="let row">
        <input matInput [matDatepicker]="empto_i" name="empto" [(ngModel)]="row.emp_to" placeholder="Choose a date">
        <mat-datepicker-toggle matSuffix [for]="empto_i"></mat-datepicker-toggle>
        <mat-datepicker #empto_i></mat-datepicker>
        {{row.emp_to}}
    </mat-cell>
</ng-container>

Answer 1

I don't know how others do it but I did it with a combination of using the [value] attribute and the (dateInput) emitter.

<mat-cell contenteditable=true *matCellDef="let x">
     <input matInput [matDatepicker]="y" [value]="x.effectiveDate" name="empto" placeholder="Choose a date" (dateInput)="OnDateChange(x.fieldName, $event.value)">
     <mat-datepicker-toggle matSuffix [for]="y"></mat-datepicker-toggle>
     <mat-datepicker #y></mat-datepicker>
</mat-cell>

So in my example I have a collection of things and the 'key' in my case is the 'fieldName' so I know which row in a table got the updated date. So the value even if I set to dual way with [(value)] will not work. However I can use the event emitter of 'OnDateChange' and it can capture the event of the date change. In this case I only want the 'value' of the emitting event.

OnDateChange(name: string, eventDate: Date) {
    const margin: MarginDiffernce = this.marginChanges[this.marginChanges.findIndex(x => x.fieldName === name)];
    margin.effectiveDate = eventDate;
}

In this example I have a collection of 'marginChanges' and just need to find when a date changes off of a key in the collection. Then update the field.