How to get row data using angular material?

Question

I have angular4 with materialize table Api so I am trying to get row data when user click on the row but its not passing data, How can i pass data to component from view any help will be appreciated ?

app.component.html

<div class="table-container">
<mat-table>
       <ng-container matColumnDef="eventType">
            <mat-header-cell *matHeaderCellDef> Event Type </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.eventType}} </mat-cell>
          </ng-container>
          <!--<button (click)="newMessage()" class="button">New Message</button>-->
          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="highlight(row._id,$event)"></mat-row>
        </mat-table>
      </div>

app.component.ts

highlight(id,event){
        console.log('Event',event);
    }

It clearly seems to be working for me, please check stackbiltz here — Pankaj Parkar
– Pankaj Parkar, Commented Dec 5, 2017 at 19:28

Neeraj Goswami · Accepted Answer · 2017-12-06 02:54:10Z

2

Change to following in your template app.component.html

<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="highlight(row,$event)"></mat-row>

and you should write your click handler in your component app.component.ts

highlight(row,evt) :void{
   //console.log(row,evt);
}

Remove ._id from (click)="highlight(row._id,$event)" from your code.refer this

edited Dec 6, 2017 at 2:54

answered Dec 5, 2017 at 18:47

Neeraj Goswami

1012 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hussain Over a year ago

error

__zone_symbol__error: Error: Template parse errors: Can't bind to 'row-id' since it isn't a known property of 'mat-row'. 1

Collectives™ on Stack Overflow

How to get row data using angular material?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related