How can I render mat-table by button I defined?

Question

I have mat-table and select button above mat-table. Once I click select butotn, I am pulling datas from web API and I want data to be viewed in table. But clever!! Angular team does not support this or not documented. Very classical things are not supported in angular-Material components.

Let me ask question:

.html

<button class="btn btn-primary"
            (click)="list()">
          Select
</button>


<mat-table [dataSource]="dataSource1" class="mat-elevation-z8">
......
</mat-table>

.ts

list() {

    dataSource1 = .....

}

How can I provide this ? Table is not rendered after datas are successfully assigned to dataSource1 in list() method. What should I do to rerender

take a look at this: https://stackoverflow.com/questions/55417522/how-to-pass-data-to-material-table-data-source-dynamically — Akber Iqbal, May 27 '19 at 05:26

score 0 · Answer 1 · answered Jun 02 '19 at 14:08

you should use renderRows method of MatTable.

https://material.angular.io/components/table/api#MatTable

.html

<button class="btn btn-primary"
        (click)="list()">
      Select
</button>


<mat-table #myTable [dataSource]="dataSource1" class="mat-elevation-z8">
     ......
</mat-table>

.ts

@ViewChild("myTable") myTable:MatTable;

list() {

    dataSource1 = .....
    myTable.renderRows();

}

score 0 · Answer 2 · answered Jun 02 '19 at 14:49

0

I searched a lot and after searching for 10 hours , I realized that I had applied Angular material 7.x component and after changing the sample for material 5.2.5 , It worked for me

answered Jun 02 '19 at 14:49

ozziem

155
3
12

How can I render mat-table by button I defined?

2 Answers2