Angular material table dynamic rows

Question

I am creating a project using angular and material. In my project i want to add customised footer row in material table on click of button and delete that row on click of delete button.

Here is my code:

https://stackblitz.com/edit/angular-dshjiz-beqnrj?file=src/app/table-basic-example.html

Answer 1

You need to push data in datasource

this.dataSource.data.push({id: 1, name: 'test'})

There is stackblitz example

Answer 2

You need to push data as mentioned by Armen. You also need to call renderRows() method of the table as per suggestion https://material.angular.io/components/table/overview#1-write-your-mat-table-and-provide-data

Please check your updated stackblitz example

Same method can be implemented to delete the row. Just make sure the renderRows method calls everytime the table updates.