CODEWITHSUNDEEP
angularangular-materialangular-cdkmat-table
Moblize IT
Moblize IT

Reputation: 1328

Angular material referring object in one of the column

I am using angular material to create a mat-table. and the data part looks like 

 async ngOnInit() {
        const cardRsp:any = await this.dataSvc.fetchQueuedCards()        
        CARD_DATA = []
        for(let cRow of cardRsp){
        // console.log("::::adding:" + cRow._company)
          let c = new Card(cRow.key, cRow._frontImageUrl)

          CARD_DATA.push(c)

    }

    this.dataSource = new MatTableDataSource<Card>(CARD_DATA);
    this.changeDetectorRefs.detectChanges();

    this.dataSource.paginator = this.paginator;

  }

the html looks like

 <table mat-table [dataSource]="dataSource">          
                <!-- Date Column -->
             <ng-container matColumnDef="date">
                <th mat-header-cell *matHeaderCellDef  class="tbl-th"> Date </th>
                <td mat-cell *matCellDef="let element"> {{core.pretifyDate(element.date)}} </td>
              </ng-container>

                <!-- Process Column -->
             <ng-container matColumnDef="process">
                <th mat-header-cell *matHeaderCellDef  class="tbl-th"> Process </th>
                <td mat-cell *matCellDef="let element"> <button mat-button color="primary" (click)="processCard(row)"><mat-icon >edit</mat-icon></button> </td>
              </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"
                (click)="selection.toggle(row)">
            </tr>
          </table>

in the process column above i want to pass entire object in the processCard() method. passing row does not work. What should i pass here?

Upvotes: 0

Views: 114

Answers (1)

JuNe
JuNe

Reputation: 1997

Your try to access to a variable called row which does not exist there. Change row to element because this variable holds your whole object at this point and your problem should be solved.

<ng-container matColumnDef="process">
    <th mat-header-cell *matHeaderCellDef  class="tbl-th"> Process </th>
    <td mat-cell *matCellDef="let element"> <button mat-button color="primary" (click)="processCard(element)"><mat-icon >edit</mat-icon></button> </td>  // <-- change row to element here
</ng-container>

Upvotes: 1

Related Questions