Angular 5 dynamically add & delete a component instance

Question

I'm trying to create a table that looks like a spreadsheet with editable inputs inside each td. I'm using Angular's ComponentFactoryResolver as explained here, to add a row to the table when user clicks the add button.

Once the row is added, I use EventEmitter to emit all the data of that row as the last column value is changed.

I've tried to re implement the same functionality on this StackBlitz.

I'm having the following issues:

I'm unable to emit data from the newly added components. (Check Console)
Once I add a new row, the first row (not dynamic) also stops giving me the emitted data.
I'm not sure how to delete a row if user don't needs it as I don't have the reference to it.

How about coming up with another solution than ComponentFactoryResolver? — Rukshan Dangalla
– Rukshan Dangalla, Commented Apr 28, 2018 at 4:06
Can you suggest any? I spent a lot of time to find this solution. If you could suggest a better solution I'd try to implement that. — Subhan
– Subhan, Commented Apr 28, 2018 at 4:08
How about something like this? stackblitz.com/edit/angular-vdyhib — Rukshan Dangalla
– Rukshan Dangalla, Commented Apr 28, 2018 at 4:14

Rukshan Dangalla · Accepted Answer · 2018-04-28 04:22:42Z

4

This is what I am suggesting. You can create a list of row objects in the parent (table) component and use *ngFor to loop it over.

<app-row 
   *ngFor="let row of rowList" 
   [row]="row" 
   (entryUpdate)="onEntryUpdated($event)">
</app-row>

Please have a look at this

answered Apr 28, 2018 at 4:22

Rukshan Dangalla

2,6002 gold badges25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Subhan Over a year ago

Many Thanks, Can you also recommend something regarding deleting a specific row?

Rukshan Dangalla Over a year ago

Stackblitz updated. Please have look and sir if this is the answer you were looking, please mark it as accepted. May be you can come-up with a better solution for removing elements from array.

Subhan Over a year ago

Thank you, I've got a right path to work on. I really appreciate your help.

Rukshan Dangalla Over a year ago

Happy that I could help. :)

Rukshan Dangalla Over a year ago

Here is fixed stackblitz stackblitz.com/edit/angular-rb3im2 What I did was, add attribute selector instead of normal selector. You can read more about this on stackoverflow.com/questions/34588933/…

|

Collectives™ on Stack Overflow

Angular 5 dynamically add & delete a component instance

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related