How to set dynamic values in datepicker under mattable?

Question

I am using mat-datepicker under mat-table and want to set and change the values dynamically when I load the table.

here is my code:

HTML:

 <ng-container matColumnDef="auctionDate">
                        <th mat-header-cell *matHeaderCellDef>Auction Date</th>
                        <td mat-cell *matCellDef="let row">
                            <input  [formControl]="auctionDate" matInput [matDatepicker]="Appointmentpicker" [min]="today" readonly>
                <mat-datepicker-toggle matSuffix [for]="Appointmentpicker"></mat-datepicker-toggle>
                <mat-datepicker #Appointmentpicker></mat-datepicker>
                        </td>
                    </ng-container>

ts:

 auctionDate = new FormControl();

  this.data.items = [
      {
        "id": "65a03ce73b8226287003f3b4",
        "subscriberId": "6331733aa38f414a418ab3fc",
        "locationId": "63317704a38f414a418ab407",
        "unitNo": "15151",
        "customerTransactionId": "RB2SZ3VF",
        "auctionDate": "04/04/2023",
        "auctionLocation": "Location 1212",
        "address": "12340 Boggy Creek ",
        "businessNumber": "555544444444"
      },
      {
        "id": "65a03ce73b8226287003f3b4",
        "subscriberId": "6331733aa38f414a418ab3fc",
        "locationId": "63317704a38f414a418ab407",
        "unitNo": "15151",
        "customerTransactionId": "RB2SZ3VF",
        "auctionDate": "05/04/2023",
        "auctionLocation": "Location 1212",
        "address": "12340 Boggy Creek ",
        "businessNumber": "555544444444"
      }
    ];

Answer 1

If you have several dates, you need several variables, that's:

Or An array of variables and use [(ngModel)]

//see that a mat-datePicker require a Date object.

this.auctionDates = this.data.items.map(x=>new Date(x.auctionDate))

//And use -see the "let index=index"-

<td mat-cell *matCellDef="let row;let index=index">
       <input  [(ngModel)]="auctionDates[index]" ...>
       ...
</td>

Or an array of FormControls and use [FormControl]

this.auctionDates = this.data.items.map(x=>new FormControl(
                     new Date(x.auctionDate)))

//And use -see the "let index=index"-

<td mat-cell *matCellDef="let row;let index=index">
       <input  [formControl]="auctionDates[index]" ...>
       ...
</td>

Or a FormArray

this.auctionDates = new FormArray(this.data.items.map(x=>new FormControl(
                     new Date(x.auctionDate))))

//And use

<td mat-cell *matCellDef="let row;let index=index">
       <input  [formControl]="auctionDates.at(index)" ...>
       ...
</td>