title: Angular 6 - Click event is not firing
body: <p>I'm trying to append a button to an angular table. </p>
  
  <p>It shows the button but when a click on it, it doesn't fire the event.</p>
  
  <p>This is my table:</p>
  
  <pre><code>&lt;table mat-table [dataSource]="GetGridData()"&gt;
    &lt;!-- Rest removed for brevity.. --&gt;
  
    &lt;ng-container matColumnDef="Products"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Products &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt;
        &lt;button mat-raised-button (click)="OnGetAllProducts(element.CategoryId)"&gt;See all products&lt;/button&gt;
      &lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;tr mat-header-row *matHeaderRowDef="GetGridHeader()"&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef="let row; columns: GetGridHeader();"&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And this is what I've got on my ts:</p>
  
  <pre><code>export class DashboardComponent {
      // Rest of code removed for brevity.         
  
      // Row's events.
      //--------------
      OnGetAllProducts(categoryId: number) {
          alert("Listed");
      }
  }
  </code></pre>
  
  <p>And this is my model:</p>
  
  <pre><code>export class Category {
      public CategoryId: number;
      public CategoryName: string;
  }
  </code></pre>