refresh angular material data table dataSource when button clicked

Question

I want to refresh data-table when click on one button. There are 3 buttons.

Example: stackblitz (not redirecting to customer page)

I am not getting why it's not updating the list in data-table. Data table is generic. So need to pass only data source.

alternatively, you can assign new data to this.tableData so MatDataSource automatically refreshed — Gaurang Dhorda
– Gaurang Dhorda, Commented Nov 22, 2019 at 12:07
@GaurangDhorda I have created stackblitz.com/edit/angular-jxh2rd but it's not redirecting. — Pathik Vejani
– Pathik Vejani, Commented Nov 25, 2019 at 4:43

yurzui · Accepted Answer · 2019-11-25 05:03:26Z

1

If you expect that your custom data-table wrapper should respond to input changes then you need to handle this behavior either in ngOnChanges or using setters:

ngOnChanges(changes: SimpleChanges) {
  if (changes['tableData']) {
    this.dataSource = new MatTableDataSource(this.tableData);
    this.displayedColumns = this.columnHeader.map(c => c.columnDef);
  }
}

Forked Stackblitz

answered Nov 25, 2019 at 5:03

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

9 Comments

yurzui Over a year ago

You should also reassign those properties related to pagination

yurzui Over a year ago

I updated stackblitz stackblitz.com/edit/…

yurzui Over a year ago

Please note I used { static: true } for ViewChild

Pathik Vejani Over a year ago

what happens with { static: true } ?

yurzui Over a year ago

With static true those properties(this.sort, this.paginator) will be available in NgOnChanges otherwise they will be undefined

|

Collectives™ on Stack Overflow

refresh angular material data table dataSource when button clicked

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related