Add a new row into mat-table using angular 4

Question

How to add a new row into Angular Material table manually from a input field.

Please see this image in that if i add a state name and state code it should present in the following table please help me how to achieve it using Angular 4.

Please post what you have done so far – bugs Apr 23 '18 at 14:44 — bugs, Apr 23 '18 at 14:44
sorry i don't have any idea on that i should try now – chethu Apr 24 '18 at 03:47 — chethu, Apr 24 '18 at 03:47

score 12 · Accepted Answer · answered Apr 24 '18 at 07:41

12

I've put together a quick example that should give you a good hint as to where to start from: Working demo

This works by using two-way data binding on the input field to keep track of what the user typed in the form. When the add button is then pressed, the table is updated with a new element dynamically created with the input content.

answered Apr 24 '18 at 07:41

bugs

14,631
5
48
52

Hi thank you it works but i have one more doubt how to add data using angular http crud – chethu Apr 24 '18 at 10:54
Hi .. any idea if i want the new row at top of table rather than bottom then how to do it? – Cpt Kitkat Feb 01 '19 at 06:14
1

@saad sure, just use `unshift` instead of `push` – bugs Feb 01 '19 at 08:03
unshift works ... but it gives index as 1 .. so there are multiple row with index 1.How to dynamically change row number – Cpt Kitkat Feb 01 '19 at 09:15

Add a new row into mat-table using angular 4

1 Answers1

Linked