Angular Material mat-cell datepicker pass custom ID to the event handler function

Question

I added an Angular Material mat-datepicker inside a mat-cell. When the datepicker is selected and the date is changed it will call a function in the typescript side. I am trying to figure out during the mat-table binding, how to bind the ID (primary key) of the record to that mat-cell and pass that value to the event handler function. Here is my code so far

<ng-container matColumnDef="ProcessDate">
            <mat-header-cell *matHeaderCellDef mat-sort-header><strong>{{columnName}}</strong></mat-header-cell>
            <mat-cell id={{mydata.id}} *matCellDef="let mydata"> 
                <input id={{mydata.id}} class="control-width" matInput [matDatepicker]="picker1" [value]="myData.date" (dateChange)="addEvent(id,  $event)">
                <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                <mat-datepicker #picker1 color="primary"></mat-datepicker>
            </mat-cell> 
          </ng-container>

On the typescript side, the id is 'undefined'. Any help is appreciated.

Tzannetos Philippakos Tzannetos Philippakos · Accepted Answer · 2019-04-26T17:11:45

if the id you want is the mydata.id property, change id in the callback to mydata.id. There is no id property in that view, and unless you have a property named id on your component, id will be undefined.

Angular Material mat-cell datepicker pass custom ID to the event handler function

1 Answers