Angular 6: HTML table create dynamic columns and rows

Using Angular 6 here

I wanted some inputs regarding designing of one of my UI component. So basically the current functionally we had already designed in AngularJs but in this new app which is using Angular 6 I wanted to know if there are better ways to do so.

Below is the UI flow I am looking to design.

User fills up a form at the top basically some text boxes and dropdowns.

After the above selection I show up a HTML table having 3 static columns and few buttons for ex as below:

ID Type Env +Add Column -Delete Row +Add Row

Above Id, Type and Env are 3 static columns which are always there. Now if the user wants to add more column (dynamic) he can click the Add Column button, where user can enter their own specific name to the column. There should also be functionally of deleting the dynamic columns. Once user is done adding columns he can click on Add Row which would create a dynamic row and user can then enter data to the table. Once user adds the row, user may click on Delete Row button to delete that row.

After user is done adding columns and rows to the table there is a submit button at the end which would send the above in Json format to my API which would then save the entire form.

FYI I already have a working versions of this in angularjs where I am using contenteditable against each row something as below:

<tr ng-repeat="r in targetTable.rows">
 <td class="unique-id"></td>
 <td contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!r.id? addNewRow(r[column.id], r): undefined"></td>
 <td class="blank" colspan="2"></td>
</tr>

See the demo here:

https://codepen.io/anon/pen/QXwjwM

What I need inputs is to how to design this html table with all the functionally of adding/deleting dynamic rows and columns in Angular 6. Is there some open source available or if anyone can help me to some examples. Or if I need to create all this manually. in similar way as I did in AngularJs.

Thanks

Anyone with inputs?

from Angular 6: HTML table create dynamic columns and rows