Your material is completely updated

Angular - Material Table, is it possible to update rows without completely updating the table?

After a couple of weeks of googling and just a single Stackoverflown question, I was finally able to mine Angular CRUD app With Material table component build up. It shows data from the backend (JSON) and for CRUD operations I use dialogs as shown in the picture (this is an edit, I'm sorry for Croatian). Dialogue may not be the best way to go, inline editing may be better. However, you need a dialog to add a new element.

The last thing I care about is how to update fields in the table accordingly. So if you click "Save" in the dialog box, the data will be updated in the backend (in the MySQL table), but not in the front view. Right now I have an ugly workaround for this. Every time you perform an update, the entire table is also updated.

Anyway, here is the code:

Table component:

Here is DataService where I should be doing field updates:

UPDATE 11/27/2017:

Okay, I finally figured out how to trigger a new line completion. I had to call in the table component. As soon as you load it with some data, a new line will appear immediately.

The same thing doesn't work in DataService:

Plunker is here:

EDIT 11/28/2017:

Now all that's left is the logic to add, edit, and delete. For adding, it's easy, it's just value.Push (data). Many thanks for the help.