I currently have a mat-table with 6 columns. The 5th column displays the status of the job, which can be Completed, Running, or Pending. I've added two buttons - Stop and Re-Run. When a user clicks on the Stop button, I want the job to stop executing and display a snackbar notification. Similarly, clicking on the Re-Run button should trigger a snackbar notification as well.

To see a sample, you can check out this StackBlitz link.

Here is the HTML code:

<div class="main-content">
<mat-toolbar>
    <mat-progress-bar
        mode="indeterminate"
        class="mat-progress-bar"
        color ="primary"
    >
    </mat-progress-bar>
    &nbsp;&nbsp;
    <button
    mat-icon-button
    (click)="stop_exec_job()"
    matTooltip="Stop Executing the Job"
>
    <i class="material-icons" style="color:red"> stop </i>
</button>

</mat-toolbar>

<div class="card">
    <div class="card-header">
        <h5 class="title">Job Execution Stats</h5>
    </div>

    <mat-table [dataSource]="jobExecutionStat">
        <!-- Id Column -->
        <ng-container matColumnDef="id">
            <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
            <mat-cell *matCellDef="let element">{{ element.id }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="exec_date">
            <mat-header-cell *matHeaderCellDef>
                Execution Date
            </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.exec_date }}
            </mat-cell>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="curr_time_period">
            <mat-header-cell *matHeaderCellDef>
                Current Time Period
            </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.curr_time_period }}
            </mat-cell>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="prev_time_period">
            <mat-header-cell *matHeaderCellDef>
                Previous Time Period
            </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.prev_time_period }}
            </mat-cell>
        </ng-container>

        <ng-container matColumnDef="status">
            <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
            <mat-cell *matCellDef="let element"
                >{{ element.status }}
            </mat-cell>
        </ng-container>

        <ng-container matColumnDef="actions">
            <mat-header-cell *matHeaderCellDef> </mat-header-cell>
            <mat-cell *matCellDef="let element; let index = index">
                <button
                    mat-icon-button
                    (click)="stop_exec_job()"
                    matTooltip="Stop Executing the Job"
                >
                    <i class="material-icons" style="color:red"> stop </i>
                </button>
                <button
                    class="stop_btn"
                    mat-icon-button
                    color="#b71c1c"
                    (click)="re_run_job()"
                    matTooltip="Re-Run the Job"
                >
                    <i class="material-icons" style="color:green">
                        cached
                    </i>
                </button>
            </mat-cell>
        </ng-container>

        <mat-header-row
            *matHeaderRowDef="jobExecStatDisplayedColumns"
        ></mat-header-row>
        <mat-row *matRowDef="let row; columns: jobExecStatDisplayedColumns">
        </mat-row>
    </mat-table>
</div>

And here is the Typescript code:

import { Component, OnInit } from "@angular/core";
import { MatTableDataSource } from "@angular/material";
import { GlobalAppSateService } from '../../services/globalAppSate.service';
import { DataService } from '../../services/data.service';
import { SnakBarComponent } from '../custom-components/snak-bar/snak- 
bar.component';
@Component({
selector: "app-job-execution-screen",
templateUrl: "./job-execution-screen.component.html",
styleUrls: ["./job-execution-screen.component.scss"]
})
export class JobExecutionScreenComponent implements OnInit {
stop_btn: boolean = true;
re_run_btn: boolean = true;


jobExecStatDisplayedColumns = [
    "id",
    "exec_date",
    "prev_time_period",
    "curr_time_period",
    "status",
    "actions"
];

jobExecutionStat = new MatTableDataSource<Element>(ELEMENT_DATA);
constructor(private dataService: DataService, public globalAppSateService: 
GlobalAppSateService, private snakbar: SnakBarComponent ) {

}
ngOnInit() {
    const project = JSON.parse(this.dataService.getObject("project"));
    if (project != null) {
        this.globalAppSateService.onMessage(project);
    }
}


stop_exec_job() {

}
re_run_job() {

}
}
const ELEMENT_DATA: Element[] = [
{
    id: 1,
    exec_date: "17-01-2016",
    prev_time_period: "2016-04,2016-05,2016-06",
    curr_time_period: "2016-08",
    status: "Completed"
},
{
    id: 2,
    exec_date: "17-01-2017",
    prev_time_period: "2017-04,2017-05,2017-06",
    curr_time_period: "2017-08",
    status: "Running"
},
{
    id: 3,
    exec_date: "27-07-2017",
    prev_time_period: "2017-45,2017-46,2017-47",
    curr_time_period: "2018-01,2018-02",
    status: "Pending"
},
{
    id: 4,
    exec_date: "17-10-2018",
    prev_time_period: "2017-30,2017-31,2017-32",
    curr_time_period: "2018-01,2018-02",
    status: "Completed"
},
{
    id: 5,
    exec_date: "21-01-2018",
    prev_time_period: "2016-01,2016-02,2016-03,2016-04",
    curr_time_period: "2016-52",
    status: "Pending"
},
{
    id: 6,
    exec_date: "17-01-2018",
    prev_time_period: "2017-31,2017-32,2017-33,2017-34",
    curr_time_period: "2017-52",
    status: "Running"
}
];
export interface Element {
id: number;
exec_date: string;
prev_time_period: string;
curr_time_period: string;
status: string;
}

If for any reason the icons for 'stop' in red color and 'cached' in green color do not display properly, please note that they are intended to represent the actions of stopping and re-running respectively.