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.

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.