Button within Angular Material Table not working

Question

I have the following Angular Material Table setup:

    <table mat-table [dataSource]="getItems()">
      <ng-container matColumnDef="delete">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let tariff">
          <button type="button" mat-button color="primary" (click)="test()">Delete</button>
        </td>
      </ng-container>

      ...

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

  test() {
    console.log('test');
  }

If I click on the delete button the test() method isn't called. If I remove the 'mat-button' directive the button suddenly works.

I have other material design buttons on the form so it isn't a module import issue.

What is happening here?

StackBlitz to show the problem: https://stackblitz.com/edit/angular-fgkduw?file=src%2Fapp%2Fapp.component.html

stackblitz.com/edit/…

Sun
– Sun

2019-12-16 13:57:13 +00:00
Commented Dec 16, 2019 at 13:57 — Sun
– Sun, Commented Dec 16, 2019 at 13:57

AleRubis · Accepted Answer · 2019-12-16 14:33:26Z

3

Changing [dataSource] to an array instead of a function solves the problem.

https://stackblitz.com/edit/angular-ezanza?embed=1&file=src/app/app.component.html

It may be a strange behaviour caused by using mat-table in an inappropriate way.

Angular Material Table expects [dataSource] to be an array or, for more complex applications, a DataSource instance.

https://material.angular.io/components/table/overview#1-write-your-mat-table-and-provide-data

edited Dec 16, 2019 at 14:33

answered Dec 16, 2019 at 14:23

AleRubis

2645 silver badges11 bronze badges

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

1 Comment

Sun Over a year ago

Well your answer fixes the issue so thanks. Seems like a bug with Angular Material then. Thanks for you help.

Ilyoskhuja · Accepted Answer · 2019-12-16 13:43:58Z

0

In the mat-table , you can use button like this

                    <button
                        mat-icon-button
                        color="accent"
                        (click)="delete(row.id)"
                      >
                        <mat-icon aria-label="delete" class="md-20"
                            >delete</mat-icon
                        >
                    </button>

answered Dec 16, 2019 at 13:43

Ilyoskhuja

1463 silver badges15 bronze badges

1 Comment

Sun Over a year ago

That is how I have it only using the mat-button directive. I only want text.

Ling Vu · Accepted Answer · 2019-12-16 14:45:53Z

0

I had a similar problem in the past as well. Button inside an *ngFor wasn't working for me like in your example.

The not working example, where the buttons behave similarly to yours:

https://stackblitz.com/edit/angular-form-array-example-hq5tud

This was when it was solved:

https://stackblitz.com/edit/angular-form-array-example-test123-2jzdij

Maybe this will help:

answered Dec 16, 2019 at 14:45

Ling Vu

5,1896 gold badges28 silver badges49 bronze badges

Collectives™ on Stack Overflow

Button within Angular Material Table not working

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related