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.

Missy

Please post what you have done so far – Harken

sorry i don't have any idea on that i should try now – Missy

Answer 1

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.

Harken

Hi thank you it works but i have one more doubt how to add data using angular http crud – Missy

Hi .. any idea if i want the new row at top of table rather than bottom then how to do it? – Kara

@saad sure, just use unshift instead of push – Harken

unshift works ... but it gives index as 1 .. so there are multiple row with index 1.How to dynamically change row number – Kara