Angular 6 - Click event is not firing

Question

I'm trying to append a button to an angular table.

It shows the button but when a click on it, it doesn't fire the event.

This is my table:

<table mat-table [dataSource]="GetGridData()">
  <!-- Rest removed for brevity.. -->

  <ng-container matColumnDef="Products">
    <th mat-header-cell *matHeaderCellDef> Products </th>
    <td mat-cell *matCellDef="let element">
      <button mat-raised-button (click)="OnGetAllProducts(element.CategoryId)">See all products</button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="GetGridHeader()"></tr>
  <tr mat-row *matRowDef="let row; columns: GetGridHeader();"></tr>
</table>

And this is what I've got on my ts:

export class DashboardComponent {
    // Rest of code removed for brevity.         

    // Row's events.
    //--------------
    OnGetAllProducts(categoryId: number) {
        alert("Listed");
    }
}

And this is my model:

export class Category {
    public CategoryId: number;
    public CategoryName: string;
}

Answer 1

It's the dataSource. Your GetGridData() function is running constantly because you placed it in the template, which is re-rendering the table endlessly, which is why that's a bad practice. Instead, store the result in a variable and that's what you should pass as your dataSource.

Answer 2

TLDR; verify correctness of styles

As many people can encounter similar problem and land here (like myself) I hope it wouldn't be a big offense when I post solution that worked for me in order to help next generations.

@BasavarajBhusani and others asked really good question, if button is really visible from UI.

The truth is that despite being physically visible, my button slipped out of borders of the parent element. After fixing styles by making parent element to dynamically adjust its size, it started to work well.

It is strange but the same layout worked well in AngularJS (1.X) but stopped after porting into Angular 6.