How to Create an Angular Material Table Action Column (Show Snackbar on Click)

The Angular Material table can be customized with clickable rows and cells. It can also have “action” components in its cells. In this tutorial we will explore how to add a clickable button to an Angular Material Table and how to add click events to the rows.

Here is what we will build in this tutorial:

Angular Material Table with Action Column

Full code for this tutorial is in the Resources section.

How to Add Click Handler to Angular Material Table Row Click

I started this tutorial with a typical Angular Material Table template just like the one in this Angular Material Table Styling demo. The table has three main parts:

• An ng-container for each header
• A tr header row definition
• A tr body row definition

I customized the table body row by adding a click listener on the row template code:

You can see in the code snippet that we have access to two values here: myRowData and index. I pass the index as i to the onRowClick handler and also pass the event itself.

Then in my ActionColumnTable class, I have the handler code:

onRowClick = (event: Event, rowIndex…